footer section fix

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

AGENTS.md

@@ -1,5 +1,13 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
 
+# This is NOT the Next.js you know
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
+# STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER)
+Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources:
+
+1. For frontend UI, layout, responsive, styling, or screenshot-reference tasks, you MAY start the Next.js local development server using `npm run dev`.
+2. For those frontend visual tasks, you MAY open and inspect `http://localhost:3000` locally.
+3. For those frontend visual tasks, you MAY capture local screenshots for before/after comparison.
+4. `npm run build` verifies compilation only. Do not claim a visual issue is fixed based only on build success.
+5. For visual tasks, inspect localhost before reporting completion.
+6. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
+7. For frontend UI, layout, responsive, styling, and screenshot-reference tasks, the agent must inspect localhost before reporting completion. Screenshots are required only for major layout changes, responsive/mobile changes, hero/footer changes, or when explicitly requested by the user. For small isolated CSS spacing fixes, screenshots are optional. The human developer gives final approval only.

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",

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/about/page.tsx

@@ -1,253 +1,250 @@
-"use client";
-
 import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
+import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "About Us",
+  description: "Discover Nearle, India's first hyperlocal neighborhood living platform connecting residents with local convenience, grocery delivery, and home services.",
+};
 
 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-primary/5 text-primary border-primary/10"
+    iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
+    image: "/images/nearle-how/how-storefront.webp",
+    imageAlt: "3D local store storefront with purple awning",
+    imgFit: "object-contain object-bottom"
   },
   {
     title: "Our Vision",
-    descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
+    descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
     icon: "visibility",
-    color: "bg-secondary/5 text-secondary border-secondary/10"
+    iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
+    image: "/images/nearle-merchant/local-map.webp",
+    imageAlt: "Nearle local neighbourhood map",
+    imgFit: "object-cover object-center"
   },
   {
     title: "Why Nearle",
-    descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
+    descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
     icon: "help_outline",
-    color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
+    iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
+    image: "/images/app-mockup.png",
+    imageAlt: "Nearle app on a smartphone",
+    imgFit: "object-contain object-bottom"
   }
 ];
 
