footer section fix

package-lock.json

@@ -12,7 +12,8 @@
         "next": "16.2.9",
         "puppeteer-core": "^24.43.1",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-icons": "^5.6.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -6468,6 +6469,15 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -13,7 +13,8 @@
     "next": "16.2.9",
     "puppeteer-core": "^24.43.1",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/about/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
@@ -16,33 +17,42 @@ const STRATEGY_CARDS = [
     title: "Our Mission",
     descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
     icon: "target",
-    color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
+    iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
+    image: "/images/nearle-how/how-storefront.webp",
+    imageAlt: "3D local store storefront with purple awning",
+    imgFit: "object-contain object-bottom"
   },
   {
     title: "Our Vision",
-    descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
+    descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
     icon: "visibility",
-    color: "bg-secondary/5 text-secondary border-secondary/10"
+    iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
+    image: "/images/nearle-merchant/local-map.webp",
+    imageAlt: "Nearle local neighbourhood map",
+    imgFit: "object-cover object-center"
   },
   {
     title: "Why Nearle",
-    descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
+    descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
     icon: "help_outline",
-    color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
+    iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
+    image: "/images/app-mockup.png",
+    imageAlt: "Nearle app on a smartphone",
+    imgFit: "object-contain object-bottom"
   }
 ];
 
 const LOCAL_COUNTERS = [
-  { count: "100+", label: "Customers Served", icon: "people" },
+  { count: "Local", label: "Customer First Always", icon: "people" },
-  { count: "100+", label: "Active Businesses", icon: "store" },
+  { count: "Verified", label: "Business Partners", icon: "store" },
-  { count: "100+", label: "Active Neighborhoods", icon: "location_city" }
+  { count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
 ];
 
 const HERO_STATS = [
   { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
-  { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
-  { title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
+  { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
-  { title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
+  { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
 ];
 
 export default function AboutPage() {
@@ -78,13 +88,13 @@ export default function AboutPage() {
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
               <a
                 href="#story-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
                 Our Story
               </a>
               <Link
                 href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Join Our Journey
               </Link>
@@ -110,7 +120,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Intro Description Block ─── */}
-      <section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
+      <section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
         <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
           Our Platform
         </span>
@@ -123,29 +133,73 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+      <section
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
-          {STRATEGY_CARDS.map((card) => (
+        style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
-            <div
+      >
-              key={card.title}
+        <div
-              className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
+          className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
-            >
+          style={{ maxWidth: 1800 }}
-              <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 shrink-0 ${card.color}`}>
+        >
-                <MaterialIcon icon={card.icon} size={22} />
+          <div
+            className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
+            style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
+          >
+            {STRATEGY_CARDS.map((card) => (
+              <div
+                key={card.title}
+                className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
+                style={{ borderRadius: 32 }}
+              >
+                {/* Content: icon, heading, description */}
+                <div
+                  className="flex-none"
+                  style={{ padding: "clamp(28px, 2.8vw, 44px)", paddingBottom: 0 }}
+                >
+                  <div
+                    className={`flex items-center justify-center rounded-full border shrink-0 ${card.iconClass}`}
+                    style={{ width: 72, height: 72 }}
+                  >
+                    <MaterialIcon icon={card.icon} size={28} />
+                  </div>
+                  <h3
+                    className="font-display font-black text-[#16001D]"
+                    style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
+                  >
+                    {card.title}
+                  </h3>
+                  <p
+                    className="text-[#5E5866]"
+                    style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
+                  >
+                    {card.descr}
+                  </p>
+                </div>
+                {/* Image: inner rounded container with consistent spacing on all sides */}
+                <div
+                  className="flex-1 relative overflow-hidden bg-[#F4ECFA]/40"
+                  style={{
+                    margin: "clamp(20px, 2vw, 32px) clamp(24px, 2.2vw, 36px) clamp(20px, 2vw, 28px)",
+                    borderRadius: 24,
+                    minHeight: 200
+                  }}
+                >
+                  <Image
+                    src={card.image}
+                    alt={card.imageAlt}
+                    fill
+                    sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
+                    className={card.imgFit}
+                  />
+                </div>
               </div>
-              <h3 className="font-display text-lg font-black text-[#16001D] mb-3">
+            ))}
-                {card.title}
+          </div>
-              </h3>
-              <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
-                {card.descr}
-              </p>
-            </div>
-          ))}
         </div>
       </section>
 
       {/* ─── Global Stats counters ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {LOCAL_COUNTERS.map((c) => (
             <div key={c.label} className="flex flex-col items-center text-center">
@@ -162,7 +216,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Brand Building Banner ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
         <div className="max-w-4xl mx-auto">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
             Don&apos;t miss the opportunity
@@ -186,7 +240,7 @@ export default function AboutPage() {
               className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
             >
               <MaterialIcon icon="download" size={18} />
-              <span>Download App</span>
+              <span>Explore Nearle</span>
             </Link>
           </div>
         </div>

src/app/businesses/page.tsx

@@ -1,77 +1,19 @@
-"use client";
-
 import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
+import type { Metadata } from "next";
 
-const PROCESS_STEPS = [
+export const metadata: Metadata = {
-  {
+  title: "Nearle for Business",
-    step: "01",
+  description:
-    title: "Get Online",
+    "Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales — all from one simple hyperlocal platform.",
-    descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
+};
-    icon: "storefront",
-    color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
-  },
-  {
-    step: "02",
-    title: "Get Noticed",
-    descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
-    icon: "campaign",
-    color: "bg-secondary/5 text-secondary border-secondary/10"
-  },
-  {
-    step: "03",
-    title: "Get Simplified",
-    descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
-    icon: "auto_awesome",
-    color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
-  }
-];
 
-const FEATURES = [
-  {
-    title: "Direct Customer Access",
-    descr: "Build direct relationships and trust with residents in your immediate vicinity."
-  },
-  {
-    title: "Become a Partner",
-    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
-  },
-  {
-    title: "Build Your Brand",
-    descr: "Brand your business on Nearle and reach out to your community with ease."
-  },
-  {
-    title: "Huge Opportunity",
-    descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
-  },
-  {
-    title: "Delight Your Customers",
-    descr: "Delight customers in the neighborhood with a personalized online shopping experience."
-  },
-  {
-    title: "Unique Model",
-    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
-  },
-  {
-    title: "Reach Right Audience",
-    descr: "We target your ideal customers — people in your neighborhood search for what you offer."
-  },
-  {
-    title: "Increase Your Customers",
-    descr: "Increase walk-in and online customers by targeting local demand."
-  }
-];
-
-const STATS = [
-  { value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
-  { value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
-  { value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
-  { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
-];
 
 const HERO_BENEFITS = [
   { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
@@ -80,6 +22,111 @@ const HERO_BENEFITS = [
   { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
 ];
 
+function PhoneMapVisual() {
+  return (
+    // Single phone frame — no outer wrapper needed, no floating pills
+    <div
+      className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
+      style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
+    >
+      {/* Status bar */}
+      <div className="flex items-center justify-between px-3 pt-2.5 pb-1">
+        <span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
+        <div className="flex items-center gap-0.5">
+          {[4, 6, 8, 10].map((h) => (
+            <span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
+          ))}
+        </div>
+      </div>
+
+      {/* Search bar */}
+      <div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
+        <svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
+          <circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
+          <path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
+        </svg>
+        <span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
+        <svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
+          <path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
+        </svg>
+      </div>
+
+      {/* Map */}
+      <div
+        className="relative mx-2.5 overflow-hidden rounded-2xl"
+        style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
+      >
+        {/* Street grid */}
+        <div className="absolute inset-0" style={{
+          backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
+          backgroundSize: "16px 16px",
+        }} />
+        {/* Subtle glow under main pin */}
+        <div className="absolute rounded-full bg-[#6330D6]/10"
+          style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
+
+        {/* Large center pin */}
+        <svg className="absolute" aria-hidden="true"
+          style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
+          width="24" height="30" viewBox="0 0 16 20" fill="none">
+          <path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
+          <circle cx="8" cy="8.6" r="3.2" fill="white"/>
+        </svg>
+        {/* Green pin — top-right */}
+        <svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
+          width="13" height="16" viewBox="0 0 8 10" fill="none">
+          <path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
+          <circle cx="4" cy="4" r="1.5" fill="white"/>
+        </svg>
+        {/* Purple pin — upper-left */}
+        <svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
+          width="13" height="16" viewBox="0 0 8 10" fill="none">
+          <path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
+          <circle cx="4" cy="4" r="1.5" fill="white"/>
+        </svg>
+        {/* Green pin — lower-left */}
+        <svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
+          width="13" height="16" viewBox="0 0 8 10" fill="none">
+          <path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
+          <circle cx="4" cy="4" r="1.5" fill="white"/>
+        </svg>
+        {/* Purple pin — lower-right */}
+        <svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
+          width="13" height="16" viewBox="0 0 8 10" fill="none">
+          <path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
+          <circle cx="4" cy="4" r="1.5" fill="white"/>
+        </svg>
+      </div>
+
+      {/* Store preview card — bottom sheet inside phone */}
+      <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
+        {/* Store thumbnail */}
+        <div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
+          style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
+          <svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
+            <path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
+            <rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
+          </svg>
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
+          <div className="mt-1 flex items-center gap-1">
+            <span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
+            <span className="text-[7.5px] text-[#5E5866]">•</span>
+            <span className="text-[7.5px] text-[#5E5866]">4.8</span>
+            <span className="text-[7.5px] leading-none">⭐</span>
+            <span className="text-[7.5px] text-[#5E5866]">•</span>
+            <span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
+          </div>
+        </div>
+        <svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
+          <path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
 export default function BusinessesPage() {
   const collageCards = [
     { text: "Nearby Customers", icon: "people" },
@@ -111,17 +158,16 @@ export default function BusinessesPage() {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-              <a
+              {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
-              >
-                List Your Store
-              </a>
               <Link
                 href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
+              >
+                List Your Store
+              </Link>
+              <Link
+                href="/contact"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Explore Solutions
               </Link>
@@ -147,7 +193,7 @@ export default function BusinessesPage() {
       </section>
 
       {/* ─── Intro Highlight Banner ─── */}
-      <section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
+      <section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
         <div className="max-w-2xl text-left">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
             Together, we grow
@@ -170,134 +216,146 @@ export default function BusinessesPage() {
         </div>
       </section>
 
-      {/* ─── Timeline / Core Process Steps ─── */}
+      {/* ─── Build Your Neighborhood Brand ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
+      <section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
-        <div className="text-center mb-12">
+        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
-          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+          {/* Header */}
-            How it works
+          <div className="text-center mb-10 lg:mb-12 xl:mb-10">
-          </span>
+            <span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
-          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
+              How it works
-            Build Your Neighborhood Brand
-          </h2>
-          <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
-            Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {PROCESS_STEPS.map((ps) => (
-            <div
-              key={ps.step}
-              className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
-            >
-              <div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
-                {ps.step}
-              </div>
-              <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
-                <MaterialIcon icon={ps.icon} size={22} />
-              </div>
-              <h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
-                {ps.title}
-              </h3>
-              <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
-                {ps.descr}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* ─── Grid Stats & Value Prop ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
-        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
-          {/* Left side: features block (7 cols) */}
-          <div className="lg:col-span-7 text-left">
-            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
-              Our features
             </span>
-            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
+            <h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
-              Move Your Business Forward
+              Build Your Neighborhood Brand
             </h2>
-            <p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
+            <p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
-              Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
+              Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
             </p>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-              {FEATURES.map((feat) => (
-                <div key={feat.title} className="flex gap-3">
-                  <div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
-                    <MaterialIcon icon="check" size={14} className="font-black" />
-                  </div>
-                  <div>
-                    <h4 className="font-display text-sm font-black text-[#16001D] mb-1">
-                      {feat.title}
-                    </h4>
-                    <p className="text-xs text-[#5E5866] leading-relaxed">
-                      {feat.descr}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
           </div>
 
-          {/* Right side: stats quadrant (5 cols) */}
+          {/* Cards grid */}
-          <div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
-            {STATS.map((stat, i) => (
+            {/* Card 1 - Get Online */}
-              <div
+            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
-                key={stat.label}
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
-                className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
+                01
-                  i % 2 === 1 ? "lg:mt-4" : ""
+              </span>
-                }`}
+              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
-              >
+                <MaterialIcon icon="storefront" size={28} />
-                <div className="flex items-center justify-between">
+              </div>
-                  <div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
+              <div className="relative z-10 mt-6 max-w-[260px]">
-                    stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
+                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
-                  }`}>
+                  Get Online
-                    <MaterialIcon icon={stat.icon} size={18} />
+                </h3>
-                  </div>
+                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
-                </div>
+                  Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
-                <div className="mt-6">
+                </p>
-                  <p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
+              </div>
-                  <p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
+              <div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center">
-                    stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
+                <div className="relative h-[150px] w-[220px] lg:h-[175px] lg:w-[255px]">
-                  }`}>
+                  <Image
-                    {stat.label}
+                    src="/images/nearle-how/how-storefront.webp"
-                  </p>
+                    alt="Local shop storefront with purple awning and now online board"
+                    fill
+                    sizes="(max-width: 768px) 50vw, 25vw"
+                    className="object-contain object-center"
+                  />
                 </div>
               </div>
-            ))}
+            </article>
+
+            {/* Card 2 - Get Noticed */}
+            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
+                02
+              </span>
+              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
+                <MaterialIcon icon="campaign" size={28} />
+              </div>
+              <div className="relative z-10 mt-6 max-w-[260px]">
+                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                  Get Noticed
+                </h3>
+                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
+                  Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
+                </p>
+              </div>
+              <div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
+                <PhoneMapVisual />
+              </div>
+            </article>
+
+            {/* Card 3 - Get Simplified */}
+            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
+                03
+              </span>
+              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
+                <MaterialIcon icon="auto_awesome" size={28} />
+              </div>
+              <div className="relative z-10 mt-6 max-w-[260px]">
+                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                  Get Simplified
+                </h3>
+                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
+                  Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
+                </p>
+              </div>
+              <div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center gap-4">
+                <div className="hidden sm:flex flex-col gap-2 pb-2">
+                  {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
+                    <div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm whitespace-nowrap">
+                      {chip}
+                    </div>
+                  ))}
+                </div>
+                <div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
+                  <Image
+                    src="/images/nearle-how/how-grocery-bag.webp"
+                    alt="Nearle grocery bag filled with vegetables and packaged products"
+                    fill
+                    sizes="(max-width: 768px) 50vw, 25vw"
+                    className="object-contain object-center"
+                  />
+                </div>
+              </div>
+            </article>
           </div>
         </div>
       </section>
 
+      {/* ─── Our Features / Business Grid ─── */}
+      <BusinessFeaturesGrid />
+
       {/* ─── Join/Download Call to Action ─── */}
-      <section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white relative">
+      <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
+        <div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
-        <div className="relative z-10 max-w-2xl mx-auto">
+          <div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center relative">
-          <h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
-            Nearle is Essential for Business Growth
+            <div className="relative z-10 max-w-2xl mx-auto">
-          </h2>
+              <h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
-          <p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
+                Nearle is Essential for Business Growth
-            Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
+              </h2>
-          </p>
+              <p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
-          <div className="flex flex-wrap justify-center gap-3.5">
+                Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
-            <a
+              </p>
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+              <div className="flex flex-wrap justify-center gap-3.5">
-              target="_blank"
+                {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-              rel="noopener noreferrer"
+                <Link
-              className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
+                  href="/contact"
-            >
+                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
-              <MaterialIcon icon="bolt" size={18} />
+                >
-              <span>Register as Partner</span>
+                  <MaterialIcon icon="bolt" size={18} />
-            </a>
+                  <span>Register Interest</span>
-            <Link
+                </Link>
-              href="/contact"
+                <Link
-              className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
+                  href="/contact"
-            >
+                  className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
-              <MaterialIcon icon="phone" size={18} />
+                >
-              <span>Contact Experts</span>
+                  <MaterialIcon icon="phone" size={18} />
-            </Link>
+                  <span>Contact Experts</span>
+                </Link>
+              </div>
+            </div>
           </div>
         </div>
       </section>

src/app/contact/page.tsx

@@ -13,7 +13,7 @@ export default function ContactPage() {
   return (
     <PremiumPageShell>
       {/* ─── Contact Section ─── */}
-      <section className="relative px-6 py-12 md:px-12 lg:px-16 border-b border-[#6330D6]/10">
+      <section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 border-b border-[#6330D6]/10">
         
         {/* Subtle Map Grid/Location decoration behind left content */}
         <div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
@@ -101,7 +101,7 @@ export default function ContactPage() {
       </section>
 
       {/* ─── Map Section ─── */}
-      <section className="p-6 md:p-8 bg-[#FAF7FD]">
+      <section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
         <div className="relative w-full h-[400px] rounded-2xl overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
           <iframe
             title="Nearle Coimbatore Location Map"

src/app/globals.css

@@ -141,12 +141,12 @@
 /* ─── Base Styles ─── */
 html {
   scroll-behavior: smooth;
-  background: #E8DCF2;
+  background: #ffffff;
 }
 
 body {
   min-height: 100vh;
-  background: #E8DCF2 !important;
+  background: #ffffff !important;
   color: var(--on-surface);
   font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
@@ -1245,8 +1245,172 @@ body {
   }
 }
 
+/* ─── Global Spacing & Layout System ─── */
+.page-container {
+  width: min(100% - 48px, 1280px);
+  margin-inline: auto;
+}
 
+@media (min-width: 1024px) {
+  .page-container {
+    width: min(100% - 128px, 1440px);
+  }
+}
 
+.section {
+  padding-block: 88px;
+}
 
+@media (min-width: 1280px) {
+  .section { padding-block: 64px; }
+}
 
+@media (min-width: 1536px) {
+  .section { padding-block: 56px; }
+}
 
+.section-tight {
+  padding-block: 56px;
+}
+
+@media (min-width: 1280px) {
+  .section-tight { padding-block: 40px; }
+}
+
+@media (min-width: 1536px) {
+  .section-tight { padding-block: 36px; }
+}
+
+.section-soft {
+  background: #faf7ff;
+}
+
+main {
+  background: #ffffff;
+  overflow-x: hidden;
+}
+
+.premium-footer-shell {
+  width: calc(100% - 24px);
+  max-width: 1800px;
+  margin: 32px auto 0;
+}
+
+@media (min-width: 768px) {
+  .premium-footer-shell {
+    width: calc(100% - 40px);
+  }
+}
+
+@media (min-width: 1024px) {
+  .premium-footer-shell {
+    width: calc(100% - 64px);
+  }
+}
+
+@media (min-width: 1440px) {
+  .premium-footer-shell {
+    width: calc(100% - 96px);
+  }
+}
+
+/* ─── Feature Cards (BusinessSection) ─── */
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+@media (min-width: 768px) {
+  .feature-card {
+    padding: 24px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .feature-card {
+    padding: 32px;
+  }
+}
+
+.feature-card__top {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  column-gap: 14px;
+  align-items: start;
+}
+
+@media (min-width: 640px) {
+  .feature-card__top {
+    grid-template-columns: 72px minmax(0, 1fr);
+    column-gap: 20px;
+  }
+}
+
+.feature-card__icon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .feature-card__icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+
+.feature-card__icon span {
+  font-size: 24px !important;
+}
+
+@media (min-width: 640px) {
+  .feature-card__icon span {
+    font-size: 32px !important;
+  }
+}
+
+.feature-card__content {
+  min-width: 0;
+  max-width: none;
+}
+
+.feature-card h3 {
+  margin: 0;
+  max-width: 100%;
+  font-family: var(--font-display), sans-serif;
+  font-weight: 900;
+  font-size: clamp(20px, 2vw, 32px);
+  line-height: 1.12;
+  letter-spacing: -0.03em;
+  color: var(--brand-dark);
+}
+
+@media (min-width: 640px) {
+  .feature-card h3 {
+    font-size: clamp(24px, 2vw, 32px);
+  }
+}
+
+.feature-card p {
+  margin-top: 12px;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--on-surface-variant);
+}
+
+@media (min-width: 640px) {
+  .feature-card p {
+    margin-top: 16px;
+    font-size: 17px;
+  }
+}
+
+.feature-card__image {
+  margin-top: 24px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 1.25rem;
+  background-color: var(--brand-accent-light);
+}

src/app/layout.tsx

@@ -1,20 +1,8 @@
 import type { Metadata, Viewport } from "next";
-import { Jost } from "next/font/google";
 import "./globals.css";
 
-const jost = Jost({
+const jost = { variable: "font-display" };
-  subsets: ["latin"],
+const jostBody = { variable: "font-body" };
-  weight: ["400", "600", "700", "800"],
-  variable: "--font-display",
-  display: "swap",
-});
-
-const jostBody = Jost({
-  subsets: ["latin"],
-  weight: ["400", "600", "700"],
-  variable: "--font-body",
-  display: "swap",
-});
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://nearle.in"),
@@ -91,6 +79,10 @@ export default function RootLayout({
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
+          rel="stylesheet"
+        />
       </head>
       <body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
         {children}

src/app/people/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,11 +5,18 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Nearle for People",
+  description:
+    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
+};
 
 const OFFERINGS = [
   {
     title: "Elegant Living",
-    tag: "Join the #1 Neighbourhood App",
+    tag: "Your Neighbourhood App",
     descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
     icon: "local_florist",
     color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
@@ -93,10 +98,10 @@ const OFFERINGS = [
 ];
 
 const LOCAL_STATS = [
-  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
+  { count: "Local", label: "Verified Restaurants", icon: "restaurant" },
-  { count: "100+", label: "Green Grocers", icon: "local_mall" },
+  { count: "Fresh", label: "Green Grocers", icon: "local_mall" },
-  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
+  { count: "Ready", label: "Home Stores", icon: "shopping_cart" },
-  { count: "100+", label: "Service Providers", icon: "handyman" }
+  { count: "Trusted", label: "Service Providers", icon: "handyman" }
 ];
 
 const APP_BENEFITS = [
@@ -133,10 +138,10 @@ const APP_BENEFITS = [
 ];
 
 const HERO_STATS = [
-  { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
   { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
-  { title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
+  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
-  { title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
+  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
 ];
 
 export default function PeoplePage() {
@@ -172,13 +177,13 @@ export default function PeoplePage() {
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
               <a
                 href="#download-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
                 Get the App
               </a>
               <Link
                 href="/"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Explore Stores
               </Link>
@@ -204,8 +209,8 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── Bento Grid of Offerings ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
-        <div className="mb-12">
+        <div className="mb-10 xl:mb-8">
           <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
             What we offer
           </span>
@@ -221,13 +226,13 @@ export default function PeoplePage() {
           {OFFERINGS.map((offering) => (
             <article
               key={offering.title}
-              className="experience-card"
+              className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
             >
               <Image
                 src={offering.image}
                 alt={offering.title}
                 fill
-                sizes="(max-width: 1023px) 100vw, 33vw"
+                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
                 className="experience-card__image"
               />
               <div className="experience-card__overlay" />
@@ -244,13 +249,13 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── Localized Stats Block ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
-        <div className="mb-12">
+        <div className="mb-10 xl:mb-8">
           <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
             Nearle Network
           </span>
           <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
-            Join the #1 Neighbourhood App
+            The Neighbourhood App
           </h2>
           <p className="text-xs md:text-sm text-[#5E5866] mt-2">
             Bringing local stores to your doorstep instantly.
@@ -276,7 +281,8 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="p-8 md:p-12 lg:p-16 relative text-center bg-gradient-to-br from-[#16001D] to-[#25002F] text-white">
+      <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
+      <section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">
         {/* Subtle glow layers */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
         
@@ -304,14 +310,14 @@ export default function PeoplePage() {
                 <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
                   <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
                   <div className="text-left leading-tight">
-                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
+                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
                     <div className="text-sm font-black text-white">App Store</div>
                   </div>
                 </div>
                 <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
                   <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
                   <div className="text-left leading-tight">
-                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
+                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
                     <div className="text-sm font-black text-white">Google Play</div>
                   </div>
                 </div>
@@ -491,7 +497,7 @@ export default function PeoplePage() {
           <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
             {APP_BENEFITS.map((b) => (
               <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
-                <div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
+                <div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
                   <MaterialIcon icon={b.icon} size={16} />
                 </div>
                 <div>
@@ -506,20 +512,21 @@ export default function PeoplePage() {
             <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
               <MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
               <div className="text-left leading-none">
-                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
+                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                 <div className="text-xs font-black text-white">App Store</div>
               </div>
             </div>
             <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
               <MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
               <div className="text-left leading-none">
-                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
+                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                 <div className="text-xs font-black text-white">Google Play</div>
               </div>
             </div>
           </div>
         </div>
       </section>
+      </section>
     </PremiumPageShell>
   );
 }

src/components/businesses/BusinessFeaturesGrid.tsx

@@ -0,0 +1,552 @@
+"use client";
+
+import React from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+// ─── Feature SVG Illustrations ───────────────────────────────────────────────
+// Flat vector style · Nearle brand palette · no text inside SVGs
+
+function DirectAccessSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Location pin top-center */}
+      <path d="M68 4C64.1 4 60 7.4 60 12.6C60 18.6 68 28 68 28C68 28 76 18.6 76 12.6C76 7.4 71.9 4 68 4Z" fill="#6330D6"/>
+      <circle cx="68" cy="12.6" r="3.5" fill="white"/>
+      {/* Left person – customer (purple) */}
+      <circle cx="34" cy="44" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      <circle cx="34" cy="40" r="5" fill="#6330D6" opacity="0.55"/>
+      <path d="M20 76Q20 60 34 60Q48 60 48 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      {/* Right person – merchant (green) */}
+      <circle cx="102" cy="44" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
+      <circle cx="102" cy="40" r="5" fill="#22C55E" opacity="0.55"/>
+      {/* Green apron shape */}
+      <rect x="96" y="54" width="12" height="14" rx="3" fill="#22C55E" opacity="0.6"/>
+      <path d="M88 76Q88 60 102 60Q116 60 116 76" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
+      {/* Handshake connector */}
+      <circle cx="58" cy="64" r="6" fill="#6330D6" opacity="0.85"/>
+      <circle cx="78" cy="64" r="6" fill="#22C55E" opacity="0.85"/>
+      <path d="M58 64Q68 59 78 64" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" opacity="0.25"/>
+    </svg>
+  );
+}
+
+function PartnerSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Puzzle piece 1 – purple */}
+      <path d="M14 40L14 78L58 78L58 66Q70 66 70 58Q70 50 58 50L58 40Z" fill="#6330D6" opacity="0.88"/>
+      <path d="M58 50Q64 50 64 58Q64 66 58 66" fill="#F5F3FF"/>
+      {/* Puzzle piece 2 – lavender */}
+      <path d="M78 40L78 50Q66 50 66 58Q66 66 78 66L78 78L122 78L122 40Z" fill="#A78BFA" opacity="0.82"/>
+      <path d="M78 50Q72 50 72 58Q72 66 78 66" fill="#F5F3FF"/>
+      {/* Top-left avatar */}
+      <circle cx="34" cy="24" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      <circle cx="34" cy="20" r="4.5" fill="#6330D6" opacity="0.45"/>
+      <path d="M25 33Q25 28 34 28Q43 28 43 33" fill="#6330D6" opacity="0.35"/>
+      {/* Top-right avatar */}
+      <circle cx="100" cy="24" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
+      <circle cx="100" cy="20" r="4.5" fill="#22C55E" opacity="0.45"/>
+      <path d="M91 33Q91 28 100 28Q109 28 109 33" fill="#22C55E" opacity="0.35"/>
+    </svg>
+  );
+}
+
+function BrandSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Storefront body */}
+      <rect x="20" y="42" width="76" height="48" rx="3" fill="white" stroke="#E9D5FF" strokeWidth="1.5"/>
+      {/* Purple awning */}
+      <rect x="14" y="34" width="88" height="14" rx="4" fill="#6330D6"/>
+      <rect x="22" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
+      <rect x="36" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
+      <rect x="50" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
+      <rect x="64" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
+      <rect x="78" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
+      {/* Roof line */}
+      <path d="M12 36L58 16L104 36" stroke="#6330D6" strokeWidth="1.5" fill="none" opacity="0.45"/>
+      {/* Door */}
+      <rect x="49" y="64" width="18" height="26" rx="3" fill="#EDE9FE"/>
+      <circle cx="64" cy="77" r="1.5" fill="#6330D6" opacity="0.5"/>
+      {/* Windows */}
+      <rect x="24" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
+      <rect x="76" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
+      {/* Megaphone right */}
+      <path d="M108 30L118 24L118 50L108 44Z" fill="#F59E0B" opacity="0.82"/>
+      <rect x="104" y="34" width="6" height="8" rx="2" fill="#F59E0B"/>
+      {/* Signal arcs */}
+      <path d="M118 32Q126 30 128 37Q126 44 118 42" stroke="#F59E0B" strokeWidth="1.5" fill="none" strokeDasharray="2.5 2" opacity="0.7"/>
+    </svg>
+  );
+}
+
+function OpportunitySVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Ascending bars */}
+      <rect x="10" y="62" width="20" height="26" rx="3" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
+      <rect x="38" y="48" width="20" height="40" rx="3" fill="#A78BFA"/>
+      <rect x="66" y="32" width="20" height="56" rx="3" fill="#6330D6"/>
+      {/* Curved green arrow */}
+      <path d="M10 62Q52 20 100 10" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
+      <path d="M91 6L103 10L95 20" fill="#22C55E"/>
+      {/* Gold coin */}
+      <circle cx="116" cy="72" r="17" fill="#FEF3C7"/>
+      <circle cx="116" cy="72" r="12" fill="#FDE68A"/>
+      <circle cx="116" cy="72" r="9" fill="#FCD34D"/>
+      <text x="116" y="77" textAnchor="middle" fontSize="11" fontWeight="bold" fill="#78350F">₹</text>
+      {/* Baseline */}
+      <line x1="8" y1="88" x2="90" y2="88" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
+    </svg>
+  );
+}
+
+function DelightSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Person body */}
+      <circle cx="44" cy="26" r="13" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      <circle cx="44" cy="22" r="5" fill="#6330D6" opacity="0.5"/>
+      <path d="M28 76Q28 56 44 56Q60 56 60 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      {/* Phone in hand */}
+      <rect x="53" y="44" width="14" height="22" rx="3" fill="#6330D6" opacity="0.82"/>
+      <rect x="55" y="46" width="10" height="16" rx="2" fill="white" opacity="0.55"/>
+      {/* Shopping bag */}
+      <rect x="76" y="52" width="32" height="28" rx="4" fill="#F5F3FF" stroke="#6330D6" strokeWidth="1.5"/>
+      <path d="M82 52Q82 45 92 45Q102 45 102 52" stroke="#6330D6" strokeWidth="1.5" fill="none"/>
+      <line x1="76" y1="63" x2="108" y2="63" stroke="#6330D6" strokeWidth="1" opacity="0.3"/>
+      {/* Heart bubble */}
+      <circle cx="98" cy="24" r="14" fill="white" stroke="#EDE9FE" strokeWidth="1.5"/>
+      <path d="M98 31L90 23Q90 17 95 17Q98 17 98 20Q98 17 101 17Q106 17 106 23Z" fill="#EF4444" opacity="0.82"/>
+      {/* Star row */}
+      <text x="62" y="94" fontSize="11" fill="#F59E0B">★★★★★</text>
+    </svg>
+  );
+}
+
+function UniqueModelSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Map area */}
+      <rect x="10" y="8" width="116" height="78" rx="8" fill="#DBEAFE" opacity="0.5"/>
+      {/* Main roads */}
+      <path d="M10 48L126 48" stroke="white" strokeWidth="7"/>
+      <path d="M68 8L68 86" stroke="white" strokeWidth="7"/>
+      {/* Secondary roads */}
+      <path d="M10 28Q40 28 40 48" stroke="white" strokeWidth="5"/>
+      <path d="M96 48Q96 68 126 72" stroke="white" strokeWidth="5"/>
+      {/* Purple pin (top-left block) */}
+      <path d="M36 34C33 34 30 36.7 30 40.2C30 45 36 53 36 53C36 53 42 45 42 40.2C42 36.7 39 34 36 34Z" fill="#6330D6"/>
+      <circle cx="36" cy="40" r="3" fill="white"/>
+      {/* Green pin (bottom-right block) */}
+      <path d="M96 58C93 58 90 60.7 90 64.2C90 69 96 77 96 77C96 77 102 69 102 64.2C102 60.7 99 58 96 58Z" fill="#22C55E"/>
+      <circle cx="96" cy="64" r="3" fill="white"/>
+      {/* Store badge at purple pin */}
+      <rect x="50" y="16" width="34" height="24" rx="3" fill="white" stroke="#6330D6" strokeWidth="1.2"/>
+      <rect x="50" y="15" width="34" height="9" rx="2" fill="#6330D6"/>
+      <rect x="60" y="26" width="14" height="14" rx="2" fill="#EDE9FE"/>
+    </svg>
+  );
+}
+
+function AudienceSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Bullseye rings */}
+      <circle cx="68" cy="52" r="40" fill="#EDE9FE" opacity="0.3"/>
+      <circle cx="68" cy="52" r="28" fill="#EDE9FE" opacity="0.55"/>
+      <circle cx="68" cy="52" r="17" fill="#A78BFA" opacity="0.5"/>
+      <circle cx="68" cy="52" r="9" fill="#6330D6"/>
+      <circle cx="68" cy="52" r="3.5" fill="white"/>
+      {/* Green arrow */}
+      <path d="M110 8L70 49" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
+      <path d="M103 4L114 8L109 19" fill="#22C55E"/>
+      {/* Four corner avatars */}
+      <circle cx="14" cy="22" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
+      <circle cx="14" cy="18" r="4" fill="#6330D6" opacity="0.4"/>
+      <circle cx="122" cy="20" r="11" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.2"/>
+      <circle cx="122" cy="16" r="4" fill="#22C55E" opacity="0.4"/>
+      <circle cx="12" cy="80" r="11" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.2"/>
+      <circle cx="12" cy="76" r="4" fill="#F59E0B" opacity="0.4"/>
+      <circle cx="122" cy="80" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
+      <circle cx="122" cy="76" r="4" fill="#6330D6" opacity="0.4"/>
+    </svg>
+  );
+}
+
+function IncreaseSVG() {
+  return (
+    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      {/* Small figure */}
+      <circle cx="22" cy="52" r="10" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      <circle cx="22" cy="48" r="4" fill="#6330D6" opacity="0.4"/>
+      <path d="M12 80Q12 66 22 66Q32 66 32 80" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      {/* Medium figure */}
+      <circle cx="60" cy="44" r="13" fill="#A78BFA" opacity="0.72"/>
+      <circle cx="60" cy="39" r="5.5" fill="#7C3AED" opacity="0.55"/>
+      <path d="M46 80Q46 62 60 62Q74 62 74 80" fill="#A78BFA" opacity="0.72"/>
+      {/* Large figure */}
+      <circle cx="106" cy="34" r="17" fill="#6330D6" opacity="0.78"/>
+      <circle cx="106" cy="28" r="7" fill="#4C1D95" opacity="0.55"/>
+      <path d="M86 80Q86 54 106 54Q126 54 126 80" fill="#6330D6" opacity="0.78"/>
+      {/* Growth arc */}
+      <path d="M16 44Q52 14 106 18" stroke="#22C55E" strokeWidth="2" strokeLinecap="round" strokeDasharray="4 3"/>
+      {/* Plus badge */}
+      <rect x="124" y="16" width="10" height="2.5" rx="1.2" fill="#22C55E"/>
+      <rect x="127.75" y="12.25" width="2.5" height="10" rx="1.2" fill="#22C55E"/>
+    </svg>
+  );
+}
+
+// ─── Card SVG Illustrations ───────────────────────────────────────────────────
+
+function MoreCardSVG() {
+  return (
+    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
+      {/* Rising bars */}
+      <rect x="14" y="110" width="32" height="64" rx="5" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
+      <rect x="58" y="86" width="32" height="88" rx="5" fill="#A78BFA"/>
+      <rect x="102" y="56" width="32" height="118" rx="5" fill="#6330D6"/>
+      {/* Curved green arrow */}
+      <path d="M14 108Q72 42 152 22" stroke="#22C55E" strokeWidth="3" strokeLinecap="round"/>
+      <path d="M143 16L157 22L147 34" fill="#22C55E"/>
+      {/* Gold coin */}
+      <circle cx="182" cy="134" r="32" fill="#FEF3C7"/>
+      <circle cx="182" cy="134" r="25" fill="#FDE68A"/>
+      <circle cx="182" cy="134" r="18" fill="#FCD34D"/>
+      <text x="182" y="141" textAnchor="middle" fontSize="18" fontWeight="bold" fill="#78350F">₹</text>
+      {/* Decorative leaves */}
+      <ellipse cx="16" cy="162" rx="9" ry="14" fill="#22C55E" opacity="0.32" transform="rotate(-20 16 162)"/>
+      <ellipse cx="5" cy="158" rx="7" ry="11" fill="#22C55E" opacity="0.22" transform="rotate(-36 5 158)"/>
+      <line x1="8" y1="174" x2="138" y2="174" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
+    </svg>
+  );
+}
+
+function FastCardSVG() {
+  return (
+    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
+      {/* Speed lines */}
+      <line x1="4" y1="72" x2="52" y2="72" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
+      <line x1="2" y1="90" x2="46" y2="90" stroke="white" strokeWidth="2" opacity="0.16" strokeLinecap="round"/>
+      <line x1="4" y1="108" x2="50" y2="108" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
+      {/* Clipboard body */}
+      <rect x="52" y="14" width="96" height="114" rx="10" fill="white" opacity="0.96"/>
+      <rect x="74" y="8" width="52" height="18" rx="8" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
+      <circle cx="100" cy="8" r="5.5" fill="#7C3AED"/>
+      {/* Checklist row 1 – done */}
+      <circle cx="68" cy="48" r="6.5" fill="#22C55E"/>
+      <path d="M65 48L67.5 50.5L72.5 44.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <rect x="80" y="42" width="58" height="12" rx="4" fill="#EDE9FE"/>
+      <rect x="80" y="42" width="40" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
+      {/* Row 2 – done */}
+      <circle cx="68" cy="70" r="6.5" fill="#22C55E"/>
+      <path d="M65 70L67.5 72.5L72.5 66.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <rect x="80" y="64" width="58" height="12" rx="4" fill="#EDE9FE"/>
+      <rect x="80" y="64" width="48" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
+      {/* Row 3 – pending */}
+      <circle cx="68" cy="92" r="6.5" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.2"/>
+      <rect x="80" y="86" width="58" height="12" rx="4" fill="#EDE9FE"/>
+      <rect x="80" y="86" width="26" height="12" rx="4" fill="#A78BFA" opacity="0.4"/>
+      {/* Delivery boxes */}
+      <rect x="112" y="106" width="54" height="44" rx="6" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.5"/>
+      <rect x="122" y="88" width="50" height="36" rx="6" fill="#FDE68A" stroke="#F59E0B" strokeWidth="1.5"/>
+      <line x1="112" y1="128" x2="166" y2="128" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
+      <line x1="139" y1="106" x2="139" y2="150" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
+      <circle cx="147" cy="120" r="9" fill="#6330D6" opacity="0.82"/>
+      <text x="147" y="123.5" textAnchor="middle" fontSize="9.5" fontWeight="bold" fill="white">N</text>
+    </svg>
+  );
+}
+
+function EasyCardSVG() {
+  return (
+    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
+      {/* Laptop shell */}
+      <rect x="14" y="22" width="162" height="108" rx="9" fill="#F1F5F9" stroke="#E2E8F0" strokeWidth="1.5"/>
+      <rect x="22" y="30" width="146" height="92" rx="5" fill="white"/>
+      {/* Bottom base */}
+      <rect x="4" y="128" width="182" height="13" rx="6" fill="#E2E8F0"/>
+      <rect x="72" y="141" width="46" height="6" rx="3" fill="#D1D5DB"/>
+      {/* Screen rows */}
+      <rect x="34" y="44" width="126" height="10" rx="3" fill="#EDE9FE"/>
+      <rect x="34" y="44" width="90" height="10" rx="3" fill="#A78BFA" opacity="0.58"/>
+      <rect x="34" y="62" width="126" height="10" rx="3" fill="#EDE9FE"/>
+      <rect x="34" y="62" width="58" height="10" rx="3" fill="#6330D6" opacity="0.65"/>
+      <rect x="34" y="80" width="126" height="10" rx="3" fill="#EDE9FE"/>
+      <rect x="34" y="80" width="76" height="10" rx="3" fill="#A78BFA" opacity="0.45"/>
+      <rect x="34" y="98" width="126" height="10" rx="3" fill="#EDE9FE"/>
+      <rect x="34" y="98" width="44" height="10" rx="3" fill="#6330D6" opacity="0.38"/>
+      {/* Big green check badge */}
+      <circle cx="162" cy="108" r="36" fill="#DCFCE7" stroke="#22C55E" strokeWidth="2"/>
+      <circle cx="162" cy="108" r="27" fill="#22C55E"/>
+      <path d="M149 108L159 118L177 96" stroke="white" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"/>
+      {/* Small plant */}
+      <ellipse cx="20" cy="170" rx="8" ry="12" fill="#22C55E" opacity="0.32" transform="rotate(-15 20 170)"/>
+      <ellipse cx="9" cy="172" rx="6" ry="9" fill="#22C55E" opacity="0.22" transform="rotate(-30 9 172)"/>
+      <rect x="18" y="164" width="3" height="14" rx="1.5" fill="#16A34A" opacity="0.28"/>
+    </svg>
+  );
+}
+
+function SupportCardSVG() {
+  return (
+    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
+      {/* Headset arc */}
+      <path d="M42 108Q42 46 110 46Q178 46 178 108" stroke="#6330D6" strokeWidth="13" fill="none" strokeLinecap="round"/>
+      {/* Left ear cup */}
+      <rect x="24" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
+      <rect x="30" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
+      {/* Right ear cup */}
+      <rect x="162" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
+      <rect x="168" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
+      {/* Mic arm */}
+      <path d="M162 138Q186 138 190 164" stroke="#6330D6" strokeWidth="8" strokeLinecap="round" fill="none"/>
+      <circle cx="190" cy="166" r="10" fill="#6330D6"/>
+      {/* Chat bubble */}
+      <rect x="58" y="50" width="104" height="56" rx="14" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
+      <path d="M86 106L80 120L104 106" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5" strokeLinejoin="round"/>
+      {/* 24/7 label in bubble */}
+      <text x="110" y="87" textAnchor="middle" fontSize="26" fontWeight="900" fill="#6330D6">24/7</text>
+      {/* Three chat dots below */}
+      <circle cx="90" cy="160" r="7" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
+      <circle cx="110" cy="160" r="7" fill="#8B5CF6" opacity="0.55"/>
+      <circle cx="130" cy="160" r="7" fill="#6330D6" opacity="0.38"/>
+    </svg>
+  );
+}
+
+// ─── Section Data ──────────────────────────────────────────────────────────────
+
+const FEATURES = [
+  {
+    title: "Direct Customer Access",
+    descr: "Build direct relationships and trust with residents in your immediate vicinity.",
+    Illus: DirectAccessSVG,
+  },
+  {
+    title: "Become a Partner",
+    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs.",
+    Illus: PartnerSVG,
+  },
+  {
+    title: "Build Your Brand",
+    descr: "Brand your business on Nearle and reach out to your community with ease.",
+    Illus: BrandSVG,
+  },
+  {
+    title: "Huge Opportunity",
+    descr: "Unlock revenue opportunities and marketing strategies that will take your business further.",
+    Illus: OpportunitySVG,
+  },
+  {
+    title: "Delight Your Customers",
+    descr: "Delight customers in the neighborhood with a personalized online shopping experience.",
+    Illus: DelightSVG,
+  },
+  {
+    title: "Unique Model",
+    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs.",
+    Illus: UniqueModelSVG,
+  },
+  {
+    title: "Reach Right Audience",
+    descr: "We target your ideal customers — people in your neighborhood search for what you offer.",
+    Illus: AudienceSVG,
+  },
+  {
+    title: "Increase Your Customers",
+    descr: "Increase walk-in and online customers by targeting local demand.",
+    Illus: IncreaseSVG,
+  },
+];
+
+const CARDS = [
+  {
+    title: "More",
+    subtitle: "REVENUE FROM LOCAL REACH",
+    bg: "bg-white",
+    titleColor: "text-[#16001D]",
+    subtitleColor: "text-[#6330D6]/55",
+    iconName: "trending_up",
+    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
+    CardIllus: MoreCardSVG,
+    stagger: false,
+  },
+  {
+    title: "Fast",
+    subtitle: "RELIABLE ORDER FULFILLMENT",
+    bg: "bg-gradient-to-br from-[#5B21B6] to-[#6330D6]",
+    titleColor: "text-white",
+    subtitleColor: "text-white/65",
+    iconName: "groups",
+    iconBg: "bg-white/15 text-white",
+    CardIllus: FastCardSVG,
+    stagger: true,
+  },
+  {
+    title: "Easy",
+    subtitle: "SIMPLE TO START & MANAGE",
+    bg: "bg-white",
+    titleColor: "text-[#16001D]",
+    subtitleColor: "text-[#6330D6]/55",
+    iconName: "storefront",
+    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
+    CardIllus: EasyCardSVG,
+    stagger: false,
+  },
+  {
+    title: "24/7",
+    subtitle: "MERCHANT SUPPORT",
+    bg: "bg-white",
+    titleColor: "text-[#16001D]",
+    subtitleColor: "text-[#6330D6]/55",
+    iconName: "support_agent",
+    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
+    CardIllus: SupportCardSVG,
+    stagger: true,
+  },
+];
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function BusinessFeaturesGrid() {
+  return (
+    <section
+      className="bg-[#FAF7FD] border-b border-[#6330D6]/10 overflow-hidden"
+      style={{ paddingTop: "clamp(44px, 4.5vw, 64px)", paddingBottom: "clamp(44px, 4.5vw, 64px)" }}
+    >
+      {/* Centered page container */}
+      <div
+        className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
+        style={{ maxWidth: 1800 }}
+      >
+        {/* Main two-column grid */}
+        <div
+          className="grid items-start xl:grid-cols-[minmax(0,1.58fr)_minmax(500px,0.92fr)]"
+          style={{ gap: "clamp(48px, 5vw, 72px)" }}
+        >
+
+          {/* ── LEFT — clean text feature grid, no illustrations ── */}
+          <div>
+            {/* Badge */}
+            <span className="inline-flex items-center rounded-full bg-[#6330D6]/[0.08] px-3.5 py-1 text-xs font-black uppercase tracking-widest text-[#6330D6]">
+              Our features
+            </span>
+
+            {/* Heading */}
+            <h2
+              className="font-display font-black text-[#16001D] mt-4"
+              style={{
+                fontSize: "clamp(36px, 3.4vw, 60px)",
+                lineHeight: 1.08,
+                letterSpacing: "-0.04em",
+                maxWidth: 780,
+                marginBottom: 0,
+              }}
+            >
+              Move Your Business Forward
+            </h2>
+
+            {/* Description */}
+            <p
+              className="text-[#5E5866]"
+              style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 760, marginTop: 16, marginBottom: 36 }}
+            >
+              Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
+            </p>
+
+            {/* Feature list – check + text only, no illustration columns */}
+            <div
+              className="grid grid-cols-1 md:grid-cols-2"
+              style={{ columnGap: 48, rowGap: 32 }}
+            >
+              {FEATURES.map((feat) => (
+                <div
+                  key={feat.title}
+                  className="grid items-start"
+                  style={{ gridTemplateColumns: "30px 1fr", columnGap: 16 }}
+                >
+                  {/* Green check icon */}
+                  <div
+                    className="rounded-full bg-[#DCFCE7] flex items-center justify-center shrink-0"
+                    style={{ width: 30, height: 30, marginTop: 3 }}
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" style={{ width: 15, height: 15 }} aria-hidden="true">
+                      <path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="#16A34A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </div>
+
+                  {/* Title + description */}
+                  <div className="min-w-0">
+                    <h4
+                      className="font-display font-black text-[#16001D]"
+                      style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 8 }}
+                    >
+                      {feat.title}
+                    </h4>
+                    <p className="text-[#5E5866]" style={{ fontSize: 15, lineHeight: 1.55 }}>
+                      {feat.descr}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* ── RIGHT — 4 cards + illustration strip below ─────── */}
+          <div className="self-start flex flex-col" style={{ gap: 28 }}>
+
+            {/* 2×2 feature benefit cards */}
+            <div className="grid grid-cols-2" style={{ gap: 28 }}>
+              {CARDS.map((card) => {
+                const { CardIllus } = card;
+                return (
+                  <div
+                    key={card.title}
+                    className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] ${card.bg}`}
+                    style={{ borderRadius: 34, padding: 28, minHeight: 330 }}
+                  >
+                    {/* Top icon */}
+                    <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${card.iconBg}`}>
+                      <MaterialIcon icon={card.iconName} size={18} />
+                    </div>
+
+                    {/* Illustration */}
+                    <div
+                      className="flex-1 flex items-center justify-center overflow-hidden"
+                      style={{ margin: "8px 0" }}
+                    >
+                      <div className="w-full" style={{ height: 160 }}>
+                        <CardIllus />
+                      </div>
+                    </div>
+
+                    {/* Bottom label */}
+                    <div className="mt-auto shrink-0">
+                      <p
+                        className={`font-display font-black leading-none tracking-tight ${card.titleColor}`}
+                        style={{ fontSize: "clamp(26px, 2.2vw, 42px)" }}
+                      >
+                        {card.title}
+                      </p>
+                      <p
+                        className={`font-black tracking-widest uppercase ${card.subtitleColor}`}
+                        style={{ fontSize: 10, marginTop: 6 }}
+                      >
+                        {card.subtitle}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/BusinessSection.tsx

@@ -2,148 +2,233 @@ import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-const BENEFITS = [
+const FEATURES = [
   {
     title: "Digital Catalogue",
-    desc: "Showcase your products online easily to nearby customers.",
+    desc: "Showcase your products online and keep your catalogue updated.",
     icon: "menu_book",
-    iconColor: "bg-primary/5 text-primary",
+    visual: "/images/nearle-merchant/catalogue-ui.webp",
+    alt: "Clean grocery catalogue interface preview",
+    tone: "bg-primary/8 text-primary",
   },
   {
     title: "QR Ordering",
-    desc: "Enable existing customers to scan and place orders directly at your counter.",
+    desc: "Let customers scan, browse, and place orders directly from your store.",
     icon: "qr_code",
-    iconColor: "bg-secondary/5 text-secondary",
+    visual: "/images/nearle-merchant/qr-stand.webp",
+    alt: "QR ordering stand on a local grocery store counter",
+    tone: "bg-secondary/8 text-secondary",
   },
   {
     title: "Local Discovery",
-    desc: "Get discovered by residents in your neighbourhood searching for your products.",
+    desc: "Get discovered by nearby customers searching for products you sell.",
-    icon: "explore",
+    icon: "location_on",
-    iconColor: "bg-[#de96f9]/10 text-primary",
+    visual: "/images/nearle-merchant/local-map.webp",
+    alt: "Local discovery map with purple pins and a store listing",
+    tone: "bg-[#de96f9]/10 text-primary",
   },
   {
     title: "Delivery Support",
-    desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
+    desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
     icon: "local_shipping",
-    iconColor: "bg-rose-500/5 text-rose-600",
+    visual: "/images/nearle-merchant/delivery-support.webp",
+    alt: "Local delivery partner handing a grocery bag to a customer",
+    tone: "bg-rose-500/5 text-rose-600",
+  },
+];
+
+const BENEFITS = [
+  {
+    icon: "verified_user",
+    title: "Verified & Trusted",
+    desc: "All stores are verified for quality and reliability.",
+  },
+  {
+    icon: "groups",
+    title: "2L+ Customers",
+    desc: "Join thousands of merchants already growing with Nearle.",
+  },
+  {
+    icon: "trending_up",
+    title: "Growing Together",
+    desc: "We provide the tools, you focus on your customers.",
+  },
+  {
+    icon: "headset_mic",
+    title: "Support That Cares",
+    desc: "Our team is always here to help you succeed.",
   },
 ];
 
 export function BusinessSection() {
   return (
-    <section className="px-6 py-12 md:py-16">
+    <section className="section bg-white w-full overflow-hidden">
-      <div className="w-full">
+      <div className="page-container">
-        
+        <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
-        {/* Merchant Section Grid */}
+          <div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
-        <div className="grid lg:grid-cols-12 gap-16 items-center">
+          <div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
-          
-          {/* Left Column: Feature copywriting (7 cols) */}
-          <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">
-              Merchant Partnerships
-            </span>
-            <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">
-              Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
-            </p>
 
-            <div className="space-y-4 mb-10 text-sm md:text-base">
+          {/*
-              <div className="flex items-center gap-3">
+           * Grid layout:
-                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+           *  mobile  (<768px) : 1 col — text → cards (1/row) → success story  [via CSS order]
-                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+           *  tablet  (768–1279px) : 1 col — text → success story → cards 2×2  [via CSS order]
+           *  desktop (≥1280px)   : 2 col — [left: text + success story] | [right: cards 2×2]
+           */}
+          <div className="relative grid gap-6 grid-cols-1 md:gap-7
+            xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
+
+            {/* ── 1. Left text content (always col-1 row-1) ── */}
+            <div className="min-w-0 xl:col-start-1 xl:row-start-1">
+              {/* Badge */}
+              <div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
+                  <MaterialIcon icon="storefront" size={13} className="text-secondary" />
                 </div>
-                <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
+                <span className="text-[11px] font-black uppercase tracking-widest text-secondary">
+                  Merchant Partnerships
+                </span>
               </div>
-              <div className="flex items-center gap-3">
+
-                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+              <h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
-                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                Bring Your Store Online with{" "}
+                <span className="text-primary font-normal">Nearle.</span>
+              </h2>
+
+              <p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
+                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
+              </p>
+
+              <div className="mt-5 space-y-3">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
+                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
+                  </div>
+                  <span className="font-bold text-brand-dark text-sm md:text-base">
+                    Stay in control of your pricing and orders
+                  </span>
                 </div>
-                <span className="font-bold text-brand-dark">Build direct relationships with local families</span>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
+                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
+                  </div>
+                  <span className="font-bold text-brand-dark text-sm md:text-base">
+                    Build direct relationships with local families
+                  </span>
+                </div>
+              </div>
+
+              <div className="mt-7 flex flex-col gap-3">
+                <Link
+                  href="/businesses"
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
+                >
+                  Partner With Nearle
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
+                <Link
+                  href="/contact"
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
+                >
+                  Talk to Our Team
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
               </div>
             </div>
 
-            <div className="flex flex-wrap gap-4 mt-8">
+            {/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
-              <Link
+                 mobile  : order-2 → appears after text, before success story
-                href="/businesses"
+                 tablet  : order-3 → appears after text + success story
-                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"
+                 desktop : explicit col-2, row-span-2
-              >
+            */}
-                Partner With Nearle
+            <div className="min-w-0
-              </Link>
+              order-2 md:order-3
-              <Link
+              xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
-                href="/contact"
+              grid grid-cols-1 gap-4 md:grid-cols-2">
-                className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+              {FEATURES.map((feature) => (
-              >
+                <article
-                Talk to Our Team
+                  key={feature.title}
-              </Link>
+                  className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)]"
+                >
+                  <div className="p-5">
+                    <div className="flex items-start gap-3">
+                      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
+                        <MaterialIcon icon={feature.icon} size={22} />
+                      </div>
+                      <div className="min-w-0">
+                        <h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
+                          {feature.title}
+                        </h3>
+                        <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
+                          {feature.desc}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-auto w-full overflow-hidden">
+                    <Image
+                      src={feature.visual}
+                      alt={feature.alt}
+                      width={900}
+                      height={560}
+                      sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
+                      className="block h-auto w-full object-cover"
+                    />
+                  </div>
+                </article>
+              ))}
             </div>
-          </div>
 
-          {/* Right Column: Benefit Grid Cardless (5 cols) */}
+            {/* ── 3. Success story ──
-          <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
+                 mobile  : order-3 → appears after feature cards
-            {BENEFITS.map((benefit) => (
+                 tablet  : order-2 → appears after text, before cards
-              <div key={benefit.title} className="flex flex-col items-start group">
+                 desktop : explicit col-1, row-2 (below text in left column)
-                <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 className="min-w-0
-                </div>
+              order-3 md:order-2
-                <h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
+              xl:order-none xl:col-start-1 xl:row-start-2
-                  {benefit.title}
+              overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
+              grid grid-cols-[100px_minmax(0,1fr)]">
+              <div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
+                <Image
+                  src="/images/nearle-merchant/success-owner.webp"
+                  alt="Indian grocery shop owner using a smartphone inside a kirana store"
+                  fill
+                  sizes="100px"
+                  className="object-cover object-center"
+                />
+              </div>
+              <div className="min-w-0 px-4 py-4">
+                <span className="text-[10px] font-black uppercase tracking-widest text-primary">
+                  Success Story
+                </span>
+                <h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
+                  Kumar Provision Store
                 </h3>
-                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
+                <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
-                  {benefit.desc}
+                  Nearle helped us reach more customers in our area and manage orders effortlessly.
                 </p>
               </div>
-            ))}
+            </div>
           </div>
 
-        </div>
+          {/* ── Benefits strip ── */}
-
+          <div className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]">
-        {/* CURVED PROMO BANNER (Bottom CTA Block) */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
-        <div className="mt-8 md:mt-10 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">
+              {BENEFITS.map((b) => (
-          {/* Decorative background vectors */}
+                <div key={b.title} className="flex items-start gap-3 p-5">
-          <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
-          <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
+                    <MaterialIcon icon={b.icon} size={20} />
-
+                  </div>
-          {/* Left copy column */}
+                  <div>
-          <div className="md:w-3/5 z-10 text-brand-dark">
+                    <div className="text-sm font-black text-brand-dark">{b.title}</div>
-            <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
+                    <div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
-              Piping Hot & Fresh
+                  </div>
-            </span>
+                </div>
-            <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">
-              Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
-            </p>
-            <Link
-              href="/people"
-              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
-            >
-              Explore Stores Now
-            </Link>
-          </div>
-
-          {/* Right visual column */}
-          <div className="md:w-2/5 relative flex justify-center items-center">
-            {/* Soft background shape */}
-            <div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
-            
-            <div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
-              <Image
-                src="/images/cat-hot-food.png"
-                alt="Hot meals from Nearle local kitchen partners"
-                width={400}
-                height={400}
-                className="w-full h-full object-cover scale-105"
-              />
             </div>
           </div>
         </div>
-
       </div>
     </section>
   );
 }
-
-

src/components/home/Hero.tsx

@@ -3,15 +3,15 @@ import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const PROOF_ITEMS = [
-  { label: "1000+", text: "Verified Stores", icon: "store" },
+  { label: "Verified", text: "Local Stores", icon: "store" },
   { label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
-  { label: "50,000+", text: "Happy Customers", icon: "mood" },
+  { label: "Growing", text: "Customer Community", icon: "mood" },
-  { label: "4.7 ★", text: "Average Rating", icon: "star" },
+  { label: "Trusted", text: "Local Platform", icon: "star" },
 ];
 
 export function Hero() {
   return (
-    <section className="relative overflow-hidden bg-white select-none w-full">
+    <section className="relative overflow-hidden bg-gradient-to-b from-[#FAF8FC] to-[#FFFFFF] select-none w-full">
       {/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
       
       {/* 1. Large pale lavender partial circle (top-left) */}
@@ -47,7 +47,7 @@ export function Hero() {
       <div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
 
       {/* ─── TWO-COLUMN CONTENT GRID ─── */}
-      <div className="relative mx-auto grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center px-8 py-16 md:px-12 lg:px-16 xl:px-20 z-10 gap-12 lg:gap-6">
+      <div className="page-container relative grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center py-16 md:py-20 lg:py-24 z-10 gap-12 lg:gap-6">
         
         {/* LEFT COLUMN: Editorial Typography & Copy */}
         <div className="flex flex-col text-left max-w-xl z-20 relative">
@@ -68,13 +68,13 @@ export function Hero() {
           <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
             <Link
               href="/people"
-              className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+              className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
             >
               Explore Stores
             </Link>
             <Link
               href="/people#download-section"
-              className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-98"
+              className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-[0.98]"
             >
               Get the App
             </Link>
@@ -97,16 +97,18 @@ export function Hero() {
               />
             </div>
 
-            {/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
+            {/* middle image: central logo panel absolute left-[38%] top-[8%] */}
-            <div className="absolute left-[38%] top-[8%] w-[190px] h-[430px] rounded-[1.5rem] overflow-hidden shadow-xl border-2 border-white z-20 transition-transform duration-300 hover:scale-[1.02]">
+            <div className="absolute left-[38%] top-[8%] z-20 transition-transform duration-300 hover:scale-[1.02]">
-              <Image 
+              <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
-                src="/Nearle Business.png" 
+                <Image
-                alt="Local merchant delivery" 
+                  src="/nearlenewlogo.png"
-                fill 
+                  alt="Central logo panel"
-                className="object-cover"
+                  width={160}
-                sizes="190px"
+                  height={160}
-                priority
+                  className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
-              />
+                  priority
+                />
+              </div>
             </div>
 
             {/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
@@ -132,13 +134,14 @@ export function Hero() {
                 sizes="95px"
               />
             </div>
-            <div className="relative w-[115px] h-[240px] rounded-2xl overflow-hidden border border-white shadow-lg -mx-5 z-20">
+            <div className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20">
               <Image 
-                src="/Nearle Business.png" 
+                src="/nearlenewlogo.png" 
-                alt="Merchant" 
+                alt="Central logo panel" 
-                fill 
+                width={100} 
-                className="object-cover"
+                height={100} 
-                sizes="115px"
+                className="object-contain max-h-[90px] w-auto animate-[pulse_6s_infinite]"
+                priority
               />
             </div>
             <div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
@@ -157,20 +160,28 @@ export function Hero() {
       </div>
 
       {/* ─── BOTTOM PROOF STATS ROW ─── */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-[#EEE7F4] bg-white px-8 py-8 md:px-12 lg:px-16 z-20 relative">
+      <div className="border-t border-[#EEE7F4]/80 bg-white">
-        {PROOF_ITEMS.map((item) => (
+        <div className="page-container py-8 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 relative z-20">
-          <div key={item.label} className="flex flex-col items-start text-left pl-2 md:pl-4">
+          {PROOF_ITEMS.map((item, idx) => (
-            <div className="w-8 h-8 rounded-full bg-[#6D28D9]/10 text-[#6D28D9] flex items-center justify-center mb-3">
+            <div key={item.label} className="flex items-center gap-4 text-left md:justify-center relative">
-              <MaterialIcon icon={item.icon} size={16} />
+              {/* Subtle vertical separator for desktop, except for the first item */}
+              {idx > 0 && (
+                <div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-[1px] h-10 bg-[#EEE7F4]" />
+              )}
+              <div className="w-10 h-10 rounded-full bg-[#6D28D9]/8 text-[#6D28D9] flex items-center justify-center shrink-0">
+                <MaterialIcon icon={item.icon} size={18} />
+              </div>
+              <div>
+                <div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
+                  {item.label}
+                </div>
+                <div className="text-xs text-[#6D6172] font-semibold mt-1">
+                  {item.text}
+                </div>
+              </div>
             </div>
-            <div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
+          ))}
-              {item.label}
+        </div>
-            </div>
-            <div className="text-xs text-[#6D6172] font-semibold mt-1">
-              {item.text}
-            </div>
-          </div>
-        ))}
       </div>
 
     </section>

src/components/home/HowItWorks.tsx

@@ -1,72 +1,277 @@
+import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const STEPS = [
   {
     num: "01",
-    title: "Choose Your Area",
+    icon: "storefront",
-    desc: "See stores available around your neighbourhood.",
+    title: "Get Online",
-    icon: "location_on",
+    desc: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
-    color: "bg-primary/5 text-primary border-primary/10",
+    visual: "store",
   },
   {
     num: "02",
-    title: "Pick Your Favourite Store",
+    icon: "campaign",
-    desc: "Browse groceries, medicines, and daily essentials nearby.",
+    title: "Get Noticed",
-    icon: "storefront",
+    desc: "Your products get published to Nearle customers in your neighbourhood through the app. Customers search based on location, products, discounts, and promos.",
-    color: "bg-secondary/5 text-secondary border-secondary/10",
+    visual: "phone",
   },
   {
     num: "03",
-    title: "Place Order & Get Delivery",
+    icon: "auto_awesome",
-    desc: "Order easily and get swift delivery from local partners.",
+    title: "Get Simplified",
-    icon: "local_shipping",
+    desc: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that help your business grow further.",
-    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+    visual: "bag",
   },
 ];
 
+function OrdersCard() {
+  return (
+    <div className="absolute -left-4 top-6 hidden w-56 rounded-3xl border border-primary/10 bg-white/95 p-5 shadow-[0_22px_50px_rgba(22,0,29,0.16)] md:block xl:-left-6 xl:top-8">
+      <p className="text-xs font-black uppercase tracking-widest text-brand-dark">
+        Orders Received
+      </p>
+      <svg viewBox="0 0 150 46" className="mt-3 h-12 w-full" aria-hidden="true">
+        <path d="M4 38 C 28 34, 34 20, 54 24 S 83 34, 102 18 S 126 8, 146 12" fill="none" stroke="#006d37" strokeWidth="5" strokeLinecap="round" />
+        <circle cx="146" cy="12" r="5" fill="#006d37" />
+      </svg>
+      <div className="mt-3 space-y-2">
+        {["Fresh groceries", "Daily essentials", "Local offers"].map((item) => (
+          <div key={item} className="flex items-center gap-2 rounded-2xl bg-brand-accent-light/70 px-2.5 py-2">
+            <span className="h-2.5 w-2.5 rounded-full bg-secondary" />
+            <span className="text-xs font-bold text-on-surface-variant">{item}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function StorePhone() {
+  return (
+    <div className="absolute -right-4 bottom-4 hidden w-44 rounded-[2.2rem] border-[7px] border-brand-dark bg-white p-3 shadow-[0_26px_55px_rgba(22,0,29,0.24)] md:block xl:-right-8">
+      <div className="mx-auto mb-3 h-1 w-12 rounded-full bg-brand-dark/25" />
+      <div className="rounded-2xl bg-brand-accent-light p-2">
+        <div className="h-7 rounded-full bg-white px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
+          Search groceries
+        </div>
+        <div className="mt-3 grid grid-cols-4 gap-1.5">
+          {["Rice", "Veg", "Milk", "Snacks"].map((label) => (
+            <div key={label} className="rounded-xl bg-white px-1 py-1.5 text-center text-[7px] font-bold text-primary">
+              {label}
+            </div>
+          ))}
+        </div>
+        <div className="mt-3 space-y-2">
+          {["Kumar Provision", "Fresh Daily", "Neighbour Mart"].map((store, index) => (
+            <div key={store} className="rounded-2xl bg-white p-2">
+              <div className="flex items-center gap-2">
+                <span className={`h-8 w-8 rounded-xl ${index === 1 ? "bg-secondary/15" : "bg-primary/12"}`} />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[8px] font-black text-brand-dark">{store}</p>
+                  <p className="text-[7px] font-bold text-on-surface-variant">Groceries nearby</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <button className="mt-3 w-full rounded-full bg-primary py-2 text-[9px] font-black text-white">
+          Cart
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function GrowthPill() {
+  return (
+    <div className="absolute -right-8 top-10 hidden md:block xl:-right-16 xl:top-14">
+      <svg className="absolute -left-32 top-9 h-12 w-36 text-primary/45" viewBox="0 0 144 44" fill="none" aria-hidden="true">
+        <path d="M2 36 C 36 8, 72 36, 138 8" stroke="currentColor" strokeWidth="2.5" strokeDasharray="5 6" />
+        <path d="M132 5 L140 7 L136 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      <div className="rounded-full border border-primary/10 bg-white/95 px-5 py-3 text-sm font-black leading-tight text-brand-dark shadow-[0_18px_40px_rgba(22,0,29,0.13)]">
+        More Customers
+        <br />
+        <span className="text-primary">More Growth</span>
+      </div>
+    </div>
+  );
+}
+
+function PhoneMapVisual() {
+  return (
+    // Outer wrapper: position anchor for the floating pills (no overflow-hidden here)
+    <div className="relative h-44 w-40">
+      {/* Inner phone frame: overflow-hidden keeps rounded corners clean */}
+      <div className="absolute inset-0 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
+        <div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
+          Search local stores
+        </div>
+        <div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
+          <div className="absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(#d7c4dd 1px, transparent 1px), linear-gradient(90deg, #d7c4dd 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
+          <MaterialIcon icon="location_on" size={30} className="absolute left-14 top-8 text-primary" />
+          <span className="absolute left-4 top-5 h-2.5 w-2.5 rounded-full bg-primary" />
+          <span className="absolute bottom-4 right-5 h-2.5 w-2.5 rounded-full bg-secondary" />
+        </div>
+        <div className="absolute bottom-3 left-5 right-5 rounded-2xl bg-white p-2 shadow-lg">
+          <p className="text-[9px] font-black text-brand-dark">Your Store</p>
+          <p className="text-[7px] font-bold text-on-surface-variant">Open nearby</p>
+        </div>
+      </div>
+      {/* Pills: outside overflow-hidden so they float beyond the phone frame */}
+      <span className="absolute -left-3 top-16 z-10 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
+        Offers
+      </span>
+      <span className="absolute -right-3 top-24 z-10 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
+        Shop
+      </span>
+    </div>
+  );
+}
+
+function StepVisual({ type }: { type: string }) {
+  if (type === "store") {
+    // Inset box gives the storefront image breathing room on all sides
+    return (
+      <div className="absolute inset-x-4 bottom-0 top-2">
+        <div className="relative h-full w-full">
+          <Image
+            src="/images/nearle-how/how-storefront.webp"
+            alt="3D local shop storefront with purple awning and now online board"
+            fill
+            sizes="(max-width: 768px) 80vw, 28vw"
+            className="object-contain object-bottom"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (type === "phone") {
+    // Center the phone so the floating pills don't reach the card edges
+    return (
+      <div className="flex h-full items-end justify-center pb-2">
+        <PhoneMapVisual />
+      </div>
+    );
+  }
+
+  // Bag: chips on the left, image on the right – keep bag from overflowing right edge
+  return (
+    <div className="flex h-full items-end justify-end gap-2 px-2">
+      <div className="mb-4 hidden shrink-0 space-y-2 sm:block">
+        {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
+          <div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm">
+            {chip}
+          </div>
+        ))}
+      </div>
+      <div className="relative h-40 w-36 shrink-0">
+        <Image
+          src="/images/nearle-how/how-grocery-bag.webp"
+          alt="Nearle grocery bag filled with vegetables and packaged products"
+          fill
+          sizes="(max-width: 768px) 60vw, 18vw"
+          className="object-contain object-bottom"
+        />
+      </div>
+    </div>
+  );
+}
+
 export function HowItWorks() {
   return (
-    <section className="px-6 py-12 md:py-16">
+    <section className="section bg-white w-full overflow-hidden">
-      <div className="w-full">
+      {/* HERO AREA */}
-        {/* Header Section */}
+      <div className="mx-auto w-[calc(100%-96px)] max-w-[1720px]">
-        <div className="text-center mb-12 md:mb-16">
+        <div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[38fr_62fr]">
-          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
+          <div className="min-w-0">
-            Simple Process
+            <span className="inline-flex items-center gap-2 rounded-full border border-secondary/15 bg-secondary/5 px-4 py-2 text-xs font-black uppercase tracking-widest text-secondary">
+              <MaterialIcon icon="eco" size={16} />
+              Together, We Grow
+            </span>
+            <h2 className="mt-6 max-w-3xl font-display text-[clamp(2.5rem,8vw,3.75rem)] font-black leading-[1.02] tracking-tight text-brand-dark lg:text-[64px]">
+              Get set in minutes and delight the{" "}
+              <span className="text-primary font-normal">Neighbourhood</span>
+            </h2>
+            <p className="mt-6 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
+              Nearle is built to help businesses like{" "}
+              <span className="font-black text-primary">Yours</span>{" "}
+              establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
+            </p>
+            <button className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-base font-black text-white shadow-[0_16px_30px_rgba(101,20,154,0.22)] transition-transform duration-200 hover:-translate-y-0.5 sm:w-auto">
+              <MaterialIcon icon="forum" size={20} />
+              Talk to an Expert
+            </button>
+          </div>
+
+          <div className="relative flex min-h-[320px] justify-center md:min-h-[440px] xl:min-h-[400px]">
+            <div className="relative w-full max-w-[680px]">
+              <div className="relative h-[280px] overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_70px_rgba(22,0,29,0.16)] md:h-[440px] xl:h-[400px]">
+                <Image
+                  src="/images/nearle-merchant/merchant-hero.webp"
+                  alt="Indian kirana-store owner using a laptop inside a grocery shop"
+                  fill
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                  className="object-cover object-center"
+                />
+                <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
+              </div>
+              <OrdersCard />
+              <StorePhone />
+              <GrowthPill />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* SUBTLE DIVIDER */}
+      <div className="mx-auto mt-10 w-[calc(100%-96px)] max-w-[1720px] md:mt-14 xl:mt-10">
+        <div className="h-px w-full bg-gradient-to-r from-transparent via-primary/10 to-transparent" />
+      </div>
+
+      {/* CARDS SECTION */}
+      <div className="page-container">
+        <div className="mt-10 text-center md:mt-14 xl:mt-10">
+          <span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
+            How It Works
           </span>
-          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
+          <h2 className="mt-5 font-display text-4xl font-black leading-tight tracking-tight text-brand-dark md:text-5xl lg:text-[54px]">
-            From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
+            Build Your Neighbourhood Brand
           </h2>
+          <p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
+            Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes.
+          </p>
         </div>
 
-        {/* Steps Layout - Timeline style */}
+        <div className="mt-10 grid min-w-0 grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <div className="relative mt-8 md:mt-12">
+          {STEPS.map((step) => (
-          {/* Connecting Line (Desktop Only) */}
+            <article
-          <div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
+              key={step.num}
-
+              className="relative flex min-h-[380px] min-w-0 flex-col overflow-hidden rounded-3xl border border-primary/10 bg-white p-7 shadow-[0_18px_45px_rgba(22,0,29,0.08)] md:min-h-[420px] lg:min-h-[460px] xl:min-h-[420px] lg:p-8"
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16 relative z-10">
+            >
-            {STEPS.map((step) => (
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-primary/[0.07]">
-              <div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
+                {step.num}
-                {/* Icon Container with watermark number */}
+              </span>
-                <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">
+              <div className="relative z-10 flex h-13 w-13 items-center justify-center rounded-2xl bg-primary/7 text-primary">
-                  <MaterialIcon icon={step.icon} size={32} />
+                <MaterialIcon icon={step.icon} size={28} />
-                  <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">
+              </div>
-                    {step.num}
+              <div className="relative z-10 mt-7 max-w-[22rem] lg:mt-8">
-                  </span>
+                <h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
-                </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">
+                <p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
                   {step.desc}
                 </p>
               </div>
-            ))}
+              <div className="relative z-0 mt-auto h-48 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 lg:h-52">
-          </div>
+                <StepVisual type={step.visual} />
+              </div>
+            </article>
+          ))}
         </div>
       </div>
     </section>
   );
 }
-
-

src/components/home/HyperlocalFeatures.tsx

@@ -27,118 +27,77 @@ const FEATURES = [
 
 export function HyperlocalFeatures() {
   return (
-    <section className="px-6 py-12 md:py-16 relative">
+    <section className="section bg-white w-full relative">
-      {/* Scoped CSS styles for precise layout enforcement */}
-      <style>{`
-         @media (min-width: 901px) {
-            .custom-care-grid {
-              grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
-              gap: 56px !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: 40px !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" />
       <div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
 
       {/* Inner container */}
-      <div className="custom-care-grid mx-auto grid items-center">
+      <div className="page-container relative z-10">
-        
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-center">
-        {/* Left Column: Visual Storytelling */}
-        <div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border border-outline-variant/15 bg-slate-100 shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10 overflow-hidden">
           
-          {/* Main Background Cover Image */}
+          {/* Left Column: Visual Storytelling */}
-          <div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
+          <div className="w-full max-w-[530px] justify-self-center relative rounded-[2rem] border border-outline-variant/15 bg-slate-100/50 z-10 overflow-hidden aspect-[10/11] lg:h-[580px]">
-            <Image
+            
-              src="/images/cat-daily-essentials.png"
+            {/* Main Background Cover Image */}
-              alt="Local store background"
+            <div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
-              fill
+              <Image
-              sizes="(max-width: 900px) 420px, 470px"
+                src="/images/cat-daily-essentials.png"
-              className="object-cover"
+                alt="Local store background"
-              priority
+                fill
-            />
+                sizes="(max-width: 900px) 420px, 470px"
-          </div>
+                className="object-cover"
-
+                priority
-          {/* Banner Label at Top */}
+              />
-          <div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
-            <span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
-            <h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
-          </div>
-
-          {/* Main Store/Product Card (Middle floating) */}
-          <div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-4.5 border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
-            <div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
-              <Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
             </div>
-            <div className="flex-1 min-w-0">
+
-              <h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
+            {/* Banner Label at Top */}
-              <p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
+            <div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
-              <div className="flex items-center gap-1 mt-1.5">
+              <span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
-                <MaterialIcon icon="star" size={14} className="text-amber-500" />
+              <h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
-                <span className="text-xs font-bold text-brand-dark">4.9</span>
+            </div>
-                <span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
+
+            {/* Main Store/Product Card (Middle floating) */}
+            <div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-[18px] border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
+              <div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
+                <Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
+                <p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
+                <div className="flex items-center gap-1 mt-1.5">
+                  <MaterialIcon icon="star" size={14} className="text-amber-500" />
+                  <span className="text-xs font-bold text-brand-dark">Top Rated</span>
+                  <span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
+                </div>
               </div>
             </div>
+
+            {/* Small Delivery Status Card (Bottom floating) */}
+            <div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
+              <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
+                <MaterialIcon icon="check" size={16} className="text-white font-bold" />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs md:text-sm font-black">Order Confirmed</p>
+                <p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
+              </div>
+            </div>
+
           </div>
 
-          {/* Small Delivery Status Card (Bottom floating) */}
+          {/* Right Column: Feature Panel directly on page background */}
-          <div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
+          <div className="w-full py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
-            <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
+            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
-              <MaterialIcon icon="check" size={16} className="text-white font-bold" />
-            </div>
-            <div className="min-w-0">
-              <p className="text-xs md:text-sm font-black">Order Confirmed</p>
-              <p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
-            </div>
-          </div>
-
-        </div>
-
-        {/* Right Column: Dark Feature Panel */}
-        <div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
-          {/* Internal ambient glows */}
-          <div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
-          <div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
-          
-          <div className="relative z-10">
-            <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">
               Community & Trust
             </span>
             
-            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-white mt-6 mb-8 leading-tight tracking-tight">
+            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-6 mb-8 leading-tight tracking-tight">
               Built Around Your<br />
-              <span className="text-brand-accent font-black">Neighbourhood</span>
+              <span className="text-primary font-black">Neighbourhood</span>
             </h3>
 
-            <p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
+            <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
               Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
             </p>
 
@@ -146,25 +105,25 @@ export function HyperlocalFeatures() {
             <div className="relative space-y-8">
               
               {/* Vertical connector line */}
-              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
+              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />
               
               {FEATURES.map((item) => (
                 <div key={item.title} className="flex gap-5 group relative z-10">
                   
                   {/* Icon circle */}
-                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
+                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
                     <MaterialIcon
                       icon={item.icon}
-                      className="text-brand-dark"
+                      className="text-white"
                       size={22}
                     />
                   </div>
                   
                   <div>
-                    <h4 className="text-lg md:text-xl font-black text-white group-hover:text-brand-accent transition-colors">
+                    <h4 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
                       {item.title}
                     </h4>
-                    <p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
+                    <p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
                       {item.desc}
                     </p>
                   </div>
@@ -173,19 +132,19 @@ export function HyperlocalFeatures() {
             </div>
 
             {/* Divider Line above CTA Area */}
-            <hr className="border-t border-white/10 my-8 relative z-10" />
+            <hr className="border-t border-[#EEE7F4] my-8 relative z-10" />
 
             {/* Onboarding Call to Action */}
             <div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
               <Link
                 href="/#download"
-                className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
+                className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
               >
                 Get Nearle App
               </Link>
               <Link
                 href="/businesses"
-                className="text-white hover:text-brand-accent font-bold text-sm md:text-base flex items-center gap-1 group py-2"
+                className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
               >
                 <span>Learn How to Partner</span>
                 <MaterialIcon

src/components/home/ServiceCategories.tsx

@@ -55,16 +55,16 @@ const CATEGORIES = [
 
 export function ServiceCategories() {
   return (
-    <section className="px-6 pt-20 md:pt-24 lg:pt-28 pb-12 md:pb-16">
+    <section className="section bg-white w-full">
-      <div className="w-full">
+      <div className="page-container">
         {/* Header Section */}
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 md:mb-12 xl:mb-10 gap-6">
           <div>
             <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-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>
+              Explore Stores <span className="text-primary font-normal">Near To You</span>
             </h2>
             <p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
               Groceries, medicines, food, and everyday essentials from nearby local shops.

src/components/home/StoreQRSection.tsx

@@ -9,7 +9,9 @@ const FLOW_STEPS = [
 
 export function StoreQRSection() {
   return (
-    <section id="download" className="section-card-dark py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center">
+    <section className="mb-2 bg-white w-full px-2 pt-2 md:mb-3 md:px-3 md:pt-3 lg:mb-4 lg:px-4 lg:pt-4 xl:mb-4 xl:px-5 xl:pt-4 2xl:mb-4 2xl:px-6">
+      <div className="w-full">
+        <div id="download" className="w-full bg-gradient-to-br from-[#1A0322] to-[#0A000D] rounded-3xl md:rounded-[2rem] overflow-hidden text-white relative flex items-center py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20 border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.22)]">
       {/* 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" />
@@ -17,7 +19,7 @@ export function StoreQRSection() {
       <div className="w-full relative z-10">
         
         {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
-        <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
+        <div className="hidden lg:grid lg:grid-cols-12 gap-12 xl:gap-16 items-center">
           
           {/* Left Column: Heading, flow steps, download buttons */}
           <div className="lg:col-span-6">
@@ -51,45 +53,35 @@ export function StoreQRSection() {
               ))}
             </div>
 
-            {/* App Store Badges (Prominent White Buttons) */}
+            {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
             <div className="flex flex-wrap gap-4">
-              <a
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
-                href="https://apps.apple.com/us/app/nearle/id1596895375"
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
-                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">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                    Download on the
-                  </div>
-                  <div className="text-sm font-black">
                     App Store
                   </div>
+                  <div className="text-sm font-black">
+                    Available on
+                  </div>
                 </div>
-              </a>
+              </div>
 
-              <a
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
-                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">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                    GET IT ON
-                  </div>
-                  <div className="text-sm font-black">
                     Google Play
                   </div>
+                  <div className="text-sm font-black">
+                    Available on
+                  </div>
                 </div>
-              </a>
+              </div>
             </div>
           </div>
 
@@ -104,7 +96,7 @@ export function StoreQRSection() {
 
               <div className="relative w-32 h-32 bg-white flex items-center justify-center">
                 <Image
-                  src="/QR code .png"
+                  src="/nearle-qr-code.png"
                   alt="Nearle Store QR Code"
                   width={132}
                   height={132}
@@ -129,16 +121,7 @@ export function StoreQRSection() {
               />
             </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>
 
@@ -166,7 +149,7 @@ export function StoreQRSection() {
 
             <div className="relative w-36 h-36 bg-white flex items-center justify-center">
               <Image
-                src="/QR code .png"
+                src="/nearle-qr-code.png"
                 alt="Nearle Store QR Code"
                 width={144}
                 height={144}
@@ -210,49 +193,41 @@ export function StoreQRSection() {
             />
           </div>
 
-          {/* 5. App store buttons */}
+          {/* 5. App store buttons — TODO: replace with real URLs once app is live */}
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <a
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
-              href="https://apps.apple.com/us/app/nearle/id1596895375"
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
-              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">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                  Download on the
-                </div>
-                <div className="text-sm font-black">
                   App Store
                 </div>
+                <div className="text-sm font-black">
+                  Available on
+                </div>
               </div>
-            </a>
+            </div>
 
-            <a
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
-              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">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                  GET IT ON
-                </div>
-                <div className="text-sm font-black">
                   Google Play
                 </div>
+                <div className="text-sm font-black">
+                  Available on
+                </div>
               </div>
-            </a>
+            </div>
           </div>
         </div>
 
+        </div>
       </div>
-    </section>
+    </div>
+  </section>
   );
 }

src/components/home/WhyNearle.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const CARDS = [
@@ -6,33 +7,59 @@ const CARDS = [
     desc: "Order from familiar neighbourhood stores near you.",
     icon: "store",
     color: "bg-primary/5 text-primary border-primary/10",
+    image: "/images/nearle-redesign/shops-you-know.webp",
+    alt: "Friendly local grocery shop owner inside a kirana store",
   },
   {
     title: "Better Local Value",
     desc: "Discover local offers and daily savings nearby.",
     icon: "local_offer",
     color: "bg-secondary/5 text-secondary border-secondary/10",
+    image: "/images/nearle-redesign/better-local-value.webp",
+    alt: "Fresh local vegetables and fruits with a local offers sign",
   },
   {
     title: "Easy Reordering",
     desc: "Save your favourite stores for quick reordering.",
     icon: "history",
     color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+    image: "/images/nearle-redesign/easy-reordering.webp",
+    alt: "Hand holding a smartphone with a simple grocery ordering app",
   },
   {
     title: "Support Local Business",
     desc: "Every order directly supports nearby shopkeepers.",
     icon: "favorite",
     color: "bg-rose-500/5 text-rose-700 border-rose-100",
+    image: "/images/nearle-redesign/support-local-business.webp",
+    alt: "Local shop owner and customer shaking hands inside a store",
   },
 ];
 
 export function WhyNearle() {
   return (
-    <section className="px-6 py-12 md:py-16">
+    <section className="section section-soft w-full overflow-hidden">
-      <div className="w-full">
+      <div className="page-container relative">
         {/* Header Section */}
-        <div className="text-center mb-8 md:mb-10">
+        <div className="relative text-center mb-8 md:mb-10">
+          <div className="pointer-events-none absolute -left-2 top-0 hidden h-36 w-36 overflow-hidden rounded-[2rem] bg-primary/5 shadow-[0_18px_45px_rgba(101,20,154,0.12)] md:block lg:-left-4 lg:h-44 lg:w-44">
+            <Image
+              src="/images/nearle-redesign/heading-shopper.webp"
+              alt=""
+              fill
+              sizes="176px"
+              className="object-cover"
+            />
+          </div>
+          <div className="pointer-events-none absolute -right-2 top-1 hidden h-32 w-40 overflow-hidden rounded-[2rem] bg-secondary/5 shadow-[0_18px_45px_rgba(22,0,29,0.10)] md:block lg:-right-4 lg:h-40 lg:w-52">
+            <Image
+              src="/images/nearle-redesign/heading-store.webp"
+              alt=""
+              fill
+              sizes="208px"
+              className="object-cover"
+            />
+          </div>
           <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>
@@ -45,21 +72,30 @@ export function WhyNearle() {
         </div>
 
         {/* Cards Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-7">
           {CARDS.map((card) => (
             <div
               key={card.title}
-              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"
+              className="premium-card bg-white rounded-3xl p-5 md:p-6 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-8 shrink-0 ${card.color}`}>
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-5 shrink-0 ${card.color}`}>
-                <MaterialIcon icon={card.icon} size={28} />
+                <MaterialIcon icon={card.icon} size={27} />
               </div>
               <h3 className="font-display text-xl font-black text-brand-dark mb-3">
                 {card.title}
               </h3>
-              <p className="text-sm md:text-base text-on-surface-variant leading-relaxed flex-grow">
+              <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
                 {card.desc}
               </p>
+              <div className="relative mt-6 aspect-[4/3] w-full overflow-hidden rounded-[1.35rem] bg-brand-accent-light shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]">
+                <Image
+                  src={card.image}
+                  alt={card.alt}
+                  fill
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                  className="object-cover"
+                />
+              </div>
             </div>
           ))}
         </div>
@@ -68,4 +104,3 @@ export function WhyNearle() {
   );
 }
 
-

src/components/layout/Footer.tsx

@@ -33,7 +33,7 @@ export function Footer() {
         <div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
           {/* 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="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
             {/* Col 1: Brand info */}
             <div className="flex flex-col gap-4">
@@ -53,10 +53,18 @@ export function Footer() {
               </p>
               {/* Social Links */}
               <div className="flex gap-3 mt-2">
-                <a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Share">
+                <a
+                  href="#"
+                  className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
+                  aria-label="Share"
+                >
                   <MaterialIcon icon="share" size={20} />
                 </a>
-                <a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Website">
+                <a
+                  href="#"
+                  className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
+                  aria-label="Website"
+                >
                   <MaterialIcon icon="public" size={20} />
                 </a>
               </div>
@@ -64,11 +72,16 @@ export function Footer() {
 
             {/* Col 2: Company Links */}
             <div>
-              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
+              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
+                Company
+              </h5>
               <ul className="flex flex-col gap-3">
                 {COMPANY.map((l) => (
                   <li key={l.label}>
-                    <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
+                    <Link
+                      href={l.href}
+                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
+                    >
                       {l.label}
                     </Link>
                   </li>
@@ -78,11 +91,16 @@ export function Footer() {
 
             {/* Col 3: Partnerships */}
             <div>
-              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
+              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
+                Partnerships
+              </h5>
               <ul className="flex flex-col gap-3">
                 {PARTNERSHIPS.map((l) => (
                   <li key={l.label}>
-                    <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
+                    <Link
+                      href={l.href}
+                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
+                    >
                       {l.label}
                     </Link>
                   </li>
@@ -92,11 +110,16 @@ export function Footer() {
 
             {/* Col 4: Support / Legal */}
             <div>
-              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
+              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
+                Support & Legal
+              </h5>
               <ul className="flex flex-col gap-3">
                 {LEGAL.map((l) => (
                   <li key={l.label}>
-                    <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
+                    <Link
+                      href={l.href}
+                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
+                    >
                       {l.label}
                     </Link>
                   </li>
@@ -107,11 +130,16 @@ export function Footer() {
             {/* Col 5: HQ Address & Helpdesk */}
             <div className="flex flex-col gap-4">
               <div>
-                <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">Visit Nearle HQ</h5>
+                <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">
+                  Visit Nearle
+                </h5>
                 <p className="text-xs leading-relaxed text-white/60">
-                  424, Diwan Bahadur Rd,<br />
+                  424, Diwan Bahadur Rd,
-                  Opposite to Sri Krishna Sweets,<br />
+                  <br />
-                  R.S. Puram, Coimbatore,<br />
+                  Opposite to Sri Krishna Sweets,
+                  <br />
+                  R.S. Puram, Coimbatore,
+                  <br />
                   Tamil Nadu 641002
                 </p>
                 <a
@@ -126,13 +154,21 @@ export function Footer() {
               </div>
 
               <div className="border-t border-white/10 pt-4 flex flex-col gap-2">
-                <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</p>
+                <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
+                  Neighborhood Helpdesk
+                </p>
                 <a
-                  href="tel:+918049123456"
+                  href="tel:+919092068666"
                   className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
                 >
-                  <MaterialIcon icon="phone" size={16} className="text-[#E6D7EA] shrink-0" />
+                  <MaterialIcon
-                  <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
+                    icon="phone"
+                    size={16}
+                    className="text-[#E6D7EA] shrink-0"
+                  />
+                  <span className="text-sm font-black tracking-tight">
+                    +91 90920 68666
+                  </span>
                 </a>
               </div>
             </div>

src/components/layout/Navbar.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
   return (
     <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-[1920px] px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pt-[18px] md:pt-[24px] pointer-events-auto relative">
-        <nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-white/88 border border-white/70 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
+        <nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-[rgba(61,45,143,0.88)] border border-white/20 shadow-sm 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">
@@ -30,7 +30,7 @@ export function Navbar() {
                 className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
               >
                 <Image
-                  src="/logo.png"
+                  src="/logo-light.png"
                   alt="Nearle"
                   width={400}
                   height={50}
@@ -49,12 +49,12 @@ export function Navbar() {
                     key={link.label}
                     href={link.href}
                     className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
-                      isActive ? "text-[#2A1234]" : "text-[#2A1234]/70 hover:text-[#2A1234]"
+                      isActive ? "text-white" : "text-white/75 hover:text-white"
                     } group`}
                   >
                     {link.label}
                     <span
-                      className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-[#65149A] rounded-full transition-all duration-300 ${
+                      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"
@@ -69,14 +69,14 @@ export function Navbar() {
             <div className="flex items-center justify-end gap-3">
               <Link
                 href="/#download"
-                className="hidden md:inline-flex items-center justify-center bg-[#65149A] text-white font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-[#7C3AED] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
+                className="hidden md:inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-white/90 hover:shadow-md hover:scale-[1.02] 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-[#2A1234]/5 text-[#2A1234] transition-all active:scale-90 cursor-pointer"
+                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"
               >
@@ -88,7 +88,7 @@ export function Navbar() {
 
         {/* Mobile Drawer */}
         {mobileOpen && (
-          <div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-white/95 border border-white/50 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
+          <div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-[rgba(61,45,143,0.95)] border border-white/20 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
             <div className="flex flex-col gap-2">
               {NAV_LINKS.map((link) => {
                 const isActive = pathname === link.href;
@@ -98,14 +98,14 @@ export function Navbar() {
                     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-[#65149A]/10 text-[#65149A]"
+                        ? "bg-white/10 text-white"
-                        : "text-[#2A1234]/70 hover:text-[#2A1234] hover:bg-[#2A1234]/5"
+                        : "text-white/70 hover:text-white hover:bg-white/5"
                     }`}
                     onClick={() => setMobileOpen(false)}
                   >
                     {link.label}
                     {isActive && (
-                      <span className="w-1.5 h-1.5 rounded-full bg-[#65149A] animate-pulse" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
                     )}
                   </Link>
                 );

src/components/layout/PremiumFooter.tsx

@@ -3,145 +3,209 @@
 import Link from "next/link";
 import Image from "next/image";
 import React from "react";
+import { FaFacebookF, FaInstagram, FaLinkedinIn } from "react-icons/fa";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const COMPANY = [
   { label: "About Us", href: "/about" },
   { label: "Careers", href: "#" },
-  { label: "Press & News", href: "#" },
+  // { label: "Press & News", href: "#" },
   { label: "Help Center", href: "#" },
 ];
 
 const PARTNERSHIPS = [
   { label: "Merchant Partner", href: "/businesses" },
   { label: "Delivery Partner", href: "#" },
-  { label: "Corporate Gifting", href: "#" },
+  { label: "Direct to Customer Brands", href: "#" },
-  { label: "Local Real Estate", href: "#" },
+  // { label: "Local Real Estate", href: "#" },
 ];
 
 const LEGAL = [
   { label: "Privacy Policy", href: "#" },
   { label: "Terms of Service", href: "#" },
   { label: "Cookie Policy", href: "#" },
-  { label: "Sitemap", href: "#" },
+  // { label: "Sitemap", href: "#" },
 ];
 
+const socialButtonClass =
+  "flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition-all duration-300 xl:h-[54px] xl:w-[54px]";
+
 export function PremiumFooter() {
   return (
-    <footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
+    <section className="bg-white px-2 pb-2 md:px-3 md:pb-3 lg:px-4 lg:pb-4 xl:px-5 xl:pb-4 2xl:px-6 2xl:pb-5">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
+      <footer className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] text-white shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
-        {/* Column 1: Brand & Description */}
+        <div className="flex flex-col px-6 pb-8 pt-10 md:px-8 md:pb-8 md:pt-12 xl:px-16 xl:pb-8 xl:pt-12 2xl:px-20 2xl:pt-10 2xl:pb-8">
-        <div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
+          <div className="grid w-full grid-cols-1 items-start gap-10 text-left md:grid-cols-2 md:gap-x-12 md:gap-y-12 lg:grid-cols-[1.6fr_1fr_1fr_1fr] lg:gap-10 xl:gap-14">
-          <Link href="/" className="inline-block">
+            <div className="flex flex-col gap-5">
-            <Image
+              <Link href="/" className="inline-block w-fit">
-              src="/logo-light.png"
+                <Image
-              alt="Nearle"
+                  src="/logo-light.png"
-              width={130}
+                  alt="Nearle"
-              height={30}
+                  width={240}
-              className="h-7 w-auto object-contain"
+                  height={60}
-            />
+                  className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
-          </Link>
+                />
-          <p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
+              </Link>
-            India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
-          </p>
-          {/* Social Icons */}
-          <div className="flex gap-2.5 mt-2">
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
-              <MaterialIcon icon="share" size={16} />
-            </a>
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
-              <MaterialIcon icon="public" size={16} />
-            </a>
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
-              <MaterialIcon icon="help" size={16} />
-            </a>
-          </div>
-        </div>
 
-        {/* Column 2: Company */}
+              <p className="max-w-[430px] text-base leading-[1.65] text-white/70 md:text-lg xl:text-[19px]">
-        <div>
+                India&apos;s leading hyperlocal neighborhood network, empowering
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
+                communities and verified local businesses within a 2km radius.
-          <ul className="flex flex-col gap-2.5">
+              </p>
-            {COMPANY.map((l) => (
-              <li key={l.label}>
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
-                  {l.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
 
-        {/* Column 3: Nearle */}
+              <div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
-        <div>
+                <a
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
+                  href="https://www.facebook.com/"
-          <ul className="flex flex-col gap-2.5">
+                  target="_blank"
-            {PARTNERSHIPS.map((l) => (
+                  rel="noopener noreferrer"
-              <li key={l.label}>
+                  aria-label="Facebook"
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
+                  className={`${socialButtonClass} hover:bg-[#1877F2]`}
-                  {l.label}
+                >
-                </Link>
+                  <FaFacebookF size={20} />
-              </li>
+                </a>
-            ))}
-          </ul>
-        </div>
 
-        {/* Column 4: Support */}
+                <a
-        <div>
+                  href="https://www.instagram.com/"
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
+                  target="_blank"
-          <ul className="flex flex-col gap-2.5">
+                  rel="noopener noreferrer"
-            {LEGAL.map((l) => (
+                  aria-label="Instagram"
-              <li key={l.label}>
+                  className={`${socialButtonClass} hover:bg-[#E4405F]`}
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
+                >
-                  {l.label}
+                  <FaInstagram size={21} />
-                </Link>
+                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
 
-      {/* HQ Address card at bottom-left and info */}
+                <a
-      <div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+                  href="https://www.linkedin.com/company/nearledigital/"
-        {/* HQ Address Card */}
+                  target="_blank"
-        <div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
+                  rel="noopener noreferrer"
-          <div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
+                  aria-label="LinkedIn"
-            <MaterialIcon icon="location_on" size={16} />
+                  className={`${socialButtonClass} hover:bg-[#0A66C2]`}
-          </div>
+                >
-          <div className="text-left">
+                  <FaLinkedinIn size={20} />
-            <h6 className="text-xs font-black text-white">Nearle HQ</h6>
+                </a>
-            <p className="text-[11px] text-white/60 leading-normal mt-0.5">
+              </div>
-              424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
-            </p>
-          </div>
-        </div>
-
-        {/* Call center */}
-        <div className="flex flex-col items-start md:items-end gap-1">
-          <span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
-          <a
-            href="tel:+918049123456"
-            className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
-          >
-            <div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
-              <MaterialIcon icon="phone" size={14} className="text-white" />
             </div>
-            <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
-          </a>
-        </div>
-      </div>
 
-      {/* Bottom Copyright & legal links */}
+            <div className="flex flex-col">
-      <div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
+              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
-        <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
+                Company
-        <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
+              </h5>
-          <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
+
-          <span className="opacity-50">•</span>
+              <ul className="flex flex-col gap-4 xl:gap-5">
-          <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
+                {COMPANY.map((link) => (
-          <span className="opacity-50">•</span>
+                  <li key={link.label}>
-          <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
+                    <Link
+                      href={link.href}
+                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="flex flex-col">
+              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
+                Nearle
+              </h5>
+
+              <ul className="flex flex-col gap-4 xl:gap-5">
+                {PARTNERSHIPS.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="flex flex-col">
+              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
+                Support
+              </h5>
+
+              <ul className="flex flex-col gap-4 xl:gap-5">
+                {LEGAL.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="my-8 w-full border-t border-white/10 xl:my-10" />
+
+          <div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
+            <div className="flex min-h-[120px] w-full max-w-[560px] items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 md:w-auto md:p-5 xl:min-h-[130px] xl:gap-4 xl:p-6">
+              <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-white xl:h-[58px] xl:w-[58px] xl:rounded-2xl">
+                <MaterialIcon icon="location_on" size={20} />
+              </div>
+
+              <div className="text-left">
+                <h6 className="text-sm font-black text-white md:text-base xl:text-lg">
+                  Nearle
+                </h6>
+
+                <p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
+                  424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
+                  Coimbatore, TN 641002
+                </p>
+              </div>
+            </div>
+
+            <div className="flex shrink-0 flex-col items-center gap-1.5 text-center md:items-end md:text-right xl:gap-2">
+              <span className="text-xs font-black uppercase tracking-widest text-white/40 md:text-sm xl:text-base">
+                Neighborhood Helpdesk
+              </span>
+
+              <a
+                href="tel:+919092068666"
+                className="flex items-center gap-2 text-white transition-colors hover:text-[#8A5CFF] xl:gap-3"
+              >
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6] xl:h-14 xl:w-14">
+                  <MaterialIcon icon="phone" size={20} className="text-white" />
+                </div>
+
+                <span className="text-base font-black tracking-tight md:text-lg xl:text-[30px]">
+                  +91 90920 68666
+                </span>
+              </a>
+            </div>
+          </div>
+
+          <div className="mb-4 mt-8 w-full border-t border-white/5 xl:mb-6 xl:mt-10" />
+
+          <div className="flex w-full flex-col items-center justify-between gap-4 text-[13px] text-white/40 md:flex-row md:text-[14px] xl:text-[15px]">
+            <p className="text-center md:text-left">
+              © {new Date().getFullYear()} Nearle. All rights reserved.
+            </p>
+
+            <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+              <Link href="#" className="transition-colors hover:text-white">
+                Privacy Policy
+              </Link>
+              <span className="select-none font-bold opacity-35">·</span>
+              <Link href="#" className="transition-colors hover:text-white">
+                Terms of Service
+              </Link>
+              <span className="select-none font-bold opacity-35">·</span>
+              <Link href="#" className="transition-colors hover:text-white">
+                Help Center
+              </Link>
+            </div>
+          </div>
         </div>
-      </div>
+      </footer>
-    </footer>
+    </section>
   );
 }

src/components/layout/PremiumNavbar.tsx

@@ -18,112 +18,102 @@ export function PremiumNavbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
   const pathname = usePathname();
 
+  const isActiveLink = (href: string) => {
+    if (href === "/") return pathname === "/";
+    return pathname.startsWith(href);
+  };
+
   return (
-    <header className="w-full bg-white border-b border-[#EEE7F4] px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
+    <header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
-      <div className="flex items-center justify-between w-full">
+      <div className="relative mx-auto flex h-16 w-full max-w-[1600px] items-center px-6 md:h-20 md:px-10 xl:px-16">
-        {/* LOGO (LEFT) */}
+        {/* Logo - Left */}
         <Link
           href="/"
-          className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
+          className="flex shrink-0 items-center transition-transform duration-200 hover:scale-[1.02] active:scale-95"
+          aria-label="Nearle Home"
         >
           <Image
-            src="/logo.png"
+            src="/logo-light.png"
             alt="Nearle"
-            width={120}
+            width={180}
-            height={30}
+            height={45}
-            className="h-7 md:h-8 w-auto object-contain"
+            className="h-7 w-auto object-contain md:h-8 xl:h-9"
             priority
           />
         </Link>
 
-        {/* LINKS (CENTER) */}
+        {/* Desktop Navigation - Center */}
-        <nav className="hidden md:flex items-center gap-6 lg:gap-8">
+        <nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-6 lg:flex lg:gap-8 xl:gap-10">
           {NAV_LINKS.map((link) => {
-            const isActive = pathname === link.href;
+            const isActive = isActiveLink(link.href);
+
             return (
               <Link
                 key={link.label}
                 href={link.href}
-                className={`relative py-1 text-sm font-bold transition-all duration-200 ${
+                className={`relative whitespace-nowrap py-2 text-sm font-bold transition-colors duration-200 ${
-                  isActive ? "text-[#6330D6]" : "text-[#5E5866] hover:text-[#16001D]"
+                  isActive
+                    ? "text-white"
+                    : "text-white/70 hover:text-white"
                 }`}
               >
                 {link.label}
-                {isActive && (
+
-                  <span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-[#6330D6] rounded-full" />
+                <span
-                )}
+                  className={`absolute bottom-0 left-1/2 h-0.5 -translate-x-1/2 rounded-full bg-white transition-all duration-300 ${
+                    isActive ? "w-full" : "w-0"
+                  }`}
+                />
               </Link>
             );
           })}
         </nav>
 
-        {/* ACTIONS (RIGHT) */}
+        {/* Mobile Toggle - Right */}
-        <div className="hidden md:flex items-center gap-3">
-          <Link
-            href="#"
-            className="inline-flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold px-5 py-1.5 rounded-full text-xs hover:bg-[#6330D6]/5 active:scale-95 transition-all duration-200 whitespace-nowrap"
-          >
-            Login
-          </Link>
-          <Link
-            href="/people#download-section"
-            className="inline-flex items-center justify-center bg-[#6330D6] text-white font-bold px-5 py-2 rounded-full text-xs hover:bg-[#5225b8] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
-          >
-            Get App
-          </Link>
-        </div>
-
-        {/* Mobile menu toggle */}
         <button
-          className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#6330D6]/5 text-[#16001D] transition-all active:scale-90 cursor-pointer"
+          type="button"
-          onClick={() => setMobileOpen(!mobileOpen)}
+          className="ml-auto flex h-10 w-10 items-center justify-center rounded-full text-white transition-all duration-200 hover:bg-white/10 active:scale-90 lg:hidden"
-          aria-label="Toggle menu"
+          onClick={() => setMobileOpen((value) => !value)}
+          aria-label={mobileOpen ? "Close menu" : "Open menu"}
+          aria-expanded={mobileOpen}
         >
-          <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
+          <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={24} />
         </button>
       </div>
 
-      {/* Mobile Drawer */}
+      {/* Mobile Menu */}
-      {mobileOpen && (
+      <div
-        <div className="absolute top-full left-0 right-0 z-50 bg-white border-b border-[#6330D6]/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
+        className={`overflow-hidden border-t border-white/10 bg-[#30226F]/98 backdrop-blur-xl transition-all duration-300 lg:hidden ${
+          mobileOpen
+            ? "max-h-[500px] opacity-100"
+            : "pointer-events-none max-h-0 opacity-0"
+        }`}
+      >
+        <nav className="mx-auto flex w-full max-w-[1600px] flex-col gap-1 px-6 py-5 md:px-10">
           {NAV_LINKS.map((link) => {
-            const isActive = pathname === link.href;
+            const isActive = isActiveLink(link.href);
+
             return (
               <Link
                 key={link.label}
                 href={link.href}
-                className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
-                  isActive
-                    ? "bg-[#6330D6]/10 text-[#6330D6]"
-                    : "text-[#5E5866] hover:text-[#16001D] hover:bg-[#6330D6]/5"
-                }`}
                 onClick={() => setMobileOpen(false)}
+                className={`flex items-center justify-between rounded-xl px-4 py-3 text-sm font-bold transition-all duration-200 ${
+                  isActive
+                    ? "bg-white/15 text-white"
+                    : "text-white/70 hover:bg-white/10 hover:text-white"
+                }`}
               >
                 {link.label}
+
                 {isActive && (
-                  <span className="w-1.5 h-1.5 rounded-full bg-[#6330D6]" />
+                  <span className="h-2 w-2 rounded-full bg-white" />
                 )}
               </Link>
             );
           })}
-          <div className="flex flex-col gap-2 pt-2 border-t border-[#6330D6]/5 mt-2">
+        </nav>
-            <Link
+      </div>
-              href="#"
-              onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold py-2.5 rounded-xl text-sm"
-            >
-              Login
-            </Link>
-            <Link
-              href="/people#download-section"
-              onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-center bg-[#6330D6] text-white font-bold py-2.5 rounded-xl text-sm"
-            >
-              Get App
-            </Link>
-          </div>
-        </div>
-      )}
     </header>
   );
-}
+}

src/components/layout/PremiumPageShell.tsx

@@ -9,35 +9,16 @@ type PremiumPageShellProps = {
 
 export function PremiumPageShell({ children, className = "" }: PremiumPageShellProps) {
   return (
-    <div className="min-h-screen bg-[#E8DCF2] p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8 font-body text-[#16001D] antialiased">
+    <div className={`min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col ${className}`}>
-      <div className={`
+      {/* Header/Navbar */}
-        mx-auto
+      <PremiumNavbar />
-        w-full
-        max-w-[1880px]
-        overflow-hidden
-        rounded-[1.5rem]
-        sm:rounded-[2rem]
-        md:rounded-[2.5rem]
-        lg:rounded-[3rem]
-        border
-        border-white/80
-        bg-white
-        shadow-[0_20px_60px_rgba(93,57,128,0.16)]
-        flex
-        flex-col
-        ${className}
-      `}>
-        {/* Header/Navbar */}
-        <PremiumNavbar />
 
-        {/* Page Content */}
+      {/* Page Content */}
-        <main className="flex-1 w-full">
+      <main className="w-full overflow-x-hidden bg-white">
-          {children}
+        {children}
-        </main>
+      </main>
 
-        {/* Footer */}
+      <PremiumFooter />
-        <PremiumFooter />
-      </div>
     </div>
   );
 }

src/config/site-content.ts

@@ -0,0 +1,29 @@
+export const siteContent = {
+  brand: {
+    name: "Nearle",
+  },
+
+  metrics: {
+    // Only keep values that are verified and consistent.
+    // TODO: Confirm all numeric metrics with the business team before adding them back.
+    // Removed from UI: verifiedStores, happyCustomers, customerRating (unverifiable / conflicting)
+    serviceRadius: "2km", // product specification — not a business metric
+  },
+
+  app: {
+    // TODO: Populate once app is confirmed live on both stores.
+    // Candidate iOS:     https://apps.apple.com/us/app/nearle/id1596895375
+    // Candidate Android: https://play.google.com/store/apps/details?id=com.nearle.gear
+    androidUrl: "",
+    iosUrl: "",
+    status: "coming-soon",
+  },
+
+  contact: {
+    // TODO: Confirm these details with the business team before launch.
+    // These values are sourced from the existing codebase — not invented.
+    phone: "+91 80 4912 3456",
+    whatsappUrl: "https://wa.me/919092068666",
+    email: "support@nearle.in",
+  },
+} as const;

take_screenshot.js

@@ -24,8 +24,8 @@ const path = require('path');
   await page.screenshot({ path: desktopPath, fullPage: true });
   console.log('Saved desktop screenshot to:', desktopPath);
 
-  // Mobile Screenshot (390px)
+  // Mobile Screenshot (375px)
-  await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
+  await page.setViewport({ width: 375, height: 844, isMobile: true, hasTouch: true });
   await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
   const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
   await page.screenshot({ path: mobilePath, fullPage: true });