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,19 +17,28 @@ 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 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: "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"
   }
 ];
 
@@ -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

src/app/businesses/page.tsx

@@ -1,9 +1,11 @@
 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";
 
 export const metadata: Metadata = {
@@ -12,71 +14,6 @@ export const metadata: Metadata = {
     "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.",
 };
 
-const PROCESS_STEPS = [
-  {
-    step: "01",
-    title: "Get Online",
-    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: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
-  { value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
-  { value: "Easy", label: "Direct Customer Access", 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" },
@@ -85,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" },
@@ -151,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
@@ -174,133 +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-[22px] h-[22px] 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-[34px] h-[34px] 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.
-            {/* TODO: Replace with real merchant onboarding URL once confirmed */}
+              </p>
-            <Link
+              <div className="flex flex-wrap justify-center gap-3.5">
-              href="/contact"
+                {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-              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"
+                <Link
-            >
+                  href="/contact"
-              <MaterialIcon icon="bolt" size={18} />
+                  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"
-              <span>Register Interest</span>
+                >
-            </Link>
+                  <MaterialIcon icon="bolt" size={18} />
-            <Link
+                  <span>Register Interest</span>
-              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"
+                <Link
-            >
+                  href="/contact"
-              <MaterialIcon icon="phone" size={18} />
+                  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"
-              <span>Contact Experts</span>
+                >
-            </Link>
+                  <MaterialIcon icon="phone" size={18} />
+                  <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

@@ -1261,10 +1261,26 @@ body {
   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;
 }

src/app/people/page.tsx

@@ -209,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>
@@ -249,8 +249,8 @@ 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>
@@ -281,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" />
         
@@ -525,6 +526,7 @@ export default function PeoplePage() {
           </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/HowItWorks.tsx

@@ -27,7 +27,7 @@ const STEPS = [
 
 function OrdersCard() {
   return (
-    <div className="absolute left-3 top-8 hidden w-48 rounded-3xl border border-primary/10 bg-white/95 p-4 shadow-[0_22px_50px_rgba(22,0,29,0.16)] md:block xl:-left-8">
+    <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>
@@ -49,7 +49,7 @@ function OrdersCard() {
 
 function StorePhone() {
   return (
-    <div className="absolute -right-2 bottom-5 hidden w-40 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-6">
+    <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">
@@ -85,10 +85,10 @@ function StorePhone() {
 
 function GrowthPill() {
   return (
-    <div className="absolute right-8 top-8 hidden md:block xl:-right-2 xl:top-16">
+    <div className="absolute -right-8 top-10 hidden md:block xl:-right-16 xl:top-14">
-      <svg className="absolute -left-20 top-9 h-10 w-20 text-primary/45" viewBox="0 0 80 40" fill="none" aria-hidden="true">
+      <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 34 C 22 8, 50 34, 74 8" stroke="currentColor" strokeWidth="2" strokeDasharray="4 5" />
+        <path d="M2 36 C 36 8, 72 36, 138 8" stroke="currentColor" strokeWidth="2.5" strokeDasharray="5 6" />
-        <path d="M69 6 L76 7 L73 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <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
@@ -101,24 +101,29 @@ function GrowthPill() {
 
 function PhoneMapVisual() {
   return (
-    <div className="relative h-44 w-40 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
+    // Outer wrapper: position anchor for the floating pills (no overflow-hidden here)
-      <div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
+    <div className="relative h-44 w-40">
-        Search local stores
+      {/* 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>
-      <div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
+      {/* Pills: outside overflow-hidden so they float beyond the phone frame */}
-        <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" }} />
+      <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">
-        <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>
-      <span className="absolute -left-2 top-16 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
         Offers
       </span>
-      <span className="absolute -right-2 top-24 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
+      <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>
@@ -127,41 +132,48 @@ function PhoneMapVisual() {
 
 function StepVisual({ type }: { type: string }) {
   if (type === "store") {
+    // Inset box gives the storefront image breathing room on all sides
     return (
-      <Image
+      <div className="absolute inset-x-4 bottom-0 top-2">
-        src="/images/nearle-how/how-storefront.webp"
+        <div className="relative h-full w-full">
-        alt="3D local shop storefront with purple awning and now online board"
+          <Image
-        fill
+            src="/images/nearle-how/how-storefront.webp"
-        sizes="(max-width: 768px) 80vw, 28vw"
+            alt="3D local shop storefront with purple awning and now online board"
-        className="object-contain"
+            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-end">
+      <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-3">
+    <div className="flex h-full items-end justify-end gap-2 px-2">
-      <div className="mb-4 hidden space-y-2 sm:block">
+      <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-44">
+      <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"
+          className="object-contain object-bottom"
         />
       </div>
     </div>
@@ -171,31 +183,32 @@ function StepVisual({ type }: { type: string }) {
 export function HowItWorks() {
   return (
     <section className="section bg-white w-full overflow-hidden">
-      <div className="page-container">
+      {/* HERO AREA */}
-        <div className="rounded-[2rem] border border-primary/10 bg-[radial-gradient(circle_at_10%_10%,rgba(101,20,154,0.07),transparent_28%),radial-gradient(circle_at_90%_35%,rgba(0,109,55,0.06),transparent_24%),linear-gradient(135deg,#ffffff_0%,#fbf7ff_55%,#f4e9f8_100%)] p-5 shadow-[0_24px_70px_rgba(22,0,29,0.08)] md:p-8 lg:p-10">
+      <div className="mx-auto w-[calc(100%-96px)] max-w-[1720px]">
-          <div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+        <div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[38fr_62fr]">
-            <div className="min-w-0">
+          <div className="min-w-0">
-              <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">
+            <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} />
+              <MaterialIcon icon="eco" size={16} />
-                Together, We Grow
+              Together, We Grow
-              </span>
+            </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]">
+            <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{" "}
+              Get set in minutes and delight the{" "}
-                <span className="text-primary font-normal">Neighbourhood</span>
+              <span className="text-primary font-normal">Neighbourhood</span>
-              </h2>
+            </h2>
-              <p className="mt-6 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
+            <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{" "}
+              Nearle is built to help businesses like{" "}
-                <span className="font-black text-primary">Yours</span>{" "}
+              <span className="font-black text-primary">Yours</span>{" "}
-                establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
+              establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
-              </p>
+            </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">
+            <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} />
+              <MaterialIcon icon="forum" size={20} />
-                Talk to an Expert
+              Talk to an Expert
-              </button>
+            </button>
-            </div>
+          </div>
 
-            <div className="relative min-h-[360px] md:min-h-[520px]">
+          <div className="relative flex min-h-[320px] justify-center md:min-h-[440px] xl:min-h-[400px]">
-              <div className="relative h-[300px] overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_70px_rgba(22,0,29,0.16)] md:h-[500px]">
+            <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"
@@ -211,8 +224,16 @@ export function HowItWorks() {
             </div>
           </div>
         </div>
+      </div>
 
-        <div className="mt-14 text-center md:mt-20">
+      {/* 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>
@@ -224,11 +245,11 @@ export function HowItWorks() {
           </p>
         </div>
 
-        <div className="mt-8 grid min-w-0 grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-10 grid min-w-0 grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
           {STEPS.map((step) => (
             <article
               key={step.num}
-              className="relative flex min-h-[390px] min-w-0 flex-col overflow-hidden rounded-3xl border border-primary/10 bg-white p-6 shadow-[0_18px_45px_rgba(22,0,29,0.08)] md:min-h-[420px] lg:min-h-[460px]"
+              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"
             >
               <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-primary/[0.07]">
                 {step.num}
@@ -236,7 +257,7 @@ export function HowItWorks() {
               <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={28} />
               </div>
-              <div className="relative z-10 mt-7 max-w-[22rem]">
+              <div className="relative z-10 mt-7 max-w-[22rem] lg:mt-8">
                 <h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
                   {step.title}
                 </h3>
@@ -244,7 +265,7 @@ export function HowItWorks() {
                   {step.desc}
                 </p>
               </div>
-              <div className="relative z-0 mt-auto h-44 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 p-2">
+              <div className="relative z-0 mt-auto h-48 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 lg:h-52">
                 <StepVisual type={step.visual} />
               </div>
             </article>

src/components/home/ServiceCategories.tsx

@@ -58,13 +58,13 @@ export function ServiceCategories() {
     <section className="section bg-white 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,8 +9,8 @@ const FLOW_STEPS = [
 
 export function StoreQRSection() {
   return (
-    <section className="section bg-white w-full">
+    <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="page-container">
+      <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" />
@@ -19,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">

src/components/layout/Footer.tsx

@@ -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/PremiumFooter.tsx

@@ -3,153 +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="premium-footer-shell bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-t-[28px] md:rounded-t-[40px] rounded-b-none overflow-hidden text-white select-none shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
+    <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="mx-auto max-w-[1440px] px-6 md:px-10 xl:px-16 pt-16 pb-10 flex flex-col">
+      <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)]">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[minmax(320px,1.6fr)_repeat(3,minmax(150px,1fr))] gap-8 lg:gap-x-[clamp(56px,6vw,120px)] w-full text-left items-start">
+        <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">
-          {/* Column 1: Brand & Description */}
+          <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">
-          <div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
+            <div className="flex flex-col gap-5">
-            <Link href="/" className="inline-block">
+              <Link href="/" className="inline-block w-fit">
-              <Image
+                <Image
-                src="/logo-light.png"
+                  src="/logo-light.png"
-                alt="Nearle"
+                  alt="Nearle"
-                width={130}
+                  width={240}
-                height={30}
+                  height={60}
-                className="h-7 w-auto object-contain"
+                  className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
-              />
+                />
-            </Link>
+              </Link>
-            <p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-[340px]">
-              India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
-            </p>
-            {/* Social Icons */}
-            <div className="flex gap-3 mt-4">
-              <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 className="flex flex-col">
+                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-[22px]">
-              {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="flex flex-col">
-            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
-            <ul className="flex flex-col gap-[22px]">
-              {PARTNERSHIPS.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 4: Support */}
-          <div className="flex flex-col">
-            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
-            <ul className="flex flex-col gap-[22px]">
-              {LEGAL.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>
-        </div>
-
-        {/* Divider */}
-        <div className="border-t border-white/10 w-full mt-[56px] mb-[48px]" />
-
-        {/* Middle Contact Row */}
-        <div className="flex flex-col md:flex-row justify-between items-center gap-[48px] w-full py-1.5 md:py-2">
-          {/* HQ Address Card */}
-          <div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm w-full md:w-auto">
-            <div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
-              <MaterialIcon icon="location_on" size={16} />
-            </div>
-            <div className="text-left">
-              <h6 className="text-xs font-black text-white">Nearle HQ</h6>
-              <p className="text-[11px] text-white/60 leading-normal mt-0.5">
-                424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
               </p>
+
+              <div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
+                <a
+                  href="https://www.facebook.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Facebook"
+                  className={`${socialButtonClass} hover:bg-[#1877F2]`}
+                >
+                  <FaFacebookF size={20} />
+                </a>
+
+                <a
+                  href="https://www.instagram.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Instagram"
+                  className={`${socialButtonClass} hover:bg-[#E4405F]`}
+                >
+                  <FaInstagram size={21} />
+                </a>
+
+                <a
+                  href="https://www.linkedin.com/company/nearledigital/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="LinkedIn"
+                  className={`${socialButtonClass} hover:bg-[#0A66C2]`}
+                >
+                  <FaLinkedinIn size={20} />
+                </a>
+              </div>
+            </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]">
+                Company
+              </h5>
+
+              <ul className="flex flex-col gap-4 xl:gap-5">
+                {COMPANY.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]">
+                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>
 
-          {/* Call center */}
+          <div className="my-8 w-full border-t border-white/10 xl:my-10" />
-          <div className="flex flex-col items-center md:items-end gap-1.5 shrink-0 text-center md:text-right">
+
-            <span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
+          <div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
-            <a
+            <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">
-              href="tel:+918049123456"
+              <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">
-              className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
+                <MaterialIcon icon="location_on" size={20} />
-            >
-              <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 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>
-
+      </footer>
-        {/* Bottom Divider */}
+    </section>
-        <div className="border-t border-white/5 w-full mt-10 mb-8" />
-
-        {/* Bottom Row */}
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-[11px] text-white/40 w-full">
-          <p className="text-center md:text-left">© {new Date().getFullYear()} Nearle. All rights reserved.</p>
-          <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center items-center">
-            <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
-            <span className="opacity-35 select-none font-bold">·</span>
-            <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
-            <span className="opacity-35 select-none font-bold">·</span>
-            <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
-          </div>
-        </div>
-      </div>
-    </footer>
   );
 }

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-[rgba(61,45,143,0.88)] border-b border-white/10 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-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-white" : "text-white/70 hover:text-white"
+                  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-white 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-white/20 text-white font-bold px-5 py-1.5 rounded-full text-xs hover:bg-white/10 active:scale-95 transition-all duration-200 whitespace-nowrap"
-          >
-            Login
-          </Link>
-          <Link
-            href="/people#download-section"
-            className="inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-5 py-2 rounded-full text-xs hover:bg-white/90 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-white/10 text-white 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-[rgba(61,45,143,0.95)] backdrop-blur-md border-b border-white/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-white/10 text-white"
-                    : "text-white/70 hover:text-white hover:bg-white/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-white" />
+                  <span className="h-2 w-2 rounded-full bg-white" />
                 )}
               </Link>
             );
           })}
-          <div className="flex flex-col gap-2 pt-2 border-t border-white/10 mt-2">
+        </nav>
-            <Link
+      </div>
-              href="#"
-              onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-center border-2 border-white/20 text-white 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-white text-[rgba(61,45,143,0.88)] font-bold py-2.5 rounded-xl text-sm"
-            >
-              Get App
-            </Link>
-          </div>
-        </div>
-      )}
     </header>
   );
 }

src/components/layout/PremiumPageShell.tsx

@@ -14,7 +14,7 @@ export function PremiumPageShell({ children, className = "" }: PremiumPageShellP
       <PremiumNavbar />
 
       {/* Page Content */}
-      <main className="flex-1 w-full overflow-x-hidden bg-white">
+      <main className="w-full overflow-x-hidden bg-white">
         {children}
       </main>
 

src/config/site-content.ts

@@ -23,7 +23,7 @@ export const siteContent = {
     // 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/918049123456",
+    whatsappUrl: "https://wa.me/919092068666",
     email: "support@nearle.in",
   },
 } as const;