-const COUNTERS = [
+const LOCAL_COUNTERS = [
-  { count: "100+", label: "Customers Served", icon: "people" },
+  { count: "Local", label: "Customer First Always", icon: "people" },
-  { count: "100+", label: "Active Businesses", icon: "store" },
+  { count: "Verified", label: "Business Partners", icon: "store" },
-  { count: "100+", label: "Active Neighborhoods", icon: "location_city" }
+  { count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
 ];
 
-const TEAM = [
+const HERO_STATS = [
-  {
+  { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
-    name: "Nellian Solliappan",
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
-    role: "Co-Founder & CEO",
+  { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
-    initials: "NS",
+  { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
-    color: "bg-primary text-white"
-  },
-  {
-    name: "Fazul Ilahi",
-    role: "Founder & CTO",
-    initials: "FI",
-    color: "bg-secondary text-white"
-  },
-  {
-    name: "Sagar",
-    role: "Co-Founder & COO",
-    initials: "S",
-    color: "bg-brand-accent text-brand-dark"
-  },
-  {
-    name: "Prithvi",
-    role: "Investor",
-    initials: "P",
-    color: "bg-surface-container text-on-surface"
-  },
-  {
-    name: "Sriram Sundararajan",
-    role: "Investor",
-    initials: "SS",
-    color: "bg-surface-container-highest text-brand-dark"
-  }
 ];
 
 export default function AboutPage() {
+  const collageCards = [
+    { text: "Local First", icon: "store" },
+    { text: "Trusted Network", icon: "verified" },
+    { text: "Connected Communities", icon: "groups" }
+  ];
+
   return (
-    <div className="relative min-h-screen bg-background">
+    <PremiumPageShell>
-      
       {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
+        {/* TWO-COLUMN GRID */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />
+        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
           
-        <div className="relative z-10 mx-auto max-w-container-max">
+          {/* Left Column: Copy & Actions */}
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+          <div className="flex flex-col text-left max-w-xl">
-            We are Nearle
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
-          </p>
+              About Nearle
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
+            </span>
-            We build Neighbourhoods.
+
+            <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
+              Built for Every
+              <br />
+              <span className="text-[#6330D6]">Neighbourhood.</span>
             </h1>
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
+
+            <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
               Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
             </p>
+
+            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
+              <a
+                href="#story-section"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
+              >
+                Our Story
+              </a>
+              <Link
+                href="/contact"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
+              >
+                Join Our Journey
+              </Link>
+            </div>
+          </div>
+
+          {/* Right Column: Visual Collage */}
+          <div className="w-full">
+            <HeroVisualCollage
+              centerImage="/nearlenewlogo.png"
+              leftImage="/Nearle Business.png"
+              rightImage="/nearle people.png"
+              glassCards={collageCards}
+              isPhoneCenter={false}
+            />
+          </div>
+        </div>
+
+        {/* BOTTOM HERO STATS */}
+        <div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+          <FeatureStatsRow items={HERO_STATS} />
         </div>
       </section>
 
       {/* ─── Intro Description Block ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <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">
-        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
+        <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
           Our Platform
         </span>
-          <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6">
+        <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-4">
           Nearle Neighbourhood Commerce
         </h2>
-          <p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
+        <p className="mx-auto max-w-3xl text-sm md:text-base text-[#5E5866] leading-relaxed font-semibold">
           We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
         </p>
-        </div>
       </section>
 
       {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
+        style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
+      >
+        <div
+          className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
+          style={{ maxWidth: 1800 }}
+        >
+          <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="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col"
+                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 }}
               >
-              <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
+                {/* Content: icon, heading, description */}
-                <MaterialIcon icon={card.icon} size={24} />
+                <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 text-xl font-black text-brand-dark mb-3">
+                  <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-body-sm text-on-surface-variant leading-relaxed">
+                  <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>
             ))}
           </div>
+        </div>
       </section>
 
       {/* ─── Global Stats counters ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-16">
+      <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="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {COUNTERS.map((c) => (
+          {LOCAL_COUNTERS.map((c) => (
             <div key={c.label} className="flex flex-col items-center text-center">
-                <div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
+              <div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
-                  <MaterialIcon icon={c.icon} size={24} />
+                <MaterialIcon icon={c.icon} size={22} />
               </div>
-                <h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
+              <h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
-                <p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
+              <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {c.label}
               </p>
             </div>
           ))}
         </div>
-        </div>
-      </section>
-
-      {/* ─── Team Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
-        <div className="grid lg:grid-cols-12 gap-16 items-center">
-          
-          {/* Left: About team content */}
-          <div className="lg:col-span-5">
-            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-              Who we are
-            </span>
-            <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-6">
-              Team Nearle
-            </h2>
-            <p className="text-body-md text-on-surface-variant mb-6 leading-relaxed">
-              Nearle is built on the core concept of <strong>&ldquo;Boost business by trust&rdquo;</strong>. We assist local offline stores in successfully spreading their brand message to the neighborhood to open new revenue streams.
-            </p>
-            <p className="text-body-sm text-on-surface-variant/80 mb-8 leading-relaxed">
-              Our team combines technology skills, domain expertise, and operational focus to ensure the highest quality solution for our customers.
-            </p>
-            <Link
-              href="/contact"
-              className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg active:scale-95 transition-all inline-flex items-center gap-2"
-            >
-              <MaterialIcon icon="mail" size={18} />
-              <span>Contact Team</span>
-            </Link>
-          </div>
-
-          {/* Right: Team Grid cards */}
-          <div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-6">
-            {TEAM.map((t) => (
-              <div
-                key={t.name}
-                className="premium-card bg-white p-6 rounded-3xl border border-outline-variant/15 shadow-sm flex flex-col items-center text-center"
-              >
-                <div className={`w-16 h-16 rounded-full flex items-center justify-center font-display text-xl font-black mb-4 ${t.color}`}>
-                  {t.initials}
-                </div>
-                <h4 className="font-display text-sm font-black text-brand-dark mb-1">
-                  {t.name}
-                </h4>
-                <p className="text-[11px] font-bold text-on-surface-variant/65">
-                  {t.role}
-                </p>
-              </div>
-            ))}
-          </div>
-
-        </div>
-      </section>
-
-      {/* ─── Client Testimonial & Quote ─── */}
-      <section className="bg-brand-dark px-margin-mobile md:px-margin-desktop py-24 text-center text-white">
-        <div className="mx-auto max-w-4xl relative">
-          <span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
-            &ldquo;
-          </span>
-          <div className="relative z-10">
-            <h3 className="font-display text-xl md:text-2xl font-black text-brand-accent mb-6">
-              Partner Feedback
-            </h3>
-            <blockquote className="text-lg md:text-xl font-light italic leading-relaxed text-white/90 max-w-2xl mx-auto mb-8">
-              &ldquo;Nearle has opened up immense opportunities for us to survive the competition, sustain in business, and gain our customers back.&rdquo;
-            </blockquote>
-            <div className="flex flex-col items-center gap-2">
-              <div className="w-10 h-10 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center font-display font-black text-xs">
-                DK
-              </div>
-              <div>
-                <p className="text-label-md font-black">Darshan K</p>
-                <p className="text-body-sm text-white/50">Erranderz Partner</p>
-              </div>
-            </div>
-          </div>
-        </div>
       </section>
 
       {/* ─── Brand Building Banner ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <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="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
+        <div className="max-w-4xl mx-auto">
-          <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
+          <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
           </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
+          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4 mb-4">
             Build Your Brand with Nearle
           </h2>
-          <p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
+          <p className="text-xs md:text-sm text-[#5E5866] max-w-2xl mx-auto mb-8 leading-relaxed font-semibold">
             Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
           </p>
           <div className="flex flex-wrap justify-center gap-4">
             <Link
               href="/businesses"
-              className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
+              className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-lg transition-all duration-200 active:scale-95 flex items-center gap-2"
             >
               <MaterialIcon icon="bolt" size={18} />
               <span>Register Merchant</span>
             </Link>
             <Link
               href="/people"
-              className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+              className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
             >
               <MaterialIcon icon="download" size={18} />
-              <span>Download App</span>
+              <span>Explore Nearle</span>
             </Link>
           </div>
         </div>
       </section>
-    </div>
+    </PremiumPageShell>
   );
 }

src/app/businesses/page.tsx

@@ -1,305 +1,355 @@
-"use client";
+import React from "react";
-
-import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
+import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
+import type { Metadata } from "next";
 
-const ROTATOR_WORDS = [
+export const metadata: Metadata = {
-  "Stand above your competitors!",
+  title: "Nearle for Business",
-  "Reach the right people, near you.",
+  description:
-  "Get noticed in your locality!"
+    "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 HERO_BENEFITS = [
+  { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
+  { title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
+  { title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
+  { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
 ];
 
-const PROCESS_STEPS = [
+function PhoneMapVisual() {
-  {
+  return (
-    step: "01",
+    // Single phone frame — no outer wrapper needed, no floating pills
-    title: "Get Online",
+    <div
-    descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
+      className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
-    icon: "storefront",
+      style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
-    color: "bg-primary/5 text-primary border-primary/10"
+    >
-  },
+      {/* Status bar */}
-  {
+      <div className="flex items-center justify-between px-3 pt-2.5 pb-1">
-    step: "02",
+        <span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
-    title: "Get Noticed",
+        <div className="flex items-center gap-0.5">
-    descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
+          {[4, 6, 8, 10].map((h) => (
-    icon: "campaign",
+            <span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
-    color: "bg-secondary/5 text-secondary border-secondary/10"
+          ))}
-  },
+        </div>
-  {
+      </div>
-    step: "03",
+
-    title: "Get Simplified",
+      {/* Search bar */}
-    descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
+      <div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
-    icon: "auto_awesome",
+        <svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
-    color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
+          <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>
+  );
 }
-];
-
-const FEATURES = [
-  {
-    title: "Direct Customer Access",
-    descr: "Build direct relationships and trust with residents in your immediate vicinity."
-  },
-  {
-    title: "Become a Partner",
-    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
-  },
-  {
-    title: "Build Your Brand",
-    descr: "Brand your business on Nearle and reach out to your community with ease."
-  },
-  {
-    title: "Huge Opportunity",
-    descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
-  },
-  {
-    title: "Delight Your Customers",
-    descr: "Delight customers in the neighborhood with a personalized online shopping experience."
-  },
-  {
-    title: "Unique Model",
-    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
-  },
-  {
-    title: "Reach Right Audience",
-    descr: "We target your ideal customers — people in your neighborhood search for what you offer."
-  },
-  {
-    title: "Increase Your Customers",
-    descr: "Increase walk-in and online customers by targeting local demand."
-  }
-];
-
-const STATS = [
-  { value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
-  { value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
-  { value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
-  { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" }
-];
 
 export default function BusinessesPage() {
-  const [wordIndex, setWordIndex] = useState(0);
+  const collageCards = [
-
+    { text: "Nearby Customers", icon: "people" },
-  useEffect(() => {
+    { text: "Orders & Offers", icon: "local_offer" },
-    const timer = setInterval(() => {
+    { text: "Local Delivery Support", icon: "local_shipping" }
-      setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length);
+  ];
-    }, 3000);
-    return () => clearInterval(timer);
-  }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
+    <PremiumPageShell>
-      {/* ─── Hero Section with Animated Rotator ─── */}
+      {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
+        {/* TWO-COLUMN GRID */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
+        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
           
-        <div className="relative z-10 mx-auto max-w-container-max">
+          {/* Left Column: Copy & Actions */}
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+          <div className="flex flex-col text-left max-w-xl">
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
               Nearle for Business
-          </p>
-
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
-            <span>Power your business.</span>
-            <br />
-            <span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
-              {ROTATOR_WORDS[wordIndex]}
             </span>
+
+            <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
+              Grow Your Local Business,
+              <br />
+              <span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
             </h1>
 
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
+            <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-            India&apos;s #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
+              Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
             </p>
 
-          {/* App Download Links */}
+            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-          <div className="mt-10 flex flex-wrap justify-center gap-4">
+              {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-            <a
+              <Link
-              href="https://apps.apple.com/us/app/nearle/id1596895375"
+                href="/contact"
-              target="_blank"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
               >
-              <div className="flex items-center gap-3 text-white text-left">
+                List Your Store
-                <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
+              </Link>
-                <div>
+              <Link
-                  <div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
+                href="/contact"
-                  <div className="text-sm font-black">App Store</div>
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
-                </div>
-              </div>
-            </a>
-            <a
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
               >
-              <div className="flex items-center gap-3 text-white text-left">
+                Explore Solutions
-                <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
+              </Link>
-                <div>
-                  <div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
-                  <div className="text-sm font-black">Google Play</div>
             </div>
           </div>
-            </a>
+
+          {/* Right Column: Visual Collage */}
+          <div className="w-full">
+            <HeroVisualCollage
+              centerImage="/nearlenewlogo.png"
+              leftImage="/images/cat-daily-essentials.png"
+              rightImage="/Nearle Business.png"
+              glassCards={collageCards}
+              isPhoneCenter={false}
+            />
           </div>
         </div>
+
+        {/* BOTTOM HERO BENEFITS */}
+        <div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+          <FeatureStatsRow items={HERO_BENEFITS} />
+        </div>
       </section>
 
       {/* ─── Intro Highlight Banner ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <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="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
+        <div className="max-w-2xl text-left">
-          <div className="max-w-2xl">
+          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
-            <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
             Together, we grow
           </span>
-            <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight">
+          <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-3 leading-tight">
             Get set in minutes and delight the Neighborhood
           </h2>
-            <p className="text-body-md text-on-surface-variant leading-relaxed">
+          <p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
-              Nearle is built to help businesses like <strong className="text-primary">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
+            Nearle is built to help businesses like <strong className="text-[#6330D6]">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
           </p>
         </div>
         <div className="flex gap-4 shrink-0">
           <Link
             href="/contact"
-              className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2"
+            className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm shadow-md active:scale-95 transition-all flex items-center gap-2"
           >
             <MaterialIcon icon="chat" size={18} />
             <span>Talk to an Expert</span>
           </Link>
         </div>
-        </div>
       </section>
 
-      {/* ─── Timeline / Core Process Steps ─── */}
+      {/* ─── Build Your Neighborhood Brand ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <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-16">
+        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+          {/* Header */}
+          <div className="text-center mb-10 lg:mb-12 xl:mb-10">
+            <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]">
               How it works
             </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+            <h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
               Build Your Neighborhood Brand
             </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+            <p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
               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">
+          {/* Cards grid */}
-          {PROCESS_STEPS.map((ps) => (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
-            <div
+            {/* Card 1 - Get Online */}
-              key={ps.step}
+            <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)]">
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
-            >
+                01
-              <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
-                {ps.step}
-              </div>
-              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
-                <MaterialIcon icon={ps.icon} size={28} />
-              </div>
-              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
-                {ps.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {ps.descr}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* ─── Grid Stats & Value Prop ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
-          <div className="grid lg:grid-cols-12 gap-16 items-center">
-            
-            {/* Left side: features block (7 cols) */}
-            <div className="lg:col-span-7">
-              <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-                Our features
               </span>
-              <h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6">
+              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
-                Move Your Business Forward
+                <MaterialIcon icon="storefront" size={28} />
-              </h2>
+              </div>
-              <p className="text-body-md text-on-surface-variant mb-12 max-w-2xl">
+              <div className="relative z-10 mt-6 max-w-[260px]">
-                Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
+                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                  Get Online
+                </h3>
+                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
+                  Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
                 </p>
+              </div>
+              <div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center">
+                <div className="relative h-[150px] w-[220px] lg:h-[175px] lg:w-[255px]">
+                  <Image
+                    src="/images/nearle-how/how-storefront.webp"
+                    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>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+            {/* Card 2 - Get Noticed */}
-                {FEATURES.map((feat) => (
+            <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)]">
-                  <div key={feat.title} className="flex gap-4">
+              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
-                    <div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
+                02
-                      <MaterialIcon icon="check" size={16} className="font-black" />
+              </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>
+              <div className="relative z-10 mt-6 max-w-[260px]">
-                      <h4 className="font-display text-[15px] font-black text-brand-dark mb-1">
+                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
-                        {feat.title}
+                  Get Noticed
-                      </h4>
+                </h3>
-                      <p className="text-body-sm text-on-surface-variant leading-relaxed">
+                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
-                        {feat.descr}
+                  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>
+                <div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
-
+                  <Image
-            {/* Right side: stats quadrant (5 cols) */}
+                    src="/images/nearle-how/how-grocery-bag.webp"
-            <div className="lg:col-span-5 grid grid-cols-2 gap-6">
+                    alt="Nearle grocery bag filled with vegetables and packaged products"
-              {STATS.map((stat, i) => (
+                    fill
-                <div
+                    sizes="(max-width: 768px) 50vw, 25vw"
-                  key={stat.label}
+                    className="object-contain object-center"
-                  className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
+                  />
-                    i % 2 === 1 ? "lg:mt-8" : ""
-                  }`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
-                      stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
-                    }`}>
-                      <MaterialIcon icon={stat.icon} size={20} />
                 </div>
               </div>
-                  <div className="mt-8">
+            </article>
-                    <p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
-                    <p className={`text-[11px] font-bold mt-1 ${
-                      stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
-                    }`}>
-                      {stat.label}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
           </div>
         </div>
       </section>
 
+      {/* ─── Our Features / Business Grid ─── */}
+      <BusinessFeaturesGrid />
+
       {/* ─── Join/Download Call to Action ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <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="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
+        <div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
+          <div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center relative">
-          <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
-            <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
+            <div className="relative z-10 max-w-2xl mx-auto">
+              <h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
                 Nearle is Essential for Business Growth
               </h2>
-            <p className="text-body-lg text-white/80 mb-10 leading-relaxed">
+              <p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
                 Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
               </p>
-            <div className="flex flex-wrap justify-center gap-4">
+              <div className="flex flex-wrap justify-center gap-3.5">
-              <a
+                {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
-              >
-                <MaterialIcon icon="bolt" size={18} />
-                <span>Register as Partner</span>
-              </a>
                 <Link
                   href="/contact"
-                className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
+                >
+                  <MaterialIcon icon="bolt" size={18} />
+                  <span>Register Interest</span>
+                </Link>
+                <Link
+                  href="/contact"
+                  className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
                 >
                   <MaterialIcon icon="phone" size={18} />
                   <span>Contact Experts</span>
@@ -307,7 +357,8 @@ export default function BusinessesPage() {
               </div>
             </div>
           </div>
-      </section>
         </div>
+      </section>
+    </PremiumPageShell>
   );
 }

src/app/contact/page.tsx

@@ -1,416 +1,131 @@
-"use client";
+import React from "react";
-
-import React, { useState } from "react";
-import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { ContactForm } from "@/components/contact/ContactForm";
+import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
+import type { Metadata } from "next";
 
-type FormData = {
+export const metadata: Metadata = {
-  name: string;
+  title: "Contact Us",
-  email: string;
+  description: "Get in touch with Nearle's team. Reach out for support, merchant partnerships, delivery, or general hyperlocal neighborhood inquiries.",
-  message: string;
-};
-
-type FormErrors = {
-  name?: string;
-  email?: string;
-  message?: string;
 };
 
 export default function ContactPage() {
-  const [formData, setFormData] = useState<FormData>({
-    name: "",
-    email: "",
-    message: "",
-  });
-
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showToast, setShowToast] = useState(false);
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-    // Clear error for this field as the user types
-    if (errors[name as keyof FormErrors]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: undefined,
-      }));
-    }
-  };
-
-  const validateForm = (): boolean => {
-    const tempErrors: FormErrors = {};
-    let isValid = true;
-
-    if (!formData.name.trim()) {
-      tempErrors.name = "Name is required";
-      isValid = false;
-    }
-
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!formData.email.trim()) {
-      tempErrors.email = "Email is required";
-      isValid = false;
-    } else if (!emailRegex.test(formData.email)) {
-      tempErrors.email = "Please enter a valid email address";
-      isValid = false;
-    }
-
-    if (!formData.message.trim()) {
-      tempErrors.message = "Message is required";
-      isValid = false;
-    } else if (formData.message.trim().length < 10) {
-      tempErrors.message = "Message must be at least 10 characters long";
-      isValid = false;
-    }
-
-    setErrors(tempErrors);
-    return isValid;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!validateForm()) return;
-
-    setIsSubmitting(true);
-
-    // Simulate API Request delay
-    await new Promise((resolve) => setTimeout(resolve, 1200));
-
-    setIsSubmitting(false);
-    setShowToast(true);
-    setFormData({ name: "", email: "", message: "" });
-
-    // Auto-hide toast after 5 seconds
-    setTimeout(() => {
-      setShowToast(false);
-    }, 5000);
-  };
-
   return (
-    <div className="relative min-h-screen bg-background">
+    <PremiumPageShell>
-      {/* ─── Breadcrumbs & Hero Page Header ─── */}
+      {/* ─── Contact Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-20 pb-24 text-center">
+      <section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 border-b border-[#6330D6]/10">
-        {/* Background Decorative Gradients */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(252,163,17,0.08),transparent_50%)]" />
         
-        <div className="relative z-10 mx-auto max-w-container-max">
+        {/* Subtle Map Grid/Location decoration behind left content */}
-          {/* Breadcrumbs */}
+        <div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
-          <nav className="flex justify-center mb-6">
+          <svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
-            <ol className="inline-flex items-center space-x-1 md:space-x-2 text-body-sm font-bold text-white/50">
+            <path d="M0,50 L400,50 M0,130 L400,130 M0,210 L400,210 M80,0 L80,300 M200,0 L200,300 M320,0 L320,300" />
-              <li className="inline-flex items-center">
+            <path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
-                <Link
+            <circle cx="200" cy="130" r="4" fill="currentColor" />
-                  href="/"
+            <circle cx="200" cy="130" r="14" strokeWidth="1" />
-                  className="hover:text-brand-accent transition-colors flex items-center gap-1"
+            <circle cx="80" cy="50" r="3" fill="currentColor" />
-                >
+            <circle cx="320" cy="210" r="3" fill="currentColor" />
-                  <MaterialIcon icon="home" size={14} />
+          </svg>
-                  Home
-                </Link>
-              </li>
-              <li>
-                <div className="flex items-center">
-                  <span className="mx-1 text-white/30">/</span>
-                  <span className="text-brand-accent">Contact</span>
-                </div>
-              </li>
-            </ol>
-          </nav>
-
-          <p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent">
-            Get in touch
-          </p>
-          <h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight">
-            Talk to the Nearle Team
-          </h1>
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we&apos;ll help you.
-          </p>
-        </div>
-      </section>
-
-      {/* ─── Four Contact Info Cards ─── */}
-      <section className="relative z-20 mx-auto -mt-10 max-w-container-max px-margin-mobile md:px-margin-desktop">
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          
-          {/* Card 1: Location */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
-              <MaterialIcon icon="location_on" size={28} className="text-primary" />
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed">
-              Nearle HQ, 29 Avinashi Road,<br />
-              Coimbatore, Tamil Nadu,<br />
-              641018, India
-            </p>
-            <a 
-              href="https://maps.google.com/?q=Avinashi+Road,+Coimbatore,+Tamil+Nadu,+India"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
-            >
-              Get Directions 
-              <MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
-            </a>
         </div>
 
-          {/* Card 2: Phones */}
+        <div className="w-full mx-auto relative z-10">
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+          <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
-            <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
-              <MaterialIcon icon="call" size={28} className="text-secondary" />
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
-              <span>+91 80 4912 3456</span>
-              <span>+91 422 491 2345</span>
-            </p>
-            <div className="mt-auto pt-4 flex gap-4">
-              <a 
-                href="tel:+918049123456"
-                className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
-              >
-                Helpdesk 
-                <MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
-              </a>
-            </div>
-          </div>
             
-          {/* Card 3: Email */}
+            {/* Left Column — Contact Info */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
+            <div className="relative z-10 text-[#16001D] max-w-[580px] text-left">
-            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
+              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
-              <MaterialIcon icon="mail" size={28} className="text-primary" />
+                Contact Us
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
-              <a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
-              <a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
-            </p>
-            <a 
-              href="mailto:support@nearle.in"
-              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
-            >
-              Write to us 
-              <MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
-            </a>
-          </div>
-
-          {/* Card 4: Working Hours */}
-          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
-            <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
-              <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
-            </div>
-            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
-            <p className="text-body-sm text-on-surface-variant leading-relaxed">
-              Monday - Saturday<br />
-              9:00 AM - 6:00 PM<br />
-              <span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
-            </p>
-            <div className="mt-auto pt-4">
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
-                <span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
-                Helpdesk Active
               </span>
+              <h1 className="font-display text-4xl md:text-5xl lg:text-[54px] font-black leading-[1.1] text-[#16001D]">
+                We’re Here to <br />
+                <span className="text-[#6330D6]">Help You.</span>
+              </h1>
+              <p className="text-[#5E5866] text-sm md:text-base font-bold mt-6 leading-relaxed">
+                Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
+              </p>
+
+              {/* Info Rows */}
+              <div className="mt-8 border-t border-[#6330D6]/10">
+                {/* Call Us */}
+                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
+                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="phone" size={18} />
+                  </div>
+                  <div className="text-left">
+                    <h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
+                    <p className="text-[#5E5866] text-xs font-semibold mt-0.5">+91 80 4912 3456 • +91 422 491 2345</p>
                   </div>
                 </div>
 
+                {/* Email Us */}
+                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
+                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="mail" size={18} />
+                  </div>
+                  <div className="text-left">
+                    <h4 className="text-[#16001D] text-sm font-black">Email Us</h4>
+                    <p className="text-[#5E5866] text-xs font-semibold mt-0.5">support@nearle.in • partners@nearle.in</p>
+                  </div>
+                </div>
+
+                {/* Visit Us */}
+                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
+                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="location_on" size={18} />
+                  </div>
+                  <div className="text-left">
+                    <h4 className="text-[#16001D] text-sm font-black">Visit Us</h4>
+                    <p className="text-[#5E5866] text-xs font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
+                  </div>
+                </div>
+
+                {/* Helpdesk */}
+                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
+                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="support_agent" size={18} />
+                  </div>
+                  <div className="text-left">
+                    <h4 className="text-[#16001D] text-sm font-black">Helpdesk</h4>
+                    <p className="text-[#5E5866] text-xs font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Right Column: Compact Form Card */}
+            <div className="w-full max-w-[480px] lg:ml-auto">
+              <ContactForm />
+            </div>
+
+          </div>
         </div>
       </section>
 
-      {/* ─── Map & Form Section ─── */}
+      {/* ─── Map Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-20">
+      <section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+        <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)]">
-          
-          {/* Left: Google Map (5 Cols) */}
-          <div className="lg:col-span-5 w-full">
-            <div className="relative bg-white rounded-3xl overflow-hidden shadow-xl border border-outline-variant/20 group h-[450px]">
           <iframe
             title="Nearle Coimbatore Location Map"
-                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.2816999266157!2d76.9587!3d11.0168!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f97b047%3A0x36b04859873d6e5a!2sAvinashi%20Rd%2C%20Coimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1719000000000!5m2!1sen!2sin"
+            src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
             width="100%"
             height="100%"
             style={{ border: 0 }}
             allowFullScreen
             loading="lazy"
             referrerPolicy="no-referrer-when-downgrade"
-                className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700"
+            className="filter contrast-[1.05] saturate-[0.9]"
           />
           {/* Map Floating Info Badge */}
-              <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3">
+          <div className="absolute bottom-6 left-6 bg-white/95 backdrop-blur-sm rounded-xl p-3.5 border border-[#6330D6]/10 shadow-lg flex items-center gap-3 max-w-[280px]">
-                <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
+            <div className="w-8 h-8 rounded-lg bg-[#6330D6] flex items-center justify-center shrink-0">
-                  <MaterialIcon icon="store" size={20} className="text-white" />
+              <MaterialIcon icon="store" size={16} className="text-white" />
             </div>
-                <div>
+            <div className="text-left">
-                  <h4 className="text-body-sm font-black text-brand-dark">Coimbatore Hub</h4>
+              <h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
-                  <p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
+              <p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
             </div>
           </div>
         </div>
-          </div>
-
-          {/* Right: Message Form (7 Cols) */}
-          <div className="lg:col-span-7 bg-white rounded-3xl p-8 md:p-10 border border-outline-variant/25 shadow-xl relative overflow-hidden">
-            {/* Background Accent Mesh */}
-            <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
-            <div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-3xl" />
-
-            <div className="relative z-10">
-              <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-                Write to us
-              </span>
-              <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-8">
-                Send Message
-              </h2>
-
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  {/* Name field */}
-                  <div className="flex flex-col">
-                    <label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
-                      Your Name
-                    </label>
-                    <div className="relative">
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
-                        <MaterialIcon icon="person" size={20} />
-                      </span>
-                      <input
-                        type="text"
-                        id="field-name"
-                        name="name"
-                        value={formData.name}
-                        onChange={handleInputChange}
-                        placeholder="e.g. John Doe"
-                        className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
-                          errors.name ? "border-error" : "border-outline-variant/30"
-                        } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
-                          errors.name ? "focus:ring-error/20" : "focus:ring-primary/20"
-                        } focus:border-primary transition-all`}
-                      />
-                    </div>
-                    {errors.name && (
-                      <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
-                        <MaterialIcon icon="error" size={14} />
-                        {errors.name}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Email field */}
-                  <div className="flex flex-col">
-                    <label htmlFor="field-email" className="text-label-sm text-on-surface-variant font-bold mb-2">
-                      Your Email
-                    </label>
-                    <div className="relative">
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
-                        <MaterialIcon icon="email" size={20} />
-                      </span>
-                      <input
-                        type="email"
-                        id="field-email"
-                        name="email"
-                        value={formData.email}
-                        onChange={handleInputChange}
-                        placeholder="e.g. john@example.com"
-                        className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
-                          errors.email ? "border-error" : "border-outline-variant/30"
-                        } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
-                          errors.email ? "focus:ring-error/20" : "focus:ring-primary/20"
-                        } focus:border-primary transition-all`}
-                      />
-                    </div>
-                    {errors.email && (
-                      <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
-                        <MaterialIcon icon="error" size={14} />
-                        {errors.email}
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Message field */}
-                <div className="flex flex-col">
-                  <label htmlFor="field-message" className="text-label-sm text-on-surface-variant font-bold mb-2">
-                    Message
-                  </label>
-                  <div className="relative">
-                    <span className="absolute top-3.5 left-4 text-on-surface-variant/40">
-                      <MaterialIcon icon="chat_bubble" size={20} />
-                    </span>
-                    <textarea
-                      id="field-message"
-                      name="message"
-                      rows={5}
-                      value={formData.message}
-                      onChange={handleInputChange}
-                      placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)"
-                      className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
-                        errors.message ? "border-error" : "border-outline-variant/30"
-                      } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
-                        errors.message ? "focus:ring-error/20" : "focus:ring-primary/20"
-                      } focus:border-primary transition-all resize-none`}
-                    />
-                  </div>
-                  {errors.message && (
-                    <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
-                      <MaterialIcon icon="error" size={14} />
-                      {errors.message}
-                    </span>
-                  )}
-                </div>
-
-                {/* Submit button */}
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="w-full bg-primary hover:bg-primary-container disabled:bg-primary-container/60 text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer"
-                >
-                  {isSubmitting ? (
-                    <>
-                      <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                      <span>Sending Message...</span>
-                    </>
-                  ) : (
-                    <>
-                      <MaterialIcon icon="send" size={18} />
-                      <span>Submit Message</span>
-                    </>
-                  )}
-                </button>
-              </form>
-            </div>
-          </div>
-
-        </div>
       </section>
-
+    </PremiumPageShell>
-      {/* ─── Success Toast Notification ─── */}
-      {showToast && (
-        <div className="fixed bottom-8 right-8 z-50 animate-bounce-subtle max-w-sm w-full bg-brand-dark-surface border border-brand-accent/30 rounded-2xl shadow-2xl p-4 flex gap-4 items-start">
-          <div className="w-10 h-10 rounded-xl bg-secondary text-white flex items-center justify-center shrink-0">
-            <MaterialIcon icon="check_circle" size={24} />
-          </div>
-          <div className="flex-1">
-            <h4 className="text-body-md font-black text-white">Message Sent!</h4>
-            <p className="text-body-sm text-white/70 mt-1 leading-normal">
-              Thank you for reaching out. We will get back to you within 24 hours.
-            </p>
-          </div>
-          <button
-            onClick={() => setShowToast(false)}
-            className="text-white/40 hover:text-white transition-colors cursor-pointer shrink-0"
-            aria-label="Close Toast"
-          >
-            <MaterialIcon icon="close" size={18} />
-          </button>
-        </div>
-      )}
-    </div>
   );
 }

src/app/layout.tsx

@@ -1,22 +1,8 @@
 import type { Metadata, Viewport } from "next";
-import { Jost } from "next/font/google";
 import "./globals.css";
-import { Navbar } from "@/components/layout/Navbar";
-import { Footer } from "@/components/layout/Footer";
 
-const jost = Jost({
+const jost = { variable: "font-display" };
-  subsets: ["latin"],
+const jostBody = { variable: "font-body" };
-  weight: ["400", "600", "700", "800"],
-  variable: "--font-display",
-  display: "swap",
-});
-
-const jostBody = Jost({
-  subsets: ["latin"],
-  weight: ["400", "600", "700"],
-  variable: "--font-body",
-  display: "swap",
-});
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://nearle.in"),
@@ -88,15 +74,18 @@ export default function RootLayout({
     >
       <head>
         {/* Material Symbols Outlined */}
+        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
         <link
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
+          rel="stylesheet"
+        />
       </head>
-      <body className="bg-background text-on-surface font-body antialiased" suppressHydrationWarning>
+      <body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
-        <Navbar />
+        {children}
-        <main>{children}</main>
-        <Footer />
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,17 +1,22 @@
+import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { Hero } from "@/components/home/Hero";
 import { ServiceCategories } from "@/components/home/ServiceCategories";
+import { WhyNearle } from "@/components/home/WhyNearle";
+import { HowItWorks } from "@/components/home/HowItWorks";
 import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
 import { BusinessSection } from "@/components/home/BusinessSection";
-import { AppPromo } from "@/components/home/AppPromo";
+import { StoreQRSection } from "@/components/home/StoreQRSection";
 
 export default function HomePage() {
   return (
-    <>
+    <PremiumPageShell>
       <Hero />
       <ServiceCategories />
+      <WhyNearle />
+      <HowItWorks />
       <HyperlocalFeatures />
       <BusinessSection />
-      <AppPromo />
+      <StoreQRSection />
-    </>
+    </PremiumPageShell>
   );
 }

src/app/people/page.tsx

@@ -1,285 +1,532 @@
-"use client";
+import React from "react";
-
+import Image from "next/image";
-import React, { useState, useEffect } from "react";
 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 type { Metadata } from "next";
 
-const ROTATOR_SLIDES = [
+export const metadata: Metadata = {
-  "Enjoy your Neighbourhood Living.",
+  title: "Nearle for People",
-  "Just a Click – For all your needs.",
+  description:
-  "Convenient & safe shopping locally."
+    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
-];
+};
 
 const OFFERINGS = [
   {
     title: "Elegant Living",
-    tag: "Join the #1 Neighbourhood App",
+    tag: "Your Neighbourhood App",
     descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
     icon: "local_florist",
-    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100"
+    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
+    image: "/nearle people.png",
+    isWide: false
   },
   {
     title: "Awareness at a Touch",
     tag: "Hot Deals",
     descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
     icon: "local_activity",
-    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100"
+    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
+    image: "/images/app-mockup.png",
+    isWide: false
   },
   {
     title: "Best of Both Worlds",
     tag: "Convenience & Speed",
     descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
     icon: "travel_explore",
-    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100"
+    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
+    image: "/images/slider-courier-mask-purple-v5.png",
+    isWide: false
   },
   {
     title: "Lifestyle Shopping",
     tag: "Exclusive Privileges",
     descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
     icon: "shopping_bag",
-    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100"
+    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
+    image: "/images/cat-pet-essentials.png",
+    isWide: false
   },
   {
     title: "Just a Click away",
     tag: "Instant Delivery",
     descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
     icon: "touch_app",
-    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100"
+    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
+    image: "/about.png",
+    isWide: true
   },
   {
     title: "Amazingly Fresh",
     tag: "Daily Essentials",
     descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
     icon: "eco",
-    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100"
+    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
+    image: "/images/cat-daily-essentials.png",
+    isWide: false
   },
   {
     title: "Restaurants & Takeaways",
     tag: "Hot Food Nearby",
     descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
     icon: "restaurant",
-    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100"
+    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
+    image: "/images/cat-hot-food.png",
+    isWide: false
   },
   {
     title: "Never Before Experience",
     tag: "Custom Services",
     descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
     icon: "stars",
-    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100"
+    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
+    image: "/images/cat-health-wellness.png",
+    isWide: false
   },
   {
     title: "Home Services @ Ease",
     tag: "Unified Local Partner",
     descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
     icon: "construction",
-    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100"
+    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
+    image: "/images/cat-home-services.png",
+    isWide: false
   }
 ];
 
-const STATS = [
+const LOCAL_STATS = [
-  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
+  { count: "Local", label: "Verified Restaurants", icon: "restaurant" },
-  { count: "100+", label: "Green Grocers", icon: "local_mall" },
+  { count: "Fresh", label: "Green Grocers", icon: "local_mall" },
-  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
+  { count: "Ready", label: "Home Stores", icon: "shopping_cart" },
-  { count: "100+", label: "Service Providers", icon: "handyman" }
+  { count: "Trusted", label: "Service Providers", icon: "handyman" }
+];
+
+const APP_BENEFITS = [
+  {
+    icon: "store",
+    title: "Nearby Stores",
+    microcopy: "Support local shopkeepers",
+    text: "Find and explore the unique shops in your immediate area.",
+    iconClass: "bg-amber-500/10 border-amber-500/20 text-amber-300",
+    cardClass: "lg:translate-x-[-10px] lg:-translate-y-2 lg:rotate-[-1deg]",
+    bgVisual: "store",
+    bgVisualClass: "text-amber-500/5"
+  },
+  {
+    icon: "favorite",
+    title: "Save Favourites",
+    microcopy: "Your daily picks, one tap away",
+    text: "Keep your trusted local merchants always within reach.",
+    iconClass: "bg-rose-500/10 border-rose-500/20 text-rose-300",
+    cardClass: "lg:translate-x-[10px] lg:translate-y-0 lg:rotate-[1deg]",
+    bgVisual: "favorite",
+    bgVisualClass: "text-rose-500/5"
+  },
+  {
+    icon: "local_offer",
+    title: "Local Offers",
+    microcopy: "Deals from people you know",
+    text: "Unlock exclusive deals directly from nearby neighbourhood shops.",
+    iconClass: "bg-emerald-500/10 border-emerald-500/20 text-emerald-300",
+    cardClass: "lg:translate-x-[-5px] lg:translate-y-2 lg:rotate-[-0.5deg]",
+    bgVisual: "local_offer",
+    bgVisualClass: "text-emerald-500/5"
+  }
+];
+
+const HERO_STATS = [
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
+  { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
+  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
+  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
 ];
 
 export default function PeoplePage() {
-  const [slideIndex, setSlideIndex] = useState(0);
+  const collageCards = [
-
+    { text: "Discover Nearby", icon: "explore" },
-  useEffect(() => {
+    { text: "Save Favourites", icon: "favorite" },
-    const timer = setInterval(() => {
+    { text: "Order Anytime", icon: "shopping_bag" }
-      setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
+  ];
-    }, 3000);
-    return () => clearInterval(timer);
-  }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
+    <PremiumPageShell>
-      
       {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
+        {/* TWO-COLUMN GRID */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(252,163,17,0.1),transparent_45%)]" />
+        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
           
-        <div className="relative z-10 mx-auto max-w-container-max">
+          {/* Left Column: Copy & Actions */}
-          <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
+          <div className="flex flex-col text-left max-w-xl">
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
               Nearle for People
-          </p>
-
-          <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
-            <span>Redefining Local Living.</span>
-            <br />
-            <span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
-              {ROTATOR_SLIDES[slideIndex]}
             </span>
+
+            <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
+              Your Neighbourhood,
+              <br />
+              Now in Your <span className="text-[#6330D6]">Pocket.</span>
             </h1>
 
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
+            <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-            India&apos;s first hyper-local managed Neighbourhood Living Platform. Connect to verified stores and daily amenities around you instantly.
+              Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
             </p>
 
-          {/* Quick Action */}
+            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-          <div className="mt-10">
               <a
                 href="#download-section"
-              className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 inline-flex items-center gap-2"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
-              <MaterialIcon icon="download" size={18} />
+                Get the App
-              <span>Get the App Now</span>
               </a>
+              <Link
+                href="/"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
+              >
+                Explore Stores
+              </Link>
             </div>
           </div>
+
+          {/* Right Column: Visual Collage */}
+          <div className="w-full">
+            <HeroVisualCollage
+              centerImage="/images/app-mockup.png"
+              leftImage="/images/cat-hot-food.png"
+              rightImage="/images/cat-health-wellness.png"
+              glassCards={collageCards}
+              isPhoneCenter={true}
+            />
+          </div>
+        </div>
+
+        {/* BOTTOM HERO STATS */}
+        <div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+          <FeatureStatsRow items={HERO_STATS} />
+        </div>
       </section>
 
-      {/* ─── 9 Core Offerings Bento Grid ─── */}
+      {/* ─── Bento Grid of Offerings ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <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="text-center mb-16">
+        <div className="mb-10 xl:mb-8">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+          <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>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
             Everything You Need, Just a Click Away
           </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+          <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
             Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="experience-grid">
           {OFFERINGS.map((offering) => (
-            <div
+            <article
               key={offering.title}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col hover:border-primary/25 transition-all"
+              className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
             >
-              <div className="flex items-center justify-between mb-6">
+              <Image
-                <span className="text-[10px] font-black uppercase tracking-wider text-secondary-container bg-secondary/15 text-secondary px-3 py-1 rounded-full">
+                src={offering.image}
-                  {offering.tag}
+                alt={offering.title}
-                </span>
+                fill
-                <div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${offering.color} flex items-center justify-center`}>
+                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
-                  <MaterialIcon icon={offering.icon} size={22} />
+                className="experience-card__image"
+              />
+              <div className="experience-card__overlay" />
+              <div className="experience-card__content text-left">
+                <div className="experience-card__icon">
+                  <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                 </div>
+                <h3>{offering.title}</h3>
+                <p>{offering.descr}</p>
               </div>
-              <h3 className="font-display text-lg font-black text-brand-dark mb-3">
+            </article>
-                {offering.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {offering.descr}
-              </p>
-            </div>
           ))}
         </div>
       </section>
 
       {/* ─── Localized Stats Block ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-20">
+      <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="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+        <div className="mb-10 xl:mb-8">
-          <div className="text-center mb-12">
+          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
-            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             Nearle Network
           </span>
-            <h2 className="font-display text-2xl font-black text-brand-dark mt-1">
+          <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
-              Join the #1 Neighbourhood App
+            The Neighbourhood App
           </h2>
-            <p className="text-body-sm text-on-surface-variant mt-2">
+          <p className="text-xs md:text-sm text-[#5E5866] mt-2">
             Bringing local stores to your doorstep instantly.
           </p>
         </div>
 
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-            {STATS.map((s) => (
+          {LOCAL_STATS.map((s) => (
             <div
               key={s.label}
-                className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center"
+              className="bg-white rounded-2xl p-6 border border-[#6330D6]/10 shadow-[0_4px_16px_rgba(99,48,214,0.01)] flex flex-col items-center text-center group hover:scale-[1.01] transition-transform duration-200"
             >
-                <div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
+              <div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
                 <MaterialIcon icon={s.icon} size={20} />
               </div>
-                <h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
+              <h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
-                <p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
+              <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {s.label}
               </p>
             </div>
           ))}
         </div>
-        </div>
       </section>
 
       {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <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="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
+      <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">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
+        {/* 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" />
         
-          <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
+        {/* DESKTOP LAYOUT */}
-            <div className="max-w-xl text-on-primary text-center lg:text-left">
+        <div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
-              <span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
+          {/* Left Column: Copy & Download badges */}
-                GET READY NOW
+          <div className="lg:col-span-5 text-left flex flex-col justify-between h-full lg:border-r lg:border-white/10 lg:pr-10">
+            <div>
+              <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.2em]">
+                NEARLE APP
               </span>
-              <h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight">
+              <h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
-                Download Nearle
+                Your Neighbourhood, <br />Now in Your Pocket.
               </h2>
-              <p className="text-body-lg text-white/80 font-bold mb-2">
+              <p className="text-lg text-white/90 font-bold mb-3 leading-relaxed">
-                Enjoy the benefits of Neighbourhood Living.
+                Browse nearby stores, save your favourites, and order everyday essentials with ease.
               </p>
-              <p className="text-body-md text-white/60 mb-8">
+              <p className="text-xs text-white/75 mb-6 leading-relaxed">
-                Proudly support your neighbourhood businesses and get everything delivered in minutes.
+                Discover groceries, medicines, food, and local offers from stores you already know and trust.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-2 mt-8">
+              <div className="flex flex-wrap gap-4">
+                <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
+                  <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
+                  <div className="text-left leading-tight">
+                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
+                    <div className="text-sm font-black text-white">App Store</div>
+                  </div>
+                </div>
+                <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
+                  <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
+                  <div className="text-left leading-tight">
+                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
+                    <div className="text-sm font-black text-white">Google Play</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Middle Column: Benefit Cards */}
+          <div className="lg:col-span-3 flex flex-col justify-center gap-5">
+            {APP_BENEFITS.map((b) => (
+              <div key={b.title} className={`relative overflow-hidden bg-white/[0.06] border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center shadow-lg ${b.cardClass}`}>
+                <div className={`absolute -right-4 -bottom-4 opacity-20 pointer-events-none select-none ${b.bgVisualClass}`}>
+                  <MaterialIcon icon={b.bgVisual} size={72} />
+                </div>
+                <div className={`flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center border shadow-inner ${b.iconClass}`}>
+                  <MaterialIcon icon={b.icon} size={20} />
+                </div>
+                <div className="text-left relative z-10">
+                  <h4 className="text-base font-black text-white leading-none">{b.title}</h4>
+                  <p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1">{b.microcopy}</p>
+                  <p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Right Column: Phone Mockup */}
+          <div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
+            <div className="absolute inset-0 bg-[#bd34fe]/10 rounded-full blur-[60px] opacity-40 -z-10" />
+
+            <div className="bg-[#120217] w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-4 ring-4 ring-white/5">
+              <div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2">
+                <span>Good evening 👋</span>
+                <div className="flex items-center gap-1 opacity-60">
+                  <MaterialIcon icon="signal_cellular_alt" size={12} />
+                  <MaterialIcon icon="battery_full" size={12} />
+                </div>
+              </div>
+
+              <div className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-center gap-2 text-white/60 text-xs mt-1">
+                <MaterialIcon icon="search" size={14} className="text-white/40" />
+                <span>Search nearby stores</span>
+              </div>
+
+              <div className="grid grid-cols-3 gap-2 mt-4">
+                <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
+                  <MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" />
+                  <span className="text-[9px] font-bold text-white/80 mt-1">Grocery</span>
+                </div>
+                <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
+                  <MaterialIcon icon="medical_services" size={18} className="text-purple-400" />
+                  <span className="text-[9px] font-bold text-white/80 mt-1">Pharmacy</span>
+                </div>
+                <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
+                  <MaterialIcon icon="restaurant" size={18} className="text-orange-400" />
+                  <span className="text-[9px] font-bold text-white/80 mt-1">Food</span>
+                </div>
+              </div>
+
+              <div className="space-y-2 mt-4 my-auto">
+                <div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="store" size={16} className="text-brand-accent" />
+                  </div>
+                  <div className="text-left leading-tight">
+                    <div className="text-xs font-black text-white">Daily Groceries</div>
+                    <div className="text-[9px] text-white/60">Verified Store • Nearby</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-4 pt-2 border-t border-white/5 text-center">
+                <p className="text-[9px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
+                <p className="text-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
+              </div>
+
+              <div className="flex justify-around items-center text-white/40 pt-2 pb-1 border-t border-white/5 mt-2">
+                <MaterialIcon icon="home" size={14} className="text-brand-accent" />
+                <MaterialIcon icon="search" size={14} />
+                <MaterialIcon icon="favorite" size={14} />
+                <MaterialIcon icon="person" size={14} />
+              </div>
+
+              <div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 shrink-0" />
+            </div>
+
+            <div className="absolute -left-16 bottom-[15%] bg-white/95 p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 max-w-[210px] z-20 pointer-events-none">
+              <div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
+                <MaterialIcon icon="check_circle" size={16} className="text-secondary" />
+              </div>
+              <div className="text-left text-brand-dark">
+                <p className="text-xs font-black leading-tight">Order Confirmed</p>
+                <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Preparing your order</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* MOBILE LAYOUT */}
+        <div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
+          <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.2em]">
+            NEARLE APP
+          </span>
+          <h2 className="font-display text-3xl md:text-4xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
+            Your Neighbourhood, <br />Now in Your Pocket.
+          </h2>
+          <p className="text-sm text-white/90 font-bold mb-3 max-w-md">
+            Browse nearby stores, save your favourites, and order everyday essentials with ease.
           </p>
 
-              {/* App badges */}
+          <div className="bg-[#120217] w-full max-w-[240px] aspect-[9/15.5] rounded-[2.2rem] border-[5px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-3 ring-4 ring-white/5 my-4">
-              <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
+            <div className="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1">
-                <a
+              <span>Good evening 👋</span>
-                  href="https://apps.apple.com/us/app/nearle/id1596895375"
+              <div className="flex items-center gap-1 opacity-60">
-                  target="_blank"
+                <MaterialIcon icon="signal_cellular_alt" size={10} />
-                  rel="noopener noreferrer"
+                <MaterialIcon icon="battery_full" size={10} />
-                  className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
+              </div>
-                >
+            </div>
-                  <div className="flex items-center gap-3 text-white text-left">
+
-                    <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
+            <div className="bg-white/10 border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-2 text-white/60 text-[10px] mt-0.5">
+              <MaterialIcon icon="search" size={12} className="text-white/40" />
+              <span>Search stores</span>
+            </div>
+
+            <div className="grid grid-cols-3 gap-1 mt-2">
+              <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
+                <MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" />
+                <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Grocery</span>
+              </div>
+              <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
+                <MaterialIcon icon="medical_services" size={14} className="text-purple-400" />
+                <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Pharmacy</span>
+              </div>
+              <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
+                <MaterialIcon icon="restaurant" size={14} className="text-orange-400" />
+                <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Food</span>
+              </div>
+            </div>
+
+            <div className="space-y-1.5 mt-2 my-auto">
+              <div className="bg-white/10 border border-white/10 rounded-xl p-2 flex items-center gap-2.5">
+                <div className="w-7 h-7 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
+                  <MaterialIcon icon="store" size={12} className="text-brand-accent" />
+                </div>
+                <div className="text-left leading-tight">
+                  <div className="text-[10px] font-black text-white">Daily Groceries</div>
+                  <div className="text-[8px] text-white/60">Verified • Nearby</div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-2 pt-1 border-t border-white/5 text-center">
+              <p className="text-[8px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
+              <p className="text-[8.5px] text-white/80 mt-0.5">Your stores near you.</p>
+            </div>
+
+            <div className="flex justify-around items-center text-white/40 pt-1.5 pb-0.5 border-t border-white/5 mt-1">
+              <MaterialIcon icon="home" size={12} className="text-brand-accent" />
+              <MaterialIcon icon="search" size={12} />
+              <MaterialIcon icon="favorite" size={12} />
+              <MaterialIcon icon="person" size={12} />
+            </div>
+
+            <div className="h-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" />
+          </div>
+
+          <div className="w-full max-w-[320px] bg-white/95 p-3 flex items-center gap-3 rounded-2xl shadow-lg border border-outline-variant/10">
+            <div className="w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
+              <MaterialIcon icon="check_circle" size={16} className="text-secondary" />
+            </div>
+            <div className="text-left text-brand-dark">
+              <p className="text-xs font-black">Order Confirmed</p>
+              <p className="text-[10px] text-on-surface-variant">Preparing your order</p>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
+            {APP_BENEFITS.map((b) => (
+              <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
+                <div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
+                  <MaterialIcon icon={b.icon} size={16} />
+                </div>
                 <div>
-                      <div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
+                  <h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
-                      <div className="text-sm font-black">App Store</div>
+                  <p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
                 </div>
               </div>
-                </a>
+            ))}
-                <a
-                  href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
-                >
-                  <div className="flex items-center gap-3 text-white text-left">
-                    <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
-                    <div>
-                      <div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
-                      <div className="text-sm font-black">Google Play</div>
-                    </div>
-                  </div>
-                </a>
-              </div>
           </div>
 
-            {/* Visual element representing App */}
+          <div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
-            <div className="relative shrink-0 w-full max-w-[280px]">
+            <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
-              <div className="bg-brand-dark-surface w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-6">
+              <MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
-                <div className="flex items-center justify-between text-white/40">
+              <div className="text-left leading-none">
-                  <MaterialIcon icon="signal_cellular_alt" size={16} />
+                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
-                  <MaterialIcon icon="battery_full" size={16} />
+                <div className="text-xs font-black text-white">App Store</div>
               </div>
-                
-                {/* Mock UI */}
-                <div className="my-auto text-center text-white space-y-4">
-                  <div className="w-14 h-14 bg-brand-accent text-brand-dark rounded-2xl flex items-center justify-center mx-auto shadow-lg animate-pulse-subtle">
-                    <MaterialIcon icon="local_shipping" size={32} />
             </div>
-                  <h4 className="font-display font-black text-lg text-brand-accent">Nearle App</h4>
+            <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
-                  <p className="text-[11px] text-white/70">Coimbatore neighborhood orders delivered in 15 mins.</p>
+              <MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
-                </div>
+              <div className="text-left leading-none">
-
+                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
-                <div className="h-1.5 w-1/3 bg-white/20 rounded-full mx-auto" />
+                <div className="text-xs font-black text-white">Google Play</div>
               </div>
             </div>
           </div>
         </div>
       </section>
-    </div>
+      </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/contact/ContactForm.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import React, { useState } from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+type FormData = {
+  name: string;
+  email: string;
+  message: string;
+};
+
+type FormErrors = {
+  name?: string;
+  email?: string;
+  message?: string;
+};
+
+export function ContactForm() {
+  const [formData, setFormData] = useState<FormData>({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // Clear error for this field as the user types
+    if (errors[name as keyof FormErrors]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }));
+    }
+  };
+
+  const validateForm = (): boolean => {
+    const tempErrors: FormErrors = {};
+    let isValid = true;
+
+    if (!formData.name.trim()) {
+      tempErrors.name = "Name is required";
+      isValid = false;
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!formData.email.trim()) {
+      tempErrors.email = "Email is required";
+      isValid = false;
+    } else if (!emailRegex.test(formData.email)) {
+      tempErrors.email = "Please enter a valid email address";
+      isValid = false;
+    }
+
+    if (!formData.message.trim()) {
+      tempErrors.message = "Message is required";
+      isValid = false;
+    } else if (formData.message.trim().length < 10) {
+      tempErrors.message = "Message must be at least 10 characters long";
+      isValid = false;
+    }
+
+    setErrors(tempErrors);
+    return isValid;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    setIsSubmitting(true);
+
+    // Simulate API Request delay
+    await new Promise((resolve) => setTimeout(resolve, 1200));
+
+    setIsSubmitting(false);
+    setShowToast(true);
+    setFormData({ name: "", email: "", message: "" });
+
+    // Auto-hide toast after 5 seconds
+    setTimeout(() => {
+      setShowToast(false);
+    }, 5000);
+  };
+
+  return (
+    <>
+      <div className="w-full max-w-[520px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-7 md:p-10 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
+        {/* Background Accent Mesh */}
+        <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10">
+          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+            Write to us
+          </span>
+          <h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-8">
+            Send Message
+          </h2>
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {/* Name field */}
+              <div className="flex flex-col">
+                <label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
+                  Your Name
+                </label>
+                <div className="relative">
+                  <span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
+                    <MaterialIcon icon="person" size={20} />
+                  </span>
+                  <input
+                    type="text"
+                    id="field-name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    placeholder="e.g. John Doe"
+                    className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
+                      errors.name ? "border-error" : "border-outline-variant/30"
+                    } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
+                      errors.name ? "focus:ring-error/20" : "focus:ring-primary/20"
+                    } focus:border-primary transition-all`}
+                  />
+                </div>
+                {errors.name && (
+                  <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
+                    <MaterialIcon icon="error" size={14} />
+                    {errors.name}
+                  </span>
+                )}
+              </div>
+
+              {/* Email field */}
+              <div className="flex flex-col">
+                <label htmlFor="field-email" className="text-label-sm text-on-surface-variant font-bold mb-2">
+                  Your Email
+                </label>
+                <div className="relative">
+                  <span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
+                    <MaterialIcon icon="email" size={20} />
+                  </span>
+                  <input
+                    type="email"
+                    id="field-email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    placeholder="e.g. john@example.com"
+                    className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
+                      errors.email ? "border-error" : "border-outline-variant/30"
+                    } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
+                      errors.email ? "focus:ring-error/20" : "focus:ring-primary/20"
+                    } focus:border-primary transition-all`}
+                  />
+                </div>
+                {errors.email && (
+                  <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
+                    <MaterialIcon icon="error" size={14} />
+                    {errors.email}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Message field */}
+            <div className="flex flex-col">
+              <label htmlFor="field-message" className="text-label-sm text-on-surface-variant font-bold mb-2">
+                Message
+              </label>
+              <div className="relative">
+                <span className="absolute top-3.5 left-4 text-on-surface-variant/40">
+                  <MaterialIcon icon="chat_bubble" size={20} />
+                </span>
+                <textarea
+                  id="field-message"
+                  name="message"
+                  rows={4}
+                  value={formData.message}
+                  onChange={handleInputChange}
+                  placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)"
+                  className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
+                    errors.message ? "border-error" : "border-outline-variant/30"
+                  } text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
+                    errors.message ? "focus:ring-error/20" : "focus:ring-primary/20"
+                  } focus:border-primary transition-all resize-none min-h-[140px]`}
+                />
+              </div>
+              {errors.message && (
+                <span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
+                  <MaterialIcon icon="error" size={14} />
+                  {errors.message}
+                </span>
+              )}
+            </div>
+
+            {/* Submit button */}
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-[#6330D6] hover:bg-[#5225b8] disabled:bg-[#6330D6]/60 text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer"
+            >
+              {isSubmitting ? (
+                <>
+                  <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <span>Sending Message...</span>
+                </>
+              ) : (
+                <>
+                  <MaterialIcon icon="send" size={18} />
+                  <span>Submit Message</span>
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* ─── Success Toast Notification ─── */}
+      {showToast && (
+        <div className="fixed bottom-8 right-8 z-50 animate-bounce-subtle max-w-sm w-full bg-brand-dark-surface border border-brand-accent/30 rounded-2xl shadow-2xl p-4 flex gap-4 items-start">
+          <div className="w-10 h-10 rounded-xl bg-secondary text-white flex items-center justify-center shrink-0">
+            <MaterialIcon icon="check_circle" size={24} />
+          </div>
+          <div className="flex-1">
+            <h4 className="text-body-md font-black text-white">Message Sent!</h4>
+            <p className="text-body-sm text-white/70 mt-1 leading-normal">
+              Thank you for reaching out. We will get back to you within 24 hours.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowToast(false)}
+            className="text-white/40 hover:text-white transition-colors cursor-pointer shrink-0"
+            aria-label="Close Toast"
+          >
+            <MaterialIcon icon="close" size={18} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

src/components/home/AppPromo.tsx

@@ -1,159 +0,0 @@
-import Image from "next/image";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-
-const FEATURES = [
-  {
-    title: "Eco-Friendly Routing",
-    desc: "Our routing software matches you to stores within 2km to minimize delivery times and energy.",
-    icon: "near_me",
-  },
-  {
-    title: "Live Courier Tracking",
-    desc: "See your neighborhood runner on a live map as they collect your essentials and ride to your gate.",
-    icon: "map",
-  },
-  {
-    title: "Secure Digital Payments",
-    desc: "Enjoy quick checkouts via UPI, credit/debit cards, and integrated wallet coins with cashbacks.",
-    icon: "payments",
-  },
-];
-
-export function AppPromo() {
-  return (
-    <section
-      id="download"
-      className="py-24 px-margin-mobile md:px-margin-desktop bg-brand-cream overflow-hidden border-t border-outline-variant/10"
-    >
-      <div className="max-w-container-max mx-auto relative">
-        {/* Background Dot pattern */}
-        <div
-          className="absolute inset-0 opacity-[0.03] pointer-events-none"
-          style={{
-            backgroundImage: "radial-gradient(#120217 2px, transparent 2px)",
-            backgroundSize: "24px 24px",
-          }}
-        />
-
-        <div className="grid md:grid-cols-12 gap-12 items-center relative z-10">
-          
-          {/* Left Column: Typography, benefits, download actions (7 cols) */}
-          <div className="md:col-span-7">
-            <span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10">
-              Download Nearle Mobile
-            </span>
-            
-            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
-              Get More With Our <br />
-              <span className="text-primary font-black">Mobile Application</span>
-            </h2>
-            
-            <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
-              Experience the fastest way to order groceries, hot food, and emergency home maintenance. Download the app today for live updates and community coins.
-            </p>
-
-            {/* Benefit Bullets */}
-            <div className="space-y-6 mb-10">
-              {FEATURES.map((item) => (
-                <div key={item.title} className="flex gap-4">
-                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-accent/20 flex items-center justify-center">
-                    <MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
-                  </div>
-                  <div>
-                    <h4 className="text-label-md font-bold text-brand-dark">{item.title}</h4>
-                    <p className="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">
-                      {item.desc}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Store Badges */}
-            <div className="flex flex-wrap gap-4 mt-8">
-              <a
-                href="https://apps.apple.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
-              >
-                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
-                  <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
-                </svg>
-                <div className="text-left leading-tight">
-                  <div className="text-[9px] opacity-75 font-semibold tracking-wider uppercase">
-                    Download on the
-                  </div>
-                  <div className="text-headline-md font-black -mt-0.5">
-                    App Store
-                  </div>
-                </div>
-              </a>
-
-              <a
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
-              >
-                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
-                  <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
-                </svg>
-                <div className="text-left leading-tight">
-                  <div className="text-[9px] opacity-75 font-semibold tracking-wider uppercase">
-                    GET IT ON
-                  </div>
-                  <div className="text-headline-md font-black -mt-0.5">
-                    Google Play
-                  </div>
-                </div>
-              </a>
-            </div>
-          </div>
-
-          {/* Right Column: Phone Mockup showcase (5 cols) */}
-          <div className="md:col-span-5 flex justify-center md:justify-end relative">
-            {/* Background glowing circle */}
-            <div className="absolute w-80 h-80 bg-brand-accent/10 rounded-full blur-2xl pointer-events-none -right-10 top-10" />
-
-            <div className="relative w-full max-w-[270px] animate-float">
-              {/* iPhone style phone container */}
-              <div className="bg-[#120217] w-full aspect-[9/18.5] rounded-[3rem] border-[6px] border-brand-dark-surface shadow-2xl relative overflow-hidden ring-4 ring-outline-variant/15">
-                {/* Speaker notch */}
-                <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-4 bg-black rounded-full z-20 flex items-center justify-center">
-                  <div className="w-12 h-1 bg-zinc-800 rounded-full" />
-                </div>
-
-                <Image
-                  src="/images/app-mockup.png"
-                  alt="Nearle mobile app interface showing neighborhood services"
-                  width={360}
-                  height={760}
-                  className="w-full h-full object-cover"
-                />
-              </div>
-
-              {/* Overlapping alert bubble */}
-              <div className="absolute -left-10 top-1/4 bg-white/95 backdrop-blur-md p-4 rounded-2xl shadow-2xl border border-outline-variant/20 hidden lg:block hover:scale-105 transition-transform duration-300">
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center">
-                    <MaterialIcon
-                      icon="check_circle"
-                      size={18}
-                      className="text-secondary"
-                    />
-                  </div>
-                  <div>
-                    <p className="text-label-md font-black text-brand-dark">Order Dispatched</p>
-                    <p className="text-[10px] text-on-surface-variant font-medium">Runner is arriving in 4 mins</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </section>
-  );
-}

src/components/home/BusinessSection.tsx

@@ -1,161 +1,233 @@
 import Image from "next/image";
+import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const FEATURES = [
   {
-    title: "Direct Customer Relationship",
+    title: "Digital Catalogue",
-    desc: "Build long-term direct ties with nearby families. Own your neighborhood presence.",
+    desc: "Showcase your products online and keep your catalogue updated.",
+    icon: "menu_book",
+    visual: "/images/nearle-merchant/catalogue-ui.webp",
+    alt: "Clean grocery catalogue interface preview",
+    tone: "bg-primary/8 text-primary",
   },
   {
-    title: "Managed Instant Delivery Fleet",
+    title: "QR Ordering",
-    desc: "We supply professional, verified moped couriers. Focus on your business, not hiring drivers.",
+    desc: "Let customers scan, browse, and place orders directly from your store.",
+    icon: "qr_code",
+    visual: "/images/nearle-merchant/qr-stand.webp",
+    alt: "QR ordering stand on a local grocery store counter",
+    tone: "bg-secondary/8 text-secondary",
   },
   {
-    title: "Neighborhood Demand Trends",
+    title: "Local Discovery",
-    desc: "Use Nearle's analytic insights to track demand, optimize your stock, and launch promos.",
+    desc: "Get discovered by nearby customers searching for products you sell.",
+    icon: "location_on",
+    visual: "/images/nearle-merchant/local-map.webp",
+    alt: "Local discovery map with purple pins and a store listing",
+    tone: "bg-[#de96f9]/10 text-primary",
+  },
+  {
+    title: "Delivery Support",
+    desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
+    icon: "local_shipping",
+    visual: "/images/nearle-merchant/delivery-support.webp",
+    alt: "Local delivery partner handing a grocery bag to a customer",
+    tone: "bg-rose-500/5 text-rose-600",
   },
 ];
 
-const STATS = [
+const BENEFITS = [
+  {
+    icon: "verified_user",
+    title: "Verified & Trusted",
+    desc: "All stores are verified for quality and reliability.",
+  },
+  {
+    icon: "groups",
+    title: "2L+ Customers",
+    desc: "Join thousands of merchants already growing with Nearle.",
+  },
   {
-    value: "40%+",
-    label: "Average Revenue Rise",
     icon: "trending_up",
-    style: "bg-primary text-white",
+    title: "Growing Together",
+    desc: "We provide the tools, you focus on your customers.",
   },
   {
-    value: "12k+",
+    icon: "headset_mic",
-    label: "Daily Neighborhood Orders",
+    title: "Support That Cares",
-    icon: "shopping_bag",
+    desc: "Our team is always here to help you succeed.",
-    style: "bg-brand-accent text-brand-dark",
-  },
-  {
-    value: "5k+",
-    label: "Verified Retail Partners",
-    icon: "storefront",
-    style: "bg-[#faf8f5] border border-outline-variant/20 text-primary",
-  },
-  {
-    value: "24/7",
-    label: "Partner Helpdesk Support",
-    icon: "support_agent",
-    style: "bg-[#de96f9]/20 text-primary border border-primary/10",
   },
 ];
 
 export function BusinessSection() {
   return (
-    <section className="py-24 px-margin-mobile md:px-margin-desktop bg-white">
+    <section className="section bg-white w-full overflow-hidden">
-      <div className="max-w-container-max mx-auto">
+      <div className="page-container">
+        <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
+          <div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
+          <div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
 
-        {/* Merchant Section Grid */}
+          {/*
-        <div className="grid lg:grid-cols-12 gap-16 items-center">
+           * Grid layout:
+           *  mobile  (<768px) : 1 col — text → cards (1/row) → success story  [via CSS order]
+           *  tablet  (768–1279px) : 1 col — text → success story → cards 2×2  [via CSS order]
+           *  desktop (≥1280px)   : 2 col — [left: text + success story] | [right: cards 2×2]
+           */}
+          <div className="relative grid gap-6 grid-cols-1 md:gap-7
+            xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
 
-          {/* Left Column: Feature copywriting (7 cols) */}
+            {/* ── 1. Left text content (always col-1 row-1) ── */}
-          <div className="lg:col-span-7">
+            <div className="min-w-0 xl:col-start-1 xl:row-start-1">
-            <span className="text-label-sm text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
+              {/* Badge */}
+              <div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
+                  <MaterialIcon icon="storefront" size={13} className="text-secondary" />
+                </div>
+                <span className="text-[11px] font-black uppercase tracking-widest text-secondary">
                   Merchant Partnerships
                 </span>
-            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
+              </div>
-              Grow your local brand in the <span className="text-secondary">Neighborhood.</span>
+
+              <h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
+                Bring Your Store Online with{" "}
+                <span className="text-primary font-normal">Nearle.</span>
               </h2>
-            <p className="text-body-lg text-on-surface-variant mb-12 max-w-xl leading-relaxed">
+
-              Unlock delivery, loyalty programs, and localized promotions. Join over 5,000 neighborhood partners who are digitizing their community sales channels.
+              <p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
+                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
               </p>
 
-            <div className="space-y-8 mb-12">
+              <div className="mt-5 space-y-3">
-              {FEATURES.map((feat) => (
+                <div className="flex items-center gap-3">
-                <div key={feat.title} className="flex gap-4 group">
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
-                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-secondary/10 border border-secondary/20 flex items-center justify-center group-hover:bg-secondary group-hover:text-white transition-all duration-300">
+                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
-                    <MaterialIcon
-                      icon="check"
-                      size={18}
-                      className="text-secondary group-hover:text-white transition-colors"
-                    />
                   </div>
-                  <div>
+                  <span className="font-bold text-brand-dark text-sm md:text-base">
-                    <h4 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
+                    Stay in control of your pricing and orders
-                      {feat.title}
-                    </h4>
-                    <p className="text-body-md text-on-surface-variant mt-1.5 leading-relaxed">
-                      {feat.desc}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <button className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-label-md hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 cursor-pointer">
-              Register as Merchant Partner
-            </button>
-          </div>
-
-          {/* Right Column: Premium Bento Stats Grid (5 cols) */}
-          <div className="lg:col-span-5 grid grid-cols-2 gap-6">
-            {STATS.map((stat, idx) => (
-              <div
-                key={stat.value}
-                className={`p-6 rounded-[2rem] flex flex-col justify-between aspect-square hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${stat.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
-              >
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                  <MaterialIcon icon={stat.icon} size={22} />
-                </div>
-                <div>
-                  <p className="text-4xl font-display font-black tracking-tight">
-                    {stat.value}
-                  </p>
-                  <p className="text-label-sm font-semibold mt-1 opacity-90 leading-tight">
-                    {stat.label}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-        </div>
-
-        {/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
-        <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-8 md:p-16 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
-          {/* Decorative background vectors */}
-          <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
-          <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
-
-          {/* Left copy column */}
-          <div className="md:w-3/5 z-10 text-brand-dark">
-            <span className="text-[10px] font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
-              Piping Hot & Fresh
                   </span>
-            <h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
+                </div>
-              Always the Hottest Meals <br />& Freshest Groceries.
+                <div className="flex items-center gap-3">
-            </h3>
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
-            <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
+                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
-              Our advanced insulation packs guarantee your hot food stays steaming, and frozen goods stay completely frozen until handed to you.
+                  </div>
-            </p>
+                  <span className="font-bold text-brand-dark text-sm md:text-base">
-            <a
+                    Build direct relationships with local families
-              href="#"
+                  </span>
-              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md"
+                </div>
-            >
-              Order Meals Now
-            </a>
               </div>
 
-          {/* Right visual column */}
+              <div className="mt-7 flex flex-col gap-3">
-          <div className="md:w-2/5 relative flex justify-center items-center">
+                <Link
-            {/* Soft background shape */}
+                  href="/businesses"
-            <div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
+                >
+                  Partner With Nearle
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
+                <Link
+                  href="/contact"
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
+                >
+                  Talk to Our Team
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
+              </div>
+            </div>
 
-            <div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
+            {/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
+                 mobile  : order-2 → appears after text, before success story
+                 tablet  : order-3 → appears after text + success story
+                 desktop : explicit col-2, row-span-2
+            */}
+            <div className="min-w-0
+              order-2 md:order-3
+              xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
+              grid grid-cols-1 gap-4 md:grid-cols-2">
+              {FEATURES.map((feature) => (
+                <article
+                  key={feature.title}
+                  className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)]"
+                >
+                  <div className="p-5">
+                    <div className="flex items-start gap-3">
+                      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
+                        <MaterialIcon icon={feature.icon} size={22} />
+                      </div>
+                      <div className="min-w-0">
+                        <h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
+                          {feature.title}
+                        </h3>
+                        <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
+                          {feature.desc}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-auto w-full overflow-hidden">
                     <Image
-                src="/images/cat-hot-food.png"
+                      src={feature.visual}
-                alt="Hot meals from Nearle local kitchen partners"
+                      alt={feature.alt}
-                width={400}
+                      width={900}
-                height={400}
+                      height={560}
-                className="w-full h-full object-cover scale-105"
+                      sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
+                      className="block h-auto w-full object-cover"
                     />
                   </div>
+                </article>
+              ))}
+            </div>
+
+            {/* ── 3. Success story ──
+                 mobile  : order-3 → appears after feature cards
+                 tablet  : order-2 → appears after text, before cards
+                 desktop : explicit col-1, row-2 (below text in left column)
+            */}
+            <div className="min-w-0
+              order-3 md:order-2
+              xl:order-none xl:col-start-1 xl:row-start-2
+              overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
+              grid grid-cols-[100px_minmax(0,1fr)]">
+              <div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
+                <Image
+                  src="/images/nearle-merchant/success-owner.webp"
+                  alt="Indian grocery shop owner using a smartphone inside a kirana store"
+                  fill
+                  sizes="100px"
+                  className="object-cover object-center"
+                />
+              </div>
+              <div className="min-w-0 px-4 py-4">
+                <span className="text-[10px] font-black uppercase tracking-widest text-primary">
+                  Success Story
+                </span>
+                <h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
+                  Kumar Provision Store
+                </h3>
+                <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
+                  Nearle helped us reach more customers in our area and manage orders effortlessly.
+                </p>
+              </div>
             </div>
           </div>
 
+          {/* ── Benefits strip ── */}
+          <div className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]">
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
+              {BENEFITS.map((b) => (
+                <div key={b.title} className="flex items-start gap-3 p-5">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
+                    <MaterialIcon icon={b.icon} size={20} />
+                  </div>
+                  <div>
+                    <div className="text-sm font-black text-brand-dark">{b.title}</div>
+                    <div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );

src/components/home/Hero.tsx

@@ -1,220 +1,189 @@
+import Link from "next/link";
 import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-const QUICK_LINKS = [
+const PROOF_ITEMS = [
-  {
+  { label: "Verified", text: "Local Stores", icon: "store" },
-    name: "Hot Meals",
+  { label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
-    icon: "fastfood",
+  { label: "Growing", text: "Customer Community", icon: "mood" },
-    label: "Quick & tasty",
+  { label: "Trusted", text: "Local Platform", icon: "star" },
-  },
-  {
-    name: "Daily Groceries",
-    icon: "shopping_basket",
-    label: "Fresh & On-Time",
-  },
-  {
-    name: "Health & Care",
-    icon: "medical_services",
-    label: "Essential & Trusted",
-  },
-  {
-    name: "More Services",
-    icon: "grid_view",
-    label: "Explore More",
-  },
 ];
 
 export function Hero() {
   return (
-    <div className="hero">
+    <section className="relative overflow-hidden bg-gradient-to-b from-[#FAF8FC] to-[#FFFFFF] select-none w-full">
-      {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
+      {/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
-      <div className="hero-dark-panel select-none pointer-events-none">
-        {/* Subtle Background Dot Texture (Minimal, barely visible) */}
-        <div className="hero-map-layer select-none">
-          <Image
-            src="/images/slider-glob.png"
-            alt="Subtle Background"
-            fill
-            sizes="(max-width: 768px) 100vw, 40vw"
-            className="object-contain object-left-top"
-            priority
-          />
-        </div>
       
-        {/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
+      {/* 1. Large pale lavender partial circle (top-left) */}
-        <svg
+      <div className="hidden md:block absolute top-[-100px] left-[-100px] w-[350px] h-[350px] rounded-full border-[1.5px] border-[#6D28D9]/15 bg-[#6D28D9]/5 opacity-[0.55] z-0 pointer-events-none" />
-          className="absolute inset-0 w-full h-full pointer-events-none"
-          viewBox="0 0 1000 800"
-          preserveAspectRatio="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <defs>
-            <filter
-              id="heroRouteGlow"
-              x="-50%"
-              y="-50%"
-              width="200%"
-              height="200%"
-            >
-              <feGaussianBlur stdDeviation="3" result="blur" />
-              <feMerge>
-                <feMergeNode in="blur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-          </defs>
-          {/* Minimal glow nodes - only 2 small ones at top */}
-          <circle
-            cx="140"
-            cy="100"
-            r="5"
-            className="fill-[#bd34fe] opacity-20 animate-pulse"
-            filter="url(#heroRouteGlow)"
-          />
-          <circle cx="140" cy="100" r="1.5" className="fill-white" />
 
-          <circle
+      {/* 2. Purple solid circle (center-right around collage) */}
-            cx="300"
+      <div className="hidden lg:block absolute right-[22%] top-[38%] w-[84px] h-[84px] rounded-full bg-[#6D28D9] z-0 shadow-[0_8px_32px_rgba(109,40,217,0.3)] pointer-events-none animate-pulse" />
-            cy="80"
-            r="5"
-            className="fill-[#bd34fe] opacity-20 animate-pulse"
-            filter="url(#heroRouteGlow)"
-          />
-          <circle cx="300" cy="80" r="1.5" className="fill-white" />
 
-          {/* Only 2 very thin route lines at top - staying clear of text area */}
+      {/* 3. Striped purple circle (lower-middle collage area) */}
-          <path
+      <div 
-            d="M140,100 Q220,85 300,80"
+        className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
-            fill="none"
+        style={{ 
-            stroke="#c02cff"
+          backgroundImage: 'repeating-linear-gradient(45deg, rgba(109, 40, 217, 0.2) 0px, rgba(109, 40, 217, 0.2) 2px, transparent 2px, transparent 8px)' 
-            strokeWidth="1"
+        }}
-            strokeDasharray="4,4"
-            className="animate-route opacity-15"
-            filter="url(#heroRouteGlow)"
-          />
-          <path
-            d="M300,80 Q370,110 420,140"
-            fill="none"
-            stroke="#c02cff"
-            strokeWidth="1"
-            strokeDasharray="4,4"
-            className="animate-route opacity-12"
-            filter="url(#heroRouteGlow)"
       />
+
+      {/* 4. Dotted pattern (between left text and right collage) */}
+      <div className="hidden lg:block absolute left-[41%] top-[25%] w-48 h-48 opacity-[0.35] z-0 pointer-events-none">
+        <svg className="w-full h-full text-[#6D28D9]" fill="currentColor">
+          <pattern id="hero-decor-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+            <circle cx="2" cy="2" r="1.5" />
+          </pattern>
+          <rect width="100%" height="100%" fill="url(#hero-decor-dots)" />
         </svg>
-
-        {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
-        <div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
       </div>
 
-      {/* ─── Main Content Wrapper ─── */}
+      {/* 5. Three small X marks */}
-      <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
+      <div className="absolute top-[8%] left-[48%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
-        {/* Left Column: Text & Search Content */}
+      <div className="hidden lg:block absolute top-[52%] left-[44%] text-[#6D28D9]/20 font-bold text-lg pointer-events-none select-none z-0">✕</div>
-        <div className="hero-content text-white select-none">
+      <div className="absolute bottom-[14%] right-[5%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
-          <span className="inline-block text-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
+
-            Express Services
+      {/* 6. Large partial purple circle (bottom-right corner) */}
+      <div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
+
+      {/* ─── TWO-COLUMN CONTENT GRID ─── */}
+      <div className="page-container relative grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center py-16 md:py-20 lg:py-24 z-10 gap-12 lg:gap-6">
+        
+        {/* LEFT COLUMN: Editorial Typography & Copy */}
+        <div className="flex flex-col text-left max-w-xl z-20 relative">
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6D28D9]/10 text-[#6D28D9] uppercase mb-6 w-fit">
+            Welcome to Nearle
           </span>
 
-          <h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
+          <h1 className="font-display text-4xl sm:text-5xl lg:text-[68px] xl:text-[76px] font-black text-[#16001D] leading-[0.95] tracking-[-0.05em]">
-            Express
+            Everything Local.
             <br />
-            <span className="text-brand-accent drop-shadow-md">
+            Everything <span className="text-[#6D28D9]">Near.</span>
-              Neighborhood
-            </span>
           </h1>
 
-          <p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
+          <p className="max-w-[480px] text-base md:text-lg text-[#6D6172] leading-relaxed font-bold mt-6">
-            Get groceries, hot meals, daily essentials, and local professional
+            Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
-            services delivered from trusted partners within{" "}
-            <span className="text-brand-accent font-bold">25-30 minutes</span>.
           </p>
 
-          {/* Search Input Bar */}
+          <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-          <div className="flex flex-col gap-4">
+            <Link
-            <div className="flex items-center bg-white p-2 rounded-full shadow-2xl border border-white/10 focus-within:ring-4 focus-within:ring-brand-accent/30 transition-all duration-300 max-w-[620px]">
+              href="/people"
-              <MaterialIcon
+              className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-                icon="location_on"
-                size={22}
-                className="ml-4 text-brand-accent animate-pulse-subtle"
-              />
-              <input
-                type="text"
-                placeholder="Enter your neighbourhood or delivery location..."
-                className="w-full border-none focus:ring-0 focus:outline-none text-body-md text-on-surface font-semibold placeholder-on-surface-variant/50 px-3 py-2 bg-transparent"
-              />
-              <button className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-6 py-3 rounded-full text-label-sm hover:shadow-lg transition-all active:scale-95 duration-200 whitespace-nowrap cursor-pointer">
-                Find Shops
-              </button>
-            </div>
-
-            {/* Popular tags below */}
-            <div className="flex gap-3 items-center flex-wrap px-4 mt-2">
-              <span className="text-label-sm text-white/40 uppercase tracking-widest font-black text-[10px]">
-                Popular:
-              </span>
-              {["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => (
-                <a
-                  key={tag}
-                  href="#"
-                  className="text-label-sm text-brand-accent-light hover:text-brand-accent transition-colors font-bold"
             >
-                  {tag}
+              Explore Stores
-                </a>
+            </Link>
-              ))}
+            <Link
-            </div>
+              href="/people#download-section"
+              className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-[0.98]"
+            >
+              Get the App
+            </Link>
           </div>
         </div>
 
-        {/* Right Column: Dominant delivery image (Overlapping) */}
+        {/* RIGHT COLUMN: Creative Overlapping Strips Collage */}
-        <div className="hero-visual-layer select-none pointer-events-none">
+        <div className="w-full z-20">
-          <div className="hero-visual-panel" />
+          
-          <div className="hero-visual-image">
+          {/* DESKTOP LAYOUT (lg and above) */}
+          <div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
+            {/* left image: absolute left-[10%] top-[20%] w-[170px] h-[360px] */}
+            <div className="absolute left-[10%] top-[20%] w-[170px] h-[360px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
+              <Image 
+                src="/images/cat-daily-essentials.png" 
+                alt="Local grocery products" 
+                fill 
+                className="object-cover"
+                sizes="170px"
+              />
+            </div>
+
+            {/* middle image: central logo panel absolute left-[38%] top-[8%] */}
+            <div className="absolute left-[38%] top-[8%] z-20 transition-transform duration-300 hover:scale-[1.02]">
+              <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
                 <Image
                   src="/nearlenewlogo.png"
-              alt="Nearle delivery"
+                  alt="Central logo panel"
-              fill
+                  width={160}
-              sizes="(max-width: 768px) 95vw, 48vw"
+                  height={160}
-              className="object-contain object-bottom drop-shadow-2xl"
+                  className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
                   priority
                 />
               </div>
             </div>
+
+            {/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
+            <div className="absolute right-[2%] top-[18%] w-[180px] h-[390px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
+              <Image 
+                src="/nearle people.png" 
+                alt="Local customer shopping" 
+                fill 
+                className="object-cover"
+                sizes="180px"
+              />
+            </div>
           </div>
 
-      {/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
+          {/* MOBILE/TABLET COLLAGE (below lg) */}
-      <div className="hero-cards">
+          <div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="relative w-[95px] h-[200px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
-          {QUICK_LINKS.map((item) => (
+              <Image 
-            <div
+                src="/images/cat-daily-essentials.png" 
-              key={item.name}
+                alt="Grocery products" 
-              className="flex items-center gap-4 bg-white p-5 rounded-2xl border border-outline-variant/15 shadow-xl hover:shadow-2xl premium-card cursor-pointer group"
+                fill 
-            >
+                className="object-cover"
-              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent/10 flex items-center justify-center group-hover:bg-brand-accent/20 transition-colors">
+                sizes="95px"
-                <MaterialIcon
-                  icon={item.icon}
-                  size={24}
-                  className="text-brand-accent"
               />
             </div>
-              <div className="flex-grow">
+            <div className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20">
-                <h3 className="text-label-md font-extrabold text-brand-dark group-hover:text-primary transition-colors">
+              <Image 
-                  {item.name}
+                src="/nearlenewlogo.png" 
-                </h3>
+                alt="Central logo panel" 
-                <p className="text-[11px] text-on-surface-variant font-medium mt-0.5 leading-tight">
+                width={100} 
+                height={100} 
+                className="object-contain max-h-[90px] w-auto animate-[pulse_6s_infinite]"
+                priority
+              />
+            </div>
+            <div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
+              <Image 
+                src="/nearle people.png" 
+                alt="Customer" 
+                fill 
+                className="object-cover"
+                sizes="105px"
+              />
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      {/* ─── BOTTOM PROOF STATS ROW ─── */}
+      <div className="border-t border-[#EEE7F4]/80 bg-white">
+        <div className="page-container py-8 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 relative z-20">
+          {PROOF_ITEMS.map((item, idx) => (
+            <div key={item.label} className="flex items-center gap-4 text-left md:justify-center relative">
+              {/* Subtle vertical separator for desktop, except for the first item */}
+              {idx > 0 && (
+                <div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-[1px] h-10 bg-[#EEE7F4]" />
+              )}
+              <div className="w-10 h-10 rounded-full bg-[#6D28D9]/8 text-[#6D28D9] flex items-center justify-center shrink-0">
+                <MaterialIcon icon={item.icon} size={18} />
+              </div>
+              <div>
+                <div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
                   {item.label}
-                </p>
                 </div>
-              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-surface-container flex items-center justify-center opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
+                <div className="text-xs text-[#6D6172] font-semibold mt-1">
-                <MaterialIcon
+                  {item.text}
-                  icon="arrow_forward"
+                </div>
-                  size={16}
-                  className="text-primary"
-                />
               </div>
             </div>
           ))}
         </div>
       </div>
-    </div>
+
+    </section>
   );
 }

src/components/home/HowItWorks.tsx

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

src/components/home/HyperlocalFeatures.tsx

@@ -1,156 +1,129 @@
 import Image from "next/image";
+import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const FEATURES = [
   {
-    title: "Verified Community Partners",
+    title: "Trusted Nearby Stores",
-    icon: "verified_user",
+    icon: "store",
-    desc: "Every merchant on Nearle is manually verified for food hygiene, service quality, and local licensing.",
+    desc: "Connect directly with the local merchants you already know.",
   },
   {
-    title: "Eco-Friendly 2KM Logistics",
+    title: "Short-Distance Delivery",
-    icon: "electric_moped",
+    icon: "local_shipping",
-    desc: "By capping deliveries at 2km, we run a fast, eco-friendly moped fleet that reduces emissions and saves fuel.",
+    desc: "Delivered quickly from nearby shops to keep items fresh.",
   },
   {
-    title: "Exclusive Society Discounting",
+    title: "Easy Reorders",
-    icon: "local_activity",
+    icon: "replay",
-    desc: "We coordinate with housing societies to negotiate collective discount rates and free scheduled delivery runs.",
+    desc: "Save your favourite stores and reorder in seconds.",
+  },
+  {
+    title: "Support Local Businesses",
+    icon: "favorite",
+    desc: "Help local neighbourhood stores thrive digitally.",
   },
 ];
 
 export function HyperlocalFeatures() {
   return (
-    <section className="bg-[#f7f7f9] py-[72px] px-4 min-[901px]:py-[100px] min-[901px]:px-8 relative overflow-hidden border-y border-outline-variant/10">
+    <section className="section bg-white w-full relative">
-      {/* Scoped CSS styles for precise layout enforcement */}
-      <style>{`
-        @media (min-width: 901px) {
-          .custom-care-grid {
-            grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
-            gap: 56px !important;
-            width: min(1280px, calc(100% - 64px)) !important;
-          }
-          .custom-care-visual {
-            max-width: 470px !important;
-            height: 520px !important;
-          }
-          .custom-care-card {
-            min-height: 520px !important;
-            padding: 60px !important;
-          }
-        }
-        @media (max-width: 900px) {
-          .custom-care-grid {
-            grid-template-columns: 1fr !important;
-            gap: 32px !important;
-            width: min(1280px, calc(100% - 32px)) !important;
-          }
-          .custom-care-visual {
-            max-width: 420px !important;
-            height: 460px !important;
-          }
-          .custom-care-card {
-            min-height: auto !important;
-            padding: 36px 24px !important;
-          }
-        }
-      `}</style>
-
       {/* Subtle background radial glows */}
       <div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
       <div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
 
       {/* Inner container */}
-      <div className="custom-care-grid mx-auto grid items-center">
+      <div className="page-container relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-center">
           
           {/* Left Column: Visual Storytelling */}
-        <div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border-2 border-white/90 bg-gradient-to-br from-[#fdfbf7] to-[#f5f0e6] shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10">
+          <div className="w-full max-w-[530px] justify-self-center relative rounded-[2rem] border border-outline-variant/15 bg-slate-100/50 z-10 overflow-hidden aspect-[10/11] lg:h-[580px]">
             
-          {/* Grocery image inside the lower area (occupies exactly 62% height) */}
+            {/* Main Background Cover Image */}
-          <div className="absolute inset-x-0 bottom-0 h-[62%] w-full overflow-hidden select-none pointer-events-none">
+            <div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
               <Image
                 src="/images/cat-daily-essentials.png"
-              alt="Fresh groceries and goods delivered at home"
+                alt="Local store background"
                 fill
                 sizes="(max-width: 900px) 420px, 470px"
-              className="object-cover object-bottom block transition-transform duration-500 hover:scale-[1.02]"
+                className="object-cover"
                 priority
               />
             </div>
 
-          {/* Eco-Friendly floating pill */}
+            {/* Banner Label at Top */}
-          <div className="absolute bottom-[22px] left-[22px] right-[22px] bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/15 shadow-xl z-20">
+            <div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
-            <div className="flex items-center gap-3">
+              <span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
-              <div className="w-9 h-9 rounded-full bg-brand-accent/15 flex items-center justify-center flex-shrink-0">
+              <h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
-                <MaterialIcon icon="eco" className="text-brand-accent" size={20} />
             </div>
-              <div>
+
-                <h4 className="text-[13px] font-black text-brand-dark leading-tight">100% Eco-Friendly</h4>
+            {/* Main Store/Product Card (Middle floating) */}
-                <p className="text-[10px] text-on-surface-variant font-bold mt-0.5 leading-none">Reducing neighbor carbon footprint</p>
+            <div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-[18px] border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
+              <div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
+                <Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
+                <p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
+                <div className="flex items-center gap-1 mt-1.5">
+                  <MaterialIcon icon="star" size={14} className="text-amber-500" />
+                  <span className="text-xs font-bold text-brand-dark">Top Rated</span>
+                  <span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
                 </div>
               </div>
             </div>
 
-          {/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */}
+            {/* Small Delivery Status Card (Bottom floating) */}
-          <div className="absolute top-[40px] -left-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
+            <div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
-            <div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
-              <MaterialIcon icon="location_on" className="text-brand-accent" size={14} />
+                <MaterialIcon icon="check" size={16} className="text-white font-bold" />
               </div>
-            <span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">2KM Local Delivery</span>
+              <div className="min-w-0">
+                <p className="text-xs md:text-sm font-black">Order Confirmed</p>
+                <p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
               </div>
-
-          <div className="absolute top-[144px] -right-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
-            <div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
-              <MaterialIcon icon="verified" className="text-brand-accent" size={14} />
-            </div>
-            <span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">Verified Partners</span>
             </div>
 
           </div>
 
-        {/* Right Column: Dark Feature Panel */}
+          {/* Right Column: Feature Panel directly on page background */}
-        <div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
+          <div className="w-full py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
-          {/* Internal ambient glows (subtle) */}
+            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
-          <div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
+              Community & Trust
-          <div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
-          
-          <div className="relative z-10">
-            <span className="text-label-sm text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
-              Care & Quality
             </span>
             
-            <h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
+            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-6 mb-8 leading-tight tracking-tight">
-              Relax at Home,<br />
+              Built Around Your<br />
-              <span className="text-brand-accent font-black">We Care.</span>
+              <span className="text-primary font-black">Neighbourhood</span>
             </h3>
 
-            <p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
+            <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
-              Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards.
+              Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
             </p>
 
             {/* Features List with vertical connector line */}
             <div className="relative space-y-8">
               
-              {/* Vertical connector line (orange low-opacity) */}
+              {/* Vertical connector line */}
-              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
+              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />
               
               {FEATURES.map((item) => (
                 <div key={item.title} className="flex gap-5 group relative z-10">
                   
-                  {/* Orange icon circle */}
+                  {/* Icon circle */}
-                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
+                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
                     <MaterialIcon
                       icon={item.icon}
-                      className="text-brand-dark"
+                      className="text-white"
                       size={22}
                     />
                   </div>
                   
                   <div>
-                    <h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
+                    <h4 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
                       {item.title}
                     </h4>
-                    <p className="text-body-md text-white/60 mt-1 leading-relaxed">
+                    <p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
                       {item.desc}
                     </p>
                   </div>
@@ -159,27 +132,27 @@ export function HyperlocalFeatures() {
             </div>
 
             {/* Divider Line above CTA Area */}
-            <hr className="border-t border-white/10 my-8 relative z-10" />
+            <hr className="border-t border-[#EEE7F4] my-8 relative z-10" />
 
             {/* Onboarding Call to Action */}
             <div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
-              <a
+              <Link
-                href="#download"
+                href="/#download"
-                className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
+                className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
               >
                 Get Nearle App
-              </a>
+              </Link>
-              <a
+              <Link
-                href="#"
+                href="/businesses"
-                className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2"
+                className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
               >
-                Partner Code of Ethics
+                <span>Learn How to Partner</span>
                 <MaterialIcon
                   icon="arrow_forward"
                   size={16}
                   className="transition-transform group-hover:translate-x-1"
                 />
-              </a>
+              </Link>
             </div>
 
           </div>
@@ -189,3 +162,4 @@ export function HyperlocalFeatures() {
     </section>
   );
 }
+

src/components/home/ServiceCategories.tsx

@@ -1,95 +1,91 @@
 import Image from "next/image";
+import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const CATEGORIES = [
   {
-    name: "Hot Food",
+    name: "Groceries & Daily Essentials",
-    image: "/images/cat-hot-food.png",
-    tag: "Popular",
-    tagStyle: "bg-brand-accent text-brand-dark",
-    desc: "Fresh meals, bakes & street favorites",
-    stats: "★ 4.8 (250+ kitchens)",
-    cta: "Order Now",
-  },
-  {
-    name: "Daily Essentials",
     image: "/images/cat-daily-essentials.png",
-    tag: "15 Mins",
+    tag: "Local Store",
     tagStyle: "bg-secondary text-white",
-    desc: "Groceries, fresh fruits & veggies",
+    desc: "Fresh groceries, dairy, and household essentials from nearby shops.",
-    stats: "★ 4.9 (180+ stores)",
     cta: "Shop Fresh",
   },
   {
-    name: "Health & Wellness",
+    name: "Medicines & Pharmacy",
     image: "/images/cat-health-wellness.png",
-    tag: "24/7 Delivery",
+    tag: "Available Near You",
     tagStyle: "bg-primary text-white",
-    desc: "Medicines & daily health supplies",
+    desc: "Prescription medicines and wellness supplies from verified pharmacies.",
-    stats: "★ 4.7 (95+ pharmacies)",
     cta: "Order Meds",
   },
   {
-    name: "Home Services",
+    name: "Food & Snacks",
-    image: "/images/cat-home-services.png",
+    image: "/images/cat-hot-food.png",
-    tag: "Verified Professionals",
+    tag: "Nearby",
-    tagStyle: "bg-blue-600 text-white",
+    tagStyle: "bg-brand-accent text-brand-dark",
-    desc: "Electricians, cleaning & repairs",
+    desc: "Fresh meals, bakes, and local snacks from neighbourhood kitchens.",
-    stats: "★ 4.9 (340+ experts)",
+    cta: "Order Now",
-    cta: "Book Service",
   },
   {
-    name: "Pet Essentials",
+    name: "Fresh Fruits & Vegetables",
+    image: "/images/cat-daily-essentials.png",
+    tag: "Local Store",
+    tagStyle: "bg-secondary text-white",
+    desc: "Farm-fresh fruits and vegetables from trusted local vendors.",
+    cta: "Browse Fresh",
+  },
+  {
+    name: "Home Needs",
     image: "/images/cat-pet-essentials.png",
-    tag: "Express",
+    tag: "Available Near You",
     tagStyle: "bg-orange-500 text-white",
-    desc: "Pet food, toys & grooming care",
+    desc: "Kitchen supplies, household cleaners, and daily utilities.",
-    stats: "★ 4.8 (60+ partners)",
+    cta: "Shop Needs",
-    cta: "Shop Pet",
   },
   {
-    name: "More Services",
+    name: "Local Services",
-    image: null,
+    image: "/images/cat-home-services.png",
-    tag: "Hyperlocal",
+    tag: "Nearby",
-    tagStyle: "bg-surface-variant text-on-surface",
+    tagStyle: "bg-blue-600 text-white",
-    desc: "Laundry, car wash, tailoring & more",
+    desc: "Verified local handymen, laundry, tailors, and household help.",
-    stats: "★ 5.0 (500+ services)",
+    cta: "Book Service",
-    cta: "Explore All",
   },
 ];
 
 export function ServiceCategories() {
   return (
-    <section className="bg-background pt-28 pb-16 px-margin-mobile md:px-margin-desktop">
+    <section className="section bg-white w-full">
-      <div className="max-w-container-max mx-auto">
+      <div className="page-container">
         {/* Header Section */}
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 md:mb-12 xl:mb-10 gap-6">
           <div>
-            <span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1 rounded-full">
+            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3 py-1.5 rounded-full">
-              Neighborhood Offerings
+              Neighbourhood Offerings
             </span>
-            <h2 className="text-display text-brand-dark mt-3 leading-tight">
+            <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
-              Popular Services <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-2 max-w-xl">
+            <p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
-              From fresh groceries to emergency services, everything in your 2km radius delivered instantly.
+              Groceries, medicines, food, and everyday essentials from nearby local shops.
             </p>
           </div>
-          <a
+          <Link
-            href="#"
+            href="/people"
-            className="text-primary text-label-md font-black flex items-center gap-1 hover:gap-2 transition-all group"
+            className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group shrink-0"
           >
             View All Categories
             <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
-          </a>
+          </Link>
         </div>
 
         {/* Categories Premium Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {CATEGORIES.map((cat) => (
-            <div
+            <Link
               key={cat.name}
-              className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full"
+              href="/people"
+              className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full cursor-pointer"
             >
               {/* Image Container */}
               <div className="relative aspect-[4/3] w-full overflow-hidden bg-surface-container/30">
@@ -110,28 +106,25 @@ export function ServiceCategories() {
                 )}
 
                 {/* Overlaid Badge */}
-                <div className={`absolute top-4 left-4 text-[10px] font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-md z-10 ${cat.tagStyle}`}>
+                <div className={`absolute top-4 left-4 text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-md z-10 ${cat.tagStyle}`}>
                   {cat.tag}
                 </div>
               </div>
 
               {/* Card Body */}
-              <div className="p-6 flex flex-col flex-grow">
+              <div className="p-6 flex flex-col flex-grow justify-between min-h-[160px]">
-                <div className="flex items-center justify-between mb-2">
+                <div>
-                  <h3 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
+                  <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
                     {cat.name}
                   </h3>
-                  <span className="text-[11px] font-bold text-on-surface-variant bg-surface-container px-2.5 py-1 rounded-full">
+                  <p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
-                    {cat.stats}
-                  </span>
-                </div>
-                <p className="text-body-md text-on-surface-variant mb-6 flex-grow leading-relaxed">
                     {cat.desc}
                   </p>
+                </div>
 
                 {/* Interactive Action Button */}
                 <div className="flex items-center justify-between pt-4 border-t border-dashed border-outline-variant/25">
-                  <span className="text-label-sm text-primary font-black uppercase tracking-wider group-hover:underline">
+                  <span className="text-sm text-primary font-black uppercase tracking-wider group-hover:underline">
                     {cat.cta}
                   </span>
                   <div className="w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center group-hover:bg-brand-accent group-hover:text-brand-dark transition-colors duration-300 shadow-md">
@@ -139,10 +132,11 @@ export function ServiceCategories() {
                   </div>
                 </div>
               </div>
-            </div>
+            </Link>
           ))}
         </div>
       </div>
     </section>
   );
 }
+

src/components/home/StoreQRSection.tsx

@@ -0,0 +1,233 @@
+import Image from "next/image";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const FLOW_STEPS = [
+  { label: "Scan QR", icon: "qr_code_scanner" },
+  { label: "Save Store", icon: "bookmark" },
+  { label: "Order Anytime", icon: "shopping_bag" },
+];
+
+export function StoreQRSection() {
+  return (
+    <section className="mb-2 bg-white w-full px-2 pt-2 md:mb-3 md:px-3 md:pt-3 lg:mb-4 lg:px-4 lg:pt-4 xl:mb-4 xl:px-5 xl:pt-4 2xl:mb-4 2xl:px-6">
+      <div className="w-full">
+        <div id="download" className="w-full bg-gradient-to-br from-[#1A0322] to-[#0A000D] rounded-3xl md:rounded-[2rem] overflow-hidden text-white relative flex items-center py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20 border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.22)]">
+      {/* Background ambient glowing details */}
+      <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
+      <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
+
+      <div className="w-full relative z-10">
+        
+        {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
+        <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">
+            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
+              Instant Connections & App
+            </span>
+            <h2 className="text-4xl md:text-5xl lg:text-[60px] xl:text-[66px] font-display font-black text-white mt-6 mb-6 leading-[1.08] tracking-tight">
+              Scan to Shop, <br />
+              <span className="text-brand-accent font-black">Order in Your Pocket.</span>
+            </h2>
+            <p className="text-body-lg text-white/70 mb-10 max-w-xl leading-relaxed">
+              Find Nearle QRs at nearby stores. Scan once to save it, then order groceries, food, or medicines from your favourite local merchant anytime.
+            </p>
+
+            {/* QR Steps row with arrows */}
+            <div className="flex items-center gap-6 mb-12 max-w-md select-none">
+              {FLOW_STEPS.map((step, idx) => (
+                <div key={step.label} className="flex items-center gap-6 flex-1">
+                  <div className="flex flex-col items-center text-center group flex-1">
+                    <div className="w-14 h-14 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2 transition-transform duration-300 group-hover:-translate-y-0.5">
+                      <MaterialIcon icon={step.icon} size={24} />
+                    </div>
+                    <span className="text-sm font-bold text-white/90">
+                      {step.label}
+                    </span>
+                  </div>
+                  {idx < FLOW_STEPS.length - 1 && (
+                    <MaterialIcon icon="arrow_forward" size={16} className="text-white/30" />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
+            <div className="flex flex-wrap gap-4">
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
+                  <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
+                </svg>
+                <div className="text-left leading-tight">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
+                    App Store
+                  </div>
+                  <div className="text-sm font-black">
+                    Available on
+                  </div>
+                </div>
+              </div>
+
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
+                  <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
+                </svg>
+                <div className="text-left leading-tight">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
+                    Google Play
+                  </div>
+                  <div className="text-sm font-black">
+                    Available on
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Visual components (QR Sticker & Phone Mockup) */}
+          <div className="lg:col-span-6 flex items-center justify-center gap-8 relative select-none">
+            {/* Small supporting visual: QR Sticker (Secondary) */}
+            <div className="relative w-[210px] shrink-0 aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-2xl border-2 border-white/20">
+              <div className="text-center w-full">
+                <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
+                <h4 className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</h4>
+              </div>
+
+              <div className="relative w-32 h-32 bg-white flex items-center justify-center">
+                <Image
+                  src="/nearle-qr-code.png"
+                  alt="Nearle Store QR Code"
+                  width={132}
+                  height={132}
+                  className="object-contain"
+                />
+              </div>
+
+              <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary leading-none">
+                <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+                Scan to Shop
+              </span>
+            </div>
+
+            {/* Primary large visual: Phone Mockup (Significantly Larger) */}
+            <div className="relative w-[290px] shrink-0 aspect-[9/18.5] bg-[#120217] rounded-[2.75rem] border-[7px] border-brand-dark-surface shadow-2xl overflow-hidden ring-4 ring-outline-variant/10">
+              <Image
+                src="/mobile image.jpeg"
+                alt="Nearle mobile app interface"
+                width={360}
+                height={760}
+                className="w-full h-full object-cover"
+              />
+            </div>
+
+
+          </div>
+        </div>
+
+        {/* ─── MOBILE & TABLET LAYOUT (below lg) ─── */}
+        <div className="lg:hidden flex flex-col gap-12 text-center">
+          {/* 1. Heading and description */}
+          <div>
+            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20 inline-block">
+              Instant Connections & App
+            </span>
+            <h2 className="text-4xl font-display font-black text-white mt-6 mb-4 tracking-tight leading-tight">
+              Scan to Shop, <br />Order in Pocket.
+            </h2>
+            <p className="text-body-md text-white/70 max-w-md mx-auto leading-relaxed">
+              Scan Nearle QRs to instantly save local stores, and order from them anytime in one convenient app.
+            </p>
+          </div>
+
+          {/* 2. QR Sticker */}
+          <div className="mx-auto w-[240px] aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-xl border-2 border-white/20 select-none">
+            <div className="text-center w-full">
+              <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
+              <h4 className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</h4>
+            </div>
+
+            <div className="relative w-36 h-36 bg-white flex items-center justify-center">
+              <Image
+                src="/nearle-qr-code.png"
+                alt="Nearle Store QR Code"
+                width={144}
+                height={144}
+                className="object-contain"
+              />
+            </div>
+
+            <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary">
+              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+              Scan to Shop
+            </span>
+          </div>
+
+          {/* 3. Scan → Save → Order steps */}
+          <div className="flex items-center justify-center gap-4 max-w-sm mx-auto select-none">
+            {FLOW_STEPS.map((step, idx) => (
+              <div key={step.label} className="flex items-center gap-4 flex-1">
+                <div className="flex flex-col items-center text-center">
+                  <div className="w-12 h-12 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2">
+                    <MaterialIcon icon={step.icon} size={22} />
+                  </div>
+                  <span className="text-xs font-bold text-white/90">
+                    {step.label}
+                  </span>
+                </div>
+                {idx < FLOW_STEPS.length - 1 && (
+                  <MaterialIcon icon="chevron_right" size={16} className="text-white/30" />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* 4. Phone Mockup */}
+          <div className="mx-auto w-[240px] aspect-[9/18.5] bg-[#120217] rounded-[2.5rem] border-[5px] border-brand-dark-surface shadow-xl relative overflow-hidden select-none">
+            <Image
+              src="/mobile image.jpeg"
+              alt="Nearle mobile app interface"
+              width={360}
+              height={760}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          {/* 5. App store buttons — TODO: replace with real URLs once app is live */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
+                <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
+              </svg>
+              <div className="text-left leading-tight">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
+                  App Store
+                </div>
+                <div className="text-sm font-black">
+                  Available on
+                </div>
+              </div>
+            </div>
+
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
+                <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
+              </svg>
+              <div className="text-left leading-tight">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
+                  Google Play
+                </div>
+                <div className="text-sm font-black">
+                  Available on
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        </div>
+      </div>
+    </div>
+  </section>
+  );
+}

src/components/home/WhyNearle.tsx

@@ -0,0 +1,106 @@
+import Image from "next/image";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const CARDS = [
+  {
+    title: "Shops You Know",
+    desc: "Order from familiar neighbourhood stores near you.",
+    icon: "store",
+    color: "bg-primary/5 text-primary border-primary/10",
+    image: "/images/nearle-redesign/shops-you-know.webp",
+    alt: "Friendly local grocery shop owner inside a kirana store",
+  },
+  {
+    title: "Better Local Value",
+    desc: "Discover local offers and daily savings nearby.",
+    icon: "local_offer",
+    color: "bg-secondary/5 text-secondary border-secondary/10",
+    image: "/images/nearle-redesign/better-local-value.webp",
+    alt: "Fresh local vegetables and fruits with a local offers sign",
+  },
+  {
+    title: "Easy Reordering",
+    desc: "Save your favourite stores for quick reordering.",
+    icon: "history",
+    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+    image: "/images/nearle-redesign/easy-reordering.webp",
+    alt: "Hand holding a smartphone with a simple grocery ordering app",
+  },
+  {
+    title: "Support Local Business",
+    desc: "Every order directly supports nearby shopkeepers.",
+    icon: "favorite",
+    color: "bg-rose-500/5 text-rose-700 border-rose-100",
+    image: "/images/nearle-redesign/support-local-business.webp",
+    alt: "Local shop owner and customer shaking hands inside a store",
+  },
+];
+
+export function WhyNearle() {
+  return (
+    <section className="section section-soft w-full overflow-hidden">
+      <div className="page-container relative">
+        {/* Header Section */}
+        <div className="relative text-center mb-8 md:mb-10">
+          <div className="pointer-events-none absolute -left-2 top-0 hidden h-36 w-36 overflow-hidden rounded-[2rem] bg-primary/5 shadow-[0_18px_45px_rgba(101,20,154,0.12)] md:block lg:-left-4 lg:h-44 lg:w-44">
+            <Image
+              src="/images/nearle-redesign/heading-shopper.webp"
+              alt=""
+              fill
+              sizes="176px"
+              className="object-cover"
+            />
+          </div>
+          <div className="pointer-events-none absolute -right-2 top-1 hidden h-32 w-40 overflow-hidden rounded-[2rem] bg-secondary/5 shadow-[0_18px_45px_rgba(22,0,29,0.10)] md:block lg:-right-4 lg:h-40 lg:w-52">
+            <Image
+              src="/images/nearle-redesign/heading-store.webp"
+              alt=""
+              fill
+              sizes="208px"
+              className="object-cover"
+            />
+          </div>
+          <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
+            Our Philosophy
+          </span>
+          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-3 leading-tight tracking-tight">
+            Why Nearle <span className="text-primary font-normal">Feels Different</span>
+          </h2>
+          <p className="text-body-lg text-on-surface-variant mt-2.5 max-w-xl mx-auto leading-relaxed">
+            Nearle brings the convenience of an app to the stores you already know and trust.
+          </p>
+        </div>
+
+        {/* Cards Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-7">
+          {CARDS.map((card) => (
+            <div
+              key={card.title}
+              className="premium-card bg-white rounded-3xl p-5 md:p-6 border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
+            >
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-5 shrink-0 ${card.color}`}>
+                <MaterialIcon icon={card.icon} size={27} />
+              </div>
+              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
+                {card.title}
+              </h3>
+              <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
+                {card.desc}
+              </p>
+              <div className="relative mt-6 aspect-[4/3] w-full overflow-hidden rounded-[1.35rem] bg-brand-accent-light shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]">
+                <Image
+                  src={card.image}
+                  alt={card.alt}
+                  fill
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                  className="object-cover"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+

src/components/layout/Footer.tsx

@@ -2,8 +2,7 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import { usePathname } from "next/navigation";
+import React from "react";
-import React, { useState } from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const COMPANY = [
@@ -27,341 +26,61 @@ const LEGAL = [
   { label: "Sitemap", href: "#" },
 ];
 
-type FooterFormData = {
-  name: string;
-  phone: string;
-  email: string;
-  message: string;
-};
-
-type FooterFormErrors = {
-  name?: string;
-  phone?: string;
-  email?: string;
-  message?: string;
-};
-
 export function Footer() {
-  const pathname = usePathname();
-  const isContactPage = pathname === "/contact";
-
-  // Form states
-  const [formData, setFormData] = useState<FooterFormData>({
-    name: "",
-    phone: "",
-    email: "",
-    message: "",
-  });
-  const [errors, setErrors] = useState<FooterFormErrors>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitSuccess, setSubmitSuccess] = useState(false);
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-    if (errors[name as keyof FooterFormErrors]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: undefined,
-      }));
-    }
-  };
-
-  const validateForm = (): boolean => {
-    const tempErrors: FooterFormErrors = {};
-    let isValid = true;
-
-    if (!formData.name.trim()) {
-      tempErrors.name = "Name is required";
-      isValid = false;
-    }
-
-    if (!formData.phone.trim()) {
-      tempErrors.phone = "Phone is required";
-      isValid = false;
-    }
-
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!formData.email.trim()) {
-      tempErrors.email = "Email is required";
-      isValid = false;
-    } else if (!emailRegex.test(formData.email)) {
-      tempErrors.email = "Please enter a valid email address";
-      isValid = false;
-    }
-
-    if (!formData.message.trim()) {
-      tempErrors.message = "Message is required";
-      isValid = false;
-    }
-
-    setErrors(tempErrors);
-    return isValid;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-
-    setIsSubmitting(true);
-    // Simulate API delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    setIsSubmitting(false);
-    setSubmitSuccess(true);
-    setFormData({ name: "", phone: "", email: "", message: "" });
-
-    // Hide success alert after 5 seconds
-    setTimeout(() => {
-      setSubmitSuccess(false);
-    }, 5000);
-  };
-
   return (
-    <footer className="relative z-10 bg-brand-dark text-white border-t border-white/5 pt-24 pb-6 w-full mt-24">
+    <footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pb-6 md:pb-8 lg:pb-10 w-full mt-4">
-      {/* Overlapping Contact Helpdesk Card */}
+      <div className="mx-auto w-full max-w-[1920px]">
-      <div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
+        <div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
-        <div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
+          {/* Background ambient glowing details */}
-          <div className="flex items-center gap-4 text-brand-dark">
+          <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
-            <div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
-              <MaterialIcon icon="headset_mic" size={24} />
-            </div>
-            <div>
-              <h4 className="text-headline-md font-black">24/7 Neighborhood Helpdesk</h4>
-              <p className="text-[11px] font-bold text-brand-dark/80 mt-0.5">
-                Need immediate assistance with an order or local service?
-              </p>
-            </div>
-          </div>
-          <a
-            href="tel:+918049123456"
-            className="flex items-center gap-3 bg-brand-dark hover:bg-brand-dark/90 text-brand-accent font-black px-8 py-3.5 rounded-full text-label-md shadow-2xl active:scale-95 duration-200 transition-all"
-          >
-            <MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
-            <span>+91 80 4912 3456</span>
-          </a>
-        </div>
-      </div>
 
-      <div className="max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
-        
+            {/* Col 1: Brand info */}
-        {/* Main content grid: aligned on the same top baseline */}
+            <div className="flex flex-col gap-4">
-        <div className={`grid grid-cols-1 md:grid-cols-2 lg:items-start gap-y-10 gap-x-6 lg:gap-x-12 mb-12 ${
+              <Link href="/" className="inline-block">
-          isContactPage 
-            ? "lg:grid-cols-[220px_170px_190px_150px]" 
-            : "lg:grid-cols-[220px_170px_190px_150px_minmax(360px,480px)]"
-        }`}>
-          {/* Brand Column */}
-          <div className="col-span-1 md:col-span-2 lg:col-span-1">
-            <Link
-              href="/"
-              className="hover:scale-[1.02] transition-transform active:scale-95 duration-200 mb-4 inline-block"
-            >
                 <Image
-                src="/logo-v2.png"
+                  src="/logo-light.png"
                   alt="Nearle"
                   width={220}
                   height={36}
-                style={{ height: "auto" }}
+                  style={{ width: "160px", height: "auto" }}
-                className="h-9 w-auto object-contain"
+                  className="object-contain"
                 />
               </Link>
-            <p className="text-body-sm text-white/60 max-w-xs mb-4 leading-relaxed">
+              <p className="text-sm leading-relaxed text-white/70">
-              India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
+                India&apos;s leading hyperlocal neighborhood network, empowering
+                communities and verified local businesses within 2km.
               </p>
               {/* Social Links */}
-            <div className="flex gap-4">
+              <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 hover:bg-brand-accent hover:text-brand-dark hover:scale-105 transition-all"
+                  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={18} />
+                  <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 hover:bg-brand-accent hover:text-brand-dark hover:scale-105 transition-all"
+                  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={18} />
+                  <MaterialIcon icon="public" size={20} />
                 </a>
               </div>
             </div>
 
-          {/* Company Links */}
+            {/* Col 2: Company Links */}
-          <div className="col-span-1">
-            <FooterCol title="Company" links={COMPANY} />
-          </div>
-
-          {/* Partnerships Links */}
-          <div className="col-span-1">
-            <FooterCol title="Partnerships" links={PARTNERSHIPS} />
-          </div>
-
-          {/* Legal Links */}
-          <div className="col-span-1">
-            <FooterCol title="Legal" links={LEGAL} />
-          </div>
-
-          {/* Contact Form Card */}
-          {!isContactPage && (
-            <div className="col-span-1 md:col-span-2 lg:col-span-1 bg-white text-brand-dark rounded-3xl p-5 md:p-6 shadow-2xl border border-outline-variant/15 relative overflow-hidden w-full lg:max-w-none lg:-translate-x-16 lg:translate-y-2">
-              {/* Background Glow Decors */}
-              <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" />
-              <div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
-
-              <div className="relative z-10 text-center lg:text-left">
-                <h3 className="text-xl font-display font-black text-brand-dark tracking-tight">
-                  Send us a Message
-                </h3>
-                <p className="text-[11px] text-on-surface-variant mt-1 mb-6">
-                  We shall guide you through our Neighbourhood Experts.
-                </p>
-
-                <form onSubmit={handleSubmit} className="space-y-4">
-                  {submitSuccess && (
-                    <div className="p-3 bg-secondary/10 border border-secondary/20 text-secondary text-body-sm font-bold rounded-xl flex items-center justify-center gap-1.5 animate-bounce-subtle">
-                      <MaterialIcon icon="check_circle" size={16} />
-                      <span>Message sent successfully!</span>
-                    </div>
-                  )}
-
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
-                    <div className="flex flex-col text-left">
-                      <input
-                        type="text"
-                        name="name"
-                        value={formData.name}
-                        onChange={handleInputChange}
-                        placeholder="Your Name..."
-                        className={`w-full bg-surface border ${
-                          errors.name ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
-                        } text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
-                      />
-                      {errors.name && (
-                        <span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
-                          <MaterialIcon icon="error" size={10} />
-                          {errors.name}
-                        </span>
-                      )}
-                    </div>
-                    <div className="flex flex-col text-left">
-                      <input
-                        type="text"
-                        name="phone"
-                        value={formData.phone}
-                        onChange={handleInputChange}
-                        placeholder="Your Phone..."
-                        className={`w-full bg-surface border ${
-                          errors.phone ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
-                        } text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
-                      />
-                      {errors.phone && (
-                        <span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
-                          <MaterialIcon icon="error" size={10} />
-                          {errors.phone}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="flex flex-col text-left">
-                    <input
-                      type="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      placeholder="Your Email Address..."
-                      className={`w-full bg-surface border ${
-                        errors.email ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
-                      } text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
-                    />
-                    {errors.email && (
-                      <span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
-                        <MaterialIcon icon="error" size={10} />
-                        {errors.email}
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="flex flex-col text-left">
-                    <textarea
-                      name="message"
-                      value={formData.message}
-                      onChange={handleInputChange}
-                      placeholder="Your Message..."
-                      rows={3}
-                      className={`w-full bg-surface border ${
-                        errors.message ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
-                      } text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all resize-none`}
-                    />
-                    {errors.message && (
-                      <span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
-                        <MaterialIcon icon="error" size={10} />
-                        {errors.message}
-                      </span>
-                    )}
-                  </div>
-
-                  <button
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="w-full bg-primary hover:bg-primary-container disabled:bg-primary/50 text-on-primary font-black px-6 py-3 rounded-xl text-label-md shadow-md active:scale-95 duration-200 transition-all flex items-center justify-center gap-2 cursor-pointer"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                        <span>SUBMITTING...</span>
-                      </>
-                    ) : (
-                      <span>SUBMIT</span>
-                    )}
-                  </button>
-                </form>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="border-t border-white/10 pt-7 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-body-sm text-white/40 lg:pl-20">
-            © {new Date().getFullYear()} Nearle. All rights reserved.
-          </p>
-          <div className="flex items-center gap-2 text-white/40 text-body-sm">
-            <span>Designed for neighborhoods in</span>
-            <span className="flex items-center gap-1 font-bold text-white/80">
-              India 🇮🇳
-            </span>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-function FooterCol({
-  title,
-  links,
-}: {
-  title: string;
-  links: { label: string; href: string }[];
-}) {
-  return (
             <div>
-      <h5 className="text-label-sm font-black text-brand-accent uppercase tracking-widest mb-6">
+              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
-        {title}
+                Company
               </h5>
-      <ul className="space-y-3">
+              <ul className="flex flex-col gap-3">
-        {links.map((l) => (
+                {COMPANY.map((l) => (
                   <li key={l.label}>
                     <Link
                       href={l.href}
-              className="text-body-sm text-white/60 hover:text-brand-accent hover:translate-x-1.5 transition-all duration-300 inline-block"
+                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
                     >
                       {l.label}
                     </Link>
@@ -369,5 +88,111 @@ function FooterCol({
                 ))}
               </ul>
             </div>
+
+            {/* Col 3: Partnerships */}
+            <div>
+              <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"
+                    >
+                      {l.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Col 4: Support / Legal */}
+            <div>
+              <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"
+                    >
+                      {l.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* 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
+                </h5>
+                <p className="text-xs leading-relaxed text-white/60">
+                  424, Diwan Bahadur Rd,
+                  <br />
+                  Opposite to Sri Krishna Sweets,
+                  <br />
+                  R.S. Puram, Coimbatore,
+                  <br />
+                  Tamil Nadu 641002
+                </p>
+                <a
+                  href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-3 inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl border border-white/10 hover:border-[#E6D7EA]/50 text-white/80 hover:text-[#E6D7EA] text-xs font-bold transition-all duration-300"
+                >
+                  <MaterialIcon icon="location_on" size={14} />
+                  <span>Get Directions</span>
+                </a>
+              </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>
+                <a
+                  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"
+                  />
+                  <span className="text-sm font-black tracking-tight">
+                    +91 90920 68666
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Copyright Divider & Bar */}
+          <div className="mt-12 pt-6 border-t border-white/10 relative z-10 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-white/40">
+            <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
+            <div className="flex flex-wrap gap-x-6 gap-y-2 justify-center">
+              {LEGAL.map((link) => (
+                <Link
+                  key={link.label}
+                  href={link.href}
+                  className="hover:text-[#E6D7EA] transition-colors"
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
   );
 }
+
+export default Footer;

src/components/layout/HeroVisualCollage.tsx

@@ -0,0 +1,138 @@
+import Image from "next/image";
+import { GlassInfoCard } from "../ui/GlassInfoCard";
+
+type GlassCardItem = {
+  text: string;
+  icon?: string;
+};
+
+type HeroVisualCollageProps = {
+  centerImage: string;
+  leftImage?: string;
+  rightImage?: string;
+  glassCards: GlassCardItem[];
+  isPhoneCenter?: boolean;
+};
+
+export function HeroVisualCollage({
+  centerImage,
+  leftImage,
+  rightImage,
+  glassCards,
+  isPhoneCenter = true,
+}: HeroVisualCollageProps) {
+  return (
+    <div className="relative w-full h-[380px] sm:h-[450px] lg:h-[500px] max-w-[540px] mx-auto flex items-center justify-center select-none">
+      {/* Decorative backgrounds */}
+      {/* 1. Soft purple circle */}
+      <div className="absolute w-[240px] h-[240px] rounded-full bg-[#7C3AED]/10 blur-[60px] -z-10" />
+
+      {/* 2. SVG Dot grid */}
+      <div className="absolute -top-4 -right-4 w-32 h-32 text-[#6330D6]/10 -z-10 opacity-20">
+        <svg className="w-full h-full" fill="currentColor">
+          <pattern id="collage-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+            <circle cx="2" cy="2" r="1.5" />
+          </pattern>
+          <rect width="100%" height="100%" fill="url(#collage-dots)" />
+        </svg>
+      </div>
+
+      {/* 3. Small x marks */}
+      <div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
+      <div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
+
+      {/* LEFT IMAGE PANEL (Hidden or compact on small mobile) */}
+      {leftImage && (
+        <div className="absolute left-2 sm:left-4 top-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
+          <Image
+            src={leftImage}
+            alt="Collage left asset"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100px, 130px"
+          />
+        </div>
+      )}
+
+      {/* RIGHT IMAGE PANEL */}
+      {rightImage && (
+        <div className="absolute right-2 sm:right-4 bottom-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
+          <Image
+            src={rightImage}
+            alt="Collage right asset"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100px, 130px"
+          />
+        </div>
+      )}
+
+      {/* CENTER COMPONENT */}
+      <div className="relative z-20">
+        {isPhoneCenter ? (
+          /* Phone Frame Container */
+          <div className="relative w-[180px] sm:w-[220px] h-[360px] sm:h-[440px] rounded-[36px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_50px_rgba(99,48,214,0.12)] bg-[#FAF8FC] overflow-hidden flex flex-col justify-center items-center">
+            <Image
+              src={centerImage}
+              alt="Phone Mockup Screen"
+              fill
+              className="object-cover"
+              sizes="(max-width: 640px) 180px, 220px"
+              priority
+            />
+          </div>
+        ) : (
+          /* Central Logo / Visual Panel */
+          <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
+            <Image
+              src={centerImage}
+              alt="Central logo panel"
+              width={160}
+              height={160}
+              className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
+              priority
+            />
+          </div>
+        )}
+      </div>
+
+      {/* FLOATING GLASS CARDS (Positioned Absolute, scaled down on mobile) */}
+      {glassCards.length > 0 && (
+        <div className="absolute inset-0 z-30 pointer-events-none">
+          {/* Card 1: Top Right */}
+          {glassCards[0] && (
+            <div className="absolute right-0 sm:right-[5%] top-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[0].text}
+                icon={glassCards[0].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+
+          {/* Card 2: Bottom Left */}
+          {glassCards[1] && (
+            <div className="absolute left-0 sm:left-[5%] bottom-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[1].text}
+                icon={glassCards[1].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+
+          {/* Card 3: Mid Left/Right */}
+          {glassCards[2] && (
+            <div className="absolute left-[5%] top-[45%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[2].text}
+                icon={glassCards[2].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/layout/Navbar.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { useState } from "react";
+import { usePathname } from "next/navigation";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const NAV_LINKS = [
@@ -15,54 +16,67 @@ const NAV_LINKS = [
 
 export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const pathname = usePathname();
 
   return (
-    <nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-outline-variant/20 transition-all duration-300">
+    <div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
-      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-margin-mobile md:px-16 xl:px-24 py-3">
+      <div className="w-full max-w-[1920px] px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pt-[18px] md:pt-[24px] pointer-events-auto relative">
+        <nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-[rgba(61,45,143,0.88)] border border-white/20 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
+          <div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
             {/* Left: Brand */}
-        <div className="flex items-center">
+            <div className="flex items-center justify-start">
               <Link
                 href="/"
                 className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
               >
                 <Image
-              src="/logo-purple-v2.png"
+                  src="/logo-light.png"
                   alt="Nearle"
-              width={220}
+                  width={400}
                   height={50}
-              style={{ height: "auto" }}
+                  className="h-8 lg:h-9 w-auto object-contain"
-              className="h-9 w-auto object-contain"
                   priority
                 />
               </Link>
             </div>
 
-        {/* Center: Navigation */}
+            {/* Center: Navigation Links */}
-        <div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
+            <div className="hidden md:flex items-center justify-center gap-6 lg:gap-8 xl:gap-10">
-          {NAV_LINKS.map((link) => (
+              {NAV_LINKS.map((link) => {
+                const isActive = pathname === link.href;
+                return (
                   <Link
                     key={link.label}
                     href={link.href}
-              className="relative py-1 text-[15px] font-bold leading-5 text-on-surface-variant hover:text-primary transition-all duration-200 group whitespace-nowrap"
+                    className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
+                      isActive ? "text-white" : "text-white/75 hover:text-white"
+                    } group`}
                   >
                     {link.label}
-              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
+                    <span
+                      className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${
+                        isActive
+                          ? "w-5 opacity-100"
+                          : "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
+                      }`}
+                    />
                   </Link>
-          ))}
+                );
+              })}
             </div>
 
             {/* Right: Actions */}
             <div className="flex items-center justify-end gap-3">
               <Link
                 href="/#download"
-            className="hidden md:inline-flex bg-primary hover:bg-primary-container text-on-primary font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
+                className="hidden md:inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
               >
                 Get App
               </Link>
 
               {/* Mobile menu toggle */}
               <button
-            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-all active:scale-90 cursor-pointer"
+                className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
                 onClick={() => setMobileOpen(!mobileOpen)}
                 aria-label="Toggle menu"
               >
@@ -70,24 +84,37 @@ export function Navbar() {
               </button>
             </div>
           </div>
+        </nav>
 
         {/* Mobile Drawer */}
         {mobileOpen && (
-        <div className="md:hidden bg-surface-container-lowest border-t border-outline-variant">
+          <div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-[rgba(61,45,143,0.95)] border border-white/20 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
-          <div className="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
+            <div className="flex flex-col gap-2">
-            {NAV_LINKS.map((link) => (
+              {NAV_LINKS.map((link) => {
+                const isActive = pathname === link.href;
+                return (
                   <Link
                     key={link.label}
                     href={link.href}
-                className="px-3 py-2.5 text-body-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low rounded-lg transition-colors"
+                    className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
+                      isActive
+                        ? "bg-white/10 text-white"
+                        : "text-white/70 hover:text-white hover:bg-white/5"
+                    }`}
                     onClick={() => setMobileOpen(false)}
                   >
                     {link.label}
+                    {isActive && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
+                    )}
                   </Link>
-            ))}
+                );
+              })}
             </div>
           </div>
         )}
-    </nav>
+      </div>
+    </div>
   );
 }
+

src/components/layout/PremiumFooter.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+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: "Help Center", href: "#" },
+];
+
+const PARTNERSHIPS = [
+  { label: "Merchant Partner", href: "/businesses" },
+  { label: "Delivery Partner", href: "#" },
+  { label: "Direct to Customer Brands", href: "#" },
+  // { label: "Local Real Estate", href: "#" },
+];
+
+const LEGAL = [
+  { label: "Privacy Policy", href: "#" },
+  { label: "Terms of Service", href: "#" },
+  { label: "Cookie Policy", 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 (
+    <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">
+      <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="flex flex-col px-6 pb-8 pt-10 md:px-8 md:pb-8 md:pt-12 xl:px-16 xl:pb-8 xl:pt-12 2xl:px-20 2xl:pt-10 2xl:pb-8">
+          <div className="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-5">
+              <Link href="/" className="inline-block w-fit">
+                <Image
+                  src="/logo-light.png"
+                  alt="Nearle"
+                  width={240}
+                  height={60}
+                  className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
+                />
+              </Link>
+
+              <p className="max-w-[430px] text-base leading-[1.65] text-white/70 md:text-lg xl:text-[19px]">
+                India&apos;s leading hyperlocal neighborhood network, empowering
+                communities and verified local businesses within a 2km radius.
+              </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>
+
+          <div className="my-8 w-full border-t border-white/10 xl:my-10" />
+
+          <div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
+            <div className="flex min-h-[120px] w-full max-w-[560px] items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 md:w-auto md:p-5 xl:min-h-[130px] xl:gap-4 xl:p-6">
+              <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-white xl:h-[58px] xl:w-[58px] xl:rounded-2xl">
+                <MaterialIcon icon="location_on" size={20} />
+              </div>
+
+              <div className="text-left">
+                <h6 className="text-sm font-black text-white md:text-base xl:text-lg">
+                  Nearle
+                </h6>
+
+                <p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
+                  424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
+                  Coimbatore, TN 641002
+                </p>
+              </div>
+            </div>
+
+            <div className="flex shrink-0 flex-col items-center gap-1.5 text-center md:items-end md:text-right xl:gap-2">
+              <span className="text-xs font-black uppercase tracking-widest text-white/40 md:text-sm xl:text-base">
+                Neighborhood Helpdesk
+              </span>
+
+              <a
+                href="tel:+919092068666"
+                className="flex items-center gap-2 text-white transition-colors hover:text-[#8A5CFF] xl:gap-3"
+              >
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6] xl:h-14 xl:w-14">
+                  <MaterialIcon icon="phone" size={20} className="text-white" />
+                </div>
+
+                <span className="text-base font-black tracking-tight md:text-lg xl:text-[30px]">
+                  +91 90920 68666
+                </span>
+              </a>
+            </div>
+          </div>
+
+          <div className="mb-4 mt-8 w-full border-t border-white/5 xl:mb-6 xl:mt-10" />
+
+          <div className="flex w-full flex-col items-center justify-between gap-4 text-[13px] text-white/40 md:flex-row md:text-[14px] xl:text-[15px]">
+            <p className="text-center md:text-left">
+              © {new Date().getFullYear()} Nearle. All rights reserved.
+            </p>
+
+            <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+              <Link href="#" className="transition-colors hover:text-white">
+                Privacy Policy
+              </Link>
+              <span className="select-none font-bold opacity-35">·</span>
+              <Link href="#" className="transition-colors hover:text-white">
+                Terms of Service
+              </Link>
+              <span className="select-none font-bold opacity-35">·</span>
+              <Link href="#" className="transition-colors hover:text-white">
+                Help Center
+              </Link>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </section>
+  );
+}

src/components/layout/PremiumNavbar.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const NAV_LINKS = [
+  { label: "Home", href: "/" },
+  { label: "Nearle for Business", href: "/businesses" },
+  { label: "Nearle for People", href: "/people" },
+  { label: "About", href: "/about" },
+  { label: "Contact", href: "/contact" },
+];
+
+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="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
+      <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 */}
+        <Link
+          href="/"
+          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={180}
+            height={45}
+            className="h-7 w-auto object-contain md:h-8 xl:h-9"
+            priority
+          />
+        </Link>
+
+        {/* Desktop Navigation - Center */}
+        <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 = isActiveLink(link.href);
+
+            return (
+              <Link
+                key={link.label}
+                href={link.href}
+                className={`relative whitespace-nowrap py-2 text-sm font-bold transition-colors duration-200 ${
+                  isActive
+                    ? "text-white"
+                    : "text-white/70 hover:text-white"
+                }`}
+              >
+                {link.label}
+
+                <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>
+
+        {/* Mobile Toggle - Right */}
+        <button
+          type="button"
+          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"
+          onClick={() => setMobileOpen((value) => !value)}
+          aria-label={mobileOpen ? "Close menu" : "Open menu"}
+          aria-expanded={mobileOpen}
+        >
+          <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={24} />
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      <div
+        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 = isActiveLink(link.href);
+
+            return (
+              <Link
+                key={link.label}
+                href={link.href}
+                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="h-2 w-2 rounded-full bg-white" />
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </header>
+  );
+}

src/components/layout/PremiumPageShell.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { PremiumNavbar } from "./PremiumNavbar";
+import { PremiumFooter } from "./PremiumFooter";
+
+type PremiumPageShellProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PremiumPageShell({ children, className = "" }: PremiumPageShellProps) {
+  return (
+    <div className={`min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col ${className}`}>
+      {/* Header/Navbar */}
+      <PremiumNavbar />
+
+      {/* Page Content */}
+      <main className="w-full overflow-x-hidden bg-white">
+        {children}
+      </main>
+
+      <PremiumFooter />
+    </div>
+  );
+}

src/components/ui/FeatureStatsRow.tsx

@@ -0,0 +1,45 @@
+import { MaterialIcon } from "./MaterialIcon";
+
+type FeatureStatsItem = {
+  icon: string;
+  title: string;
+  desc?: string;
+};
+
+type FeatureStatsRowProps = {
+  items: FeatureStatsItem[];
+  className?: string;
+};
+
+export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
+  return (
+    <div className={`w-full py-6 md:py-8 ${className}`}>
+      <div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
+        {items.map((item, index) => (
+          <div
+            key={item.title}
+            className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
+              index < items.length - 1
+                ? "lg:border-r lg:border-[#6330D6]/10"
+                : ""
+            }`}
+          >
+            <div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+              <MaterialIcon icon={item.icon} size={18} />
+            </div>
+            <div className="min-w-0">
+              <h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
+                {item.title}
+              </h4>
+              {item.desc && (
+                <p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
+                  {item.desc}
+                </p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/ui/GlassInfoCard.tsx

@@ -0,0 +1,26 @@
+import { MaterialIcon } from "./MaterialIcon";
+
+type GlassInfoCardProps = {
+  text: string;
+  icon?: string;
+  className?: string;
+};
+
+export function GlassInfoCard({ text, icon, className = "" }: GlassInfoCardProps) {
+  return (
+    <div
+      className={`bg-white/80 backdrop-blur-md border border-white/40 shadow-[0_8px_24px_rgba(99,48,214,0.08)] rounded-[16px] px-4 py-2.5 flex items-center gap-2.5 select-none ${className}`}
+    >
+      {icon ? (
+        <div className="w-6 h-6 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
+          <MaterialIcon icon={icon} size={14} />
+        </div>
+      ) : (
+        <span className="w-2.5 h-2.5 rounded-full bg-[#6330D6] shrink-0 animate-pulse" />
+      )}
+      <span className="text-sm font-extrabold text-[#16001D] whitespace-nowrap">
+        {text}
+      </span>
+    </div>
+  );
+}

src/config/site-content.ts

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

take_screenshot.js

@@ -0,0 +1,35 @@
+const puppeteer = require('puppeteer-core');
+const path = require('path');
+
+(async () => {
+  const browser = await puppeteer.launch({
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    headless: true
+  });
+
+  const page = await browser.newPage();
+
+  // Desktop Screenshot (1440px)
+  await page.setViewport({ width: 1440, height: 900 });
+  try {
+    await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
+    console.log('Successfully navigated to http://localhost:3000');
+  } catch (err) {
+    console.error('Navigation failed:', err);
+    await browser.close();
+    process.exit(1);
+  }
+
+  const desktopPath = path.join(__dirname, 'desktop_screenshot.png');
+  await page.screenshot({ path: desktopPath, fullPage: true });
+  console.log('Saved desktop screenshot to:', desktopPath);
+
+  // Mobile Screenshot (375px)
+  await page.setViewport({ width: 375, height: 844, isMobile: true, hasTouch: true });
+  await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
+  const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
+  await page.screenshot({ path: mobilePath, fullPage: true });
+  console.log('Saved mobile screenshot to:', mobilePath);
+
+  await browser.close();
+})();