From 230be118990ff080aae25bf80dd865b56e1bede3 Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Tue, 23 Jun 2026 19:50:35 +0530
Subject: [PATCH] update layout

---
 src/app/contact/page.tsx                   | 164 ++++---
 src/app/globals.css                        |  32 +-
 src/app/page.tsx                           |  35 +-
 src/components/contact/ContactForm.tsx     |  12 +-
 src/components/home/AppPromo.tsx           | 164 -------
 src/components/home/BusinessSection.tsx    |  49 +--
 src/components/home/Hero.tsx               |   2 +-
 src/components/home/HowItWorks.tsx         |  64 ++-
 src/components/home/HyperlocalFeatures.tsx |  82 ++--
 src/components/home/ServiceCategories.tsx  |  17 +-
 src/components/home/StoreQRSection.tsx     | 291 ++++++++++---
 src/components/home/WhyNearle.tsx          |  22 +-
 src/components/layout/Footer.tsx           | 476 +++++++++++----------
 src/components/layout/Navbar.tsx           | 162 ++++---
 14 files changed, 841 insertions(+), 731 deletions(-)
 delete mode 100644 src/components/home/AppPromo.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 65964dc..33e9581 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -11,41 +11,82 @@ export const metadata: Metadata = {
 
 export default function ContactPage() {
   return (
-    <div className="relative min-h-screen bg-background">
-      {/* ─── Breadcrumbs & Hero Page Header ─── */}
-      <section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
-        {/* Background Image with Overlay */}
-        <div className="hero-background select-none pointer-events-none">
-          <Image
-            src="/contect.png"
-            alt="Contact Nearle Background"
-            fill
-            sizes="100vw"
-            className="object-cover object-right"
-            priority
-          />
-        </div>
+    <div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
+      
+      {/* ─── Redesigned Hero/Contact Section ─── */}
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
+          {/* Subtle decorative blurred purple glow behind left content */}
+          <div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
+          
+          <div className="w-full mx-auto relative z-10">
+            <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
+              
+              {/* Left Column — MUST BE VISIBLE */}
+              <div className="relative z-10 text-white max-w-[580px]">
+                <span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
+                  LET’S CONNECT
+                </span>
+                <h1 className="mt-4 font-display text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] text-white">
+                  Let’s Build Better Neighbourhoods Together.
+                </h1>
+                <p className="text-white/70 text-lg leading-relaxed mt-6">
+                  Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
+                </p>
 
-        <div className="hero-content relative z-10 mx-auto max-w-container-max">
-          {/* Header Title */}
-          <p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent">
-            Get in touch
-          </p>
-          <h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight">
-            Talk to the Nearle Team
-          </h1>
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we&apos;ll help you.
-          </p>
-        </div>
-      </section>
+                {/* Info Rows */}
+                <div className="mt-10 border-t border-white/10">
+                  {/* Row 1 */}
+                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
+                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
+                      <MaterialIcon icon="location_on" size={20} />
+                    </div>
+                    <div className="text-left">
+                      <h4 className="text-white font-bold">Based in Coimbatore</h4>
+                      <p className="text-white/60 text-sm mt-0.5">Building neighbourhood commerce, one local store at a time.</p>
+                    </div>
+                  </div>
+
+                  {/* Row 2 */}
+                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
+                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
+                      <MaterialIcon icon="schedule" size={20} />
+                    </div>
+                    <div className="text-left">
+                      <h4 className="text-white font-bold">Talk to Our Team</h4>
+                      <p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
+                    </div>
+                  </div>
+
+                  {/* Row 3 */}
+                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
+                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
+                      <MaterialIcon icon="support_agent" size={20} />
+                    </div>
+                    <div className="text-left">
+                      <h4 className="text-white font-bold">Quick Support</h4>
+                      <p className="text-white/60 text-sm mt-0.5">Share your details and our team will get back to you.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Right Column: Form Card */}
+              <div className="w-full max-w-[520px] lg:ml-auto relative z-10">
+                <ContactForm />
+              </div>
+
+            </div>
+          </div>
+        </section>
+      </div>
 
       {/* ─── Four Contact Info Cards ─── */}
-      <section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
           
           {/* Card 1: Location */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
             <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
               <MaterialIcon icon="location_on" size={28} className="text-primary" />
             </div>
@@ -67,7 +108,7 @@ export default function ContactPage() {
           </div>
 
           {/* Card 2: Phones */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
             <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
               <MaterialIcon icon="call" size={28} className="text-secondary" />
             </div>
@@ -88,7 +129,7 @@ export default function ContactPage() {
           </div>
 
           {/* Card 3: Email */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
             <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
               <MaterialIcon icon="mail" size={28} className="text-primary" />
             </div>
@@ -107,7 +148,7 @@ export default function ContactPage() {
           </div>
 
           {/* Card 4: Working Hours */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+          <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
             <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
               <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
             </div>
@@ -126,44 +167,37 @@ export default function ContactPage() {
           </div>
 
         </div>
-      </section>
+      </div>
 
-      {/* ─── Map & Form Section ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
-          
-          {/* Left: Google Map (5 Cols) */}
-          <div className="lg:col-span-5 w-full">
-            <div className="relative bg-white rounded-3xl overflow-hidden shadow-xl border border-outline-variant/20 group h-[450px]">
-              <iframe
-                title="Nearle Coimbatore Location Map"
-                src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
-                width="100%"
-                height="100%"
-                style={{ border: 0 }}
-                allowFullScreen
-                loading="lazy"
-                referrerPolicy="no-referrer-when-downgrade"
-                className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700"
-              />
-              {/* Map Floating Info Badge */}
-              <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
-                  <MaterialIcon icon="store" size={20} className="text-white" />
-                </div>
-                <div>
-                  <h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
-                  <p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
-                </div>
+      {/* ─── Map Section ─── */}
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
+          <div className="relative w-full h-[450px]">
+            <iframe
+              title="Nearle Coimbatore Location Map"
+              src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              className="filter contrast-[1.05] saturate-[0.9]"
+            />
+            {/* Map Floating Info Badge */}
+            <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3 max-w-sm">
+              <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
+                <MaterialIcon icon="store" size={20} className="text-white" />
+              </div>
+              <div className="text-left">
+                <h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
+                <p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
               </div>
             </div>
           </div>
+        </section>
+      </div>
 
-          {/* Right: Message Form (7 Cols) */}
-          <ContactForm />
-
-        </div>
-      </section>
     </div>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 8212c20..6533f1d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -113,6 +113,7 @@
   --color-brand-cream: var(--brand-cream);
 
   /* Spacing */
+  --spacing-13: 3.25rem;
   --spacing-stack-xs: 4px;
   --spacing-stack-sm: 8px;
   --spacing-stack-md: 16px;
@@ -422,7 +423,7 @@ body {
     z-index: 3;
     width: 48%;
     max-width: 48%;
-    padding-top: 94px;
+    padding-top: 184px;
     padding-bottom: 40px;
     animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
@@ -479,7 +480,7 @@ body {
     position: relative;
     z-index: 3;
     width: 100%;
-    padding-top: 60px;
+    padding-top: 138px;
     padding-bottom: 24px;
     padding-left: var(--spacing-margin-mobile);
     padding-right: var(--spacing-margin-mobile);
@@ -662,24 +663,22 @@ body {
 
 /* Contact Form Card styling */
 .footer-brand {
-  grid-area: brand;
+  min-width: 0;
 }
 
 .footer-company {
-  grid-area: company;
+  min-width: 0;
 }
 
 .footer-partnerships {
-  grid-area: partnerships;
+  min-width: 0;
 }
 
 .footer-legal {
-  grid-area: legal;
   margin-top: 12px;
 }
 
 .footer-contact-wrap {
-  grid-area: form;
   min-width: 0;
   width: 100%;
 }
@@ -689,14 +688,12 @@ body {
   max-width: 540px;
   min-width: 0;
   box-sizing: border-box;
-  padding: 48px 36px;
   border-radius: 32px;
 }
 
 @media (max-width: 640px) {
   .footer-contact-card {
     max-width: 100%;
-    padding: 32px 20px;
     border-radius: 24px;
   }
 }
@@ -726,15 +723,7 @@ body {
 }
 
 .footer-form-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-}
-
-@media (min-width: 1440px) {
-  .footer-form-row {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+  /* Layout handled via Tailwind grid classes in Footer.tsx */
 }
 
 .footer-input {
@@ -745,7 +734,6 @@ body {
   color: var(--on-surface);
   border-radius: 14px;
   padding-inline: 16px;
-  min-height: 60px;
   font-size: 16px;
   outline: none;
   transition: all 0.2s ease;
@@ -777,7 +765,6 @@ body {
   color: var(--on-surface);
   border-radius: 14px;
   padding: 16px;
-  min-height: 130px;
   font-size: 16px;
   outline: none;
   resize: none;
@@ -818,7 +805,6 @@ body {
   background: var(--primary);
   color: var(--on-primary);
   font-weight: 700;
-  min-height: 62px;
   font-size: 18px;
   border-radius: 14px;
   display: flex;
@@ -915,10 +901,6 @@ body {
       "legal";
     gap: 32px;
   }
-  
-  .footer-contact-card {
-    padding: 28px 22px;
-  }
 }
 
 /* ─── Footer Vertical Spacing & Height Alignment ─── */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d934353..12e63bc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,19 +5,32 @@ import { HowItWorks } from "@/components/home/HowItWorks";
 import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
 import { BusinessSection } from "@/components/home/BusinessSection";
 import { StoreQRSection } from "@/components/home/StoreQRSection";
-import { AppPromo } from "@/components/home/AppPromo";
 
 export default function HomePage() {
   return (
-    <>
-      <Hero />
-      <ServiceCategories />
-      <WhyNearle />
-      <HowItWorks />
-      <HyperlocalFeatures />
-      <BusinessSection />
-      <StoreQRSection />
-      <AppPromo />
-    </>
+    <div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
+      <div className="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
+        <Hero />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <ServiceCategories />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <WhyNearle />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <HowItWorks />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <HyperlocalFeatures />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <BusinessSection />
+      </div>
+      <div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
+        <StoreQRSection />
+      </div>
+    </div>
   );
 }
+
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
index 7854a72..3fdf121 100644
--- a/src/components/contact/ContactForm.tsx
+++ b/src/components/contact/ContactForm.tsx
@@ -95,10 +95,10 @@ export function ContactForm() {
 
   return (
     <>
-      <div className="lg:col-span-7 bg-white rounded-3xl p-8 md:p-10 border border-outline-variant/25 shadow-xl relative overflow-hidden">
+      <div className="w-full max-w-[520px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-7 md:p-10 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
         {/* Background Accent Mesh */}
         <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-2xl" />
 
         <div className="relative z-10">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
@@ -108,8 +108,8 @@ export function ContactForm() {
             Send Message
           </h2>
 
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
               {/* Name field */}
               <div className="flex flex-col">
                 <label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
@@ -185,7 +185,7 @@ export function ContactForm() {
                 <textarea
                   id="field-message"
                   name="message"
-                  rows={5}
+                  rows={4}
                   value={formData.message}
                   onChange={handleInputChange}
                   placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)"
@@ -193,7 +193,7 @@ export function ContactForm() {
                     errors.message ? "border-error" : "border-outline-variant/30"
                   } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
                     errors.message ? "focus:ring-error/20" : "focus:ring-primary/20"
-                  } focus:border-primary transition-all resize-none`}
+                  } focus:border-primary transition-all resize-none min-h-[140px]`}
                 />
               </div>
               {errors.message && (
diff --git a/src/components/home/AppPromo.tsx b/src/components/home/AppPromo.tsx
deleted file mode 100644
index de9c226..0000000
--- a/src/components/home/AppPromo.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import Image from "next/image";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-
-const FEATURES = [
-  {
-    title: "Browse Nearby Stores",
-    desc: "See all available groceries, pharmacies, and eateries in your immediate area.",
-    icon: "store",
-  },
-  {
-    title: "Reorder from Favourite Shops",
-    desc: "Save your go-to neighborhood stores and reorder your daily needs with a single tap.",
-    icon: "replay",
-  },
-  {
-    title: "Track Your Delivery",
-    desc: "Get real-time updates as your neighborhood partner delivers your order straight to your door.",
-    icon: "local_shipping",
-  },
-  {
-    title: "Discover Local Offers",
-    desc: "Access exclusive deals, neighborhood sales, and daily promotions from stores near you.",
-    icon: "local_offer",
-  },
-];
-
-export function AppPromo() {
-  return (
-    <section
-      id="download"
-      className="py-16 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10"
-    >
-      <div className="max-w-container-max mx-auto relative">
-        {/* Background Dot pattern */}
-        <div
-          className="absolute inset-0 opacity-[0.03] pointer-events-none"
-          style={{
-            backgroundImage: "radial-gradient(#120217 2px, transparent 2px)",
-            backgroundSize: "24px 24px",
-          }}
-        />
-
-        <div className="grid md:grid-cols-12 gap-12 items-center relative z-10">
-          
-          {/* Left Column: Typography, benefits, download actions (7 cols) */}
-          <div className="md:col-span-7">
-            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10">
-              Download Nearle Mobile
-            </span>
-            
-            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
-              Your Neighbourhood, <br />
-              <span className="text-primary font-black">Now in Your Pocket.</span>
-            </h2>
-            
-            <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
-              Experience the easiest way to support and order from your local neighborhood shops. Download the app today.
-            </p>
-
-            {/* Benefit Bullets */}
-            <div className="space-y-6 mb-10">
-              {FEATURES.map((item) => (
-                <div key={item.title} className="flex gap-4">
-                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-accent/20 flex items-center justify-center">
-                    <MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
-                  </div>
-                  <div>
-                    <h4 className="text-base md:text-lg font-bold text-brand-dark">{item.title}</h4>
-                    <p className="text-sm md:text-base text-on-surface-variant mt-0.5 leading-relaxed">
-                      {item.desc}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Store Badges */}
-            <div className="flex flex-wrap gap-4 mt-8">
-              <a
-                href="https://apps.apple.com/us/app/nearle/id1596895375"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
-              >
-                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
-                  <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
-                </svg>
-                <div className="text-left leading-tight">
-                  <div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
-                    Download on the
-                  </div>
-                  <div className="text-sm md:text-base font-black -mt-0.5">
-                    App Store
-                  </div>
-                </div>
-              </a>
-
-              <a
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
-              >
-                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
-                  <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
-                </svg>
-                <div className="text-left leading-tight">
-                  <div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
-                    GET IT ON
-                  </div>
-                  <div className="text-sm md:text-base font-black -mt-0.5">
-                    Google Play
-                  </div>
-                </div>
-              </a>
-            </div>
-          </div>
-
-          {/* Right Column: Phone Mockup showcase (5 cols) */}
-          <div className="md:col-span-5 flex justify-center md:justify-end relative">
-            {/* Background glowing circle */}
-            <div className="absolute w-80 h-80 bg-brand-accent/10 rounded-full blur-2xl pointer-events-none -right-10 top-10" />
-
-            <div className="relative w-full max-w-[270px] animate-float">
-              {/* iPhone style phone container */}
-              <div className="bg-[#120217] w-full aspect-[9/18.5] rounded-[3rem] border-[6px] border-brand-dark-surface shadow-2xl relative overflow-hidden ring-4 ring-outline-variant/15">
-                {/* Speaker notch */}
-                <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-4 bg-black rounded-full z-20 flex items-center justify-center">
-                  <div className="w-12 h-1 bg-zinc-800 rounded-full" />
-                </div>
-
-                <Image
-                  src="/mobile image.jpeg"
-                  alt="Nearle mobile app interface showing neighborhood services"
-                  width={360}
-                  height={760}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-
-              {/* Overlapping alert bubble */}
-              <div className="absolute -left-10 top-1/4 bg-white/95 backdrop-blur-md p-4 rounded-2xl shadow-2xl border border-outline-variant/20 hidden lg:block hover:scale-105 transition-transform duration-300">
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center">
-                    <MaterialIcon
-                      icon="check_circle"
-                      size={18}
-                      className="text-secondary"
-                    />
-                  </div>
-                  <div>
-                    <p className="text-sm font-black text-brand-dark">Order Confirmed</p>
-                    <p className="text-xs text-on-surface-variant font-medium mt-1">Your local store is preparing your order</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx
index 2e17c9f..0b25564 100644
--- a/src/components/home/BusinessSection.tsx
+++ b/src/components/home/BusinessSection.tsx
@@ -7,31 +7,31 @@ const BENEFITS = [
     title: "Digital Catalogue",
     desc: "Showcase your products online easily to nearby customers.",
     icon: "menu_book",
-    style: "bg-primary text-white",
+    iconColor: "bg-primary/5 text-primary",
   },
   {
     title: "QR Ordering",
     desc: "Enable existing customers to scan and place orders directly at your counter.",
     icon: "qr_code",
-    style: "bg-brand-accent text-brand-dark",
+    iconColor: "bg-secondary/5 text-secondary",
   },
   {
     title: "Local Discovery",
     desc: "Get discovered by residents in your neighbourhood searching for your products.",
     icon: "explore",
-    style: "bg-white border border-outline-variant/20 text-primary",
+    iconColor: "bg-[#de96f9]/10 text-primary",
   },
   {
     title: "Delivery Support",
     desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
     icon: "local_shipping",
-    style: "bg-[#de96f9]/20 text-primary border border-primary/10",
+    iconColor: "bg-rose-500/5 text-rose-600",
   },
 ];
 
 export function BusinessSection() {
   return (
-    <section className="py-20 px-6 md:px-12 lg:px-20 xl:px-24 bg-background border-t border-outline-variant/10">
+    <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-16 px-6 md:px-12 lg:px-20 xl:px-24">
       <div className="max-w-container-max mx-auto">
         
         {/* Merchant Section Grid */}
@@ -42,7 +42,7 @@ export function BusinessSection() {
             <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
               Merchant Partnerships
             </span>
-            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
+            <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
               Bring Your Store Online with Nearle.
             </h2>
             <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
@@ -80,32 +80,27 @@ export function BusinessSection() {
             </div>
           </div>
 
-          {/* Right Column: Benefit Cards Bento Grid (5 cols) */}
-          <div className="lg:col-span-5 grid grid-cols-2 gap-6">
-            {BENEFITS.map((benefit, idx) => (
-              <div
-                key={benefit.title}
-                className={`p-8 rounded-[2.5rem] flex flex-col justify-between h-full min-h-[240px] hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${benefit.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
-              >
-                <div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${benefit.style.includes("primary") && !benefit.style.includes("de96f9") ? "bg-white/20" : "bg-primary/5 text-primary"}`}>
-                  <MaterialIcon icon={benefit.icon} size={24} />
-                </div>
-                <div>
-                  <h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
-                    {benefit.title}
-                  </h3>
-                  <p className="text-sm md:text-base opacity-90 leading-relaxed">
-                    {benefit.desc}
-                  </p>
+          {/* Right Column: Benefit Grid Cardless (5 cols) */}
+          <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
+            {BENEFITS.map((benefit) => (
+              <div key={benefit.title} className="flex flex-col items-start group">
+                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
+                  <MaterialIcon icon={benefit.icon} size={28} />
                 </div>
+                <h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
+                  {benefit.title}
+                </h3>
+                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
+                  {benefit.desc}
+                </p>
               </div>
             ))}
           </div>
 
         </div>
 
-        {/* CURVED PROMO BANNER */}
-        <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
+        {/* CURVED PROMO BANNER (Bottom CTA Block) */}
+        <div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
           {/* Decorative background vectors */}
           <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
           <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
@@ -115,7 +110,7 @@ export function BusinessSection() {
             <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
               Piping Hot & Fresh
             </span>
-            <h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
+            <h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
               Everything Nearby, <br />From Stores You Trust.
             </h3>
             <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
@@ -150,3 +145,5 @@ export function BusinessSection() {
     </section>
   );
 }
+
+
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 4b244ce..cb61ffb 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -29,7 +29,7 @@ const QUICK_LINKS = [
 export function Hero() {
   return (
     <>
-      <div className="hero">
+      <div className="hero rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden">
         {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
         <div className="hero-dark-panel select-none pointer-events-none">
           {/* Subtle Background Dot Texture */}
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
index ad3112b..b834793 100644
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -11,14 +11,14 @@ const STEPS = [
   {
     num: "02",
     title: "Pick Your Favourite Store",
-    desc: "Browse groceries, medicines, food, and daily essentials from nearby shops.",
+    desc: "Browse groceries, medicines, and daily essentials nearby.",
     icon: "storefront",
     color: "bg-secondary/5 text-secondary border-secondary/10",
   },
   {
     num: "03",
     title: "Place Order & Get Delivery",
-    desc: "Order easily and get it delivered by the store or a Nearle delivery partner.",
+    desc: "Order easily and get swift delivery from local partners.",
     icon: "local_shipping",
     color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
   },
@@ -26,49 +26,47 @@ const STEPS = [
 
 export function HowItWorks() {
   return (
-    <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
+    <section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
       <div className="max-w-container-max mx-auto">
         {/* Header Section */}
-        <div className="text-center mb-12">
-          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full">
+        <div className="text-center mb-8 md:mb-10">
+          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
             Simple Process
           </span>
-          <h2 className="text-display text-brand-dark mt-3 leading-tight">
+          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
             From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
           </h2>
         </div>
 
-        {/* Steps Layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
-          {/* Connector Line (Desktop Only) */}
-          <div className="hidden lg:block absolute top-[44px] left-[15%] right-[15%] h-[2px] bg-dashed border-t border-dashed border-outline-variant/30 -z-10" />
+        {/* Steps Layout - Timeline style */}
+        <div className="relative mt-8 md:mt-12">
+          {/* Connecting Line (Desktop Only) */}
+          <div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
 
-          {STEPS.map((step) => (
-            <div
-              key={step.num}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-lg flex flex-col h-full relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300"
-            >
-              {/* Step number watermark */}
-              <div className="absolute top-4 right-6 text-4xl font-black text-brand-dark/10 select-none">
-                {step.num}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16 relative z-10">
+            {STEPS.map((step) => (
+              <div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
+                {/* Icon Container with watermark number */}
+                <div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-white border border-primary/10 text-primary shadow-sm mb-6 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
+                  <MaterialIcon icon={step.icon} size={32} />
+                  <span className="absolute -top-3.5 -right-3.5 w-9 h-9 rounded-full bg-primary text-white font-display font-black text-sm flex items-center justify-center shadow-md">
+                    {step.num}
+                  </span>
+                </div>
+
+                <h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
+                  {step.title}
+                </h3>
+                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
+                  {step.desc}
+                </p>
               </div>
-
-              {/* Step Circle with Icon */}
-              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 shadow-sm ${step.color}`}>
-                <MaterialIcon icon={step.icon} size={28} />
-              </div>
-
-              {/* Title & Description */}
-              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
-                {step.title}
-              </h3>
-              <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
-                {step.desc}
-              </p>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </section>
   );
 }
+
+
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx
index 47a1188..1150507 100644
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/src/components/home/HyperlocalFeatures.tsx
@@ -6,61 +6,64 @@ const FEATURES = [
   {
     title: "Trusted Nearby Stores",
     icon: "store",
-    desc: "Connect directly with the local merchants you know and shop from regularly.",
+    desc: "Connect directly with the local merchants you already know.",
   },
   {
-    title: "Short-Distance Local Delivery",
+    title: "Short-Distance Delivery",
     icon: "local_shipping",
-    desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
+    desc: "Delivered quickly from nearby shops to keep items fresh.",
   },
   {
     title: "Easy Reorders",
     icon: "replay",
-    desc: "Save your favourite stores and reorder your weekly essentials in seconds.",
+    desc: "Save your favourite stores and reorder in seconds.",
   },
   {
     title: "Support Local Businesses",
     icon: "favorite",
-    desc: "Help neighbourhood stores thrive and remain competitive in a digital world.",
+    desc: "Help local neighbourhood stores thrive digitally.",
   },
 ];
 
 export function HyperlocalFeatures() {
   return (
-    <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
+    <section className="bg-[#F6F1F8] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 relative">
       {/* Scoped CSS styles for precise layout enforcement */}
       <style>{`
-        @media (min-width: 901px) {
-          .custom-care-grid {
-            grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
-            gap: 56px !important;
-            width: min(1280px, 100%) !important;
-          }
-          .custom-care-visual {
-            max-width: 470px !important;
-            height: 520px !important;
-          }
-          .custom-care-card {
-            min-height: 520px !important;
-            padding: 60px !important;
-          }
-        }
-        @media (max-width: 900px) {
-          .custom-care-grid {
-            grid-template-columns: 1fr !important;
-            gap: 32px !important;
-            width: 100% !important;
-          }
-          .custom-care-visual {
-            max-width: 420px !important;
-            height: 460px !important;
-          }
-          .custom-care-card {
-            min-height: auto !important;
-            padding: 36px 24px !important;
-          }
-        }
-      `}</style>
+         @media (min-width: 901px) {
+           .custom-care-grid {
+             grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
+             gap: 64px !important;
+             width: min(1360px, 100%) !important;
+           }
+           .custom-care-visual {
+             max-width: 530px !important;
+             height: 580px !important;
+           }
+           .custom-care-card {
+             min-height: 580px !important;
+             padding: 60px !important;
+             display: flex !important;
+             flex-direction: column !important;
+             justify-content: center !important;
+           }
+         }
+         @media (max-width: 900px) {
+           .custom-care-grid {
+             grid-template-columns: 1fr !important;
+             gap: 32px !important;
+             width: 100% !important;
+           }
+           .custom-care-visual {
+             max-width: 420px !important;
+             height: 460px !important;
+           }
+           .custom-care-card {
+             min-height: auto !important;
+             padding: 36px 24px !important;
+           }
+         }
+       `}</style>
 
       {/* Subtle background radial glows */}
       <div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
@@ -130,7 +133,7 @@ export function HyperlocalFeatures() {
               Community & Trust
             </span>
             
-            <h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
+            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-white mt-6 mb-8 leading-tight tracking-tight">
               Built Around Your<br />
               <span className="text-brand-accent font-black">Neighbourhood</span>
             </h3>
@@ -158,7 +161,7 @@ export function HyperlocalFeatures() {
                   </div>
                   
                   <div>
-                    <h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
+                    <h4 className="text-lg md:text-xl font-black text-white group-hover:text-brand-accent transition-colors">
                       {item.title}
                     </h4>
                     <p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
@@ -200,3 +203,4 @@ export function HyperlocalFeatures() {
     </section>
   );
 }
+
diff --git a/src/components/home/ServiceCategories.tsx b/src/components/home/ServiceCategories.tsx
index 203ef6a..ea96838 100644
--- a/src/components/home/ServiceCategories.tsx
+++ b/src/components/home/ServiceCategories.tsx
@@ -32,7 +32,7 @@ const CATEGORIES = [
     image: "/images/cat-daily-essentials.png",
     tag: "Local Store",
     tagStyle: "bg-secondary text-white",
-    desc: "Farm-fresh fruits and vegetables delivered from trusted local vendors.",
+    desc: "Farm-fresh fruits and vegetables from trusted local vendors.",
     cta: "Browse Fresh",
   },
   {
@@ -40,7 +40,7 @@ const CATEGORIES = [
     image: "/images/cat-pet-essentials.png",
     tag: "Available Near You",
     tagStyle: "bg-orange-500 text-white",
-    desc: "Kitchen supplies, household cleaners, and other daily utility items.",
+    desc: "Kitchen supplies, household cleaners, and daily utilities.",
     cta: "Shop Needs",
   },
   {
@@ -55,24 +55,24 @@ const CATEGORIES = [
 
 export function ServiceCategories() {
   return (
-    <section className="bg-background py-20 px-6 md:px-12 lg:px-20 xl:px-24">
+    <section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24">
       <div className="max-w-container-max mx-auto">
         {/* Header Section */}
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
           <div>
-            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1.5 rounded-full">
+            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3 py-1.5 rounded-full">
               Neighbourhood Offerings
             </span>
-            <h2 className="text-display text-brand-dark mt-3 leading-tight">
+            <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
               Explore Stores <span className="text-primary font-normal">Near You</span>
             </h2>
-            <p className="text-body-lg text-on-surface-variant mt-2 max-w-xl">
+            <p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
               Groceries, medicines, food, and everyday essentials from nearby local shops.
             </p>
           </div>
           <Link
             href="/people"
-            className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group"
+            className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group shrink-0"
           >
             View All Categories
             <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
@@ -139,3 +139,4 @@ export function ServiceCategories() {
     </section>
   );
 }
+
diff --git a/src/components/home/StoreQRSection.tsx b/src/components/home/StoreQRSection.tsx
index e7d6cb5..7f91c4d 100644
--- a/src/components/home/StoreQRSection.tsx
+++ b/src/components/home/StoreQRSection.tsx
@@ -1,5 +1,4 @@
 import Image from "next/image";
-import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const FLOW_STEPS = [
@@ -10,77 +9,249 @@ const FLOW_STEPS = [
 
 export function StoreQRSection() {
   return (
-    <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
-      <div className="max-w-container-max mx-auto">
-        <div className="grid lg:grid-cols-12 gap-16 items-center">
-          {/* Left Column: Visual representation of QR Sticker/Counter */}
-          <div className="lg:col-span-5 flex justify-center relative">
-            <div className="relative w-full max-w-[380px] aspect-square bg-[#120217] rounded-[2.5rem] p-8 shadow-2xl border-4 border-white/10 flex flex-col justify-between items-center group overflow-hidden">
-              {/* Decorative radial shine */}
-              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(224,200,247,0.15),transparent_60%)] pointer-events-none" />
-              
-              {/* Header inside QR Sticker */}
-              <div className="text-center w-full relative z-10">
-                <p className="text-xs font-black text-brand-accent tracking-[0.2em] uppercase">Order Online</p>
-                <h4 className="font-display font-black text-white text-lg mt-1">Nearle Store QR</h4>
-                <p className="text-xs text-white/60 font-semibold mt-1">Nearle Partner Store</p>
-              </div>
+    <section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 text-white relative min-h-[640px] flex items-center">
+      {/* Background ambient glowing details */}
+      <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
+      <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
 
-              {/* Decorative QR Pattern */}
-              <div className="relative w-52 h-52 bg-white rounded-2xl p-4 flex items-center justify-center shadow-lg group-hover:scale-[1.03] transition-transform duration-500 z-10">
-                <Image
-                  src="/QR code .png"
-                  alt="Nearle Store QR Code"
-                  width={200}
-                  height={200}
-                  className="object-contain"
-                />
-              </div>
-
-              {/* Footer label on QR Sticker */}
-              <div className="text-center z-10">
-                <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-black tracking-wider uppercase bg-brand-accent/15 text-brand-accent">
-                  <span className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse" />
-                  Scan to Shop
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Right Column: Copywriting and Steps */}
-          <div className="lg:col-span-7">
-            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
-              Instant Connections
+      <div className="w-full max-w-container-max mx-auto relative z-10">
+        
+        {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
+        <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
+          
+          {/* Left Column: Heading, flow steps, download buttons */}
+          <div className="lg:col-span-6">
+            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
+              Instant Connections & App
             </span>
-            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
-              Your Favourite Store Is <span className="text-secondary">Now Just One Scan Away.</span>
+            <h2 className="text-4xl md:text-5xl lg:text-[60px] xl:text-[66px] font-display font-black text-white mt-6 mb-6 leading-[1.08] tracking-tight">
+              Scan to Shop, <br />
+              <span className="text-brand-accent font-black">Order in Your Pocket.</span>
             </h2>
-            <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
-              See Nearle at a nearby store? Scan the QR code once, save the store, and order from it anytime.
+            <p className="text-body-lg text-white/70 mb-10 max-w-xl leading-relaxed">
+              Find Nearle QRs at nearby stores. Scan once to save it, then order groceries, food, or medicines from your favourite local merchant anytime.
             </p>
 
-            {/* Visual Steps Row */}
-            <div className="grid grid-cols-3 gap-6 mb-12 max-w-lg">
-              {FLOW_STEPS.map((step) => (
-                <div key={step.label} className="flex flex-col items-center text-center group">
-                  <div className="w-14 h-14 rounded-xl bg-white border border-outline-variant/20 shadow-sm flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 mb-3">
-                    <MaterialIcon icon={step.icon} size={28} />
+            {/* QR Steps row with arrows */}
+            <div className="flex items-center gap-6 mb-12 max-w-md select-none">
+              {FLOW_STEPS.map((step, idx) => (
+                <div key={step.label} className="flex items-center gap-6 flex-1">
+                  <div className="flex flex-col items-center text-center group flex-1">
+                    <div className="w-14 h-14 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2 transition-transform duration-300 group-hover:-translate-y-0.5">
+                      <MaterialIcon icon={step.icon} size={24} />
+                    </div>
+                    <span className="text-sm font-bold text-white/90">
+                      {step.label}
+                    </span>
                   </div>
-                  <span className="text-sm md:text-base font-black text-brand-dark group-hover:text-primary transition-colors">
-                    {step.label}
-                  </span>
+                  {idx < FLOW_STEPS.length - 1 && (
+                    <MaterialIcon icon="arrow_forward" size={16} className="text-white/30" />
+                  )}
                 </div>
               ))}
             </div>
 
-            <Link
-              href="/people"
-              className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 inline-block"
-            >
-              Find Stores Near You
-            </Link>
+            {/* App Store Badges (Prominent White Buttons) */}
+            <div className="flex flex-wrap gap-4">
+              <a
+                href="https://apps.apple.com/us/app/nearle/id1596895375"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
+              >
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
+                  <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
+                </svg>
+                <div className="text-left leading-tight">
+                  <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                    Download on the
+                  </div>
+                  <div className="text-sm font-black">
+                    App Store
+                  </div>
+                </div>
+              </a>
+
+              <a
+                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
+              >
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
+                  <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
+                </svg>
+                <div className="text-left leading-tight">
+                  <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                    GET IT ON
+                  </div>
+                  <div className="text-sm font-black">
+                    Google Play
+                  </div>
+                </div>
+              </a>
+            </div>
+          </div>
+
+          {/* Right Column: Visual components (QR Sticker & Phone Mockup) */}
+          <div className="lg:col-span-6 flex items-center justify-center gap-8 relative select-none">
+            {/* Small supporting visual: QR Sticker (Secondary) */}
+            <div className="relative w-[210px] shrink-0 aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-2xl border-2 border-white/20">
+              <div className="text-center w-full">
+                <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
+                <h4 className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</h4>
+              </div>
+
+              <div className="relative w-32 h-32 bg-white flex items-center justify-center">
+                <Image
+                  src="/QR code .png"
+                  alt="Nearle Store QR Code"
+                  width={132}
+                  height={132}
+                  className="object-contain"
+                />
+              </div>
+
+              <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary leading-none">
+                <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+                Scan to Shop
+              </span>
+            </div>
+
+            {/* Primary large visual: Phone Mockup (Significantly Larger) */}
+            <div className="relative w-[290px] shrink-0 aspect-[9/18.5] bg-[#120217] rounded-[2.75rem] border-[7px] border-brand-dark-surface shadow-2xl overflow-hidden ring-4 ring-outline-variant/10">
+              <Image
+                src="/mobile image.jpeg"
+                alt="Nearle mobile app interface"
+                width={360}
+                height={760}
+                className="w-full h-full object-cover"
+              />
+            </div>
+
+            {/* Overlapping Confirmation Bubble */}
+            <div className="absolute -left-8 bottom-[15%] z-20 hidden xl:flex bg-white p-4.5 rounded-2xl shadow-2xl border border-outline-variant/20 max-w-[210px] text-brand-dark items-center gap-3">
+              <div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center shrink-0">
+                <MaterialIcon icon="check_circle" size={18} className="text-secondary" />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs font-black">Order Confirmed</p>
+                <p className="text-[10px] text-on-surface-variant font-medium mt-0.5 leading-tight">Your order is preparing</p>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* ─── MOBILE & TABLET LAYOUT (below lg) ─── */}
+        <div className="lg:hidden flex flex-col gap-12 text-center">
+          {/* 1. Heading and description */}
+          <div>
+            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20 inline-block">
+              Instant Connections & App
+            </span>
+            <h2 className="text-4xl font-display font-black text-white mt-6 mb-4 tracking-tight leading-tight">
+              Scan to Shop, <br />Order in Pocket.
+            </h2>
+            <p className="text-body-md text-white/70 max-w-md mx-auto leading-relaxed">
+              Scan Nearle QRs to instantly save local stores, and order from them anytime in one convenient app.
+            </p>
+          </div>
+
+          {/* 2. QR Sticker */}
+          <div className="mx-auto w-[240px] aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-xl border-2 border-white/20 select-none">
+            <div className="text-center w-full">
+              <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
+              <h4 className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</h4>
+            </div>
+
+            <div className="relative w-36 h-36 bg-white flex items-center justify-center">
+              <Image
+                src="/QR code .png"
+                alt="Nearle Store QR Code"
+                width={144}
+                height={144}
+                className="object-contain"
+              />
+            </div>
+
+            <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary">
+              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+              Scan to Shop
+            </span>
+          </div>
+
+          {/* 3. Scan → Save → Order steps */}
+          <div className="flex items-center justify-center gap-4 max-w-sm mx-auto select-none">
+            {FLOW_STEPS.map((step, idx) => (
+              <div key={step.label} className="flex items-center gap-4 flex-1">
+                <div className="flex flex-col items-center text-center">
+                  <div className="w-12 h-12 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2">
+                    <MaterialIcon icon={step.icon} size={22} />
+                  </div>
+                  <span className="text-xs font-bold text-white/90">
+                    {step.label}
+                  </span>
+                </div>
+                {idx < FLOW_STEPS.length - 1 && (
+                  <MaterialIcon icon="chevron_right" size={16} className="text-white/30" />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* 4. Phone Mockup */}
+          <div className="mx-auto w-[240px] aspect-[9/18.5] bg-[#120217] rounded-[2.5rem] border-[5px] border-brand-dark-surface shadow-xl relative overflow-hidden select-none">
+            <Image
+              src="/mobile image.jpeg"
+              alt="Nearle mobile app interface"
+              width={360}
+              height={760}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          {/* 5. App store buttons */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <a
+              href="https://apps.apple.com/us/app/nearle/id1596895375"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
+            >
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
+                <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
+              </svg>
+              <div className="text-left leading-tight">
+                <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                  Download on the
+                </div>
+                <div className="text-sm font-black">
+                  App Store
+                </div>
+              </div>
+            </a>
+
+            <a
+              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
+            >
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
+                <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
+              </svg>
+              <div className="text-left leading-tight">
+                <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                  GET IT ON
+                </div>
+                <div className="text-sm font-black">
+                  Google Play
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+
       </div>
     </section>
   );
diff --git a/src/components/home/WhyNearle.tsx b/src/components/home/WhyNearle.tsx
index 34233dc..0823462 100644
--- a/src/components/home/WhyNearle.tsx
+++ b/src/components/home/WhyNearle.tsx
@@ -9,19 +9,19 @@ const CARDS = [
   },
   {
     title: "Better Local Value",
-    desc: "Discover local offers and everyday essentials from nearby shops.",
+    desc: "Discover local offers and daily savings nearby.",
     icon: "local_offer",
     color: "bg-secondary/5 text-secondary border-secondary/10",
   },
   {
     title: "Easy Reordering",
-    desc: "Save your favourite stores and reorder quickly when you need something.",
+    desc: "Save your favourite stores for quick reordering.",
     icon: "history",
     color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
   },
   {
     title: "Support Local Business",
-    desc: "Every order helps nearby businesses grow digitally.",
+    desc: "Every order directly supports nearby shopkeepers.",
     icon: "favorite",
     color: "bg-rose-500/5 text-rose-700 border-rose-100",
   },
@@ -29,29 +29,29 @@ const CARDS = [
 
 export function WhyNearle() {
   return (
-    <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
+    <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-14 px-6 md:px-12 lg:px-20 xl:px-24">
       <div className="max-w-container-max mx-auto">
         {/* Header Section */}
-        <div className="text-center mb-10">
+        <div className="text-center mb-8 md:mb-10">
           <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
             Our Philosophy
           </span>
-          <h2 className="text-display text-brand-dark mt-3 leading-tight">
+          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-3 leading-tight tracking-tight">
             Why Nearle <span className="text-primary font-normal">Feels Different</span>
           </h2>
-          <p className="text-body-lg text-on-surface-variant mt-2 max-w-xl mx-auto">
+          <p className="text-body-lg text-on-surface-variant mt-2.5 max-w-xl mx-auto leading-relaxed">
             Nearle brings the convenience of an app to the stores you already know and trust.
           </p>
         </div>
 
         {/* Cards Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
           {CARDS.map((card) => (
             <div
               key={card.title}
-              className="premium-card bg-white rounded-3xl p-10 border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
+              className="premium-card bg-white rounded-3xl p-10 lg:p-12 min-h-[300px] lg:min-h-[340px] border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
             >
-              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${card.color}`}>
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-8 shrink-0 ${card.color}`}>
                 <MaterialIcon icon={card.icon} size={28} />
               </div>
               <h3 className="font-display text-xl font-black text-brand-dark mb-3">
@@ -67,3 +67,5 @@ export function WhyNearle() {
     </section>
   );
 }
+
+
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index d5dce10..d2218d1 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -43,7 +43,7 @@ type FooterFormErrors = {
 
 export function Footer() {
   const pathname = usePathname();
-  const isContactPage = pathname === "/contact";
+  const isContactPage = pathname?.startsWith("/contact");
 
   // Form states
   const [formData, setFormData] = useState<FooterFormData>({
@@ -121,229 +121,273 @@ export function Footer() {
     }, 5000);
   };
 
-  return (
-    <footer className="footer relative z-10 bg-brand-dark text-white border-t border-white/5 w-full mt-24">
-      {/* Overlapping Contact Helpdesk Card */}
-      <div className="footer-helpdesk-wrap">
-        <div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
-          <div className="flex items-center gap-4 text-brand-dark">
-            <div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
-              <MaterialIcon icon="headset_mic" size={24} />
-            </div>
-            <div>
-              <h4 className="text-headline-md font-black">24/7 Neighborhood Helpdesk</h4>
-              <p className="helpdesk-subtitle mt-0.5">
-                Need immediate assistance with an order or local service?
-              </p>
-            </div>
-          </div>
-          <a
-            href="tel:+918049123456"
-            className="helpdesk-btn"
-          >
-            <MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
-            <span>+91 80 4912 3456</span>
-          </a>
-        </div>
-      </div>
+  const brandCol = (
+    <div className="footer-brand min-w-0 self-start">
+      <Link
+        href="/"
+        className="mb-4 inline-block"
+      >
+        <Image
+          src="/logo-v2.png"
+          alt="Nearle"
+          width={220}
+          height={36}
+          style={{ width: "210px", height: "auto" }}
+          className="object-contain"
+        />
+      </Link>
+      <p className="footer-desc mb-4 text-white/80">
+        India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
+      </p>
 
-      <div className="footer-container">
-        {/* Main content wrapper */}
-        <div className="footer-main">
-          {/* Main content grid: aligned on the same top baseline */}
-          <div className={`${
-            isContactPage 
-              ? "footer-grid-contact-page" 
-              : "footer-grid"
-          }`}>
-            {/* Brand Column */}
-            <div className="footer-brand">
-              <Link
-                href="/"
-                className="mb-4 inline-block"
-              >
-                <Image
-                  src="/logo-v2.png"
-                  alt="Nearle"
-                  width={220}
-                  height={36}
-                  style={{ width: "210px", height: "auto" }}
-                  className="object-contain"
-                />
-              </Link>
-              <p className="footer-desc mb-4">
-                India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
-              </p>
-              {/* Social Links */}
-              <div className="flex gap-4">
-                <a
-                  href="#"
-                  className="footer-social-link"
-                  aria-label="Share"
-                >
-                  <MaterialIcon icon="share" size={24} />
-                </a>
-                <a
-                  href="#"
-                  className="footer-social-link"
-                  aria-label="Website"
-                >
-                  <MaterialIcon icon="public" size={24} />
-                </a>
+      {/* Social Links */}
+      <div className="flex gap-4">
+        <a
+          href="#"
+          className="footer-social-link"
+          aria-label="Share"
+        >
+          <MaterialIcon icon="share" size={24} />
+        </a>
+        <a
+          href="#"
+          className="footer-social-link"
+          aria-label="Website"
+        >
+          <MaterialIcon icon="public" size={24} />
+        </a>
+      </div>
+    </div>
+  );
+
+  return (
+    <footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 py-8 md:py-12 lg:py-14 w-full mt-24">
+      <div className="mx-auto max-w-[1560px]">
+        <div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
+          {/* Top Helpdesk Bar */}
+          <div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
+            <div className="flex items-center gap-4 text-white">
+              <div className="w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-lg shrink-0">
+                <MaterialIcon icon="headset_mic" size={24} />
+              </div>
+              <div className="text-left">
+                <h4 className="text-headline-md font-black text-white">24/7 Neighborhood Helpdesk</h4>
+                <p className="text-sm font-semibold text-white/70 mt-0.5">
+                  Need immediate assistance with an order or local service?
+                </p>
               </div>
             </div>
+            <a
+              href="tel:+918049123456"
+              className="flex items-center gap-3 bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-6 py-3 rounded-full text-base shadow-lg transition-all duration-300 hover:-translate-y-0.5 shrink-0"
+            >
+              <MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
+              <span>+91 80 4912 3456</span>
+            </a>
+          </div>
 
-            {/* Company Links */}
-            <div className="footer-company">
-              <FooterCol title="Company" links={COMPANY} />
-            </div>
+          {/* Main Footer Content */}
+          <div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
+            <div className={
+              isContactPage 
+                ? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10" 
+                : "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
+            }>
+              {isContactPage ? (
+                <>
+                  {/* Brand Column */}
+                  {brandCol}
 
-            {/* Partnerships Links */}
-            <div className="footer-partnerships">
-              <FooterCol title="Partnerships" links={PARTNERSHIPS} />
-            </div>
-
-            {/* Legal Links */}
-            <div className="footer-legal">
-              <FooterCol title="Legal" links={LEGAL} />
-            </div>
-
-            {/* Contact Form Card */}
-            {!isContactPage && (
-              <div className="footer-contact-wrap">
-                <div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden">
-                  {/* Background Glow Decors */}
-                  <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" />
-                  <div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
-
-                  <div className="relative z-10 text-center lg:text-left">
-                    <h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
-                      Send us a Message
-                    </h3>
-                    <p className="footer-contact-subtitle text-sm md:text-base mt-2">
-                      We shall guide you through our Neighbourhood Experts.
-                    </p>
-
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                      {submitSuccess && (
-                        <div className="p-3 bg-secondary/10 border border-secondary/20 text-secondary text-body-sm font-bold rounded-xl flex items-center justify-center gap-1.5 animate-bounce-subtle">
-                          <MaterialIcon icon="check_circle" size={16} />
-                          <span>Message sent successfully!</span>
-                        </div>
-                      )}
-
-                      <div className="footer-form-row">
-                        <div className="flex flex-col text-left">
-                          <label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
-                          <input
-                            type="text"
-                            id="footer-field-name"
-                            name="name"
-                            value={formData.name}
-                            onChange={handleInputChange}
-                            placeholder="Your Name..."
-                            className={`footer-input ${errors.name ? "has-error" : ""}`}
-                          />
-                          {errors.name && (
-                            <span className="footer-error-text">
-                              <MaterialIcon icon="error" size={16} />
-                              {errors.name}
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex flex-col text-left">
-                          <label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
-                          <input
-                            type="text"
-                            id="footer-field-phone"
-                            name="phone"
-                            value={formData.phone}
-                            onChange={handleInputChange}
-                            placeholder="Your Phone..."
-                            className={`footer-input ${errors.phone ? "has-error" : ""}`}
-                          />
-                          {errors.phone && (
-                            <span className="footer-error-text">
-                              <MaterialIcon icon="error" size={16} />
-                              {errors.phone}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-
-                      <div className="flex flex-col text-left">
-                        <label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
-                        <input
-                          type="email"
-                          id="footer-field-email"
-                          name="email"
-                          value={formData.email}
-                          onChange={handleInputChange}
-                          placeholder="Your Email Address..."
-                          className={`footer-input ${errors.email ? "has-error" : ""}`}
-                        />
-                        {errors.email && (
-                          <span className="footer-error-text">
-                            <MaterialIcon icon="error" size={16} />
-                            {errors.email}
-                          </span>
-                        )}
-                      </div>
-
-                      <div className="flex flex-col text-left">
-                        <label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
-                        <textarea
-                          id="footer-field-message"
-                          name="message"
-                          value={formData.message}
-                          onChange={handleInputChange}
-                          placeholder="Your Message..."
-                          className={`footer-textarea ${errors.message ? "has-error" : ""}`}
-                        />
-                        {errors.message && (
-                          <span className="footer-error-text">
-                            <MaterialIcon icon="error" size={16} />
-                            {errors.message}
-                          </span>
-                        )}
-                      </div>
-
-                      <button
-                        type="submit"
-                        disabled={isSubmitting}
-                        className="footer-submit-btn"
-                      >
-                        {isSubmitting ? (
-                          <>
-                            <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                            <span>SUBMITTING...</span>
-                          </>
-                        ) : (
-                          <span>SUBMIT</span>
-                        )}
-                      </button>
-                    </form>
+                  {/* Company Links */}
+                  <div className="footer-company min-w-0 self-start">
+                    <FooterCol title="Company" links={COMPANY} />
                   </div>
+
+                  {/* Partnerships Links */}
+                  <div className="footer-partnerships min-w-0 self-start">
+                    <FooterCol title="Partnerships" links={PARTNERSHIPS} />
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="flex flex-col self-start w-full">
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10">
+                      {/* Brand Column */}
+                      {brandCol}
+
+                      {/* Company Links */}
+                      <div className="footer-company min-w-0 self-start">
+                        <FooterCol title="Company" links={COMPANY} />
+                      </div>
+
+                      {/* Partnerships Links */}
+                      <div className="footer-partnerships min-w-0 self-start">
+                        <FooterCol title="Partnerships" links={PARTNERSHIPS} />
+                      </div>
+                    </div>
+
+                    {/* HQ Office Location & Directions block */}
+                    <div className="mt-8 border-t border-white/10 pt-7 max-w-[520px] text-left">
+                      <p className="text-[11px] font-black uppercase tracking-[0.18em] text-brand-accent">
+                        VISIT NEARLE HQ
+                      </p>
+
+                      <h4 className="mt-2 font-display text-xl md:text-2xl font-black text-white">
+                        Meet the team behind your neighbourhood.
+                      </h4>
+
+                      <p className="mt-3 text-sm leading-6 text-white/60">
+                        424, Diwan Bahadur Rd,<br />
+                        Opposite to Sri Krishna Sweets,<br />
+                        R.S. Puram, Coimbatore,<br />
+                        Tamil Nadu 641002
+                      </p>
+
+                      <a
+                        href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-white/15 hover:border-brand-accent/50 text-white hover:text-brand-accent text-xs md:text-sm font-black transition-all duration-300"
+                      >
+                        <MaterialIcon icon="location_on" size={16} />
+                        <span>Get Directions</span>
+                      </a>
+                    </div>
+                  </div>
+
+                  {/* Contact Form Card */}
+                  <div className="footer-contact-wrap w-full self-start">
+                    <div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden w-full max-w-[540px] lg:ml-auto p-7 md:p-8 lg:p-9">
+                      {/* Background Glow Decors */}
+                      <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" />
+                      <div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
+
+                      <div className="relative z-10 text-center lg:text-left">
+                        <h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
+                          Send us a Message
+                        </h3>
+                        <p className="footer-contact-subtitle text-sm md:text-base mt-1 mb-5">
+                          We shall guide you through our Neighbourhood Experts.
+                        </p>
+
+                        <form onSubmit={handleSubmit} className="space-y-3">
+                          {submitSuccess && (
+                            <div className="p-3 bg-secondary/10 border border-secondary/20 text-secondary text-body-sm font-bold rounded-xl flex items-center justify-center gap-1.5 animate-bounce-subtle">
+                              <MaterialIcon icon="check_circle" size={16} />
+                              <span>Message sent successfully!</span>
+                            </div>
+                          )}
+
+                          <div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div className="flex flex-col text-left">
+                              <label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
+                              <input
+                                type="text"
+                                id="footer-field-name"
+                                name="name"
+                                value={formData.name}
+                                onChange={handleInputChange}
+                                placeholder="Your Name..."
+                                className={`footer-input h-12 md:h-13 ${errors.name ? "has-error" : ""}`}
+                              />
+                              {errors.name && (
+                                <span className="footer-error-text">
+                                  <MaterialIcon icon="error" size={16} />
+                                  {errors.name}
+                                </span>
+                              )}
+                            </div>
+                            <div className="flex flex-col text-left">
+                              <label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
+                              <input
+                                type="text"
+                                id="footer-field-phone"
+                                name="phone"
+                                value={formData.phone}
+                                onChange={handleInputChange}
+                                placeholder="Your Phone..."
+                                className={`footer-input h-12 md:h-13 ${errors.phone ? "has-error" : ""}`}
+                              />
+                              {errors.phone && (
+                                <span className="footer-error-text">
+                                  <MaterialIcon icon="error" size={16} />
+                                  {errors.phone}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="flex flex-col text-left">
+                            <label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
+                            <input
+                              type="email"
+                              id="footer-field-email"
+                              name="email"
+                              value={formData.email}
+                              onChange={handleInputChange}
+                              placeholder="Your Email Address..."
+                              className={`footer-input h-12 md:h-13 ${errors.email ? "has-error" : ""}`}
+                            />
+                            {errors.email && (
+                              <span className="footer-error-text">
+                                <MaterialIcon icon="error" size={16} />
+                                {errors.email}
+                              </span>
+                            )}
+                          </div>
+
+                          <div className="flex flex-col text-left">
+                            <label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
+                            <textarea
+                              id="footer-field-message"
+                              name="message"
+                              value={formData.message}
+                              onChange={handleInputChange}
+                              placeholder="Your Message..."
+                              className={`footer-textarea min-h-[120px] md:min-h-[130px] ${errors.message ? "has-error" : ""}`}
+                            />
+                            {errors.message && (
+                              <span className="footer-error-text">
+                                <MaterialIcon icon="error" size={16} />
+                                {errors.message}
+                              </span>
+                            )}
+                          </div>
+
+                          <button
+                            type="submit"
+                            disabled={isSubmitting}
+                            className="footer-submit-btn h-12 md:h-13"
+                          >
+                            {isSubmitting ? (
+                              <>
+                                <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                <span>SUBMITTING...</span>
+                              </>
+                            ) : (
+                              <span>SUBMIT</span>
+                            )}
+                          </button>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Footer Bottom Bar */}
+            <div className="mt-8 border-t border-white/10 pt-5 text-xs text-white/45">
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
+                <div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
+                  {LEGAL.map((link) => (
+                    <Link key={link.label} href={link.href} className="hover:text-[#e0c8f7] transition-colors">
+                      {link.label}
+                    </Link>
+                  ))}
                 </div>
               </div>
-            )}
-          </div>
-        </div>
-
-        {/* Divider */}
-        <hr className="footer-divider" />
-
-        {/* Bottom Bar */}
-        <div className="footer-bottom">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="footer-bottom-text">
-              © {new Date().getFullYear()} Nearle. All rights reserved.
-            </p>
-            <div className="flex items-center gap-2 footer-bottom-text">
-              <span>Designed for neighborhoods in</span>
-              <span className="flex items-center gap-1 font-bold text-white/80">
-                India 🇮🇳
-              </span>
             </div>
           </div>
         </div>
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 33b350a..cebfb7b 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { useState } from "react";
+import { usePathname } from "next/navigation";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const NAV_LINKS = [
@@ -15,78 +16,105 @@ const NAV_LINKS = [
 
 export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const pathname = usePathname();
 
   return (
-    <nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
-      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
-        {/* Left: Brand */}
-        <div className="flex items-center">
-          <Link
-            href="/"
-            className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
-          >
-            <Image
-              src="/logo-light.png"
-              alt="Nearle"
-              width={400}
-              height={50}
-              style={{ height: "40px", width: "auto" }}
-              className="object-contain"
-              priority
-            />
-          </Link>
-        </div>
-
-        <div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
-          {NAV_LINKS.map((link) => (
-            <Link
-              key={link.label}
-              href={link.href}
-              className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
-            >
-              {link.label}
-              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
-            </Link>
-          ))}
-        </div>
-
-        {/* Right: Actions */}
-        <div className="flex items-center justify-end gap-3">
-          <Link
-            href="/#download"
-            className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
-          >
-            Get App
-          </Link>
-
-          {/* Mobile menu toggle */}
-          <button
-            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
-            onClick={() => setMobileOpen(!mobileOpen)}
-            aria-label="Toggle menu"
-          >
-            <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
-          </button>
-        </div>
-      </div>
-
-      {/* Mobile Drawer */}
-      {mobileOpen && (
-        <div className="md:hidden bg-[#4d046a] border-t border-white/10">
-          <div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
-            {NAV_LINKS.map((link) => (
+    <div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
+      <div className="w-full max-w-[1440px] px-4 md:px-8 lg:px-12 pt-5 md:pt-6 pointer-events-auto relative">
+        <nav className="w-full h-[68px] lg:h-[80px] rounded-[1.75rem] lg:rounded-[2rem] bg-gradient-to-r from-[#65108A] via-[#5A087B] to-[#3A044F] border border-white/10 shadow-[0_18px_40px_rgba(60,0,80,0.25)] backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
+          <div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
+            {/* Left: Brand */}
+            <div className="flex items-center justify-start">
               <Link
-                key={link.label}
-                href={link.href}
-                className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
-                onClick={() => setMobileOpen(false)}
+                href="/"
+                className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
               >
-                {link.label}
+                <Image
+                  src="/logo-light.png"
+                  alt="Nearle"
+                  width={400}
+                  height={50}
+                  className="h-8 lg:h-9 w-auto object-contain"
+                  priority
+                />
               </Link>
-            ))}
+            </div>
+
+            {/* Center: Navigation Links */}
+            <div className="hidden md:flex items-center justify-center gap-6 lg:gap-8 xl:gap-10">
+              {NAV_LINKS.map((link) => {
+                const isActive = pathname === link.href;
+                return (
+                  <Link
+                    key={link.label}
+                    href={link.href}
+                    className={`relative py-2 text-[15px] font-medium leading-5 transition-all duration-200 whitespace-nowrap ${
+                      isActive ? "text-white" : "text-white/80 hover:text-white"
+                    } group`}
+                  >
+                    {link.label}
+                    <span
+                      className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${
+                        isActive
+                          ? "w-5 opacity-100"
+                          : "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
+                      }`}
+                    />
+                  </Link>
+                );
+              })}
+            </div>
+
+            {/* Right: Actions */}
+            <div className="flex items-center justify-end gap-3">
+              <Link
+                href="/#download"
+                className="hidden md:inline-flex items-center justify-center bg-white text-[#4d046a] font-bold px-7 h-[46px] rounded-full text-[15px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.2)] hover:scale-[1.03] active:scale-95 transition-all duration-300 whitespace-nowrap"
+              >
+                Get App
+              </Link>
+
+              {/* Mobile menu toggle */}
+              <button
+                className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
+                onClick={() => setMobileOpen(!mobileOpen)}
+                aria-label="Toggle menu"
+              >
+                <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
+              </button>
+            </div>
           </div>
-        </div>
-      )}
-    </nav>
+        </nav>
+
+        {/* Mobile Drawer */}
+        {mobileOpen && (
+          <div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-gradient-to-b from-[#5A087B] to-[#3A044F] border border-white/10 rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md p-4 md:hidden">
+            <div className="flex flex-col gap-2">
+              {NAV_LINKS.map((link) => {
+                const isActive = pathname === link.href;
+                return (
+                  <Link
+                    key={link.label}
+                    href={link.href}
+                    className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
+                      isActive
+                        ? "bg-white/10 text-white"
+                        : "text-white/85 hover:text-white hover:bg-white/5"
+                    }`}
+                    onClick={() => setMobileOpen(false)}
+                  >
+                    {link.label}
+                    {isActive && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
   );
 }
+