shafin808s/da-next-agency
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: shafin808s:163020843e4ea4098d7a2f93b47ee9fd4b722a04
Branches Tags
shafin808s:main
...
compare: shafin808s:main
Branches Tags
shafin808s:main

6 Commits
163020843e ... main

Author SHA1 Message Date
shafin-r
3c515f42bd chore(readme): update README 2025-12-08 19:28:01 +06:00
shafin-r
549d929bde fix(resp): fix responsiveness for medium screens 
fix(pad): fix padding for contact page
 2025-12-08 19:25:52 +06:00
shafin-r
518fd17875 fix(resp): fix responsiveness for medium screens 2025-12-08 19:23:50 +06:00
shafin-r
ce071622a6 feat(carousel): add clickable carousel indicators 2025-12-08 18:59:29 +06:00
shafin-r
7ce4a6e4f8 Merge branch 'main' of https://git.omukk.dev/shafin808s/da-next-agency 2025-12-08 18:38:47 +06:00
shafin-r
8dddc3f9a3 fix(resp): fix responsive for large screens 2025-12-08 18:35:02 +06:00
7 changed files with 401 additions and 282 deletions
Expand all files Collapse all files

41
README.md
View File

@ -1,36 +1,27 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started ## Getting Started
First, run the development server: First, install dependencies.
```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```
After that, run the following command:
```bash ```bash
npm run dev npm run dev
# or # or
yarn dev yarn run dev
# or # or
pnpm dev pnpm run dev
# or # or
bun dev bun run dev
``` ```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

426
app/page.tsx
View File

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

139
components/ServiceCarousel.tsx Normal file
View File

@ -0,0 +1,139 @@
"use client";
import { useState } from "react";
import {
Carousel,
CarouselContent,
CarouselItem,
} from "@/components/ui/carousel";
import CurrentSlide from "@/hooks/CurrentSlide";
import Image from "next/image";
export default function CarouselWrapper() {
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>
</>
),
},
];
const [api, setApi] = useState<any>();
return (
<>
<Carousel setApi={setApi} className="w-full h-fit">
<CarouselContent>
{serviceCarousel.map(({ id, content }) => (
<CarouselItem key={id}>{content}</CarouselItem>
))}
</CarouselContent>
</Carousel>
{/* All slide reading logic happens inside this component */}
<CurrentSlide api={api} />
</>
);
}

77
hooks/CurrentSlide.tsx Normal file
View File

@ -0,0 +1,77 @@
"use client";
import { useEffect, useState } from "react";
import type { CarouselApi } from "@/components/ui/carousel";
export default function CurrentSlide({
api,
total = 3,
}: {
api?: CarouselApi;
total?: number;
}) {
const [current, setCurrent] = useState(0);
useEffect(() => {
if (!api) return;
// Set initial slide
setCurrent(api.selectedScrollSnap());
const handler = () => setCurrent(api.selectedScrollSnap());
api.on("select", handler);
return () => api.off("select", handler);
}, [api]);
const handleClick = (index: number) => {
if (!api) return;
api.scrollTo(index); // embla API command to jump to slide
};
return (
<div className="flex items-center justify-center w-full gap-8 py-6">
{Array.from({ length: total }).map((_, i) => {
const isActive = i === current;
return (
<button
key={i}
onClick={() => handleClick(i)}
className="flex flex-col items-center gap-2 cursor-pointer group"
>
{/* Outer ring */}
<div
className={`
relative w-10 h-10 rounded-full border transition-all duration-300
${isActive ? "border-[#C74C65]" : "border-[#C74C65]/40"}
group-hover:border-[#C74C65]
`}
>
{/* Inner dot (only active) */}
{isActive && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3 h-3 rounded-full bg-[#C74C65]" />
</div>
)}
</div>
{/* Slide number */}
<span
className={`
font-lato text-md tracking-widest transition-colors duration-300
${
isActive
? "text-[#C74C65]"
: "text-[#C74C65]/40 group-hover:text-[#C74C65]"
}
`}
>
{String(i + 1).padStart(2, "0")}
</span>
</button>
);
})}
</div>
);
}

BIN
public/images/campaign-strategy.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 199 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/media-production.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/research.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB