chore(readme): update README

fix(pad): fix padding for contact page

README.md

@@ -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
 
-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
 npm run dev
 # or
-yarn dev
+yarn run dev
 # or
-pnpm dev
+pnpm run dev
 # or
-bun dev
+bun run dev
 ```
 
 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.

app/page.tsx

@@ -1,3 +1,4 @@
+import ServiceCarousel from "@/components/ServiceCarousel";
 import {
   Carousel,
   CarouselContent,
@@ -8,100 +9,10 @@ import { ArrowRightIcon, Globe, Mail, Phone } from "lucide-react";
 import Image from "next/image";
 
 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 (
     <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="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">
           <div className="flex gap-4 justify-center items-center">
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
@@ -116,7 +27,7 @@ export default function Home() {
               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
+    bg-clip-text text-transparent md:text-[128px] md:leading-26
   "
             >
               Da Next
@@ -125,7 +36,7 @@ export default function Home() {
               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
+    bg-clip-text text-transparent pb-2 leading-20 md:text-[128px] md:leading-34
   "
             >
               Agency
@@ -133,14 +44,14 @@ export default function Home() {
           </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]">
+          <div className="flex flex-col lg:flex-row lg:gap-2 ">
+            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] md:text-[32px]">
               Shaping Narratives.
             </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.
             </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.
             </h3>
           </div>
@@ -151,39 +62,39 @@ export default function Home() {
         </section>
         {/*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>
             <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="absolute left-6 top-92 md: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="absolute left-6 top-98 md: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="absolute left-6 top-104 md: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="absolute left-6 top-110 md: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 ">
+          <div className="md:flex hidden absolute right-6 top-86 items-center gap-2 ">
             <h5 className="font-lato text-[#7b2e45]">&lt;system&gt; </h5>
           </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>
           </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>
           </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>
           </div>
         </>
@@ -191,16 +102,16 @@ export default function Home() {
           <div className="relative inline-block">
             <button
               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]
       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="md: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 -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 —
               </span>
             </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]" />
           </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">
+        <section className="flex flex-col md:flex-row gap-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="w-2 h-16 bg-[#7B2E45]"></div>
               <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
@@ -226,7 +137,7 @@ export default function Home() {
               </h5>
             </div>
           </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="w-2 h-16 bg-[#7B2E45]"></div>
               <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
@@ -255,8 +166,8 @@ export default function Home() {
         </section>
       </section>
       {/*About*/}
-      <section className="px-10 space-y-8">
-        <div className="aspect-square overflow-hidden">
+      <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">
           <Image
             src={"/images/about.jpg"}
             width={542}
@@ -265,30 +176,32 @@ export default function Home() {
             className="object-cover object-center w-full h-full"
           />
         </div>
-        <section className="space-y-4">
-          <h2 className="font-lato text-xl text-[#7B2E45]">WHO WE ARE</h2>
-          <h2 className="font-lato text-6xl text-white">
+        <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">
+          <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">
+          <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]">
-            We don't just tell stories. We create movements
+          <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 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">
           <Image
             src={"/icons/quotation.png"}
@@ -297,91 +210,80 @@ export default function Home() {
             alt="quotation-mark"
           />
         </div>
-        <p className="font-lato text-2xl text-white text-center">
-          To nurture narratives and shape public perception,{" "}
+        <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 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/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">
           OUR MISSION
         </h4>
       </section>
       {/*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]">
           WHAT WE DO
         </h2>
-        <h2 className="font-lato text-6xl text-white">
+        <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 text-lg">
+        <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">
-          <Carousel className="w-full h-fit ">
-            <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>
+          <ServiceCarousel />
         </section>
       </section>
       {/*Approach*/}
-      <section className="min-h-screen px-10 space-y-4">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
+      <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">
+          <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 text-white">
+          <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 className="space-y-8">
-          <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">
               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">
+            <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 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">
               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">
+            <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 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">
               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">
+            <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>
@@ -391,26 +293,26 @@ export default function Home() {
         </section>
       </section>
       {/*Media Production*/}
-      <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
+      <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">
           MEDIA PRODUCTION
         </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{" "}
           <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 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
           narratives that captivate audiences and drive results.
         </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>
       {/*Insights */}
-      <section className="min-h-screen px-10 space-y-8">
-        <div className="aspect-square overflow-hidden">
+      <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">
           <Image
             src={"/images/data-driven-insights.jpg"}
             width={542}
@@ -419,18 +321,18 @@ export default function Home() {
             className="object-cover object-center w-full h-full"
           />
         </div>
-        <section className="space-y-6">
-          <h2 className="font-lato text-xl text-[#7B2E45]">
+        <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 text-white">
+          <h2 className="font-lato text-6xl lg:text-7xl text-white">
             Data-Driven <span className="text-[#7B2E45]">Insights</span>
           </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
             strategy, measure impact, and optimize campaigns in real-time.
           </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">
               <h2 className="font-lato text-[#7B2E45] text-4xl">10K+</h2>
               <p className="font-lato text-white/70 text-lg">
@@ -445,18 +347,20 @@ export default function Home() {
         </section>
       </section>
       {/*Results*/}
-      <section className="min-h-screen px-10 py-20 space-y-4">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
+      <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 text-white">
+          <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 className="space-y-8">
-          <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">
               <h2 className="font-lato text-2xl text-white">
                 Honorable MP Rahman
@@ -468,13 +372,13 @@ export default function Home() {
                 Won by 45% margin
               </h2>
             </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]">
                 "Da Next Agency transformed my campaign narrative and connected
                 me authentically with voters."
               </p>
             </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">
                 <h2 className="font-lato text-[#7B2E45] text-2xl">+180%</h2>
                 <p className="font-lato text-white/70 text-md">Engagement</p>
@@ -485,7 +389,7 @@ export default function Home() {
               </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">
               <h2 className="font-lato text-2xl text-white">
                 TechCorp Bangladesh
@@ -497,13 +401,13 @@ export default function Home() {
                 Brand recognition +300%
               </h2>
             </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]">
                 "Their strategic approach to PR helped us become a household
                 name in just six months."
               </p>
             </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">
                 <h2 className="font-lato text-[#7B2E45] text-2xl">+220%</h2>
                 <p className="font-lato text-white/70 text-md">Engagement</p>
@@ -514,7 +418,7 @@ export default function Home() {
               </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">
               <h2 className="font-lato text-2xl text-white">
                 Green Future Initiative
@@ -526,13 +430,13 @@ export default function Home() {
                 Policy change achieved
               </h2>
             </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]">
                 "The campaign they crafted mobilized thousands and influenced
                 national environmental policy."
               </p>
             </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">
                 <h2 className="font-lato text-[#7B2E45] text-2xl">+350%</h2>
                 <p className="font-lato text-white/70 text-md">Engagement</p>
@@ -546,125 +450,133 @@ export default function Home() {
         </section>
       </section>
       {/*Impact Metrics*/}
-      <section className="py-20 min-h-screen px-10 space-y-4">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-wider">
+      <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">
+          <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 text-white">
+          <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 className="space-y-8">
-          <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>
 
             <h5 className="font-lato text-[#D8DFE4] text-lg">
               Public Engagement
             </h5>
 
-            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
-              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
+            <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="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>
 
             <h5 className="font-lato text-[#D8DFE4] text-lg">
               Positive Sentiment
             </h5>
 
-            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
-              <div className="w-2/3 bg-[#7B2E45] py-2 rounded-full"></div>
+            <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="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>
 
             <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-11/12 bg-[#7B2E45] py-2 rounded-full"></div>
+            <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="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>
 
             <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-3/5 bg-[#7B2E45] py-2 rounded-full"></div>
+            <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 flex flex-col items-center justify-center space-y-8">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
+      <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">
+          <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 text-white text-center">
-          We nurture narratives where they{" "}
+          <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 gap-4 w-full text-center">
-          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+        <section className="grid grid-cols-2 lg:grid-cols-6 gap-4  text-center">
+          <h5 className="py-4 px-6 font-lato text-xl 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">
+          <h5 className="py-4 px-6 font-lato text-xl 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">
+          <h5 className="py-4 px-6 font-lato text-xl 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">
+          <h5 className="py-4 px-6 font-lato text-xl 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">
+          <h5 className="py-4 px-6 font-lato text-xl 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">
+          <h5 className="py-4 px-6 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
             Tiktok
           </h5>
         </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>
       {/*Contact*/}
-      <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
-        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
+      <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">
+          <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 text-white text-center">
+          <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>
-        <p className="font-lato text-2xl text-white/80 text-center">
+        </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 space-y-6">
-          <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">
+        <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-full">
+            <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-full">
+            <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="w-full
+            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]
@@ -675,7 +587,7 @@ export default function Home() {
             </span>
           </button>
         </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>
     </main>
   );

components/ServiceCarousel.tsx

@@ -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} />
+    </>
+  );
+}

hooks/CurrentSlide.tsx

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