update business section

AGENTS.md

@@ -1,13 +1,216 @@
+# Nearle Project Guide
 
-# 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.
-# 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:
+## Project
 
-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.
+Nearle is a premium hyperlocal commerce platform connecting
+
+- Customers
+- Local Merchants
+- Delivery Partners
+- Brands
+
+The experience should feel:
+
+- Premium
+- Modern
+- Minimal
+- Community-first
+- Human
+- Trustworthy
+
+Avoid generic SaaS designs.
+
+---
+
+# Tech Stack
+
+- Next.js 16 App Router
+- React
+- TypeScript
+- Tailwind CSS
+- MaterialIcon component
+
+IMPORTANT
+
+This project uses the latest Next.js version.
+
+Before changing framework APIs, read
+
+node_modules/next/dist/docs/
+
+Follow the latest conventions.
+
+---
+
+# Design System
+
+Preserve the existing Nearle identity.
+
+Never change unless explicitly requested:
+
+- Brand colors
+- Typography
+- Border radius
+- Layout hierarchy
+- Section order
+- Existing content
+- Existing illustrations
+
+Always extend the current design instead of redesigning it.
+
+---
+
+# UI Rules
+
+Always match existing Nearle pages.
+
+Reuse:
+
+- Hero layouts
+- CTA buttons
+- Card styles
+- Section spacing
+- Grid system
+- Shadows
+- Glass effects
+- Gradients
+
+Avoid Bootstrap-style layouts.
+
+---
+
+# Motion Rules
+
+Use:
+
+- Framer Motion
+- CSS transitions
+
+Avoid:
+
+- Heavy GSAP
+- Layout animations
+- Flashy effects
+
+Animation style:
+
+- Apple
+- Linear
+- Stripe
+- Vercel
+
+Use only:
+
+- opacity
+- transform
+- scale
+- translate
+
+Respect prefers-reduced-motion.
+
+---
+
+# Code Rules
+
+Never rewrite files unnecessarily.
+
+Only modify required code.
+
+Preserve formatting.
+
+Do not rename components unless necessary.
+
+Reuse existing components before creating new ones.
+
+Create reusable components when repeated more than twice.
+
+---
+
+# Performance
+
+Maintain 60 FPS.
+
+Avoid unnecessary re-renders.
+
+Avoid layout shift.
+
+Prefer GPU-friendly animations.
+
+Optimize images.
+
+---
+
+# SEO
+
+Every new page should include:
+
+- Metadata
+- Title
+- Description
+- OpenGraph
+- Semantic HTML
+
+---
+
+# Content Rules
+
+Write content specifically for Nearle.
+
+Tone:
+
+- Friendly
+- Premium
+- Community-first
+- Local
+- Trustworthy
+
+Avoid AI-sounding or generic marketing copy.
+
+Prefer real examples involving:
+
+- neighbourhood stores
+- customers
+- delivery partners
+- local commerce
+- digital catalogues
+- QR ordering
+
+---
+
+# Execution Rules
+
+Frontend Tasks
+
+- You MAY run npm run dev.
+- Inspect localhost before reporting visual fixes.
+- Use screenshots only for major UI changes.
+
+Build
+
+- npm run build only verifies compilation.
+- Never claim visual fixes based only on build success.
+
+---
+
+# Workflow
+
+Before editing
+
+1. Read the target file.
+2. Understand existing implementation.
+3. Modify only the required code.
+4. Avoid unrelated refactoring.
+5. Keep code production ready.
+6. Return concise summaries.
+
+---
+
+# Response Rules
+
+Do not explain obvious code.
+
+Do not rewrite unchanged code.
+
+Do not introduce unnecessary abstractions.
+
+Focus only on the requested task.

Dockerfile

@@ -0,0 +1,41 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js telemetry is disabled
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 80
+ENV PORT=80
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;

nginx.conf

@@ -0,0 +1,18 @@
+events {}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            # This line forces Nginx to pass routing back to React Router
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

package-lock.json

@@ -8,12 +8,13 @@
       "name": "nearle-new",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.42.0",
         "jsdom": "^29.1.1",
+        "lucide-react": "^1.22.0",
         "next": "16.2.9",
         "puppeteer-core": "^24.43.1",
         "react": "19.2.4",
