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

Compare commits

base: shafin808s:7ce4a6e4f88fd3a5f8c3dbcc5941c7fe09314e7a
Branches Tags
shafin808s:main
...
compare: shafin808s:main
Branches Tags
shafin808s:main

4 Commits
7ce4a6e4f8 ... 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
4 changed files with 275 additions and 184 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.

202
app/page.tsx
View File

@ -1,3 +1,4 @@
import ServiceCarousel from "@/components/ServiceCarousel";
import { import {
Carousel, Carousel,
CarouselContent, CarouselContent,
@ -8,121 +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="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 ( 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" />
@ -137,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
@ -146,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
@ -154,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>
@ -172,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>
</> </>
@ -212,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>
@ -233,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>
@ -247,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>
@ -276,7 +166,7 @@ export default function Home() {
</section> </section>
</section> </section>
{/*About*/} {/*About*/}
<section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4"> <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 rounded-2xl lg:w-1/2"> <div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
<Image <Image
src={"/images/about.jpg"} src={"/images/about.jpg"}
@ -311,7 +201,7 @@ export default function Home() {
</section> </section>
</section> </section>
{/*Our Mission*/} {/*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"> <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"}
@ -320,7 +210,7 @@ export default function Home() {
alt="quotation-mark" alt="quotation-mark"
/> />
</div> </div>
<p className="font-lato text-2xl lg:leading-15 lg:text-5xl text-white text-center"> <p className="font-lato text-2xl md:leading-15 md:text-5xl text-white text-center">
<span>To nurture narratives and shape public perception, </span> <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
@ -347,17 +237,11 @@ export default function Home() {
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>
</section> </section>
</section> </section>
{/*Approach*/} {/*Approach*/}
<section className="min-h-screen px-10 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly"> <section className="min-h-screen px-10 md:pt-20 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
<section className="lg:space-y-10"> <section className="lg:space-y-10">
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]"> <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
OUR APPROACH OUR APPROACH
@ -409,7 +293,7 @@ export default function Home() {
</section> </section>
</section> </section>
{/*Media Production*/} {/*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 "> <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.3em] text-center"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.3em] text-center">
MEDIA PRODUCTION MEDIA PRODUCTION
</h2> </h2>
@ -427,7 +311,7 @@ export default function Home() {
<hr className="bg-[#7B2E45]/20 border-0 h-0.5 lg:w-1/8 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="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4"> <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 rounded-2xl lg:w-1/2"> <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"}
@ -448,7 +332,7 @@ export default function Home() {
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="flex flex-col lg:flex-row lg:justify-between gap-6"> <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">
@ -534,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
@ -566,7 +450,7 @@ export default function Home() {
</section> </section>
</section> </section>
{/*Impact Metrics*/} {/*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="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">
<section className="lg:space-y-10"> <section className="lg:space-y-10">
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]"> <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
IMPACT METRICS IMPACT METRICS
@ -578,7 +462,7 @@ export default function Home() {
</span> </span>
</h2> </h2>
</section> </section>
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10"> <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 "> <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>
@ -622,7 +506,7 @@ export default function Home() {
</section> </section>
</section> </section>
{/*Socials*/} {/*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="min-h-screen px-10 pt-20 md:pt-0 flex flex-col items-center justify-center space-y-10">
<section className="lg: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]"> <h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] text-center tracking-[0.3em]">
THE CONNECTED WORLD THE CONNECTED WORLD
@ -639,29 +523,29 @@ export default function Home() {
across the entire social ecosystem. across the entire social ecosystem.
</p> </p>
<section className="grid grid-cols-2 lg:grid-cols-6 gap-4 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/6" /> <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
</section> </section>
{/*Contact*/} {/*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="min-h-screen px-10 flex flex-col items-center justify-center space-y-8 lg:space-y-20">
<section className="lg:space-y-10"> <section className="lg:space-y-10">
<h2 className="font-lato text-xl lg:text-md text-[#7B2E45] tracking-[0.3em] text-center"> <h2 className="font-lato text-xl lg:text-md text-[#7B2E45] tracking-[0.3em] text-center">
LET'S CONNECT LET'S CONNECT

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>
);
}