706 lines
32 KiB
TypeScript
706 lines
32 KiB
TypeScript
import ServiceCarousel from "@/components/ServiceCarousel";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { ArrowRightIcon, Globe, Mail, Phone } from "lucide-react";
|
|
|
|
import Image from "next/image";
|
|
|
|
export default function Home() {
|
|
const serviceCarousel = [
|
|
{
|
|
id: 0,
|
|
content: (
|
|
<>
|
|
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
|
<div className="lg:w-1/2">
|
|
<Image
|
|
src={"/images/campaign-strategy.png"}
|
|
width={2464}
|
|
height={1672}
|
|
alt="campaign-strategy"
|
|
/>
|
|
</div>
|
|
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
|
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
|
01
|
|
</p>
|
|
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
|
Campaign Strategy
|
|
</h2>
|
|
<p className="text-lg lg:text-2xl font-lato text-white/60">
|
|
Comprehensive planning from research to execution, crafted to
|
|
win hearts and minds.
|
|
</p>
|
|
<div className="flex gap-4 w-full">
|
|
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
|
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
|
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
|
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
|
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: 1,
|
|
content: (
|
|
<>
|
|
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
|
<div className="lg:w-1/2">
|
|
<Image
|
|
src={"/images/media-production.png"}
|
|
width={2464}
|
|
height={1672}
|
|
alt="media-production"
|
|
/>
|
|
</div>
|
|
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
|
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
|
02
|
|
</p>
|
|
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
|
Media Production
|
|
</h2>
|
|
<p className="text-lg font-lato text-white/60">
|
|
Cinematic storytelling through video, photography, and
|
|
multimedia content that captivates.
|
|
</p>
|
|
<div className="flex gap-4 w-full">
|
|
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
|
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
|
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
|
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
|
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: 2,
|
|
content: (
|
|
<>
|
|
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
|
<div className="lg:w-1/2">
|
|
<Image
|
|
src={"/images/research.png"}
|
|
width={2464}
|
|
height={1672}
|
|
alt="research"
|
|
/>
|
|
</div>
|
|
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
|
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
|
03
|
|
</p>
|
|
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
|
Research & Analytics
|
|
</h2>
|
|
<p className="text-lg font-lato text-white/60">
|
|
Data-driven insights that inform every decision and optimize
|
|
every outcome
|
|
</p>
|
|
<div className="flex gap-4 w-full">
|
|
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
|
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
|
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
|
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
|
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<main className="bg-radial-[at_50%_50%] from-[#31131b] to-[#0D0F11] ">
|
|
{/*Hero */}
|
|
<section className="relative min-h-screen space-y-12 lg:space-y-20 flex flex-col items-center lg:justify-center pt-14 lg:pt-0">
|
|
<section className="flex flex-col space-y-4">
|
|
<div className="flex gap-4 justify-center items-center">
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
|
|
<div className="flex gap-2">
|
|
<div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
|
|
<div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div>
|
|
</div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
|
|
</div>
|
|
<div>
|
|
<h1
|
|
className="
|
|
font-inter text-[80px] leading-20 font-black tracking-tight
|
|
bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)]
|
|
bg-clip-text text-transparent lg:text-[128px] lg:leading-26
|
|
"
|
|
>
|
|
Da Next
|
|
</h1>
|
|
<h1
|
|
className="
|
|
font-inter text-[80px] font-black tracking-tight
|
|
bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)]
|
|
bg-clip-text text-transparent pb-2 leading-20 lg:text-[128px] lg:leading-34
|
|
"
|
|
>
|
|
Agency
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col items-center h-fit space-y-6">
|
|
<div className="flex flex-col lg:md:flex-row lg:md:gap-2 ">
|
|
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
|
|
Shaping Narratives.
|
|
</h3>
|
|
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
|
|
Building Leaders.
|
|
</h3>
|
|
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
|
|
Winning Campaigns.
|
|
</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-32" />
|
|
</div>
|
|
</section>
|
|
{/*left decoration*/}
|
|
<>
|
|
<div className="lg:flex hidden absolute left-6 top-86 items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-20" />
|
|
</div>
|
|
<div className="absolute left-6 top-92 lg:flex hidden items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-16" />
|
|
</div>
|
|
<div className="absolute left-6 top-98 lg:flex hidden items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-12" />
|
|
</div>
|
|
<div className="absolute left-6 top-104 lg:flex hidden items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-8" />
|
|
</div>
|
|
<div className="absolute left-6 top-110 lg:flex hidden items-center gap-2 ">
|
|
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
|
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-4" />
|
|
</div>
|
|
</>
|
|
{/*right decoration*/}
|
|
<>
|
|
<div className="lg:flex hidden absolute right-6 top-86 items-center gap-2 ">
|
|
<h5 className="font-lato text-[#7b2e45]"><system> </h5>
|
|
</div>
|
|
<div className="absolute right-6 top-92 lg:flex hidden items-center gap-2 ">
|
|
<h5 className="font-lato text-[#7b2e45]/50">status:active</h5>
|
|
</div>
|
|
<div className="absolute right-6 top-98 lg:flex hidden items-center gap-2 ">
|
|
<h5 className="font-lato text-[#7b2e45]/50">mode:strategic </h5>
|
|
</div>
|
|
<div className="absolute right-6 top-104 lg:flex hidden items-center gap-2 ">
|
|
<h5 className="font-lato text-[#7b2e45]"></system> </h5>
|
|
</div>
|
|
</>
|
|
<section className="">
|
|
<div className="relative inline-block">
|
|
<button
|
|
className="
|
|
relative px-8 py-3 lg:px-20 lg:py-5 rounded-xl
|
|
bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
|
|
hover:from-[#913651] hover:to-[#b34762]
|
|
"
|
|
>
|
|
{/* diamonds */}
|
|
<span className="lg:block hidden absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
|
|
<span className="lg:block hidden absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
|
|
|
|
<span className="text-white font-medium font-lato text-xl">
|
|
Start Your Campaign —
|
|
</span>
|
|
</button>
|
|
|
|
{/* corner borders OUTSIDE the clipped button */}
|
|
<span className="absolute -left-4 -top-4 w-6 h-6 border-t-2 border-l-2 border-[#7B2E45]" />
|
|
<span className="absolute -right-4 -top-4 w-6 h-6 border-t-2 border-r-2 border-[#7B2E45]" />
|
|
<span className="absolute -left-4 -bottom-4 w-6 h-6 border-b-2 border-l-2 border-[#7B2E45]" />
|
|
<span className="absolute -right-4 -bottom-4 w-6 h-6 border-b-2 border-r-2 border-[#7B2E45]" />
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col lg:md:flex-row gap-10">
|
|
<section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
|
|
<div className="flex gap-1 px-2">
|
|
<div className="w-2 h-16 bg-[#7B2E45]"></div>
|
|
<div className="w-2 h-12 bg-[#7B2E45]/50"></div>
|
|
<div className="w-2 h-8 bg-[#7B2E45]/30"></div>
|
|
</div>
|
|
<div className="flex flex-col ">
|
|
<h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
|
|
<h5 className="text-xl font-lato font-light text-white/50">
|
|
CAMPAIGNS
|
|
</h5>
|
|
</div>
|
|
</section>
|
|
<section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
|
|
<div className="flex gap-1 px-2">
|
|
<div className="w-2 h-16 bg-[#7B2E45]"></div>
|
|
<div className="w-2 h-12 bg-[#7B2E45]/50"></div>
|
|
<div className="w-2 h-8 bg-[#7B2E45]/30"></div>
|
|
</div>
|
|
<div className="flex flex-col ">
|
|
<h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
|
|
<h5 className="text-xl font-lato font-light text-white/50">
|
|
SUCCESS RATE
|
|
</h5>
|
|
</div>
|
|
</section>
|
|
<section className="flex items-center gap-4">
|
|
<div className="flex gap-1 px-2">
|
|
<div className="w-2 h-16 bg-[#7B2E45]"></div>
|
|
<div className="w-2 h-12 bg-[#7B2E45]/50"></div>
|
|
<div className="w-2 h-8 bg-[#7B2E45]/30"></div>
|
|
</div>
|
|
<div className="flex flex-col ">
|
|
<h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
|
|
<h5 className="text-xl font-lato font-light text-white/50">
|
|
YEARS
|
|
</h5>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
{/*About*/}
|
|
<section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
|
|
<div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
|
|
<Image
|
|
src={"/images/about.jpg"}
|
|
width={542}
|
|
height={500}
|
|
alt="about"
|
|
className="object-cover object-center w-full h-full"
|
|
/>
|
|
</div>
|
|
<section className="space-y-4 lg:w-1/2 lg:space-y-8">
|
|
<h2 className="font-lato text-xl lg:text-2xl text-[#7B2E45]">
|
|
WHO WE ARE
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-8xl text-white">
|
|
Architects <br /> of{" "}
|
|
<span className="text-[#7B2E45]">Influence</span>
|
|
</h2>
|
|
<p className="font-lato text-white text-xl lg:text-2xl">
|
|
Da Next Agency is a premier public relations and strategic
|
|
communications firm based in Bangladesh. We specialize in crafting
|
|
compelling narratives, managing reputations, and driving impactful
|
|
campaigns for leaders, organizations, and brands.
|
|
</p>
|
|
<p className="font-lato text-white text-xl lg:text-2xl">
|
|
From political campaigns to corporate reputation management, we
|
|
offer a full spectrum of services designed to elevate your public
|
|
image and achieve your strategic objectives.
|
|
</p>
|
|
<span className="font-lato text-xl text-[#7B2E45] lg:text-2xl">
|
|
We don't just tell stories. We create movements.
|
|
</span>
|
|
</section>
|
|
</section>
|
|
{/*Our Mission*/}
|
|
<section className="min-h-screen px-5 lg:px-87 flex flex-col items-center justify-center space-y-6 lg:space-y-12">
|
|
<div className="aspect-square overflow-hidden w-.20 h-20">
|
|
<Image
|
|
src={"/icons/quotation.png"}
|
|
width={384}
|
|
height={384}
|
|
alt="quotation-mark"
|
|
/>
|
|
</div>
|
|
<p className="font-lato text-2xl lg:leading-15 lg:text-5xl text-white text-center">
|
|
<span>To nurture narratives and shape public perception, </span>
|
|
<span className="text-[#7B2E45]">
|
|
creating a lasting positive image
|
|
</span>{" "}
|
|
in the community
|
|
</p>
|
|
<hr className="bg-[#7B2E45]/50 border-0 h-0.5 w-1/5" />
|
|
<h4 className="font-lato text-lg font-normal text-white/60 tracking-wider">
|
|
OUR MISSION
|
|
</h4>
|
|
</section>
|
|
{/*Services*/}
|
|
<section className="min-h-screen px-10 lg:px-32 space-y-4">
|
|
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
|
|
WHAT WE DO
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white tracking-tighter">
|
|
Services That{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Transform
|
|
</span>
|
|
</h2>
|
|
<h5 className="font-lato text-white/50 lg:text-[20px] text-lg">
|
|
Strategic excellence across every dimension of modern PR
|
|
</h5>
|
|
<section className="flex flex-col items-start space-y-7">
|
|
<ServiceCarousel />
|
|
</section>
|
|
</section>
|
|
{/*Approach*/}
|
|
<section className="min-h-screen px-10 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
|
<section className="lg:space-y-10">
|
|
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
|
|
OUR APPROACH
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
|
Strategic{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Content
|
|
</span>
|
|
</h2>
|
|
</section>
|
|
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
|
<div className="bg-black p-8 lg:pb-14 space-y-3 rounded-2xl lg:w-1/3">
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
PROTECT YOUR REPUTATION
|
|
</h2>
|
|
<h2 className="font-lato text-2xl text-white">Crisis Management</h2>
|
|
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
|
<li>24/7 Response Team</li>
|
|
<li>Media Relations</li>
|
|
<li>Damage Control</li>
|
|
<li>Recovery Strategy</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-black p-8 lg:pb-14 space-y-2 rounded-2xl lg:w-1/3">
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
DEFINE YOUR IDENTITY
|
|
</h2>
|
|
<h2 className="font-lato text-2xl text-white">Brand Positioning</h2>
|
|
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
|
<li>Market Research</li>
|
|
<li>Competitive Analysis</li>
|
|
<li>Messaging Framework</li>
|
|
<li>Brand Guidelines</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-black p-8 lg:pb-14 space-y-2 rounded-2xl lg:w-1/3">
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
ENGAGE YOUR AUDIENCE
|
|
</h2>
|
|
<h2 className="font-lato text-2xl text-white">Digital Campaigns</h2>
|
|
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
|
<li>Social Media Strategy</li>
|
|
<li>Content Calendar</li>
|
|
<li>Influencer Partnerships</li>
|
|
<li>Performance Analystics</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
{/*Media Production*/}
|
|
<section className="max-h-fit px-10 py-40 lg:pb-40 lg:pt-0 flex flex-col items-center justify-center space-y-8 ">
|
|
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.3em] text-center">
|
|
MEDIA PRODUCTION
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center">
|
|
Visual{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Storytelling{" "}
|
|
</span>
|
|
That Moves
|
|
</h2>
|
|
<p className="font-lato text-2xl lg:text-[20px] text-white/80 text-center lg:w-1/3">
|
|
From campaign ads to documentary-style content, we produce visual
|
|
narratives that captivate audiences and drive results.
|
|
</p>
|
|
<hr className="bg-[#7B2E45]/20 border-0 h-0.5 lg:w-1/8 w-1/2" />
|
|
</section>
|
|
{/*Insights */}
|
|
<section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
|
|
<div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
|
|
<Image
|
|
src={"/images/data-driven-insights.jpg"}
|
|
width={542}
|
|
height={500}
|
|
alt="about"
|
|
className="object-cover object-center w-full h-full"
|
|
/>
|
|
</div>
|
|
<section className="space-y-4 lg:w-1/2 lg:space-y-8">
|
|
<h2 className="font-lato text-xl lg:text-2xl text-[#7B2E45]">
|
|
INTELLIGENCE DRIVEN
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
|
Data-Driven <span className="text-[#7B2E45]">Insights</span>
|
|
</h2>
|
|
<p className="font-lato text-white text-xl lg:text-2xl">
|
|
We leverage advanced research methodologies and analytics to inform
|
|
strategy, measure impact, and optimize campaigns in real-time.
|
|
</p>
|
|
<div className="flex flex-col lg:flex-row lg:justify-between gap-6">
|
|
<div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-4xl">10K+</h2>
|
|
<p className="font-lato text-white/70 text-lg">
|
|
Survey Responses
|
|
</p>
|
|
</div>
|
|
<div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-4xl">95%</h2>
|
|
<p className="font-lato text-white/70 text-lg">Data Accuracy</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
{/*Results*/}
|
|
<section className="min-h-screen px-10 pt-20 lg:pt-0 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
|
<section className="lg:space-y-10">
|
|
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em] ">
|
|
PROVEN RESULTS
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white ">
|
|
Success{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Stories
|
|
</span>
|
|
</h2>
|
|
</section>
|
|
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
|
<div className="bg-black p-8 space-y-4 rounded-2xl">
|
|
<div className="space-y-2">
|
|
<h2 className="font-lato text-2xl text-white">
|
|
Honorable MP Rahman
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
Parliamentary Candidate
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
|
|
Won by 45% margin
|
|
</h2>
|
|
</div>
|
|
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-4">
|
|
<p className="font-lato text-lg text-[#D8DFE4E5]">
|
|
"Da Next Agency transformed my campaign narrative and connected
|
|
me authentically with voters."
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">+180%</h2>
|
|
<p className="font-lato text-white/70 text-md">Engagement</p>
|
|
</div>
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">2.5M</h2>
|
|
<p className="font-lato text-white/70 text-md">Reach</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-black p-8 space-y-4 rounded-2xl">
|
|
<div className="space-y-2">
|
|
<h2 className="font-lato text-2xl text-white">
|
|
TechCorp Bangladesh
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
Technology Company
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
|
|
Brand recognition +300%
|
|
</h2>
|
|
</div>
|
|
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-4">
|
|
<p className="font-lato text-lg text-[#D8DFE4E5]">
|
|
"Their strategic approach to PR helped us become a household
|
|
name in just six months."
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">+220%</h2>
|
|
<p className="font-lato text-white/70 text-md">Engagement</p>
|
|
</div>
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">5.M</h2>
|
|
<p className="font-lato text-white/70 text-md">Reach</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-black p-8 space-y-4">
|
|
<div className="space-y-2">
|
|
<h2 className="font-lato text-2xl text-white">
|
|
Green Future Initiative
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
|
Environmental NGO
|
|
</h2>
|
|
<h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
|
|
Policy change achieved
|
|
</h2>
|
|
</div>
|
|
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-4">
|
|
<p className="font-lato text-lg text-[#D8DFE4E5]">
|
|
"The campaign they crafted mobilized thousands and influenced
|
|
national environmental policy."
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">+350%</h2>
|
|
<p className="font-lato text-white/70 text-md">Engagement</p>
|
|
</div>
|
|
<div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
|
|
<h2 className="font-lato text-[#7B2E45] text-2xl">8.1M</h2>
|
|
<p className="font-lato text-white/70 text-md">Reach</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
{/*Impact Metrics*/}
|
|
<section className="min-h-screen px-10 pt-20 lg:pt-0 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
|
<section className="lg:space-y-10">
|
|
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
|
|
IMPACT METRICS
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
|
Measurable{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Results
|
|
</span>
|
|
</h2>
|
|
</section>
|
|
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
|
<div className="lg:py-10 px-10 py-14 lg:w-full bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl shadow-xl flex flex-col items-center space-y-5 ">
|
|
<h2 className="font-lato text-7xl text-[#7B2E45]">85%</h2>
|
|
|
|
<h5 className="font-lato text-[#D8DFE4] text-lg">
|
|
Public Engagement
|
|
</h5>
|
|
|
|
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
|
<div className="w-5/6 bg-[#7B2E45] py-1.5 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className="lg:py-10 px-10 py-14 lg:w-full bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl shadow-xl flex flex-col items-center space-y-5">
|
|
<h2 className="font-lato text-7xl text-[#7B2E45]">70%</h2>
|
|
|
|
<h5 className="font-lato text-[#D8DFE4] text-lg">
|
|
Positive Sentiment
|
|
</h5>
|
|
|
|
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
|
<div className="w-2/3 bg-[#7B2E45] py-1.5 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className=" lg:py-10 px-10 py-14 lg:w-full bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl shadow-xl flex flex-col items-center space-y-5">
|
|
<h2 className="font-lato text-7xl text-[#7B2E45]">90%</h2>
|
|
|
|
<h5 className="font-lato text-[#D8DFE4] text-lg">Media Reach</h5>
|
|
|
|
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
|
<div className="w-11/12 bg-[#7B2E45] py-1.5 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div className=" lg:py-10 px-10 py-14 lg:w-full bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl shadow-xl flex flex-col items-center space-y-5">
|
|
<h2 className="font-lato text-7xl text-[#7B2E45]">60%</h2>
|
|
|
|
<h5 className="font-lato text-[#D8DFE4] text-lg">Brand Recall</h5>
|
|
|
|
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
|
<div className="w-3/5 bg-[#7B2E45] py-1.5 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
{/*Socials*/}
|
|
<section className="min-h-screen px-10 pt-20 lg:pt-0 flex flex-col items-center justify-center space-y-10">
|
|
<section className="lg:space-y-10">
|
|
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] text-center tracking-[0.3em]">
|
|
THE CONNECTED WORLD
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center lg:leading-26">
|
|
We nurture narratives where they <br />
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
matter most{" "}
|
|
</span>
|
|
</h2>
|
|
</section>
|
|
<p className="font-lato text-2xl text-white/80 text-center">
|
|
From traditional media to emerging platforms, we manage your presence
|
|
across the entire social ecosystem.
|
|
</p>
|
|
<section className="grid grid-cols-2 lg:grid-cols-6 gap-4 text-center">
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
Facebook
|
|
</h5>
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
Twitter
|
|
</h5>
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
Instagram
|
|
</h5>
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
LinkedIn
|
|
</h5>
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
Youtube
|
|
</h5>
|
|
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
|
Tiktok
|
|
</h5>
|
|
</section>
|
|
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
|
|
</section>
|
|
{/*Contact*/}
|
|
<section className="min-h-screen px-10 pt-20 lg:pt-0 flex flex-col items-center justify-center space-y-8 lg:space-y-20">
|
|
<section className="lg:space-y-10">
|
|
<h2 className="font-lato text-xl lg:text-md text-[#7B2E45] tracking-[0.3em] text-center">
|
|
LET'S CONNECT
|
|
</h2>
|
|
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center lg:leading-26">
|
|
Ready to{" "}
|
|
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
|
Win?{" "}
|
|
</span>
|
|
</h2>
|
|
</section>
|
|
<p className="font-lato text-2xl text-white/80 text-center lg:w-1/2">
|
|
Whether you're running a political campaign, launching a brand, or
|
|
managing a crisis, Da Next Agency is your strategic partner for
|
|
success.
|
|
</p>
|
|
<section className="w-full lg:w-fit space-y-6 lg:gap-10 lg:flex lg:flex-col lg:items-center">
|
|
<div className="flex flex-col lg:flex-row justify-evenly gap-6 lg:items-center">
|
|
<h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-2xl">
|
|
<Mail size={24} color="#7B2E45" />{" "}
|
|
<span>contact@danextagency.com</span>
|
|
</h5>
|
|
<h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-2xl">
|
|
<Phone size={24} color="#7B2E45" /> <span>+880 123 456 7890</span>
|
|
</h5>
|
|
<h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-2xl">
|
|
<Globe size={24} color="#7B2E45" /> <span>danextagency.com</span>
|
|
</h5>
|
|
</div>
|
|
<button
|
|
className="lg:w-fit w-full
|
|
px-8 py-4 rounded-xl
|
|
bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
|
|
hover:from-[#913651] hover:to-[#b34762]
|
|
"
|
|
>
|
|
<span className="text-white font-medium font-lato text-xl flex items-center justify-center gap-2">
|
|
Let's Work Together <ArrowRightIcon size={20} color="white" />
|
|
</span>
|
|
</button>
|
|
</section>
|
|
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|