-        "react-dom": "19.2.4",
-        "react-icons": "^5.6.0"
+        "react-dom": "19.2.4"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -4306,6 +4307,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.42.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.0.tgz",
+      "integrity": "sha512-wp7EJnfWaaEScVygKv3e20udoRz+LbtxScsuTkakAxfXmt+ReC6WyPW2nINRAGvd+hG9odwcjBLyOTPjH5pBRA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.42.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5732,6 +5760,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.22.0.tgz",
+      "integrity": "sha512-c9o3l0PiNcgOQDW4F31BEYHudE7kgxVt3o30qMl36ZPwTxXlGB4QnLilhERvVM4uh/pl5MDyY1/gzZSYcHDtBg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5811,6 +5848,21 @@
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
+    "node_modules/motion-dom": {
+      "version": "12.42.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.0.tgz",
+      "integrity": "sha512-M63h4n8R+quJdNhBwuLlgxM+OLYa9+I/T2pzDRboB9fLXRdbou+Gw7Zury+SkpaCyACP1JHSjHgZ1EgTkBr30w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6469,15 +6521,6 @@
         "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

@@ -3,18 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS=--max-old-space-size=6144 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 iOS versions",
+    "not dead",
+    "not op_mini all"
+  ],
   "dependencies": {
+    "framer-motion": "^12.42.0",
     "jsdom": "^29.1.1",
+    "lucide-react": "^1.22.0",
     "next": "16.2.9",
     "puppeteer-core": "^24.43.1",
     "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-icons": "^5.6.0"
+    "react-dom": "19.2.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

public/images/hero/iphone-chrome.svg

@@ -0,0 +1,22 @@
+<svg width="476" height="941" viewBox="0 0 476 941" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- Notch + status bar extracted verbatim from the provided iPhone SVG.
+     Rendered above the live app screen so the app sits under the notch,
+     exactly like real iOS. -->
+<g clip-path="url(#clip0_312_252)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M388.5 25C387.119 25 386 26.1193 386 27.5V33C386 34.3807 387.119 35.5 388.5 35.5H404.469H405.5C406.881 35.5 408 34.3807 408 33V27.5C408 26.1193 406.881 25 405.5 25H388.5ZM389 26C387.895 26 387 26.8954 387 28V32.5C387 33.6046 387.895 34.5 389 34.5H403.469H405C406.105 34.5 407 33.6046 407 32.5V28C407 26.8954 406.105 26 405 26H389Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M409 32.374C409.863 32.152 410.5 31.3689 410.5 30.437C410.5 29.5051 409.863 28.722 409 28.5V32.374Z" fill="white"/>
+<rect x="388" y="27" width="18" height="6.5" rx="1" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M373.33 26.6079C375.546 26.608 377.678 27.4594 379.283 28.9862C379.404 29.1041 379.598 29.1026 379.717 28.9829L380.873 27.8162C380.933 27.7555 380.967 27.6733 380.966 27.5877C380.966 27.5021 380.931 27.4202 380.87 27.3602C376.655 23.3207 370.005 23.3207 365.79 27.3602C365.729 27.4202 365.694 27.502 365.694 27.5876C365.693 27.6732 365.727 27.7555 365.787 27.8162L366.943 28.9829C367.062 29.1028 367.256 29.1043 367.377 28.9862C368.983 27.4593 371.114 26.6079 373.33 26.6079ZM373.33 30.4036C374.548 30.4035 375.722 30.856 376.624 31.6732C376.747 31.7892 376.939 31.7867 377.058 31.6676L378.212 30.5009C378.273 30.4397 378.307 30.3567 378.306 30.2704C378.305 30.1842 378.27 30.1018 378.208 30.0419C375.46 27.4855 371.204 27.4855 368.455 30.0419C368.393 30.1018 368.358 30.1842 368.357 30.2705C368.356 30.3568 368.39 30.4398 368.451 30.5009L369.605 31.6676C369.724 31.7867 369.917 31.7892 370.039 31.6732C370.941 30.8566 372.114 30.4041 373.33 30.4036ZM375.549 33.1879C375.611 33.1273 375.645 33.0439 375.643 32.9574C375.642 32.8709 375.604 32.7889 375.54 32.7309C374.265 31.652 372.396 31.652 371.121 32.7309C371.057 32.7889 371.019 32.8708 371.017 32.9573C371.015 33.0438 371.049 33.1272 371.111 33.1879L373.109 35.2036C373.167 35.2628 373.247 35.2961 373.33 35.2961C373.414 35.2961 373.494 35.2628 373.552 35.2036L375.549 33.1879Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M344.667 31.3334H345.667C346.219 31.3334 346.667 31.7811 346.667 32.3334V34.3334C346.667 34.8857 346.219 35.3334 345.667 35.3334H344.667C344.114 35.3334 343.667 34.8857 343.667 34.3334V32.3334C343.667 31.7811 344.114 31.3334 344.667 31.3334ZM349.333 29.3334H350.333C350.885 29.3334 351.333 29.7811 351.333 30.3334V34.3334C351.333 34.8857 350.885 35.3334 350.333 35.3334H349.333C348.781 35.3334 348.333 34.8857 348.333 34.3334V30.3334C348.333 29.7811 348.781 29.3334 349.333 29.3334ZM354 27.0001H355C355.552 27.0001 356 27.4478 356 28.0001V34.3334C356 34.8857 355.552 35.3334 355 35.3334H354C353.448 35.3334 353 34.8857 353 34.3334V28.0001C353 27.4478 353.448 27.0001 354 27.0001ZM358.667 24.6667H359.667C360.219 24.6667 360.667 25.1145 360.667 25.6667V34.3334C360.667 34.8857 360.219 35.3334 359.667 35.3334H358.667C358.114 35.3334 357.667 34.8857 357.667 34.3334V25.6667C357.667 25.1145 358.114 24.6667 358.667 24.6667Z" fill="white"/>
+<!-- 9:41 static vector text removed to render real-time live clock overlay -->
+</g>
+<path d="M138 5H338V23C338 31.2843 331.284 38 323 38H153C144.716 38 138 31.2843 138 23V5Z" fill="black"/>
+<defs>
+<clipPath id="clip0_312_252">
+<rect width="375" height="44" fill="white" transform="translate(50 7)"/>
+</clipPath>
+<clipPath id="clip1_312_252">
+<rect width="54" height="18" fill="white" transform="translate(71 21)"/>
+</clipPath>
+</defs>
+</svg>

public/images/illustrations/convenience.svg

@@ -0,0 +1,52 @@
+<svg fill="none" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
+  <!-- Gradient definitions -->
+  <defs>
+    <radialGradient id="shadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#7C3AED" stop-opacity="0.15" />
+      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#9367F4" />
+      <stop offset="100%" stop-color="#6330D6" />
+    </linearGradient>
+    <linearGradient id="glowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#C9A2FF" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0.2" />
+    </linearGradient>
+  </defs>
+
+  <!-- Ground shadow -->
+  <ellipse cx="120" cy="180" rx="70" ry="20" fill="url(#shadow)" />
+
+  <!-- Container group -->
+  <g>
+    <!-- Isometric Delivery Box / Package representing doorstep convenience -->
+    <!-- Top Face -->
+    <path d="M120 75 L165 95 L120 115 L75 95 Z" fill="#F5EEFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+    <!-- Left Face -->
+    <path d="M75 95 L120 115 L120 160 L75 140 Z" fill="#EBDCFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+    <!-- Right Face -->
+    <path d="M120 115 L165 95 L165 140 L120 160 Z" fill="#DFCAFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+
+    <!-- Isometric Lid lines -->
+    <path d="M120 115 L120 75" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
+    <path d="M75 95 L165 95" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
+
+    <!-- Location Pin / Doorstep Marker floating above the box -->
+    <g transform="translate(120, 50)">
+      <!-- Pulsing Glow -->
+      <circle cx="0" cy="-10" r="18" fill="url(#glowGradient)" opacity="0.5" />
+      
+      <!-- Pin shape -->
+      <path d="M0 8 C-10 -2 -15 -12 -15 -22 C-15 -32 -6 -40 0 -40 C6 -40 15 -32 15 -22 C15 -12 10 -2 0 8 Z" fill="url(#purpleGradient)" />
+      <!-- Inner dot -->
+      <circle cx="0" cy="-22" r="5" fill="#FFFFFF" />
+    </g>
+
+    <!-- Speed/Convenience Motion Lines -->
+    <path d="M50 110 L65 110" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M45 125 L60 125" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M175 120 L190 120" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M180 135 L195 135" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+  </g>
+</svg>

scripts/take-screenshot.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const puppeteer = require('puppeteer-core');
 const path = require('path');
 

src/app/about/page.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
-import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { AboutHero } from "@/components/heroes/AboutHero";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { FloatingDelivery } from "@/components/about/FloatingDelivery";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -15,10 +17,10 @@ export const metadata: Metadata = {
 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.",
+    descr: "To help average stores perform like the great ones, not just by selling products, but by building a strong brand identity and real relationships with customers through Nearle.",
     icon: "target",
     iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
-    image: "/images/nearle-how/how-storefront.webp",
+    image: "/images/workflow/how-storefront.webp",
     imageAlt: "3D local store storefront with purple awning",
     imgFit: "object-contain object-bottom"
   },
@@ -27,7 +29,7 @@ const STRATEGY_CARDS = [
     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",
     iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
-    image: "/images/nearle-merchant/local-map.webp",
+    image: "/images/stores/local-map.webp",
     imageAlt: "Nearle local neighbourhood map",
     imgFit: "object-cover object-center"
   },
@@ -36,7 +38,7 @@ const STRATEGY_CARDS = [
     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",
     iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
-    image: "/images/app-mockup.png",
+    image: "/images/platform/app-mockup.webp",
     imageAlt: "Nearle app on a smartphone",
     imgFit: "object-contain object-bottom"
   }
@@ -48,89 +50,27 @@ const LOCAL_COUNTERS = [
   { count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
 ];
 
-const HERO_STATS = [
-  { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
-  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
-  { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
-  { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
-];
 
 export default function AboutPage() {
-  const collageCards = [
-    { text: "Local First", icon: "store" },
-    { text: "Trusted Network", icon: "verified" },
-    { text: "Connected Communities", icon: "groups" }
-  ];
-
   return (
     <PremiumPageShell>
       {/* ─── Hero Section ─── */}
-      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        {/* TWO-COLUMN GRID */}
-        <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">
-          
-          {/* Left Column: Copy & Actions */}
-          <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">
-              About Nearle
-            </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">
-              Built for Every
-              <br />
-              <span className="text-[#6330D6]">Neighbourhood.</span>
-            </h1>
-
-            <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>
+      <AboutHero />
 
       {/* ─── Intro Description Block ─── */}
-      <section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
-        <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
-          Our Platform
-        </span>
-        <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-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>
-      </section>
+      <AnimatedSection>
+        <section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
+          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+            Our Platform
+          </span>
+          <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-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>
+        </section>
+      </AnimatedSection>
 
       {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
       <section
@@ -141,12 +81,12 @@ export default function AboutPage() {
           className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
           style={{ maxWidth: 1800 }}
         >
-          <div
+          <AnimatedGrid
             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
+              <AnimatedCard
                 key={card.title}
                 className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
                 style={{ borderRadius: 32 }}
@@ -162,12 +102,12 @@ export default function AboutPage() {
                   >
                     <MaterialIcon icon={card.icon} size={28} />
                   </div>
-                  <h3
+                  <p
                     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>
                   <p
                     className="text-[#5E5866]"
                     style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
@@ -192,58 +132,61 @@ export default function AboutPage() {
                     className={card.imgFit}
                   />
                 </div>
-              </div>
+              </AnimatedCard>
             ))}
-          </div>
+          </AnimatedGrid>
         </div>
       </section>
 
       {/* ─── Global Stats counters ─── */}
-      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
+        <AnimatedGrid className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {LOCAL_COUNTERS.map((c) => (
-            <div key={c.label} className="flex flex-col items-center text-center">
+            <AnimatedCard key={c.label} className="flex flex-col items-center text-center">
               <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={22} />
               </div>
-              <h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
+              <p className="text-4xl font-display font-black text-[#16001D]">{c.count}</p>
               <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {c.label}
               </p>
-            </div>
+            </AnimatedCard>
           ))}
-        </div>
+        </AnimatedGrid>
       </section>
 
       {/* ─── Brand Building Banner ─── */}
-      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
-        <div className="max-w-4xl mx-auto">
-          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
-            Don&apos;t miss the opportunity
-          </span>
-          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4 mb-4">
-            Build Your Brand with Nearle
-          </h2>
-          <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-[#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-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>Explore Nearle</span>
-            </Link>
+      <section className="relative overflow-hidden py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
+        <FloatingDelivery />
+        <AnimatedSection>
+          <div className="max-w-4xl mx-auto relative z-10">
+            <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-[#16001D] mt-4 mb-4">
+              Build Your Brand with Nearle
+            </h2>
+            <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-[#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-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>Explore Nearle</span>
+              </Link>
+            </div>
           </div>
-        </div>
+        </AnimatedSection>
       </section>
     </PremiumPageShell>
   );

src/app/brands/page.tsx

@@ -0,0 +1,380 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { BrandsHero } from "@/components/heroes/BrandsHero";
+import { FAQAccordion } from "@/components/ui/FAQAccordion";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { CTABanner } from "@/components/ui/CTABanner";
+import { NetworkBackground } from "@/components/brands/NetworkBackground";
+import { PartnershipConnector } from "@/components/brands/PartnershipConnector";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Direct-to-Customer Brands",
+  description:
+    "Expand your brand across neighbourhood stores with Nearle. FMCG brands, food startups, and local manufacturers reach customers through India's hyperlocal commerce network.",
+  openGraph: {
+    title: "Direct-to-Customer Brands | Nearle",
+    description:
+      "Partner with Nearle to get your brand into neighbourhood stores. Distribution, retail visibility, marketing campaigns, and real-time analytics, all in one platform.",
+    url: "https://nearle.in/brands",
+  },
+  alternates: { canonical: "/brands" },
+};
+
+const WHAT_WE_OFFER = [
+  {
+    icon: "hub",
+    title: "Hyperlocal Distribution",
+    desc: "Get your products into verified neighbourhood stores across Coimbatore. Nearle's merchant network means your brand reaches the street level, where most daily purchases actually happen.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+    badge: "Distribution",
+  },
+  {
+    icon: "storefront",
+    title: "Retail Shelf Visibility",
+    desc: "Premium placement in Nearle's AI catalogue by ProductLLM and in-store QR listings. Customers browsing nearby stores see your brand first, creating daily brand touchpoints at zero extra cost.",
+    tone: "bg-secondary/8 text-secondary",
+    badge: "Visibility",
+  },
+  {
+    icon: "local_offer",
+    title: "Hyperlocal Marketing Campaigns",
+    desc: "Run time-bound offers, festive promotions, and exclusive deals targeted to customers within specific neighbourhoods. Precision marketing that feels personal, not generic.",
+    tone: "bg-rose-500/8 text-rose-600",
+    badge: "Marketing",
+  },
+  {
+    icon: "analytics",
+    title: "Brand & Retail Analytics",
+    desc: "See real-time sell-through rates, customer purchase frequency, geographic demand patterns, and campaign ROI, all in your brand dashboard.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+    badge: "Analytics",
+  },
+  {
+    icon: "inventory_2",
+    title: "Inventory & Replenishment",
+    desc: "Nearle connects your supply chain to local store inventory. Get alerts when stock is low, automate replenishment orders, and reduce out-of-stock situations.",
+    tone: "bg-secondary/8 text-secondary",
+    badge: "Inventory",
+  },
+  {
+    icon: "handshake",
+    title: "Dedicated Partner Support",
+    desc: "A brand partner manager works with you to design your catalogue listings, plan campaigns, onboard new store locations, and report on performance.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+    badge: "Support",
+  },
+];
+
+const INDUSTRIES = [
+  { icon: "restaurant", label: "Food & Snacks" },
+  { icon: "shopping_basket", label: "Grocery & FMCG" },
+  { icon: "health_and_safety", label: "Health & Wellness" },
+  { icon: "spa", label: "Beauty & Personal Care" },
+  { icon: "home", label: "Home & Cleaning" },
+  { icon: "pets", label: "Pet Products" },
+  { icon: "child_care", label: "Baby & Parenting" },
+  { icon: "eco", label: "Organic & Natural" },
+  { icon: "devices", label: "Electronics & Accessories" },
+];
+
+const PARTNERSHIP_STEPS = [
+  {
+    num: "01",
+    icon: "contact_support",
+    title: "Talk to Our Sales Team",
+    desc: "Share your brand story, product categories, and distribution goals. Our team will assess the best approach for your brand on Nearle.",
+    color: "bg-[#6330D6]/7 text-[#6330D6]",
+  },
+  {
+    num: "02",
+    icon: "description",
+    title: "Design Your Brand Partnership",
+    desc: "Together we define your store coverage, catalogue listings, promotional calendar, and performance targets. We customise every brand partnership.",
+    color: "bg-secondary/7 text-secondary",
+  },
+  {
+    num: "03",
+    icon: "inventory",
+    title: "Onboard Products to the Network",
+    desc: "Your products are listed across relevant neighbourhood stores, QR catalogues, and the Nearle app. Customers start seeing and buying your brand.",
+    color: "bg-[#6330D6]/7 text-[#6330D6]",
+  },
+  {
+    num: "04",
+    icon: "bar_chart",
+    title: "Track, Optimise, and Grow",
+    desc: "Monitor your brand's reach and sell-through in real-time. Work with your partner manager to run campaigns and expand to more localities.",
+    color: "bg-secondary/7 text-secondary",
+  },
+];
+
+const FAQ_ITEMS = [
+  {
+    question: "What types of brands does Nearle work with?",
+    answer: "Nearle works with FMCG brands, local food manufacturers, packaged goods startups, health and wellness companies, beauty brands, organic product makers, and household goods producers. If your product fits on a neighbourhood store shelf, there's a place for it on Nearle.",
+  },
+  {
+    question: "How does distribution through Nearle work?",
+    answer: "Nearle's merchant network consists of verified neighbourhood stores. Your products are made available through these stores' digital catalogues and QR ordering systems. Customers who order from nearby stores can choose and buy your brand through Nearle's platform.",
+  },
+  {
+    question: "Do I need to handle logistics and delivery?",
+    answer: "Nearle handles last-mile delivery to customers through its local delivery partner network. You coordinate stock replenishment with our merchant partners or through our supply chain integration. You don't need to manage individual customer deliveries.",
+  },
+  {
+    question: "Can I run promotions specifically for my brand?",
+    answer: "Yes. Nearle supports brand-specific promotions including buy-one-get-one offers, minimum purchase discounts, festive deals, and new product launch campaigns. Promotions can be targeted by neighbourhood, store type, or customer segment.",
+  },
+  {
+    question: "How is my brand's performance reported?",
+    answer: "Your brand dashboard shows real-time sales volumes, store-level sell-through rates, geographic demand maps, promotion performance, and customer purchase patterns. Weekly and monthly reports are also available on request.",
+  },
+  {
+    question: "How quickly can my brand go live on Nearle?",
+    answer: "After the initial partnership agreement, most brands are listed and selling within 2 to 4 weeks. This includes catalogue creation, store onboarding, and initial inventory setup.",
+  },
+  {
+    question: "Does Nearle work with small and emerging brands?",
+    answer: "Absolutely. Nearle actively works with local manufacturers and emerging brands to help them build neighbourhood-level distribution before scaling. We believe in growing together.",
+  },
+  {
+    question: "What does brand partnership cost?",
+    answer: "Nearle brand partnerships are structured around a combination of listing fees and sales commissions, tailored to your scale and distribution goals. Contact our sales team for a customised quote.",
+  },
+];
+
+export default function BrandsPage() {
+  return (
+    <PremiumPageShell>
+      {/* ─── Hero Section ─── */}
+      <BrandsHero />
+
+      {/* ─── What We Offer ─── */}
+      <section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <NetworkBackground />
+        <div className="relative z-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                What Nearle Offers Brands
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                The Full Stack of Neighbourhood Commerce
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                From your first store listing to city-wide distribution, Nearle builds the infrastructure so you can focus on your product.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {WHAT_WE_OFFER.map((item) => (
+              <AnimatedCard
+                key={item.title}
+                className="rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 flex flex-col gap-4 hover:shadow-[0_10px_32px_rgba(22,0,29,0.09)] transition-shadow duration-300"
+              >
+                <div className="flex items-start gap-3">
+                  <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${item.tone}`}>
+                    <MaterialIcon icon={item.icon} size={24} />
+                  </div>
+                  <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide mt-1 ${item.tone} bg-opacity-[0.08]`}>
+                    {item.badge}
+                  </span>
+                </div>
+                <div>
+                  <p className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</p>
+                  <p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
+                </div>
+              </AnimatedCard>
+            ))}
+          </AnimatedGrid>
+        </div>
+      </section>
+
+      {/* ─── Industries ─── */}
+      <section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <Image
+          src="/images/illustrations/d2c-bg1.png"
+          alt=""
+          fill
+          priority={false}
+          sizes="100vw"
+          className="absolute inset-0 z-0 object-cover"
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 z-[1] bg-white/40" />
+        <div className="relative z-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
+          <div className="grid grid-cols-1 lg:grid-cols-[30%_1fr] gap-10 xl:gap-16 items-center">
+            {/* Real product collage */}
+            <AnimatedSection className="order-2 lg:order-1" variant="fadeUp">
+              <div className="relative mx-auto h-[280px] w-full max-w-[420px] sm:h-[360px] lg:mx-0 lg:h-[440px]">
+                <div className="absolute left-0 top-0 h-[62%] w-[72%] overflow-hidden rounded-[28px] border-4 border-white shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
+                  <Image
+                    src="/images/stores/cat-daily-essentials.webp"
+                    alt="Daily essentials like milk, bread, and fresh produce stocked on Nearle stores"
+                    fill
+                    sizes="(max-width: 1023px) 300px, 22vw"
+                    className="object-cover"
+                  />
+                </div>
+                <div className="absolute right-0 top-[6%] h-[42%] w-[52%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
+                  <Image
+                    src="/images/stores/cat-health-wellness.webp"
+                    alt="Health and personal care products stocked on Nearle stores"
+                    fill
+                    sizes="(max-width: 1023px) 220px, 16vw"
+                    className="object-cover"
+                  />
+                </div>
+                <div className="absolute bottom-0 left-[10%] h-[38%] w-[54%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
+                  <Image
+                    src="/images/stores/cat-pet-essentials.webp"
+                    alt="Pet essentials brand stocked on Nearle stores"
+                    fill
+                    sizes="(max-width: 1023px) 220px, 16vw"
+                    className="object-cover"
+                  />
+                </div>
+              </div>
+            </AnimatedSection>
+
+            {/* Content */}
+            <div className="order-1 lg:order-2">
+              <AnimatedSection>
+                <div className="mb-10 text-left">
+                  <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
+                    Industries We Serve
+                  </span>
+                  <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                    Your Category Has a Place on Nearle
+                  </h2>
+                  <p className="text-sm md:text-base text-[#5E5866] max-w-2xl leading-relaxed">
+                    Nearle&apos;s neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
+                  </p>
+                </div>
+              </AnimatedSection>
+
+              <AnimatedGrid className="grid grid-cols-3 gap-4">
+                {INDUSTRIES.map((industry) => (
+                  <AnimatedCard
+                    key={industry.label}
+                    className="flex flex-col items-center gap-2.5 p-4 rounded-2xl bg-white border border-[#6330D6]/8 hover:border-[#6330D6]/20 hover:shadow-md transition-all duration-200 cursor-default"
+                  >
+                    <div className="w-10 h-10 rounded-full bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
+                      <MaterialIcon icon={industry.icon} size={20} />
+                    </div>
+                    <span className="text-[16px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
+                  </AnimatedCard>
+                ))}
+              </AnimatedGrid>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Partnership Process ─── */}
+      <section id="partnership" className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                How It Works
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                The Partnership Process
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                From first conversation to city-wide brand presence in four structured steps.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <PartnershipConnector steps={PARTNERSHIP_STEPS.length} />
+
+          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
+            {PARTNERSHIP_STEPS.map((step) => (
+              <AnimatedCard
+                key={step.num}
+                className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 shadow-[0_8px_32px_rgba(22,0,29,0.05)]"
+              >
+                <span className="absolute right-5 top-4 font-display text-5xl font-black leading-none text-[#6330D6]/[0.07] select-none">
+                  {step.num}
+                </span>
+                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
+                  <MaterialIcon icon={step.icon} size={24} />
+                </div>
+                <p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
+                  {step.title}
+                </p>
+                <p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
+              </AnimatedCard>
+            ))}
+          </AnimatedGrid>
+        </div>
+      </section>
+
+      {/* ─── FAQ ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
+          <div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
+            <AnimatedSection>
+              <div className="lg:sticky lg:top-28">
+                <div className="relative mb-6">
+                  <div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-[#6330D6]/25 blur-3xl -z-10" />
+                  <div className="absolute -right-4 -bottom-4 h-24 w-24 rounded-full bg-secondary/20 blur-3xl -z-10" />
+                  <div className="relative h-[220px] sm:h-[260px] rounded-[28px] overflow-hidden shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
+                    <Image
+                      src="/images/stores/success-owner.webp"
+                      alt="Neighbourhood store owner reviewing brand orders on his phone"
+                      fill
+                      sizes="(max-width: 1023px) 90vw, 360px"
+                      className="object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-[#16001D]/70 via-[#6330D6]/20 to-transparent" />
+                  </div>
+                </div>
+                <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                  FAQs
+                </span>
+                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
+                  Brand Partner Questions
+                </h2>
+                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
+                  What brand managers usually ask before starting their Nearle partnership.
+                </p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
+                >
+                  <span>Talk to our sales team</span>
+                  <MaterialIcon icon="arrow_forward" size={16} />
+                </Link>
+              </div>
+            </AnimatedSection>
+
+            <FAQAccordion items={FAQ_ITEMS} />
+          </div>
+        </div>
+      </section>
+
+      {/* ─── CTA Banner ─── */}
+      <CTABanner
+        badge={{ icon: "hub", label: "Brand Partnership" }}
+        heading={<>Ready to Grow in<br />Neighbourhood Commerce</>}
+        body="Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand."
+        primary={{ href: "/contact", icon: "forum", label: "Talk to Sales" }}
+        secondary={{ href: "/contact", icon: "mail", label: "Send an Enquiry" }}
+        decorations={[
+          "circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
+          "circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
+        ]}
+        backgroundImage="/images/illustrations/brand-part.png"
+      />
+    </PremiumPageShell>
+  );
+}

src/app/businesses/page.tsx

@@ -2,224 +2,147 @@ 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 { PremiumPageShell } from "@/components/common/PremiumPageShell";
 import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
+import { BusinessHero } from "@/components/heroes/BusinessHero";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { CTABanner } from "@/components/ui/CTABanner";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Nearle for Business",
   description:
-    "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.",
+    "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.",
+  openGraph: {
+    title: "Nearle for Business — MerchantOS for Neighbourhood Stores",
+    description:
+      "Bring your store online with MerchantOS: a free POS, an AI catalog by ProductLLM, QR ordering, and local discovery. Keep your customers — add the technology.",
+    url: "https://nearle.in/businesses",
+  },
+  alternates: { canonical: "/businesses" },
 };
 
-
-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 GROWTH_STEPS = [
+  { icon: "storefront", title: "Merchant", desc: "Onboard your store in minutes with a free POS." },
+  { icon: "auto_awesome", title: "AI Catalog", desc: "ProductLLM builds your catalog from a photo." },
+  { icon: "receipt_long", title: "Orders", desc: "Take QR and online orders from nearby customers." },
+  { icon: "analytics", title: "Analytics", desc: "See what sells and who's buying, in real time." },
+  { icon: "trending_up", title: "Growth", desc: "Turn local demand into repeat business." },
 ];
 
+
+
 function PhoneMapVisual() {
   return (
-    // Single phone frame — no outer wrapper needed, no floating pills
-    <div
-      className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
-      style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
-    >
-      {/* Status bar */}
-      <div className="flex items-center justify-between px-3 pt-2.5 pb-1">
-        <span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
-        <div className="flex items-center gap-0.5">
-          {[4, 6, 8, 10].map((h) => (
-            <span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
-          ))}
-        </div>
-      </div>
+    <div className="relative flex h-full w-full items-center justify-center">
+      <div className="absolute bottom-1 h-6 w-36 rounded-full bg-[#16001D]/18 blur-xl" />
+      <div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[264px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
+        <div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
+          <div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
+          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-[#16001D]/55">
+            <span>9:41</span>
+            <span className="h-1.5 w-5 rounded-full bg-[#16001D]/40" />
+          </div>
 
-      {/* Search bar */}
-      <div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
-        <svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
-          <circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
-          <path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
-        </svg>
-        <span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
-        <svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
-          <path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
-        </svg>
-      </div>
+          <div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
+            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
+              <rect width="140" height="255" fill="#FAF8FC" />
+              <path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
+              <path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
+              <path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+              <path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
+              <path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+              <path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
+              <path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
+              <path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+              <path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
+              <path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
+              <path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
+            </svg>
 
-      {/* 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%)" }} />
+            {[
+              ["left-[17%] top-[30%]", "bg-[#6330D6]"],
+              ["right-[16%] top-[28%]", "bg-[#006D37]"],
+              ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
+              ["right-[18%] bottom-[32%]", "bg-[#6330D6]"],
+              ["right-[35%] top-[20%]", "bg-[#6330D6]"],
+            ].map(([position, color]) => (
+              <div key={position} className={`absolute ${position} z-10`}>
+                <div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
+                  <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+                </div>
+              </div>
+            ))}
 
-        {/* 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>
+            <div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
+              <div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-[#6330D6]/18 blur-md" />
+              <div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#6330D6)] shadow-[0_14px_28px_rgba(99,48,214,0.30)]">
+                <div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+              </div>
+            </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 className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
+              <p className="truncate text-[9.5px] font-black leading-none text-[#16001D]">Your Store</p>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-[#5E5866]">
+                <span className="inline-flex items-center gap-0.5">
+                  <MaterialIcon icon="star" size={10} fill className="text-amber-500" />
+                  4.8
+                </span>
+                <span className="font-black text-[#006D37]">Open</span>
+                <span>0.8 km</span>
+              </div>
+            </div>
           </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 className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
+          Offers
+        </div>
+        <div className="absolute -right-7 top-[43%] z-40 rounded-full bg-[#6330D6] px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(99,48,214,0.24)]">
+          Shop
+        </div>
       </div>
     </div>
   );
 }
 
 export default function BusinessesPage() {
-  const collageCards = [
-    { text: "Nearby Customers", icon: "people" },
-    { text: "Orders & Offers", icon: "local_offer" },
-    { text: "Local Delivery Support", icon: "local_shipping" }
-  ];
-
   return (
     <PremiumPageShell>
       {/* ─── Hero Section ─── */}
-      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        {/* TWO-COLUMN GRID */}
-        <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">
-          
-          {/* Left Column: Copy & Actions */}
-          <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
-            </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="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-              Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
-            </p>
-
-            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-              {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-              <Link
-                href="/contact"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-              >
-                List Your Store
-              </Link>
-              <Link
-                href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
-              >
-                Explore Solutions
-              </Link>
-            </div>
-          </div>
-
-          {/* 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>
+      <BusinessHero />
 
       {/* ─── Intro Highlight Banner ─── */}
-      <section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
-        <div className="max-w-2xl text-left">
-          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
-            Together, we grow
-          </span>
-          <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-sm md:text-base text-[#5E5866] leading-relaxed">
-            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-[#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>
-      </section>
+      <AnimatedSection>
+        <section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
+          <div className="max-w-2xl text-left">
+            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
+              Together, we grow
+            </span>
+            <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-sm md:text-base text-[#5E5866] leading-relaxed">
+              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-[#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>
+        </section>
+      </AnimatedSection>
 
       {/* ─── Build Your Neighborhood Brand ─── */}
       <section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
-        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
+        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1280px] mx-auto">
           {/* Header */}
+          <AnimatedSection>
           <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
@@ -231,21 +154,22 @@ export default function BusinessesPage() {
               Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
             </p>
           </div>
+          </AnimatedSection>
 
           {/* Cards grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
+          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
             {/* Card 1 - Get Online */}
-            <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)]">
+            <AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col items-center text-center 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">
                 01
               </span>
               <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
                 <MaterialIcon icon="storefront" size={28} />
               </div>
-              <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">
+              <div className="relative z-10 mt-6 w-full max-w-sm">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Online
-                </h3>
+                </p>
                 <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>
@@ -253,7 +177,7 @@ export default function BusinessesPage() {
               <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"
+                    src="/images/workflow/how-storefront.webp"
                     alt="Local shop storefront with purple awning and now online board"
                     fill
                     sizes="(max-width: 768px) 50vw, 25vw"
@@ -261,41 +185,41 @@ export default function BusinessesPage() {
                   />
                 </div>
               </div>
-            </article>
+            </AnimatedCard>
 
             {/* Card 2 - Get Noticed */}
-            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
+            <AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col items-center text-center overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
               <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
                 02
               </span>
               <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
                 <MaterialIcon icon="campaign" size={28} />
               </div>
-              <div className="relative z-10 mt-6 max-w-[260px]">
-                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+              <div className="relative z-10 mt-6 w-full max-w-sm">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Noticed
-                </h3>
+                </p>
                 <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                   Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
                 </p>
               </div>
-              <div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
+              <div className="relative z-0 mt-auto h-[270px] lg:h-[290px] flex items-center justify-center">
                 <PhoneMapVisual />
               </div>
-            </article>
+            </AnimatedCard>
 
             {/* 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)]">
+            <AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col items-center text-center 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">
+              <div className="relative z-10 mt-6 w-full max-w-sm">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Simplified
-                </h3>
+                </p>
                 <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>
@@ -310,7 +234,7 @@ export default function BusinessesPage() {
                 </div>
                 <div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
                   <Image
-                    src="/images/nearle-how/how-grocery-bag.webp"
+                    src="/images/workflow/how-grocery-bag.webp"
                     alt="Nearle grocery bag filled with vegetables and packaged products"
                     fill
                     sizes="(max-width: 768px) 50vw, 25vw"
@@ -318,47 +242,74 @@ export default function BusinessesPage() {
                   />
                 </div>
               </div>
-            </article>
-          </div>
+            </AnimatedCard>
+          </AnimatedGrid>
         </div>
       </section>
 
       {/* ─── Our Features / Business Grid ─── */}
       <BusinessFeaturesGrid />
 
-      {/* ─── Join/Download Call to Action ─── */}
-      <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="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
-          <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="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
-            <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
+      {/* ─── Business Growth Workflow ─── */}
+      <section className="py-10 md:py-14 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
+        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1280px] mx-auto">
+          <AnimatedSection>
+            <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]">
+                Growth Workflow
+              </span>
+              <h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
+                From shelf to steady growth
               </h2>
-              <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 className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
+                Every step on Nearle builds on the last — powered by MerchantOS and
+                an AI catalog from ProductLLM.
               </p>
-              <div className="flex flex-wrap justify-center gap-3.5">
-                {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-                <Link
-                  href="/contact"
-                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
-                >
-                  <MaterialIcon icon="bolt" size={18} />
-                  <span>Register 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>
-                </Link>
-              </div>
             </div>
-          </div>
+          </AnimatedSection>
+
+          <AnimatedGrid className="flex flex-col items-stretch gap-4 lg:flex-row lg:items-center lg:gap-2">
+            {GROWTH_STEPS.map((step, i) => (
+              <div key={step.title} className="contents">
+                <AnimatedCard className="flex-1 rounded-[24px] border border-[#6330D6]/10 bg-white p-6 text-center shadow-[0_10px_30px_rgba(22,0,29,0.05)]">
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-[#6330D6]/8 text-[#6330D6]">
+                    <MaterialIcon icon={step.icon} size={24} />
+                  </div>
+                  <p className="mt-4 font-display font-black text-[#16001D] text-lg leading-tight">
+                    {step.title}
+                  </p>
+                  <p className="mt-2 text-sm leading-relaxed text-[#5E5866]">
+                    {step.desc}
+                  </p>
+                </AnimatedCard>
+                {i < GROWTH_STEPS.length - 1 && (
+                  <div aria-hidden="true" className="flex shrink-0 items-center justify-center py-1 lg:px-0.5">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6]/8 text-[#6330D6]">
+                      <span className="flex lg:hidden">
+                        <MaterialIcon icon="arrow_downward" size={18} />
+                      </span>
+                      <span className="hidden lg:flex">
+                        <MaterialIcon icon="arrow_forward" size={18} />
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </AnimatedGrid>
         </div>
       </section>
+
+      {/* ─── Join/Download Call to Action ─── */}
+      <CTABanner
+        heading="Nearle is Essential for Business Growth"
+        body="Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today."
+        primary={{ href: "/contact", icon: "bolt", label: "Register Interest" }}
+        secondary={{ href: "/contact", icon: "phone", label: "Contact Experts" }}
+        decorations={[
+          "circle at 70% 20%, rgba(99,48,214,0.15), transparent 50%",
+        ]}
+      />
     </PremiumPageShell>
   );
 }

src/app/contact/page.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { ContactForm } from "@/components/contact/ContactForm";
-import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { ContactHero } from "@/components/heroes/ContactHero";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -13,96 +14,13 @@ export default function ContactPage() {
   return (
     <PremiumPageShell>
       {/* ─── Contact Section ─── */}
-      <section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 border-b border-[#6330D6]/10">
-        
-        {/* Subtle Map Grid/Location decoration behind left content */}
-        <div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
-          <svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
-            <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" />
-            <path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
-            <circle cx="200" cy="130" r="4" fill="currentColor" />
-            <circle cx="200" cy="130" r="14" strokeWidth="1" />
-            <circle cx="80" cy="50" r="3" fill="currentColor" />
-            <circle cx="320" cy="210" r="3" fill="currentColor" />
-          </svg>
-        </div>
-
-        <div className="w-full mx-auto relative z-10">
-          <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
-            
-            {/* Left Column — Contact Info */}
-            <div className="relative z-10 text-[#16001D] max-w-[580px] text-left">
-              <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">
-                Contact Us
-              </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>
+      <ContactHero />
 
       {/* ─── Map Section ─── */}
-      <section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
-        <div className="relative w-full h-[400px] rounded-2xl overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
+      <section className="bg-[#FAF7FD] px-4 py-8 md:px-6 lg:px-8 xl:px-10 2xl:px-12">
+        <div className="mx-auto w-full ">
+          <div className="relative h-[420px] overflow-hidden rounded-2xl border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
+          <AnimatedSection className="h-full">
           <iframe
             title="Nearle Coimbatore Location Map"
             src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
@@ -120,10 +38,12 @@ export default function ContactPage() {
               <MaterialIcon icon="store" size={16} className="text-white" />
             </div>
             <div className="text-left">
-              <h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
+              <p className="text-xs font-black text-[#16001D]">R.S. Puram Hub</p>
               <p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
             </div>
           </div>
+          </AnimatedSection>
+        </div>
         </div>
       </section>
     </PremiumPageShell>

src/app/cookies/page.tsx

@@ -0,0 +1,336 @@
+import React from "react";
+import Link from "next/link";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Cookie Policy",
+  description:
+    "Learn about the cookies Nearle uses to keep the platform running, personalise your experience, and improve our services. Manage your cookie preferences here.",
+  openGraph: {
+    title: "Cookie Policy | Nearle",
+    description:
+      "Nearle's cookie policy explains what cookies we use, why we use them, and how to manage your preferences.",
+    url: "https://nearle.in/cookies",
+  },
+};
+
+const SECTIONS = [
+  { id: "what-are-cookies", label: "What Are Cookies?" },
+  { id: "essential", label: "Essential Cookies" },
+  { id: "performance", label: "Performance Cookies" },
+  { id: "analytics", label: "Analytics Cookies" },
+  { id: "preference", label: "Preference Cookies" },
+  { id: "marketing", label: "Marketing Cookies" },
+  { id: "managing", label: "Managing Cookies" },
+  { id: "updates", label: "Updates to This Policy" },
+];
+
+const COOKIE_TYPES = [
+  {
+    id: "essential",
+    icon: "lock",
+    title: "Essential Cookies",
+    description: "These cookies are required for Nearle to function at all. They handle login sessions, shopping cart state, and security tokens. Without them, the app doesn't work.",
+    required: true,
+    examples: [
+      { name: "nearle_session", purpose: "Keeps you logged in during your browsing session", duration: "Session" },
+      { name: "nearle_csrf", purpose: "Protects against cross-site request forgery attacks", duration: "Session" },
+      { name: "nearle_auth", purpose: "Authenticates your account securely across pages", duration: "30 days" },
+      { name: "cart_id", purpose: "Preserves your shopping cart between visits", duration: "7 days" },
+    ],
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+    badge: "Always Active",
+    badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
+  },
+  {
+    id: "performance",
+    icon: "speed",
+    title: "Performance Cookies",
+    description: "These help us understand how fast pages load, where errors occur, and which parts of the platform customers use most. The data is used only to improve Nearle, not to track individuals.",
+    required: false,
+    examples: [
+      { name: "perf_timing", purpose: "Records page load times to detect slowness", duration: "1 day" },
+      { name: "error_log", purpose: "Captures app errors to help our engineering team fix bugs", duration: "Session" },
+    ],
+    tone: "bg-secondary/8 text-secondary",
+    badge: "Optional",
+    badgeColor: "bg-secondary/10 text-secondary",
+  },
+  {
+    id: "analytics",
+    icon: "analytics",
+    title: "Analytics Cookies",
+    description: "Analytics cookies help us understand aggregate usage patterns, like how many people browse the grocery section, which searches are most common, and how customers discover local stores. All data is anonymised.",
+    required: false,
+    examples: [
+      { name: "nearle_analytics", purpose: "Tracks page views and in-app navigation patterns", duration: "12 months" },
+      { name: "utm_params", purpose: "Identifies which marketing channel brought you to Nearle", duration: "30 days" },
+    ],
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+    badge: "Optional",
+    badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
+  },
+  {
+    id: "preference",
+    icon: "tune",
+    title: "Preference Cookies",
+    description: "Preference cookies remember your choices, like your saved delivery address, your preferred neighbourhood, your language setting, and which stores you've marked as favourites.",
+    required: false,
+    examples: [
+      { name: "nearle_location", purpose: "Stores your selected neighbourhood and delivery zone", duration: "6 months" },
+      { name: "nearle_prefs", purpose: "Remembers your app display and notification preferences", duration: "12 months" },
+      { name: "saved_addresses", purpose: "Keeps your delivery addresses for quick reorder", duration: "12 months" },
+    ],
+    tone: "bg-secondary/8 text-secondary",
+    badge: "Optional",
+    badgeColor: "bg-secondary/10 text-secondary",
+  },
+  {
+    id: "marketing",
+    icon: "campaign",
+    title: "Marketing Cookies",
+    description: "Nearle does not use cross-site advertising cookies or sell your data to ad networks. We may use cookies to show you relevant promotions and offers within Nearle itself, based on your neighbourhood and past orders rather than third-party tracking.",
+    required: false,
+    examples: [
+      { name: "offer_seen", purpose: "Tracks which promotions you've already seen to avoid repetition", duration: "7 days" },
+      { name: "refer_code", purpose: "Attributes referral discounts to the correct campaign", duration: "30 days" },
+    ],
+    tone: "bg-rose-500/8 text-rose-600",
+    badge: "Opt-In Only",
+    badgeColor: "bg-rose-500/10 text-rose-600",
+  },
+];
+
+export default function CookiePolicyPage() {
+  return (
+    <PremiumPageShell>
+      {/* ─── Hero Bar ─── */}
+      <section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
+        <div className="max-w-[1600px] mx-auto">
+          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+            <div>
+              <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-5 w-fit">
+                Legal
+              </span>
+              <h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
+                Cookie Policy
+              </h1>
+              <p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
+                Nearle uses cookies to keep the platform working reliably, remember your preferences, and understand how we can make the experience better. We don&apos;t use cookies to track you across the internet or sell your data.
+              </p>
+            </div>
+            <div className="shrink-0 text-right">
+              <span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
+              <div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
+              <div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
+              <div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
+            </div>
+          </div>
+
+          {/* Quick overview chips */}
+          <div className="flex flex-wrap gap-3 mt-8">
+            {[
+              { label: "1 Required Cookie Type", icon: "lock" },
+              { label: "4 Optional Cookie Types", icon: "tune" },
+              { label: "No Advertising Cookies", icon: "block" },
+              { label: "No Cross-Site Tracking", icon: "shield" },
+            ].map((chip) => (
+              <div key={chip.label} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#6330D6]/12 shadow-sm text-xs font-black text-[#16001D]">
+                <MaterialIcon icon={chip.icon} size={14} className="text-[#6330D6]" />
+                {chip.label}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Content with Sidebar ─── */}
+      <section className="py-10 md:py-14 bg-white">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-10 lg:gap-16 items-start">
+
+            {/* Sidebar TOC */}
+            <nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
+              <p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
+              <ul className="space-y-1">
+                {SECTIONS.map((section) => (
+                  <li key={section.id}>
+                    <a
+                      href={`#${section.id}`}
+                      className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
+                    >
+                      {section.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
+                <p className="text-xs font-black text-[#16001D] mb-2">Questions about cookies?</p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
+                >
+                  <span>Contact us</span>
+                  <MaterialIcon icon="arrow_forward" size={14} />
+                </Link>
+              </div>
+            </nav>
+
+            {/* Main Content */}
+            <div className="space-y-12 max-w-none">
+
+              {/* What Are Cookies */}
+              <CookieSection id="what-are-cookies" title="What Are Cookies?">
+                <p>Cookies are small text files stored on your device when you visit a website or use an app. They let the platform remember information between visits, like whether you&apos;re logged in, what&apos;s in your cart, and which neighbourhood you&apos;ve selected.</p>
+                <p>On Nearle, we use cookies in the web app and similar technologies (like local storage) in the mobile apps. The principle is the same: store only what&apos;s needed to give you a smooth, personalised experience.</p>
+
+                <div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
+                  <MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
+                  <p className="text-sm text-[#5E5866] leading-relaxed">
+                    Nearle does not use third-party advertising networks. We don&apos;t place tracking pixels from Google Ads, Meta, or any other ad platform on our pages.
+                  </p>
+                </div>
+              </CookieSection>
+
+              {/* Cookie Types */}
+              {COOKIE_TYPES.map((cookieType) => (
+                <CookieSection key={cookieType.id} id={cookieType.id} title="">
+                  <div className="flex items-start gap-4 mb-5">
+                    <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${cookieType.tone}`}>
+                      <MaterialIcon icon={cookieType.icon} size={24} />
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-3 flex-wrap">
+                        <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] leading-tight tracking-tight">
+                          {cookieType.title}
+                        </h2>
+                        <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide ${cookieType.badgeColor}`}>
+                          {cookieType.badge}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="h-px bg-[#6330D6]/10 mb-5" />
+
+                  <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-5">
+                    {cookieType.description}
+                  </p>
+
+                  <div className="overflow-hidden rounded-2xl border border-[#6330D6]/10">
+                    <table className="w-full text-sm">
+                      <thead className="bg-[#FAF7FD]">
+                        <tr>
+                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Cookie Name</th>
+                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Purpose</th>
+                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866] whitespace-nowrap">Duration</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-[#6330D6]/8 bg-white">
+                        {cookieType.examples.map((example) => (
+                          <tr key={example.name}>
+                            <td className="px-4 py-3 font-mono text-xs font-bold text-[#6330D6] whitespace-nowrap">{example.name}</td>
+                            <td className="px-4 py-3 text-xs text-[#5E5866] leading-relaxed">{example.purpose}</td>
+                            <td className="px-4 py-3 text-xs font-semibold text-[#5E5866] whitespace-nowrap">{example.duration}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </CookieSection>
+              ))}
+
+              {/* Managing Cookies */}
+              <CookieSection id="managing" title="Managing Your Cookie Preferences">
+                <p>You have control over most cookies Nearle uses. Here&apos;s how to manage them:</p>
+
+                <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Browser</h3>
+                <p>Every major browser lets you view, delete, and block cookies. Here&apos;s where to find those settings:</p>
+                <ul className="space-y-1.5 mt-3">
+                  {["Chrome: Settings → Privacy and Security → Cookies",
+                    "Safari: Settings → Safari → Privacy & Security",
+                    "Firefox: Settings → Privacy & Security",
+                    "Edge: Settings → Privacy, Search and Services → Cookies"
+                  ].map((item, i) => (
+                    <li key={i} className="flex gap-2.5 text-sm text-[#5E5866]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Nearle Account</h3>
+                <p>You can manage optional cookies from your Nearle account settings. Essential cookies cannot be disabled because they are required for the platform to work.</p>
+
+                <div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
+                  <MaterialIcon icon="warning" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
+                  <p className="text-sm text-[#5E5866] leading-relaxed">
+                    Disabling all cookies may cause some features to stop working, like staying logged in or remembering your delivery address. We recommend keeping essential and preference cookies enabled for the best experience.
+                  </p>
+                </div>
+              </CookieSection>
+
+              {/* Updates */}
+              <CookieSection id="updates" title="Updates to This Policy">
+                <p>When we make significant changes to how we use cookies, we will update this page and notify you through the Nearle app. The &quot;Last Updated&quot; date at the top of this page reflects the most recent revision.</p>
+                <p>For questions about our cookie practices, contact us at:</p>
+                <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
+                  <div className="space-y-2 text-sm text-[#5E5866]">
+                    <div className="flex gap-2">
+                      <MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
+                      <a href="mailto:care@nearle.in" className="text-[#6330D6] font-black hover:underline">care@nearle.in</a>
+                    </div>
+                    <div className="flex gap-2">
+                      <MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
+                      <span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
+                    </div>
+                  </div>
+                </div>
+              </CookieSection>
+
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Bottom nav ─── */}
+      <section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="flex flex-wrap gap-4 justify-center">
+            {[
+              { label: "Privacy Policy", href: "/privacy", icon: "lock" },
+              { label: "Terms of Service", href: "/terms", icon: "gavel" },
+              { label: "Contact Us", href: "/contact", icon: "mail" },
+            ].map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
+              >
+                <MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+    </PremiumPageShell>
+  );
+}
+
+function CookieSection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
+  return (
+    <div id={id} className="scroll-mt-28">
+      {title && (
+        <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
+          {title}
+        </h2>
+      )}
+      <div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/delivery-partners/page.tsx

@@ -0,0 +1,351 @@
+import React from "react";
+import Link from "next/link";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { DeliveryHero } from "@/components/heroes/DeliveryHero";
+import { FAQAccordion } from "@/components/ui/FAQAccordion";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
+import { CTABanner } from "@/components/ui/CTABanner";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Delivery Partners",
+  description:
+    "Deliver locally and earn daily with Nearle. Flexible hours, weekly payouts, and short-distance hyperlocal deliveries. Join Nearle's growing delivery network today.",
+  openGraph: {
+    title: "Delivery Partners | Nearle",
+    description:
+      "Join Nearle's local delivery network. Deliver within your neighbourhood, earn on your schedule, and get weekly payouts.",
+    url: "https://nearle.in/delivery-partners",
+  },
+};
+
+const BENEFITS = [
+  {
+    icon: "access_time",
+    title: "Flexible Hours",
+    desc: "Choose your own shifts: morning, afternoon, or evening. Take a day off whenever you need. No fixed schedule, no minimum hours.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "payments",
+    title: "Weekly Payouts",
+    desc: "Your earnings are settled every week, directly to your bank account. No waiting for month-end.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "near_me",
+    title: "Short Local Deliveries",
+    desc: "Deliver within your neighbourhood. No long-distance trips. No highway runs. Stay close to home.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "electric_scooter",
+    title: "Low Fuel, High Efficiency",
+    desc: "Short distances mean lower fuel costs and more deliveries per hour, which means more money in your pocket.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "headset_mic",
+    title: "Dedicated Support Team",
+    desc: "Our local support team is available throughout the day to help with any issues, route changes, or customer questions.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "workspace_premium",
+    title: "Performance Bonuses",
+    desc: "Deliver more, earn more. Nearle rewards high-performing delivery partners with weekly bonuses and peak-hour incentives.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+];
+
+const REQUIREMENTS = [
+  {
+    icon: "cake",
+    title: "Age 18 or Above",
+    desc: "You must be at least 18 years old to join the Nearle delivery network.",
+  },
+  {
+    icon: "two_wheeler",
+    title: "A Two-Wheeler Vehicle",
+    desc: "A bicycle, scooter, or motorcycle in good working condition. Electric vehicles are welcome.",
+  },
+  {
+    icon: "badge",
+    title: "Valid Documents",
+    desc: "Aadhaar card, PAN card, and a valid driving licence (for scooter/motorcycle riders).",
+  },
+  {
+    icon: "smartphone",
+    title: "A Smartphone",
+    desc: "An Android or iOS smartphone to use the Nearle Delivery Partner app for order tracking and navigation.",
+  },
+];
+
+const TIMELINE = [
+  {
+    step: "01",
+    title: "Sign Up & Submit Documents",
+    desc: "Register through the Nearle Delivery Partner app. Upload your documents for a quick background verification.",
+    time: "Day 1",
+  },
+  {
+    step: "02",
+    title: "Complete a Short Orientation",
+    desc: "Attend a 1-hour orientation session (online or in-person) to understand how deliveries, payouts, and customer service work.",
+    time: "Day 2",
+  },
+  {
+    step: "03",
+    title: "Activate and Go Online",
+    desc: "Once approved, go online anytime from the app. Orders come to you automatically based on your location.",
+    time: "Day 3",
+  },
+  {
+    step: "04",
+    title: "Pick Up Orders",
+    desc: "When you accept an order, you navigate to the store, pick up the package, and deliver it to the customer, usually within 30 minutes.",
+    time: "Every Shift",
+  },
+  {
+    step: "05",
+    title: "Get Paid Weekly",
+    desc: "Earnings are totalled at the end of each week and credited directly to your bank account every Monday.",
+    time: "Every Week",
+  },
+];
+
+const FAQ_ITEMS = [
+  {
+    question: "Do I need to own a vehicle to join?",
+    answer: "Yes, you need your own two-wheeler: a bicycle, scooter, or motorcycle in good working condition. Electric scooters and bikes are also welcome. We don't provide vehicles, but delivery earnings usually cover running costs easily given the short distances.",
+  },
+  {
+    question: "How are earnings calculated?",
+    answer: "You earn a base delivery fee per order, plus surge pricing during peak hours. High-performing delivery partners also receive weekly performance bonuses. Your earnings are visible in real-time on the app.",
+  },
+  {
+    question: "Can I work in multiple areas?",
+    answer: "You are assigned a home zone based on your registration address. You can accept deliveries within and around your zone. If you want to expand to another area, you can update your preferred zones in the app.",
+  },
+  {
+    question: "How quickly do I get paid?",
+    answer: "Your earnings are settled every Monday for the previous week's work. There's no minimum earnings threshold. Even a single delivery is paid out.",
+  },
+  {
+    question: "Is there a minimum number of deliveries I have to do?",
+    answer: "No. Nearle is fully flexible. You can go online whenever you want and go offline whenever you want. There are no minimums, though performance bonuses reward consistency.",
+  },
+  {
+    question: "What if a customer cancels after I've picked up the order?",
+    answer: "If a cancellation happens after you've reached the store or picked up the order, you still receive a partial fee for the trip. Nearle's policy protects delivery partners from bad-faith cancellations.",
+  },
+  {
+    question: "What happens if I have an accident during a delivery?",
+    answer: "Safety is our priority. All active delivery partners on Nearle are covered by a delivery protection plan during active delivery slots. We also have an emergency support line available 24 hours a day.",
+  },
+  {
+    question: "How do I handle customer complaints?",
+    answer: "You don't need to handle complaints directly. If a customer has an issue, they contact Nearle support. Your job is to deliver. We handle the communication, refund decisions, and dispute resolution.",
+  },
+];
+
+export default function DeliveryPartnersPage() {
+  return (
+    <PremiumPageShell>
+      <DeliveryHero />
+
+      {/* ─── Benefits Grid ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                Partner Benefits
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                More Than Just Delivery
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                Nearle is designed around your life, not the other way around.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {BENEFITS.map((benefit) => (
+              <AnimatedCard
+                key={benefit.title}
+                className="rounded-2xl border border-[#6330D6]/10 bg-[#FAF7FD] p-6 flex flex-col gap-4 hover:shadow-[0_8px_28px_rgba(22,0,29,0.08)] transition-shadow duration-300"
+              >
+                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${benefit.tone}`}>
+                  <MaterialIcon icon={benefit.icon} size={24} />
+                </div>
+                <div>
+                  <p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
+                  <p className="mt-2 text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
+                </div>
+              </AnimatedCard>
+            ))}
+          </AnimatedGrid>
+        </div>
+      </section>
+
+      {/* ─── Requirements ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
+            <AnimatedSection>
+              <div>
+                <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
+                  To Get Started
+                </span>
+                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
+                  What You Need to Join
+                </h2>
+                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
+                  No experience needed. If you have a vehicle, a smartphone, and a desire to earn, you&apos;re more than qualified.
+                </p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-2 bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-7 py-3.5 rounded-xl text-sm shadow-md transition-all duration-200 active:scale-95"
+                >
+                  <MaterialIcon icon="how_to_reg" size={18} />
+                  <span>Apply Now</span>
+                </Link>
+              </div>
+            </AnimatedSection>
+
+            <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {REQUIREMENTS.map((req) => (
+                <AnimatedCard key={req.title} className="flex flex-col gap-3 p-5 rounded-2xl bg-white border border-[#6330D6]/10 shadow-[0_4px_18px_rgba(22,0,29,0.05)]">
+                  <div className="w-11 h-11 rounded-2xl bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
+                    <MaterialIcon icon={req.icon} size={22} />
+                  </div>
+                  <div>
+                    <p className="text-sm font-black text-[#16001D]">{req.title}</p>
+                    <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
+                  </div>
+                </AnimatedCard>
+              ))}
+            </AnimatedGrid>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── How Delivery Works (Timeline) ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                Your Journey
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                From Sign-Up to First Earnings
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                Most delivery partners are out earning within 3 days of applying.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <AnimatedTimeline items={TIMELINE} />
+        </div>
+      </section>
+
+      {/* ─── Earnings Illustration ─── */}
+      {/* <section id="earnings" className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="text-center mb-10 md:mb-12">
+            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
+              Realistic Earnings
+            </span>
+            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+              What You Can Earn with Nearle
+            </h2>
+            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+              These are realistic estimates based on current delivery volumes in Coimbatore. Actual earnings depend on your hours, location, and delivery performance.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {EARNINGS.map((tier) => (
+              <div
+                key={tier.profile}
+                className={`rounded-[28px] border-2 p-7 flex flex-col gap-5 ${tier.color}`}
+              >
+                <div className={`w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow-sm ${tier.accent}`}>
+                  <MaterialIcon icon={tier.icon} size={24} />
+                </div>
+                <div>
+                  <h3 className={`text-base font-black leading-tight ${tier.accent}`}>{tier.profile}</h3>
+                  <p className="text-xs text-[#5E5866] mt-1">{tier.deliveries} per day</p>
+                </div>
+                <div className="border-t border-[#6330D6]/10 pt-4 space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs text-[#5E5866] font-semibold">Daily Estimate</span>
+                    <span className={`text-base font-black ${tier.accent}`}>{tier.daily}</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-xs text-[#5E5866] font-semibold">Monthly Estimate</span>
+                    <span className={`text-base font-black ${tier.accent}`}>{tier.monthly}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <p className="text-center text-xs text-[#5E5866] mt-6 max-w-xl mx-auto">
+            Estimates include base delivery fees only. Peak-hour surge pricing, performance bonuses, and festive incentives are additional. Earnings vary by zone.
+          </p>
+        </div>
+      </section> */}
+
+      {/* ─── FAQ ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
+            <AnimatedSection>
+              <div className="lg:sticky lg:top-28">
+                <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                  FAQs
+                </span>
+                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
+                  Common Questions
+                </h2>
+                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
+                  Everything you want to know before joining the Nearle delivery network.
+                </p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
+                >
+                  <span>Contact support</span>
+                  <MaterialIcon icon="arrow_forward" size={16} />
+                </Link>
+              </div>
+            </AnimatedSection>
+
+            <FAQAccordion items={FAQ_ITEMS} />
+          </div>
+        </div>
+      </section>
+
+      {/* ─── CTA Banner ─── */}
+      <CTABanner
+        badge={{ icon: "electric_scooter", label: "Start Earning Today" }}
+        heading={<>Join the Nearle<br />Delivery Network</>}
+        body="Delivery partners in Coimbatore are already earning with Nearle. Sign up today and start delivering in your neighbourhood within days."
+        primary={{ href: "/contact", icon: "how_to_reg", label: "Apply Now" }}
+        secondary={{ href: "/contact", icon: "phone", label: "Talk to Us" }}
+        decorations={[
+          "circle at 30% 30%, rgba(0,109,55,0.15), transparent 50%",
+          "circle at 70% 70%, rgba(99,48,214,0.12), transparent 45%",
+        ]}
+      />
+    </PremiumPageShell>
+  );
+}

src/app/globals.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/material-symbols-outlined.woff2") format("woff2");
+}
+
 /* ─── Design Tokens (Material Design 3 inspired) ─── */
 :root {
   --surface: #FAF8FC;
@@ -124,8 +132,8 @@
   --spacing-container-max: 1440px;
 
   /* Fonts */
-  --font-display: "Jost", sans-serif;
-  --font-body: "Jost", sans-serif;
+  --font-display: var(--font-lato), sans-serif;
+  --font-body: var(--font-lato), sans-serif;
  
 
   /* Border radius */
@@ -238,6 +246,18 @@ body {
 
 /* Material Symbols config */
 .material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
@@ -553,6 +573,48 @@ body {
   }
 }
 
+/* ─── AI Commerce ambient decoration ─── */
+/* Very slow, very low-contrast drift. Meant to be felt, never watched.
+   Transform-only so it stays on the compositor. */
+@keyframes ai-orb-drift-a {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(28px, -22px, 0) scale(1.06);
+  }
+}
+
+@keyframes ai-orb-drift-b {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(-34px, 18px, 0) scale(1.05);
+  }
+}
+
+@keyframes ai-mote-float {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(6px, -18px, 0);
+  }
+}
+
+.ai-orb-a {
+  animation: ai-orb-drift-a 22s ease-in-out infinite;
+}
+
+.ai-orb-b {
+  animation: ai-orb-drift-b 27s ease-in-out infinite;
+}
+
+.ai-mote {
+  animation: ai-mote-float 14s ease-in-out infinite;
+}
+
 /* ─── Footer Layout & Sizing System ─── */
 .footer-container {
   box-sizing: border-box;
@@ -618,373 +680,6 @@ body {
   max-width: 320px;
 }
 
-.footer-social-link {
-  width: 58px;
-  height: 58px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  transition: all 0.3s ease;
-}
-
-.footer-social-link:hover {
-  background: var(--brand-accent);
-  color: var(--brand-dark);
-}
-
-.footer-column-title {
-  font-size: 17px;
-  font-weight: 700;
-  color: #E5E7EB;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 24px;
-}
-
-.footer-links-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.footer-link {
-  font-size: 17px;
-  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.8);
-  transition: all 0.3s ease;
-}
-
-.footer-link:hover {
-  color: var(--brand-accent);
-  transform: translateX(6px);
-}
-
-/* Contact Form Card styling */
-.footer-brand {
-  min-width: 0;
-}
-
-.footer-company {
-  min-width: 0;
-}
-
-.footer-partnerships {
-  min-width: 0;
-}
-
-.footer-legal {
-  margin-top: 12px;
-}
-
-.footer-contact-wrap {
-  min-width: 0;
-  width: 100%;
-}
-
-.footer-contact-card {
-  width: 100%;
-  max-width: 540px;
-  min-width: 0;
-  box-sizing: border-box;
-  border-radius: 32px;
-}
-
-@media (max-width: 640px) {
-  .footer-contact-card {
-    max-width: 100%;
-    border-radius: 24px;
-  }
-}
-
-.footer-contact-card input,
-.footer-contact-card textarea,
-.footer-contact-card button {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-.footer-contact-title {
-  font-size: clamp(30px, 2.2vw, 34px);
-  font-weight: 800;
-  line-height: 1.15;
-}
-
-.footer-contact-subtitle {
-  font-size: 16px;
-  color: var(--on-surface-variant);
-  margin-top: 8px;
-  margin-bottom: 24px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-.footer-form-row {
-  /* Layout handled via Tailwind grid classes in Footer.tsx */
-}
-
-.footer-input {
-  box-sizing: border-box;
-  width: 100%;
-  background: var(--surface);
-  border: 1px solid var(--outline-variant);
-  color: var(--on-surface);
-  border-radius: 14px;
-  padding-inline: 16px;
-  font-size: 16px;
-  outline: none;
-  transition: all 0.2s ease;
-}
-
-.footer-input:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(77, 4, 106, 0.2);
-}
-
-.footer-input.has-error {
-  border-color: var(--error);
-}
-
-.footer-input.has-error:focus {
-  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
-}
-
-.footer-input::placeholder {
-  font-size: 16px;
-  color: rgba(77, 67, 79, 0.6);
-}
-
-.footer-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  background: var(--surface);
-  border: 1px solid var(--outline-variant);
-  color: var(--on-surface);
-  border-radius: 14px;
-  padding: 16px;
-  font-size: 16px;
-  outline: none;
-  resize: none;
-  transition: all 0.2s ease;
-}
-
-.footer-textarea:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(77, 4, 106, 0.2);
-}
-
-.footer-textarea.has-error {
-  border-color: var(--error);
-}
-
-.footer-textarea.has-error:focus {
-  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
-}
-
-.footer-textarea::placeholder {
-  font-size: 16px;
-  color: rgba(77, 67, 79, 0.6);
-}
-
-.footer-error-text {
-  font-size: 15px;
-  color: var(--error);
-  font-weight: 700;
-  margin-top: 4px;
-  padding-left: 4px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.footer-submit-btn {
-  width: 100%;
-  background: var(--primary);
-  color: var(--on-primary);
-  font-weight: 700;
-  font-size: 18px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition: all 0.2s ease;
-  border: none;
-}
-
-.footer-submit-btn:hover:not(:disabled) {
-  background: var(--primary-container);
-}
-
-.footer-submit-btn:disabled {
-  background: rgba(77, 4, 106, 0.5);
-  cursor: not-allowed;
-}
-
-.footer-submit-btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.footer-bottom-text {
-  font-size: 15px;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-/* Helpdesk override for sizing constraints */
-.helpdesk-subtitle {
-  font-size: 15px;
-  font-weight: 700;
-  color: rgba(18, 2, 23, 0.8);
-  margin-top: 2px;
-}
-
-.helpdesk-btn {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background-color: var(--brand-dark);
-  color: var(--brand-accent);
-  font-weight: 900;
-  padding: 14px 32px;
-  border-radius: 9999px;
-  font-size: 16px;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-}
-
-.helpdesk-btn:hover {
-  background-color: rgba(18, 2, 23, 0.9);
-}
-
-@media (max-width: 1200px) {
-  .footer-grid,
-  .footer-grid-contact-page {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 40px;
-  }
-  
-  .footer-brand-col {
-    grid-column: 1 / -1;
-  }
-  
-  .footer-contact-card-wrapper {
-    grid-column: 1 / -1;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-}
-
-@media (max-width: 768px) {
-  .footer-grid {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "brand"
-      "company"
-      "partnerships"
-      "legal"
-      "form";
-    gap: 32px;
-  }
-  
-  .footer-grid-contact-page {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "brand"
-      "company"
-      "partnerships"
-      "legal";
-    gap: 32px;
-  }
-}
-
-/* ─── Footer Vertical Spacing & Height Alignment ─── */
-.footer {
-  --helpdesk-height: 150px;
-  --helpdesk-overlap: 42px;
-
-  position: relative;
-  height: auto !important;
-  min-height: 0 !important;
-  padding: 0 !important;
-  overflow: visible !important;
-}
-
-.footer-helpdesk-wrap {
-  box-sizing: border-box;
-  position: relative;
-  z-index: 5;
-  width: 100%;
-  max-width: 1720px;
-  margin: 0 auto;
-  padding-inline: clamp(24px, 5%, 76px);
-  margin-top: -42px;
-  margin-bottom: 48px;
-}
-
-.footer-main {
-  padding-top: 0 !important;
-  padding-bottom: 56px !important;
-}
-
-.footer-divider {
-  width: 100%;
-  margin: 0 auto !important;
-  border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.footer-bottom {
-  width: 100%;
-  margin: 0 auto;
-  padding: 28px 0 34px !important;
-}
-
-.footer-spacer,
-.footer-empty-space {
-  display: none !important;
-}
-
-@media (max-width: 768px) {
-  .footer-helpdesk-wrap {
-    margin-top: 0;
-    margin-bottom: 32px;
-  }
-}
-
-/* ─── Stable Subpage Hero Height to Prevent Layout Shift ─── */
-.hero-section {
-  position: relative !important;
-  min-height: clamp(680px, 48vw, 820px) !important;
-  height: clamp(680px, 48vw, 820px) !important;
-  display: flex !important;
-  flex-direction: column !important;
-  justify-content: center !important;
-  align-items: center !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  overflow: hidden !important;
-}
-
-.hero-section > div.relative {
-  width: 100% !important;
-}
-
-.hero-rotator-text {
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.4em;
-  vertical-align: middle;
-}
-
 /* ─── Experience Bento Mosaic Grid Redesign ─── */
 .experience-grid {
   display: grid;
@@ -1070,7 +765,7 @@ body {
   backdrop-filter: blur(10px);
 }
 
-.experience-card h3 {
+.experience-card__title {
   color: white;
   font-size: clamp(24px, 2vw, 34px);
   line-height: 1.1;
@@ -1106,33 +801,6 @@ body {
   }
 }
 
-/* ─── Hero Section Background & Overlay Styling ─── */
-.hero-background {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  overflow: hidden;
-}
-
-.hero-background img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  object-position: center right !important;
-}
-
-.hero-background::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: rgba(18, 4, 28, 0.48);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
 /* ─── Shared Premium Framed Layout Classes ─── */
 .page-canvas {
   background-color: #E8D8ED;
@@ -1414,3 +1082,18 @@ main {
   border-radius: 1.25rem;
   background-color: var(--brand-accent-light);
 }
+
+/* Reduced motion: Framer components are handled by <MotionConfig reducedMotion="user">.
+   This covers CSS-only motion it can't reach — Tailwind transitions/hover transforms
+   and the infinite keyframe loops (float, pulse-subtle, hero-bike-float, stroke-dash,
+   hero-map-drift). Near-instant rather than removed, so final states stay intact. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

src/app/layout.tsx

@@ -1,17 +1,26 @@
 import type { Metadata, Viewport } from "next";
+import { Lato } from "next/font/google";
 import "./globals.css";
+import { MotionProvider } from "@/components/common/MotionProvider";
+import { PremiumNavbar } from "@/components/navbar/PremiumNavbar";
+import { PremiumFooter } from "@/components/footer/PremiumFooter";
 
-const jost = { variable: "font-display" };
-const jostBody = { variable: "font-body" };
+const lato = Lato({
+  subsets: ["latin"],
+  weight: ["100", "300", "400", "700", "900"],
+  variable: "--font-lato",
+  display: "swap",
+  preload: true,
+});
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://nearle.in"),
   title: {
-    default: "Nearle — Your Neighborhood, Delivered",
+    default: "Nearle: Your Neighborhood, Delivered",
     template: "%s | Nearle",
   },
   description:
-    "Hyper-local essentials, hot meals, and professional services from verified businesses within your 2km radius. India's #1 neighborhood commerce platform.",
+    "Hyper-local essentials, hot meals, and professional services from verified businesses. India's #1 neighborhood commerce platform.",
   keywords: [
     "hyperlocal",
     "neighborhood delivery",
@@ -23,16 +32,16 @@ export const metadata: Metadata = {
     "neighborhood commerce",
   ],
   openGraph: {
-    title: "Nearle — Your Neighborhood, Delivered",
+    title: "Nearle: Your Neighborhood, Delivered",
     description:
-      "Hyper-local essentials, hot meals, and professional services from verified businesses within your 2km radius.",
+      "Hyper-local essentials, hot meals, and professional services from verified businesses",
     url: "https://nearle.in",
     siteName: "Nearle",
     locale: "en_IN",
     type: "website",
     images: [
       {
-        url: "/logo.png",
+        url: "/logos/logo.png",
         width: 512,
         height: 512,
         alt: "Nearle logo",
@@ -41,16 +50,16 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary",
-    title: "Nearle — Your Neighborhood, Delivered",
+    title: "Nearle: Your Neighborhood, Delivered",
     description:
       "India's hyperlocal neighborhood commerce platform",
-    images: ["/logo.png"],
+    images: ["/logos/logo.png"],
   },
   alternates: { canonical: "/" },
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon.ico",
-    apple: "/apple-icon.png",
+    apple: "/icons/apple-icon.png",
   },
   robots: { index: true, follow: true },
 };
@@ -61,6 +70,35 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": "https://nearle.in/#organization",
+      name: "Nearle",
+      url: "https://nearle.in",
+      logo: "https://nearle.in/logos/logo.png",
+      description:
+        "Nearle is an AI Commerce platform that digitizes neighbourhood stores — with AI catalogs by ProductLLM, QR ordering, and local discovery — instead of replacing them.",
+      sameAs: [
+        "https://www.instagram.com/nearle",
+        "https://www.linkedin.com/company/nearle",
+        "https://www.facebook.com/nearle",
+      ],
+    },
+    {
+      "@type": "WebSite",
+      "@id": "https://nearle.in/#website",
+      url: "https://nearle.in",
+      name: "Nearle",
+      description:
+        "AI Commerce platform for neighbourhood stores. MerchantOS, ProductLLM, and ConsumerOS.",
+      publisher: { "@id": "https://nearle.in/#organization" },
+    },
+  ],
+};
+
 export default function RootLayout({
   children,
 }: {
@@ -69,23 +107,24 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${jost.variable} ${jostBody.variable}`}
+      className={lato.variable}
+      data-scroll-behavior="smooth"
       suppressHydrationWarning
     >
-      <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-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
-        {children}
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+        <MotionProvider>
+          <div className="min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col">
+            <PremiumNavbar />
+            <main className="w-full overflow-x-clip bg-white">
+              {children}
+            </main>
+            <PremiumFooter />
+          </div>
+        </MotionProvider>
       </body>
     </html>
   );

src/app/merchants/page.tsx

@@ -0,0 +1,390 @@
+import React from "react";
+import Link from "next/link";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { MerchantsHero } from "@/components/heroes/MerchantsHero";
+import { HowItWorks } from "@/components/home/HowItWorks";
+import { FAQAccordion } from "@/components/ui/FAQAccordion";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { CTABanner } from "@/components/ui/CTABanner";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Merchant Partners",
+  description:
+    "Bring your neighbourhood store online with Nearle. Get discovered by nearby customers, manage orders, run local offers, and build repeat sales, all from one simple platform.",
+  openGraph: {
+    title: "Merchant Partners | Nearle",
+    description:
+      "Join thousands of neighbourhood merchants growing with Nearle. Digital catalogue, QR ordering, local discovery, and order management, all in one place.",
+    url: "https://nearle.in/merchants",
+  },
+};
+
+const BENEFITS = [
+  {
+    icon: "menu_book",
+    title: "Digital Catalogue",
+    desc: "Upload your entire product range with photos, pricing, and availability. Keep it updated in minutes. No technical skills needed.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "qr_code",
+    title: "QR Ordering",
+    desc: "Place a Nearle QR stand on your counter. Customers scan, browse your menu, and place orders right from their phone.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "location_on",
+    title: "Hyperlocal Discovery",
+    desc: "Appear in local searches for products you sell. Nearby customers find you first, before they find a big delivery app.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "receipt_long",
+    title: "Order Management",
+    desc: "Accept, track, and fulfil orders from a single dashboard. Get notified instantly when a new order comes in.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "campaign",
+    title: "Promotions & Offers",
+    desc: "Run flash sales, festive offers, and loyalty deals that reach customers in your neighbourhood automatically.",
+    tone: "bg-rose-500/8 text-rose-600",
+  },
+  {
+    icon: "repeat",
+    title: "Repeat Customers",
+    desc: "Customers who order once keep coming back. Build a loyal neighbourhood following that chooses you over big platforms.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "bar_chart",
+    title: "Sales Dashboard",
+    desc: "See what's selling, when your peak hours are, and which offers work. Make smarter decisions for your store.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "people_nearby",
+    title: "Nearby Customer Reach",
+    desc: "Connect with families and residents living within your neighborhood, your most valuable, loyal customer base.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+];
+
+const HOW_STEPS = [
+  {
+    num: "01",
+    icon: "app_registration",
+    title: "Register Your Store",
+    desc: "Sign up with your phone number, business name, and store address. Our team verifies and activates your profile within 24 hours.",
+    color: "bg-[#6330D6]/7 text-[#6330D6]",
+  },
+  {
+    num: "02",
+    icon: "add_photo_alternate",
+    title: "Upload Your Catalogue",
+    desc: "Add your products with photos, prices, and stock levels. Our onboarding team helps you get set up fast, even if you're starting from scratch.",
+    color: "bg-secondary/7 text-secondary",
+  },
+  {
+    num: "03",
+    icon: "notifications_active",
+    title: "Receive Orders",
+    desc: "When a nearby customer places an order, you get notified instantly. Accept, prepare, and hand off. It's that simple.",
+    color: "bg-[#6330D6]/7 text-[#6330D6]",
+  },
+  {
+    num: "04",
+    icon: "trending_up",
+    title: "Grow Locally",
+    desc: "Run offers, build a loyal customer base, and watch your neighbourhood sales grow month on month. Your store. Your terms.",
+    color: "bg-secondary/7 text-secondary",
+  },
+];
+
+const WHY_REASONS = [
+  { icon: "verified_user", title: "Trusted by the Community", desc: "Nearle is built for neighbourhood trust. We verify stores and protect customers so your reputation matters." },
+  { icon: "savings", title: "Lower Commission Than Big Platforms", desc: "Keep more of what you earn. Nearle charges fair, transparent rates, with no hidden fees and no nasty surprises." },
+  { icon: "support_agent", title: "Dedicated Onboarding Support", desc: "Your own Nearle partner manager helps you get online, upload your catalogue, and answer every question." },
+  { icon: "local_fire_department", title: "Built for Indian Kirana Culture", desc: "From vegetable vendors to cloth merchants, Nearle is designed around how Indian neighbourhood stores actually work." },
+  { icon: "schedule", title: "You Control Your Hours", desc: "Set your opening hours, manage stock, and pause orders whenever you need. No pressure. No locked-in contracts." },
+  { icon: "groups", title: "Local Customer Community", desc: "Join a platform where customers genuinely care about supporting neighbourhood stores over large national brands." },
+];
+
+const FAQ_ITEMS = [
+  {
+    question: "Is Nearle free to join as a merchant?",
+    answer: "Getting started on Nearle is free. We charge a small, fair commission only when you successfully complete an order. There are no monthly fees, no listing fees, and no setup charges.",
+  },
+  {
+    question: "How long does it take to go live on Nearle?",
+    answer: "Most merchants go live within 24 to 48 hours of registration. Our onboarding team reaches out to verify your store, help you upload your catalogue, and activate your listing.",
+  },
+  {
+    question: "Do I need a smartphone or computer?",
+    answer: "You just need a smartphone. The Nearle Merchant app works on Android and iOS. You can manage orders, update your catalogue, and track earnings from your phone.",
+  },
+  {
+    question: "What kind of stores can join Nearle?",
+    answer: "Nearle welcomes all neighbourhood stores: grocery and kirana shops, bakeries, medical stores, fruit vendors, cloth merchants, stationery shops, pet stores, electronics retailers, and more. If you serve your local community, you belong on Nearle.",
+  },
+  {
+    question: "How do customers pay for their orders?",
+    answer: "Customers can pay online through UPI, debit/credit cards, or wallets, or they can choose cash on delivery. You receive payouts to your bank account on a weekly settlement cycle.",
+  },
+  {
+    question: "Can I run offers and discounts for my customers?",
+    answer: "Absolutely. You can set up item-level discounts, minimum order offers, festive deals, and loyalty rewards through your merchant dashboard. Nearle also runs platform-wide promotions where you can opt in.",
+  },
+  {
+    question: "What if I don't have a digital catalogue ready?",
+    answer: "Our onboarding team will help you build your catalogue from scratch. Just give us a price list or let us visit your store, and we'll get your products uploaded.",
+  },
+  {
+    question: "Does Nearle provide delivery partners?",
+    answer: "Yes. Nearle has a growing network of local delivery partners who can fulfil orders for your store. You can also use your own delivery staff for short-distance orders if you prefer.",
+  },
+  {
+    question: "How are disputes or refunds handled?",
+    answer: "Our customer support team handles all customer disputes. For genuine quality or delivery issues, we work with both you and the customer to find a fair resolution. We protect merchants from fraudulent claims.",
+  },
+  {
+    question: "Is my business data secure with Nearle?",
+    answer: "Yes. Your store data, customer information, and earnings are protected with industry-standard security practices. We never share your business data with third parties.",
+  },
+];
+
+export default function MerchantsPage() {
+  return (
+    <PremiumPageShell>
+      <MerchantsHero />
+      <HowItWorks />
+
+      {/* ─── Merchant Benefits Grid ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                What You Get
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                Everything Your Store Needs to Grow
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                Nearle gives your neighbourhood store the same tools that big online retailers have, without the complexity.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+            {BENEFITS.map((benefit) => (
+              <AnimatedCard
+                key={benefit.title}
+                className="rounded-2xl border border-[#6330D6]/10 bg-[#FAF7FD] p-5 flex flex-col gap-3 hover:shadow-[0_8px_28px_rgba(22,0,29,0.08)] transition-shadow duration-300"
+              >
+                <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 ${benefit.tone}`}>
+                  <MaterialIcon icon={benefit.icon} size={22} />
+                </div>
+                <div>
+                  <p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
+                  <p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
+                </div>
+              </AnimatedCard>
+            ))}
+          </AnimatedGrid>
+        </div>
+      </section>
+
+      {/* ─── How It Works ─── */}
+      <section id="how-it-works" className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <AnimatedSection>
+            <div className="text-center mb-10 md:mb-12">
+              <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
+                Simple Steps
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
+                Up and Running in 24 Hours
+              </h2>
+              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
+                From registration to your first order, we&apos;ve made the process as simple as possible.
+              </p>
+            </div>
+          </AnimatedSection>
+
+          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
+            {HOW_STEPS.map((step) => (
+              <AnimatedCard
+                key={step.num}
+                className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-white p-7 shadow-[0_8px_32px_rgba(22,0,29,0.06)]"
+              >
+                <span className="absolute right-5 top-4 font-display text-5xl font-black leading-none text-[#6330D6]/[0.07] select-none">
+                  {step.num}
+                </span>
+                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
+                  <MaterialIcon icon={step.icon} size={24} />
+                </div>
+                <p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
+                  {step.title}
+                </p>
+                <p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
+              </AnimatedCard>
+            ))}
+          </AnimatedGrid>
+        </div>
+      </section>
+
+      {/* ─── Why Merchants Choose Nearle ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10 overflow-hidden">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 lg:gap-16 items-start">
+            <AnimatedSection>
+              <div>
+                <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                  Why Nearle
+                </span>
+                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
+                  Your Neighbourhood&apos;s
+                  <br />
+                  <span className="text-[#6330D6]">Best Business Partner</span>
+                </h2>
+                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
+                  Nearle isn&apos;t built like a big delivery platform that squeezes margins. We&apos;re built for neighbourhood stores like yours, where community and trust come first.
+                </p>
+
+                {/* Stats row */}
+                <div className="grid grid-cols-3 gap-5">
+                  {[
+                    { stat: "Local", label: "Hyperlocal Coverage" },
+                    { stat: "24h", label: "Time to Go Live" },
+                    { stat: "Fair", label: "Commission Model" },
+                  ].map((s) => (
+                    <div key={s.label} className="text-center p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/8">
+                      <div className="text-2xl md:text-3xl font-display font-black text-[#6330D6]">{s.stat}</div>
+                      <div className="text-[10px] md:text-xs font-bold text-[#5E5866] mt-1 leading-tight">{s.label}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </AnimatedSection>
+
+            <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {WHY_REASONS.map((reason) => (
+                <AnimatedCard key={reason.title} className="flex gap-3.5 p-4 rounded-2xl border border-[#6330D6]/8 bg-[#FAF7FD]">
+                  <div className="w-10 h-10 shrink-0 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center">
+                    <MaterialIcon icon={reason.icon} size={20} />
+                  </div>
+                  <div>
+                    <p className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</p>
+                    <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
+                  </div>
+                </AnimatedCard>
+              ))}
+            </AnimatedGrid>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Success Story ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <AnimatedSection>
+            <div className="text-center mb-8">
+              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                Merchant Story
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 tracking-tight">
+                Real Results from Real Stores
+              </h2>
+            </div>
+          </AnimatedSection>
+
+            <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#F4ECFA_100%)] border border-[#6330D6]/10 shadow-[0_18px_50px_rgba(22,0,29,0.08)] p-8 md:p-10 lg:p-12">
+              <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#6330D6]/5 blur-3xl" />
+              <AnimatedSection className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr_1.5fr] gap-8 lg:gap-12 items-center">
+                <div>
+                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/10 text-secondary text-xs font-black uppercase tracking-wider mb-5">
+                    <MaterialIcon icon="store" size={14} />
+                    Success Story
+                  </div>
+                  <blockquote className="text-xl md:text-2xl font-black text-[#16001D] leading-snug mb-6">
+                    &ldquo;In three months, my daily orders doubled. Customers who used to call now just scan the QR and order. Even my evening rush feels calmer.&rdquo;
+                  </blockquote>
+                  <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-[#6330D6]/10 flex items-center justify-center">
+                      <MaterialIcon icon="person" size={22} className="text-[#6330D6]" />
+                    </div>
+                    <div>
+                      <div className="text-sm font-black text-[#16001D]">Ramesh Kumar</div>
+                      <div className="text-xs text-[#5E5866] font-semibold">R.K. Provision Store, R.S. Puram, Coimbatore</div>
+                    </div>
+                  </div>
+                </div>
+
+                <AnimatedGrid className="grid grid-cols-2 gap-4">
+                  {[
+                    { value: "2.1×", label: "Daily Orders Growth", icon: "trending_up", color: "text-[#006D37]" },
+                    { value: "340+", label: "Repeat Customers Built", icon: "people", color: "text-[#6330D6]" },
+                    { value: "3 hrs", label: "Saved per Day on Calls", icon: "schedule", color: "text-[#006D37]" },
+                    { value: "4.9 ★", label: "Average Store Rating", icon: "star", color: "text-amber-500" },
+                  ].map((m) => (
+                    <AnimatedCard key={m.label} className="rounded-2xl bg-white border border-[#6330D6]/8 p-5 text-center shadow-sm">
+                      <MaterialIcon icon={m.icon} size={22} className={`${m.color} mx-auto`} />
+                      <div className={`text-2xl font-display font-black mt-2 ${m.color}`}>{m.value}</div>
+                      <div className="text-xs text-[#5E5866] font-semibold mt-1 leading-tight">{m.label}</div>
+                    </AnimatedCard>
+                  ))}
+                </AnimatedGrid>
+              </AnimatedSection>
+            </div>
+        </div>
+      </section>
+
+      {/* ─── FAQ ─── */}
+      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
+            <AnimatedSection>
+              <div className="lg:sticky lg:top-28">
+                <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+                  FAQs
+                </span>
+                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
+                  Questions Merchants Ask
+                </h2>
+                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
+                  Everything you need to know before joining Nearle. Still have questions? Our team is a call away.
+                </p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
+                >
+                  <span>Talk to our team</span>
+                  <MaterialIcon icon="arrow_forward" size={16} />
+                </Link>
+              </div>
+            </AnimatedSection>
+
+            <FAQAccordion items={FAQ_ITEMS} />
+          </div>
+        </div>
+      </section>
+
+      {/* ─── CTA Banner ─── */}
+      <CTABanner
+        badge={{ icon: "storefront", label: "Ready to Grow?" }}
+        heading="Become a Merchant Partner"
+        body="Join neighbourhood stores across Coimbatore already selling online with Nearle. Registration takes under 10 minutes."
+        primary={{ href: "/contact", icon: "bolt", label: "Register Your Store" }}
+        secondary={{ href: "/contact", icon: "phone", label: "Talk to Our Team" }}
+        decorations={[
+          "circle at 70% 20%, rgba(99,48,214,0.18), transparent 50%",
+          "circle at 30% 80%, rgba(0,109,55,0.10), transparent 45%",
+        ]}
+      />
+    </PremiumPageShell>
+  );
+}

src/app/page.tsx

@@ -1,20 +1,42 @@
-import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
+import type { Metadata } from "next";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
 import { Hero } from "@/components/home/Hero";
+import { WhyNearleDifferent } from "@/components/home/WhyNearleDifferent";
+import { AICommerceIntro } from "@/components/home/AICommerceIntro";
+import { VoiceCommerceExperience } from "@/components/home/VoiceCommerceExperience";
 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 { WhyAICommerceWins } from "@/components/home/WhyAICommerceWins";
 import { StoreQRSection } from "@/components/home/StoreQRSection";
 
+export const metadata: Metadata = {
+  title: "AI Commerce Platform for Neighbourhood Stores",
+  description:
+    "Nearle digitizes the neighbourhood stores you already trust. Shop from nearby merchants, let Nearle AI find products by natural language, and get orders packed by the shopkeeper and delivered by a Nearle rider.",
+  openGraph: {
+    title: "Nearle — AI Commerce Platform for Neighbourhood Stores",
+    description:
+      "Not another delivery app. Nearle adds AI, a digital storefront, and ordering to the local stores you already trust.",
+    url: "https://nearle.in",
+  },
+  alternates: { canonical: "/" },
+};
+
 export default function HomePage() {
   return (
     <PremiumPageShell>
       <Hero />
-      <ServiceCategories />
+      <WhyAICommerceWins />
+      <AICommerceIntro />
+      <VoiceCommerceExperience />
       <WhyNearle />
+      <WhyNearleDifferent />
       <HowItWorks />
       <HyperlocalFeatures />
+      <ServiceCategories />
       <BusinessSection />
       <StoreQRSection />
     </PremiumPageShell>

src/app/people/page.tsx

@@ -1,18 +1,77 @@
 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 { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { PeopleHero } from "@/components/heroes/PeopleHero";
+import { AnimatedSection } from "@/components/animations/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
+import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
+import { siteContent } from "@/constants/site-content";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Nearle for People",
   description:
-    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
+    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your neighbourhood.",
+  openGraph: {
+    title: "Nearle for People — Shop Your Neighbourhood",
+    description:
+      "Find verified local stores near you, with accurate AI-generated listings by ProductLLM. Discover, order, and reorder from the shops you already trust.",
+    url: "https://nearle.in/people",
+  },
+  alternates: { canonical: "/people" },
 };
 
+const HOW_IT_WORKS = [
+  {
+    step: "01",
+    title: "Discover stores near you",
+    desc: "Open the app and see verified neighbourhood shops within walking distance — not warehouses across town.",
+    time: "Discover",
+  },
+  {
+    step: "02",
+    title: "Order in a few taps",
+    desc: "Browse live catalogs built by ProductLLM, add what you need, and check out. Prices and stock stay accurate.",
+    time: "Order",
+  },
+  {
+    step: "03",
+    title: "Pickup or local delivery",
+    desc: "Grab it on your way past, or get a short local delivery straight from the store to your door.",
+    time: "Fulfil",
+  },
+  {
+    step: "04",
+    title: "Reorder in one tap",
+    desc: "Your favourite stores and usuals stay saved, so buying again is instant.",
+    time: "Reorder",
+  },
+];
+
+const TRUST_POINTS = [
+  {
+    icon: "verified_user",
+    title: "Verified Merchants",
+    desc: "Every store on Nearle is a real, verified neighbourhood business.",
+  },
+  {
+    icon: "auto_awesome",
+    title: "Accurate AI Listings",
+    desc: "Product listings are generated by ProductLLM, so details and prices stay right.",
+  },
+  {
+    icon: "storefront",
+    title: "Real Neighbourhood Stores",
+    desc: "You shop the shops on your street — the ones your community already trusts.",
+  },
+  {
+    icon: "lock",
+    title: "Safe Ordering",
+    desc: "Order with confidence, from discovery to doorstep.",
+  },
+];
+
 const OFFERINGS = [
   {
     title: "Elegant Living",
@@ -20,7 +79,7 @@ const OFFERINGS = [
     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",
-    image: "/nearle people.png",
+    image: "/images/hero/nearle-people.webp",
     isWide: false
   },
   {
@@ -29,7 +88,7 @@ const OFFERINGS = [
     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",
-    image: "/images/app-mockup.png",
+    image: "/images/platform/app-mockup.webp",
     isWide: false
   },
   {
@@ -38,7 +97,7 @@ const OFFERINGS = [
     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",
-    image: "/images/slider-courier-mask-purple-v5.png",
+    image: "/images/illustrations/super.png",
     isWide: false
   },
   {
@@ -47,7 +106,7 @@ const OFFERINGS = [
     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",
-    image: "/images/cat-pet-essentials.png",
+    image: "/images/stores/cat-pet-essentials.webp",
     isWide: false
   },
   {
@@ -56,7 +115,7 @@ const OFFERINGS = [
     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",
-    image: "/about.png",
+    image: "/images/hero/about.webp",
     isWide: true
   },
   {
@@ -65,7 +124,7 @@ const OFFERINGS = [
     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",
-    image: "/images/cat-daily-essentials.png",
+    image: "/images/stores/cat-daily-essentials.webp",
     isWide: false
   },
   {
@@ -74,7 +133,7 @@ const OFFERINGS = [
     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",
-    image: "/images/cat-hot-food.png",
+    image: "/images/stores/cat-hot-food.webp",
     isWide: false
   },
   {
@@ -83,7 +142,7 @@ const OFFERINGS = [
     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",
-    image: "/images/cat-health-wellness.png",
+    image: "/images/stores/cat-health-wellness.webp",
     isWide: false
   },
   {
@@ -92,7 +151,7 @@ const OFFERINGS = [
     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",
-    image: "/images/cat-home-services.png",
+    image: "/images/stores/cat-home-services.webp",
     isWide: false
   }
 ];
@@ -137,79 +196,19 @@ const APP_BENEFITS = [
   }
 ];
 
-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" }
-];
+// TODO: Replace fallback hrefs once the app is confirmed live on both stores.
+const APP_STORE_URL = siteContent.app.iosUrl || "about:blank#todo-app-store-url";
+const GOOGLE_PLAY_URL = siteContent.app.androidUrl || "about:blank#todo-google-play-url";
 
 export default function PeoplePage() {
-  const collageCards = [
-    { text: "Discover Nearby", icon: "explore" },
-    { text: "Save Favourites", icon: "favorite" },
-    { text: "Order Anytime", icon: "shopping_bag" }
-  ];
-
   return (
     <PremiumPageShell>
       {/* ─── Hero Section ─── */}
-      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        {/* TWO-COLUMN GRID */}
-        <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">
-          
-          {/* Left Column: Copy & Actions */}
-          <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
-            </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="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-              Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
-            </p>
-
-            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-              <a
-                href="#download-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-              >
-                Get the App
-              </a>
-              <Link
-                href="/"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[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>
+      <PeopleHero />
 
       {/* ─── Bento Grid of Offerings ─── */}
-      <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">
+      <AnimatedSection>
+        <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
         <div className="mb-10 xl:mb-8">
           <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
             What we offer
@@ -232,7 +231,7 @@ export default function PeoplePage() {
                 src={offering.image}
                 alt={offering.title}
                 fill
-                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
+                sizes={offering.isWide ? "(max-width: 639px) calc(100vw - 48px), (max-width: 1023px) calc(100vw - 96px), 860px" : "(max-width: 639px) calc(100vw - 48px), (max-width: 1023px) calc(100vw - 96px), 420px"}
                 className="experience-card__image"
               />
               <div className="experience-card__overlay" />
@@ -240,44 +239,100 @@ export default function PeoplePage() {
                 <div className="experience-card__icon">
                   <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                 </div>
-                <h3>{offering.title}</h3>
+                <p className="experience-card__title">{offering.title}</p>
                 <p>{offering.descr}</p>
               </div>
             </article>
           ))}
         </div>
-      </section>
+        </section>
+      </AnimatedSection>
 
       {/* ─── Localized Stats Block ─── */}
-      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
-        <div className="mb-10 xl:mb-8">
-          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
-            Nearle Network
-          </span>
-          <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
-            The Neighbourhood App
-          </h2>
-          <p className="text-xs md:text-sm text-[#5E5866] mt-2">
-            Bringing local stores to your doorstep instantly.
-          </p>
-        </div>
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
+        <AnimatedSection>
+          <div className="mb-10 xl:mb-8">
+            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+              Nearle Network
+            </span>
+            <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
+              The Neighbourhood App
+            </h2>
+            <p className="text-xs md:text-sm text-[#5E5866] mt-2">
+              Bringing local stores to your doorstep instantly.
+            </p>
+          </div>
+        </AnimatedSection>
 
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+        <AnimatedGrid className="grid grid-cols-2 lg:grid-cols-4 gap-6">
           {LOCAL_STATS.map((s) => (
-            <div
+            <AnimatedCard
               key={s.label}
               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-[#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-[#16001D]">{s.count}</h4>
+              <p className="text-3xl font-display font-black text-[#16001D]">{s.count}</p>
               <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {s.label}
               </p>
-            </div>
+            </AnimatedCard>
           ))}
-        </div>
+        </AnimatedGrid>
+      </section>
+
+      {/* ─── How It Works ─── */}
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <AnimatedSection>
+          <div className="text-center mb-10 xl:mb-8">
+            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+              How It Works
+            </span>
+            <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
+              From your street to your doorstep
+            </h2>
+            <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
+              Shopping your neighbourhood on Nearle takes just a few taps.
+            </p>
+          </div>
+        </AnimatedSection>
+        <AnimatedTimeline items={HOW_IT_WORKS} />
+      </section>
+
+      {/* ─── Trust Section ─── */}
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
+        <AnimatedSection>
+          <div className="mb-10 xl:mb-8">
+            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
+              Trust &amp; Safety
+            </span>
+            <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
+              Every Store is Verified
+            </h2>
+            <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
+              Real shops, accurate listings, and safe ordering — so you always know
+              exactly who you&rsquo;re buying from.
+            </p>
+          </div>
+        </AnimatedSection>
+
+        <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 text-left">
+          {TRUST_POINTS.map((t) => (
+            <AnimatedCard
+              key={t.title}
+              className="premium-card bg-white rounded-[24px] p-6 border border-[#6330D6]/10 shadow-[0_10px_30px_rgba(22,0,29,0.05)]"
+            >
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#6330D6]/8 text-[#6330D6]">
+                <MaterialIcon icon={t.icon} size={24} />
+              </div>
+              <p className="mt-4 font-display font-black text-[#16001D] text-lg leading-tight">
+                {t.title}
+              </p>
+              <p className="mt-2 text-sm leading-relaxed text-[#5E5866]">{t.desc}</p>
+            </AnimatedCard>
+          ))}
+        </AnimatedGrid>
       </section>
 
       {/* ─── Ready to Download Section ─── */}
@@ -285,7 +340,8 @@ export default function PeoplePage() {
       <section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">
         {/* Subtle glow layers */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
-        
+        <AnimatedSection>
+
         {/* DESKTOP LAYOUT */}
         <div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
           {/* Left Column: Copy & Download badges */}
@@ -307,20 +363,32 @@ export default function PeoplePage() {
 
             <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">
+                <a
+                  href={APP_STORE_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Download Nearle on the App Store"
+                  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 cursor-pointer active:scale-[0.98]"
+                >
                   <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">
+                </a>
+                <a
+                  href={GOOGLE_PLAY_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Download Nearle on Google Play"
+                  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 cursor-pointer active:scale-[0.98]"
+                >
                   <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>
+                </a>
               </div>
             </div>
           </div>
@@ -336,7 +404,7 @@ export default function PeoplePage() {
                   <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-base font-black text-white leading-none">{b.title}</p>
                   <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>
@@ -501,7 +569,7 @@ export default function PeoplePage() {
                   <MaterialIcon icon={b.icon} size={16} />
                 </div>
                 <div>
-                  <h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
+                  <p className="text-sm font-black text-white leading-tight">{b.title}</p>
                   <p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
                 </div>
               </div>
@@ -509,22 +577,35 @@ export default function PeoplePage() {
           </div>
 
           <div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
-            <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">
+            <a
+              href={APP_STORE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Download Nearle on the App Store"
+              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 hover:bg-white/[0.12] transition-all duration-300 cursor-pointer active:scale-[0.98]"
+            >
               <MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
               <div className="text-left leading-none">
                 <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                 <div className="text-xs font-black text-white">App Store</div>
               </div>
-            </div>
-            <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
+            </a>
+            <a
+              href={GOOGLE_PLAY_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Download Nearle on Google Play"
+              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 hover:bg-white/[0.12] transition-all duration-300 cursor-pointer active:scale-[0.98]"
+            >
               <MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
               <div className="text-left leading-none">
                 <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                 <div className="text-xs font-black text-white">Google Play</div>
               </div>
-            </div>
+            </a>
           </div>
         </div>
+        </AnimatedSection>
       </section>
       </section>
     </PremiumPageShell>

src/app/platform/page.tsx

@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import { PlatformHero } from "@/components/platform/PlatformHero";
+import { CorePrinciples } from "@/components/home/CorePrinciples";
+import { PlatformArchitecture } from "@/components/platform/PlatformArchitecture";
+import { ProductFeatureGrid } from "@/components/platform/ProductFeatureGrid";
+import { ProductLLMWorkflow } from "@/components/platform/ProductLLMWorkflow";
+import { ConsumerFeatures } from "@/components/platform/ConsumerFeatures";
+import { CTABanner } from "@/components/ui/CTABanner";
+
+export const metadata: Metadata = {
+  title: "Platform — MerchantOS, ConsumerOS & ProductLLM",
+  description:
+    "The Nearle platform: MerchantOS runs the store, ProductLLM builds the catalog from a shelf photo, and ConsumerOS brings the neighbourhood to shop. AI infrastructure for local retail.",
+  openGraph: {
+    title: "The Nearle Platform | MerchantOS · ProductLLM · ConsumerOS",
+    description:
+      "AI infrastructure behind every neighbourhood store — a free POS and AI catalog for merchants, and local discovery, ordering, and rewards for shoppers.",
+    url: "https://nearle.in/platform",
+  },
+  alternates: { canonical: "/platform" },
+};
+
+const MERCHANT_OS = [
+  { icon: "point_of_sale", title: "Free POS", desc: "A complete point-of-sale, free for every merchant." },
+  { icon: "wifi_off", title: "Offline Billing", desc: "Keep billing customers even when the network drops." },
+  { icon: "inventory_2", title: "Inventory", desc: "Live stock counts that stay accurate across channels." },
+  { icon: "analytics", title: "Analytics", desc: "See what sells, when, and to whom — in real time." },
+  { icon: "loyalty", title: "Loyalty", desc: "Reward regulars and bring them back more often." },
+  { icon: "auto_awesome", title: "AI Catalog", desc: "A shoppable catalog built by ProductLLM from a photo." },
+  { icon: "qr_code", title: "QR Ordering", desc: "Customers scan, browse, and order in seconds." },
+  { icon: "dashboard", title: "Store Dashboard", desc: "Run the whole store from one simple screen." },
+];
+
+export default function PlatformPage() {
+  return (
+    <PremiumPageShell>
+      <PlatformHero />
+      <PlatformArchitecture />
+      <ProductFeatureGrid
+        id="merchantos"
+        eyebrow="MerchantOS"
+        name="Everything a store needs to run"
+        tagline="A free operating system for the neighbourhood shop — billing, inventory, catalog, and orders, working online and off."
+        features={MERCHANT_OS}
+        variant="light"
+        showcase="dashboard"
+        footnote="AI Catalog powered by ProductLLM."
+      />
+      <ProductLLMWorkflow />
+      <ConsumerFeatures />
+      <CTABanner
+        badge={{ icon: "hub", label: "Built on Nearle" }}
+        heading="Put your store on the platform"
+        body="Join the neighbourhood stores already running on MerchantOS — with an AI catalog by ProductLLM and a growing base of local shoppers on ConsumerOS."
+        primary={{ href: "/businesses", icon: "storefront", label: "For Business" }}
+        secondary={{ href: "/why-nearle", icon: "auto_awesome", label: "Why AI Commerce" }}
+      />  
+    <CorePrinciples />
+    </PremiumPageShell>
+  );
+}

src/app/privacy/page.tsx

@@ -0,0 +1,339 @@
+import React from "react";
+import Link from "next/link";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PremiumPageShell } from "@/components/common/PremiumPageShell";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+  description:
+    "Learn how Nearle collects, uses, and protects your personal information. Our privacy policy covers customers, merchants, and delivery partners on the Nearle platform.",
+  openGraph: {
+    title: "Privacy Policy | Nearle",
+    description:
+      "Nearle's privacy policy explains how we handle your data across our hyperlocal commerce platform.",
+    url: "https://nearle.in/privacy",
+  },
+};
+
+const SECTIONS = [
+  { id: "information-we-collect", label: "Information We Collect" },
+  { id: "why-we-collect", label: "Why We Collect It" },
+  { id: "how-we-use", label: "How We Use It" },
+  { id: "sharing", label: "Sharing Information" },
+  { id: "security", label: "Security" },
+  { id: "cookies", label: "Cookies" },
+  { id: "your-rights", label: "Your Rights" },
+  { id: "contact", label: "Contact Us" },
+];
+
+const KEY_POINTS = [
+  {
+    icon: "lock",
+    title: "We Don't Sell Your Data",
+    desc: "Your personal information is never sold to third-party advertisers or data brokers. Ever.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+  {
+    icon: "visibility_off",
+    title: "Minimal Data Collection",
+    desc: "We only collect information that's genuinely needed to make Nearle work for you.",
+    tone: "bg-secondary/8 text-secondary",
+  },
+  {
+    icon: "manage_accounts",
+    title: "You Stay in Control",
+    desc: "Access, update, or delete your data anytime from your Nearle account settings.",
+    tone: "bg-[#6330D6]/8 text-[#6330D6]",
+  },
+];
+
+export default function PrivacyPolicyPage() {
+  return (
+    <PremiumPageShell>
+      {/* ─── Hero Bar ─── */}
+      <section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
+        <div className="max-w-[1600px] mx-auto">
+          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+            <div>
+              <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-5 w-fit">
+                Legal
+              </span>
+              <h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
+                Privacy Policy
+              </h1>
+              <p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
+                Nearle is committed to protecting your privacy. This policy explains how we collect, use, and safeguard information across our hyperlocal commerce platform for customers, merchants, and delivery partners.
+              </p>
+            </div>
+            <div className="shrink-0 text-right">
+              <span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
+              <div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
+              <div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
+              <div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
+            </div>
+          </div>
+
+          {/* Key points */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
+            {KEY_POINTS.map((point) => (
+              <div key={point.title} className="flex gap-3 p-4 rounded-2xl bg-white border border-[#6330D6]/8 shadow-sm">
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${point.tone}`}>
+                  <MaterialIcon icon={point.icon} size={20} />
+                </div>
+                <div>
+                  <p className="text-sm font-black text-[#16001D]">{point.title}</p>
+                  <p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Content with Sidebar TOC ─── */}
+      <section className="py-10 md:py-14 bg-white">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-10 lg:gap-16 items-start">
+
+            {/* Sidebar TOC */}
+            <nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
+              <p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
+              <ul className="space-y-1">
+                {SECTIONS.map((section) => (
+                  <li key={section.id}>
+                    <a
+                      href={`#${section.id}`}
+                      className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
+                    >
+                      {section.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
+                <p className="text-xs font-black text-[#16001D] mb-2">Have a privacy question?</p>
+                <Link
+                  href="/contact"
+                  className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
+                >
+                  <span>Contact us</span>
+                  <MaterialIcon icon="arrow_forward" size={14} />
+                </Link>
+              </div>
+            </nav>
+
+            {/* Main Content */}
+            <div className="prose-nearle max-w-none space-y-12">
+
+              <PolicySection id="information-we-collect" title="Information We Collect">
+                <p>Whether you&apos;re a customer ordering groceries from a neighbourhood store, a merchant managing your digital catalogue, or a delivery partner on your route, using Nearle means we collect information that helps us deliver the service.</p>
+
+                <PolicySubheading>For Customers</PolicySubheading>
+                <PolicyList items={[
+                  "Name, phone number, and email address when you create a Nearle account",
+                  "Delivery address and neighbourhood location to match you with nearby stores",
+                  "Order history, item preferences, and past interactions on the platform",
+                  "Payment details, processed securely. Nearle does not store card numbers",
+                  "Device type, app version, and approximate location during active sessions",
+                ]} />
+
+                <PolicySubheading>For Merchants</PolicySubheading>
+                <PolicyList items={[
+                  "Business name, address, phone number, and GSTIN",
+                  "Bank account details for weekly order payouts",
+                  "Product catalogue content, pricing, and stock updates",
+                  "Order fulfilment data and customer satisfaction scores",
+                  "Dashboard usage data to improve merchant tools",
+                ]} />
+
+                <PolicySubheading>For Delivery Partners</PolicySubheading>
+                <PolicyList items={[
+                  "Full name, phone number, Aadhaar, and PAN details for identity verification",
+                  "Bank account for weekly earnings settlement",
+                  "Real-time GPS location during active delivery shifts for routing and safety",
+                  "Delivery completion records and performance metrics",
+                ]} />
+              </PolicySection>
+
+              <PolicySection id="why-we-collect" title="Why We Collect It">
+                <p>We collect the minimum information needed to make Nearle work reliably and safely for everyone in the neighbourhood.</p>
+                <PolicyList items={[
+                  "To create and secure your account on the Nearle platform",
+                  "To match customers with the nearest verified neighbourhood stores",
+                  "To process orders, payments, and merchant payouts accurately",
+                  "To dispatch and route delivery partners efficiently",
+                  "To send order confirmations, delivery updates, and service alerts",
+                  "To detect fraud and prevent misuse of the platform",
+                  "To improve our product experience based on actual usage patterns",
+                  "To comply with Indian legal and regulatory obligations",
+                ]} />
+              </PolicySection>
+
+              <PolicySection id="how-we-use" title="How We Use Your Information">
+                <p>Your information stays within the Nearle platform to serve you. Here&apos;s exactly how:</p>
+
+                <PolicySubheading>Order Fulfilment</PolicySubheading>
+                <p>When a customer places an order, we share their delivery address and contact number with the merchant store and the assigned delivery partner, only for that specific delivery. Once the order is complete, access is revoked.</p>
+
+                <PolicySubheading>Customer Discovery</PolicySubheading>
+                <p>We use your neighbourhood location to surface stores, products, and offers that are genuinely nearby, not stores 20km away. We don&apos;t build advertising profiles or sell your browsing behaviour.</p>
+
+                <PolicySubheading>Merchant Analytics</PolicySubheading>
+                <p>Merchants see aggregated data about their own customers, such as sales trends, popular items, and delivery times. They do not see individual customer profiles, phone numbers, or personal details.</p>
+
+                <PolicySubheading>Delivery Partner Routing</PolicySubheading>
+                <p>We use real-time GPS location data during active delivery shifts to assign orders and optimise routes. Location tracking stops the moment a delivery partner goes offline.</p>
+
+                <PolicySubheading>Platform Improvement</PolicySubheading>
+                <p>We analyse usage patterns in aggregate to make Nearle faster, cleaner, and more reliable. No individual is profiled for this purpose.</p>
+              </PolicySection>
+
+              <PolicySection id="sharing" title="Sharing Your Information">
+                <p>We do not sell, rent, or trade your personal information to anyone outside Nearle. Here are the limited cases where information is shared:</p>
+
+                <PolicyList items={[
+                  "With merchants: only the delivery address and contact number needed to prepare and hand over your order",
+                  "With delivery partners: only the pickup location, drop-off address, and a masked contact number for that specific delivery",
+                  "With payment processors: to securely complete transactions, as they are bound by PCI DSS standards",
+                  "With government authorities: only when legally required by Indian law or a court order",
+                  "With fraud prevention systems: to detect and prevent fake accounts and chargebacks",
+                ]} />
+
+                <PolicyNote>
+                  Third-party services integrated into Nearle (such as mapping providers and SMS gateways) operate under strict data processing agreements. They cannot use your data for their own purposes.
+                </PolicyNote>
+              </PolicySection>
+
+              <PolicySection id="security" title="How We Keep Your Data Secure">
+                <p>Nearle takes security seriously, because neighbourhood trust is our entire business model.</p>
+                <PolicyList items={[
+                  "All data is transmitted over encrypted HTTPS connections",
+                  "Passwords are hashed and never stored in plain text",
+                  "Payment information is handled by PCI DSS-compliant payment gateways",
+                  "Access to production systems is restricted to authorised Nearle engineers with multi-factor authentication",
+                  "We conduct regular security audits and vulnerability assessments",
+                  "Data is backed up and stored in geographically redundant, encrypted storage",
+                ]} />
+                <p>If you ever suspect unauthorised access to your Nearle account, contact our support team immediately at <a href="mailto:care@nearle.in" className="text-[#6330D6] font-black hover:underline">care@nearle.in</a>.</p>
+              </PolicySection>
+
+              <PolicySection id="cookies" title="Cookies and Tracking">
+                <p>Nearle uses cookies and similar technologies to keep the platform running smoothly. Our full <Link href="/cookies" className="text-[#6330D6] font-black hover:underline">Cookie Policy</Link> explains each type in detail. In short:</p>
+                <PolicyList items={[
+                  "Essential cookies: required for login, cart, and core app functions, and cannot be disabled",
+                  "Performance cookies: help us understand how pages are used and where errors occur",
+                  "Preference cookies: remember your settings, neighbourhood, and saved addresses",
+                  "Analytics cookies: aggregate, anonymised data on platform usage, with no individual profiles",
+                ]} />
+                <p>We do not use advertising cookies or cross-site tracking. You can manage cookie preferences from your browser settings or your Nearle account.</p>
+              </PolicySection>
+
+              <PolicySection id="your-rights" title="Your Privacy Rights">
+                <p>Under the Information Technology Act, 2000 and emerging Indian data protection law, you have the following rights:</p>
+                <PolicyList items={[
+                  "Right to access: request a copy of the personal data Nearle holds about you",
+                  "Right to correction: update or correct inaccurate information in your profile",
+                  "Right to deletion: request removal of your account and associated personal data",
+                  "Right to portability: receive your data in a machine-readable format where applicable",
+                  "Right to withdraw consent: for optional data uses, you can withdraw consent at any time",
+                  "Right to raise a grievance: contact our Grievance Officer (details below) for any privacy concern",
+                ]} />
+                <p>To exercise any of these rights, email us at <a href="mailto:care@nearle.in" className="text-[#6330D6] font-black hover:underline">care@nearle.in</a> from your registered email address. We respond within 30 days.</p>
+              </PolicySection>
+
+              <PolicySection id="contact" title="Contact and Grievance Officer">
+                <p>If you have any questions, concerns, or complaints about this Privacy Policy or how Nearle handles your data, please contact:</p>
+                <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
+                  <p className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</p>
+                  <div className="space-y-2 text-sm text-[#5E5866]">
+                    <div className="flex gap-2">
+                      <MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
+                      <a href="mailto:care@nearle.in" className="text-[#6330D6] font-black hover:underline">care@nearle.in</a>
+                    </div>
+                    <div className="flex gap-2">
+                      <MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
+                      <span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
+                    </div>
+                  </div>
+                  <p className="text-xs text-[#5E5866] mt-4">We will acknowledge your request within 48 hours and resolve it within 30 days.</p>
+                </div>
+
+                <p className="mt-6 text-sm text-[#5E5866]">
+                  We may update this Privacy Policy from time to time. When we do, we will notify you via the Nearle app and update the &ldquo;Last Updated&rdquo; date above. Continued use of Nearle after changes constitutes your acceptance of the revised policy.
+                </p>
+              </PolicySection>
+
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── Bottom nav to other policies ─── */}
+      <section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
+          <div className="flex flex-wrap gap-4 justify-center">
+            {[
+              { label: "Terms of Service", href: "/terms", icon: "gavel" },
+              { label: "Cookie Policy", href: "/cookies", icon: "cookie" },
+              { label: "Contact Us", href: "/contact", icon: "mail" },
+            ].map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
+              >
+                <MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+    </PremiumPageShell>
+  );
+}
+
+function PolicySection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
+  return (
+    <div id={id} className="scroll-mt-28">
+      <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
+        {title}
+      </h2>
+      <div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function PolicySubheading({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">
+      {children}
+    </h3>
+  );
+}
+
+function PolicyList({ items }: { items: string[] }) {
+  return (
+    <ul className="space-y-2 mt-3">
+      {items.map((item, i) => (
+        <li key={i} className="flex gap-2.5">
+          <div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function PolicyNote({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
+      <MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
+      <p className="text-sm text-[#5E5866] leading-relaxed">{children}</p>
+    </div>
+  );
+}