add image

src/app/about/page.tsx

@@ -20,29 +20,29 @@ const STRATEGY_CARDS = [
   },
   {
     title: "Our Vision",
-    descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
+    descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
     icon: "visibility",
     color: "bg-secondary/5 text-secondary border-secondary/10"
   },
   {
     title: "Why Nearle",
-    descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
+    descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
     icon: "help_outline",
     color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
   }
 ];
 
 const LOCAL_COUNTERS = [
-  { count: "100+", label: "Customers Served", icon: "people" },
+  { count: "Local", label: "Customer First Always", icon: "people" },
-  { count: "100+", label: "Active Businesses", icon: "store" },
+  { count: "Verified", label: "Business Partners", icon: "store" },
-  { count: "100+", label: "Active Neighborhoods", icon: "location_city" }
+  { count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
 ];
 
 const HERO_STATS = [
   { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
-  { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
-  { title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
+  { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
-  { title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
+  { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
 ];
 
 export default function AboutPage() {
@@ -78,13 +78,13 @@ export default function AboutPage() {
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
               <a
                 href="#story-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
                 Our Story
               </a>
               <Link
                 href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Join Our Journey
               </Link>
@@ -186,7 +186,7 @@ export default function AboutPage() {
               className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
             >
               <MaterialIcon icon="download" size={18} />
-              <span>Download App</span>
+              <span>Explore Nearle</span>
             </Link>
           </div>
         </div>

src/app/businesses/page.tsx

@@ -1,11 +1,16 @@
-"use client";
-
 import React from "react";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import type { Metadata } from "next";
+
+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.",
+};
 
 const PROCESS_STEPS = [
   {
@@ -67,9 +72,9 @@ const FEATURES = [
 ];
 
 const STATS = [
-  { value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
+  { value: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
-  { value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
+  { value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
-  { value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
+  { value: "Easy", label: "Direct Customer Access", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
   { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
 ];
 
@@ -111,17 +116,16 @@ export default function BusinessesPage() {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
-              <a
+              {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
-              >
-                List Your Store
-              </a>
               <Link
                 href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
+              >
+                List Your Store
+              </Link>
+              <Link
+                href="/contact"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Explore Solutions
               </Link>
@@ -225,7 +229,7 @@ export default function BusinessesPage() {
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               {FEATURES.map((feat) => (
                 <div key={feat.title} className="flex gap-3">
-                  <div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
+                  <div className="w-[22px] h-[22px] rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
                     <MaterialIcon icon="check" size={14} className="font-black" />
                   </div>
                   <div>
@@ -251,7 +255,7 @@ export default function BusinessesPage() {
                 }`}
               >
                 <div className="flex items-center justify-between">
-                  <div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
+                  <div className={`w-[34px] h-[34px] rounded-xl flex items-center justify-center ${
                     stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
                   }`}>
                     <MaterialIcon icon={stat.icon} size={18} />
@@ -282,15 +286,14 @@ export default function BusinessesPage() {
             Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
           </p>
           <div className="flex flex-wrap justify-center gap-3.5">
-            <a
+            {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+            <Link
-              target="_blank"
+              href="/contact"
-              rel="noopener noreferrer"
               className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
             >
               <MaterialIcon icon="bolt" size={18} />
-              <span>Register as Partner</span>
+              <span>Register Interest</span>
-            </a>
+            </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"

src/app/globals.css

@@ -141,12 +141,12 @@
 /* ─── Base Styles ─── */
 html {
   scroll-behavior: smooth;
-  background: #E8DCF2;
+  background: #ffffff;
 }
 
 body {
   min-height: 100vh;
-  background: #E8DCF2 !important;
+  background: #ffffff !important;
   color: var(--on-surface);
   font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
@@ -1245,6 +1245,35 @@ body {
   }
 }
 
+/* ─── Global Spacing & Layout System ─── */
+.page-container {
+  width: min(100% - 48px, 1280px);
+  margin-inline: auto;
+}
+
+@media (min-width: 1024px) {
+  .page-container {
+    width: min(100% - 128px, 1440px);
+  }
+}
+
+.section {
+  padding-block: 88px;
+}
+
+.section-tight {
+  padding-block: 56px;
+}
+
+.section-soft {
+  background: #faf7ff;
+}
+
+main {
+  background: #ffffff;
+  overflow-x: hidden;
+}
+
 
 
 

src/app/people/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,11 +5,18 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Nearle for People",
+  description:
+    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
+};
 
 const OFFERINGS = [
   {
     title: "Elegant Living",
-    tag: "Join the #1 Neighbourhood App",
+    tag: "Your Neighbourhood App",
     descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
     icon: "local_florist",
     color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
@@ -93,10 +98,10 @@ const OFFERINGS = [
 ];
 
 const LOCAL_STATS = [
-  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
+  { count: "Local", label: "Verified Restaurants", icon: "restaurant" },
-  { count: "100+", label: "Green Grocers", icon: "local_mall" },
+  { count: "Fresh", label: "Green Grocers", icon: "local_mall" },
-  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
+  { count: "Ready", label: "Home Stores", icon: "shopping_cart" },
-  { count: "100+", label: "Service Providers", icon: "handyman" }
+  { count: "Trusted", label: "Service Providers", icon: "handyman" }
 ];
 
 const APP_BENEFITS = [
@@ -133,10 +138,10 @@ const APP_BENEFITS = [
 ];
 
 const HERO_STATS = [
-  { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
   { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
-  { title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
+  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
-  { title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
+  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
 ];
 
 export default function PeoplePage() {
@@ -172,13 +177,13 @@ export default function PeoplePage() {
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
               <a
                 href="#download-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
                 Get the App
               </a>
               <Link
                 href="/"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Explore Stores
               </Link>
@@ -221,13 +226,13 @@ export default function PeoplePage() {
           {OFFERINGS.map((offering) => (
             <article
               key={offering.title}
-              className="experience-card"
+              className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
             >
               <Image
                 src={offering.image}
                 alt={offering.title}
                 fill
-                sizes="(max-width: 1023px) 100vw, 33vw"
+                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
                 className="experience-card__image"
               />
               <div className="experience-card__overlay" />
@@ -250,7 +255,7 @@ export default function PeoplePage() {
             Nearle Network
           </span>
           <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
-            Join the #1 Neighbourhood App
+            The Neighbourhood App
           </h2>
           <p className="text-xs md:text-sm text-[#5E5866] mt-2">
             Bringing local stores to your doorstep instantly.
@@ -491,7 +496,7 @@ export default function PeoplePage() {
           <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
             {APP_BENEFITS.map((b) => (
               <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
-                <div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
+                <div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
                   <MaterialIcon icon={b.icon} size={16} />
                 </div>
                 <div>

src/components/home/BusinessSection.tsx

@@ -2,148 +2,183 @@ import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-const BENEFITS = [
+const FEATURES = [
   {
     title: "Digital Catalogue",
-    desc: "Showcase your products online easily to nearby customers.",
+    desc: "Showcase your products online and keep your catalogue updated.",
     icon: "menu_book",
-    iconColor: "bg-primary/5 text-primary",
+    visual: "/images/nearle-merchant/catalogue-ui.webp",
+    alt: "Clean grocery catalogue interface preview",
+    tone: "bg-primary/5 text-primary",
   },
   {
     title: "QR Ordering",
-    desc: "Enable existing customers to scan and place orders directly at your counter.",
+    desc: "Let customers scan, browse, and place orders directly from your store.",
     icon: "qr_code",
-    iconColor: "bg-secondary/5 text-secondary",
+    visual: "/images/nearle-merchant/qr-stand.webp",
+    alt: "QR ordering stand on a local grocery store counter",
+    tone: "bg-secondary/5 text-secondary",
   },
   {
     title: "Local Discovery",
-    desc: "Get discovered by residents in your neighbourhood searching for your products.",
+    desc: "Get discovered by nearby customers searching for products you sell.",
-    icon: "explore",
+    icon: "location_on",
-    iconColor: "bg-[#de96f9]/10 text-primary",
+    visual: "/images/nearle-merchant/local-map.webp",
+    alt: "Local discovery map with purple pins and a store listing",
+    tone: "bg-[#de96f9]/10 text-primary",
   },
   {
     title: "Delivery Support",
-    desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
+    desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
     icon: "local_shipping",
-    iconColor: "bg-rose-500/5 text-rose-600",
+    visual: "/images/nearle-merchant/delivery-support.webp",
+    alt: "Local delivery partner handing a grocery bag to a customer",
+    tone: "bg-rose-500/5 text-rose-600",
   },
 ];
 
+const BENEFITS = [
+  "No Commission on your orders",
+  "Full Control on pricing",
+  "Dedicated Support for your business",
+  "Grow Your Sales in your area",
+];
+
 export function BusinessSection() {
   return (
-    <section className="px-6 py-12 md:py-16">
+    <section className="section bg-white w-full overflow-hidden">
-      <div className="w-full">
+      <div className="page-container">
-        
+        <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_48%,#f3e8f6_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
-        {/* Merchant Section Grid */}
+          <div className="pointer-events-none absolute -left-16 top-24 h-56 w-56 rounded-full bg-primary/5 blur-3xl" />
-        <div className="grid lg:grid-cols-12 gap-16 items-center">
+          <div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
-          
-          {/* Left Column: Feature copywriting (7 cols) */}
-          <div className="lg:col-span-7">
-            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
-              Merchant Partnerships
-            </span>
-            <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
-              Bring Your Store Online with Nearle.
-            </h2>
-            <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
-              Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
-            </p>
 
-            <div className="space-y-4 mb-10 text-sm md:text-base">
+          <div className="relative grid min-w-0 grid-cols-1 gap-6 md:gap-8 xl:grid-cols-[minmax(0,30fr)_minmax(0,28fr)_minmax(0,42fr)] xl:items-stretch">
-              <div className="flex items-center gap-3">
+            <div className="min-w-0 xl:col-start-1 xl:row-start-1">
-                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+              <span className="w-fit text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
-                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                Merchant Partnerships
+              </span>
+              <h2 className="text-[clamp(2.25rem,10vw,2.625rem)] md:text-5xl xl:text-[52px] font-display font-black text-brand-dark mt-6 mb-5 leading-tight tracking-tight">
+                Bring Your Store Online <br className="hidden md:block" />
+                with <span className="text-primary font-normal">Nearle.</span>
+              </h2>
+              <p className="text-body-lg text-on-surface-variant max-w-xl leading-relaxed">
+                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
+              </p>
+
+              <div className="mt-7 space-y-3 text-sm md:text-base">
+                <div className="flex items-center gap-3">
+                  <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                  </div>
+                  <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+                    <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                  </div>
+                  <span className="font-bold text-brand-dark">Build direct relationships with local families</span>
                 </div>
-                <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
               </div>
-              <div className="flex items-center gap-3">
+
-                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+              <div className="mt-8 flex flex-col gap-4 sm:flex-row xl:flex-col 2xl:flex-row">
-                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                <Link
-                </div>
+                  href="/businesses"
-                <span className="font-bold text-brand-dark">Build direct relationships with local families</span>
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap bg-primary hover:bg-primary-container text-white font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 sm:w-auto xl:w-full 2xl:w-auto"
+                >
+                  Partner With Nearle
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
+                <Link
+                  href="/contact"
+                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 sm:w-auto xl:w-full 2xl:w-auto"
+                >
+                  Talk to Our Team
+                  <MaterialIcon icon="arrow_forward" size={18} />
+                </Link>
               </div>
             </div>
 
-            <div className="flex flex-wrap gap-4 mt-8">
+            <div className="relative h-[clamp(280px,78vw,340px)] min-w-0 overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_60px_rgba(22,0,29,0.14)] md:h-[420px] md:max-h-[420px] xl:col-start-2 xl:row-span-2 xl:row-start-1 xl:h-auto xl:max-h-none xl:min-h-full">
-              <Link
+              <Image
-                href="/businesses"
+                src="/images/nearle-merchant/merchant-hero.webp"
-                className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
+                alt="Indian local grocery shop owner managing store orders on a laptop"
-              >
+                fill
-                Partner With Nearle
+                sizes="(max-width: 767px) 100vw, (max-width: 1279px) 100vw, 28vw"
-              </Link>
+                className="object-cover object-center"
-              <Link
+              />
-                href="/contact"
+              <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
-                className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+            </div>
-              >
+
-                Talk to Our Team
+            <div className="grid min-w-0 grid-cols-[104px_minmax(0,1fr)] gap-4 rounded-[1.5rem] xl:col-start-1 xl:row-start-2">
-              </Link>
+              <div className="relative min-h-32 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)]">
+                <Image
+                  src="/images/nearle-merchant/success-owner.webp"
+                  alt="Indian grocery shop owner using a smartphone inside a kirana store"
+                  fill
+                  sizes="104px"
+                  className="object-cover"
+                />
+              </div>
+              <div className="min-w-0 rounded-[1.5rem] border border-primary/10 bg-white/90 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:p-5">
+                <span className="text-[11px] font-black uppercase tracking-widest text-primary">
+                  Success Story
+                </span>
+                <h3 className="mt-2 text-lg font-black leading-tight text-brand-dark md:text-xl">
+                  Kumar Provision Store
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-on-surface-variant">
+                  Nearle helped us reach more customers in our area and manage orders effortlessly.
+                </p>
+              </div>
+            </div>
+
+            <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(2,minmax(0,1fr))] xl:col-start-3 xl:row-span-2 xl:row-start-1">
+              {FEATURES.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="flex min-h-[180px] min-w-0 flex-col overflow-hidden rounded-[1.75rem] border border-primary/10 bg-white/92 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:min-h-[300px] xl:h-full"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
+                      <MaterialIcon icon={feature.icon} size={25} />
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-black tracking-tight text-brand-dark">
+                        {feature.title}
+                      </h3>
+                      <p className="mt-2 text-sm leading-relaxed text-on-surface-variant md:max-w-[24ch] xl:max-w-none">
+                        {feature.desc}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="relative mt-auto aspect-[16/8] w-full self-end overflow-hidden rounded-[1.25rem] bg-brand-accent-light md:aspect-[16/10]">
+                    <Image
+                      src={feature.visual}
+                      alt={feature.alt}
+                      fill
+                      sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 21vw"
+                      className="object-cover"
+                    />
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
 
-          {/* Right Column: Benefit Grid Cardless (5 cols) */}
+          <div className="relative mt-6 flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-[1.75rem] border border-primary/10 bg-white/88 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.07)] md:grid md:grid-cols-[repeat(2,minmax(0,1fr))] md:overflow-visible xl:grid-cols-[repeat(4,minmax(0,1fr))]">
-          <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
             {BENEFITS.map((benefit) => (
-              <div key={benefit.title} className="flex flex-col items-start group">
+              <div key={benefit} className="flex min-w-[230px] snap-start items-center gap-3 px-2 py-2 md:min-w-0">
-                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
-                  <MaterialIcon icon={benefit.icon} size={28} />
+                  <MaterialIcon icon="check_circle" size={20} />
                 </div>
-                <h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
+                <span className="text-sm font-black leading-snug text-brand-dark">
-                  {benefit.title}
+                  {benefit}
-                </h3>
+                </span>
-                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
-                  {benefit.desc}
-                </p>
               </div>
             ))}
           </div>
-
         </div>
-
-        {/* CURVED PROMO BANNER (Bottom CTA Block) */}
-        <div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
-          {/* Decorative background vectors */}
-          <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
-          <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
-
-          {/* Left copy column */}
-          <div className="md:w-3/5 z-10 text-brand-dark">
-            <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
-              Piping Hot & Fresh
-            </span>
-            <h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
-              Everything Nearby, <br />From Stores You Trust.
-            </h3>
-            <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
-              Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
-            </p>
-            <Link
-              href="/people"
-              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
-            >
-              Explore Stores Now
-            </Link>
-          </div>
-
-          {/* Right visual column */}
-          <div className="md:w-2/5 relative flex justify-center items-center">
-            {/* Soft background shape */}
-            <div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
-            
-            <div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
-              <Image
-                src="/images/cat-hot-food.png"
-                alt="Hot meals from Nearle local kitchen partners"
-                width={400}
-                height={400}
-                className="w-full h-full object-cover scale-105"
-              />
-            </div>
-          </div>
-        </div>
-
       </div>
     </section>
   );
 }
-
-

src/components/home/Hero.tsx

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

src/components/home/HowItWorks.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const STEPS = [
@@ -7,6 +8,8 @@ const STEPS = [
     desc: "See stores available around your neighbourhood.",
     icon: "location_on",
     color: "bg-primary/5 text-primary border-primary/10",
+    image: "/images/nearle-redesign/choose-area.webp",
+    alt: "Hand holding a smartphone with a local map and purple location pins",
   },
   {
     num: "02",
@@ -14,6 +17,8 @@ const STEPS = [
     desc: "Browse groceries, medicines, and daily essentials nearby.",
     icon: "storefront",
     color: "bg-secondary/5 text-secondary border-secondary/10",
+    image: "/images/nearle-redesign/pick-store.webp",
+    alt: "Customer selecting groceries from a nearby store shelf",
   },
   {
     num: "03",
@@ -21,15 +26,17 @@ const STEPS = [
     desc: "Order easily and get swift delivery from local partners.",
     icon: "local_shipping",
     color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+    image: "/images/nearle-redesign/delivery-doorstep.webp",
+    alt: "Nearle delivery partner handing a grocery bag to a customer",
   },
 ];
 
 export function HowItWorks() {
   return (
-    <section className="px-6 py-12 md:py-16">
+    <section className="section bg-white w-full overflow-hidden">
-      <div className="w-full">
+      <div className="page-container">
         {/* Header Section */}
-        <div className="text-center mb-12 md:mb-16">
+        <div className="text-center mb-10 md:mb-14">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
             Simple Process
           </span>
@@ -39,11 +46,11 @@ export function HowItWorks() {
         </div>
 
         {/* Steps Layout - Timeline style */}
-        <div className="relative mt-8 md:mt-12">
+        <div className="relative mt-8 md:mt-10">
           {/* Connecting Line (Desktop Only) */}
           <div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16 relative z-10">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 relative z-10">
             {STEPS.map((step) => (
               <div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
                 {/* Icon Container with watermark number */}
@@ -54,12 +61,25 @@ export function HowItWorks() {
                   </span>
                 </div>
 
-                <h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
+                <div className="flex w-full max-w-md flex-col items-center gap-5 sm:flex-row sm:text-left lg:items-start">
-                  {step.title}
+                  <div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)] ring-1 ring-primary/10">
-                </h3>
+                    <Image
-                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
+                      src={step.image}
-                  {step.desc}
+                      alt={step.alt}
-                </p>
+                      fill
+                      sizes="128px"
+                      className="object-cover"
+                    />
+                  </div>
+                  <div>
+                    <h3 className="font-display text-2xl md:text-[28px] font-black text-brand-dark mb-3 leading-tight">
+                      {step.title}
+                    </h3>
+                    <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
+                      {step.desc}
+                    </p>
+                  </div>
+                </div>
               </div>
             ))}
           </div>
@@ -69,4 +89,3 @@ export function HowItWorks() {
   );
 }
 
-

src/components/home/HyperlocalFeatures.tsx

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

src/components/home/ServiceCategories.tsx

@@ -55,8 +55,8 @@ const CATEGORIES = [
 
 export function ServiceCategories() {
   return (
-    <section className="px-6 pt-20 md:pt-24 lg:pt-28 pb-12 md:pb-16">
+    <section className="section bg-white w-full">
-      <div className="w-full">
+      <div className="page-container">
         {/* Header Section */}
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
           <div>

src/components/home/StoreQRSection.tsx

@@ -9,7 +9,9 @@ const FLOW_STEPS = [
 
 export function StoreQRSection() {
   return (
-    <section id="download" className="section-card-dark py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center">
+    <section className="section bg-white w-full">
+      <div className="page-container">
+        <div id="download" className="w-full bg-gradient-to-br from-[#1A0322] to-[#0A000D] rounded-3xl md:rounded-[2rem] overflow-hidden text-white relative flex items-center py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20 border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.22)]">
       {/* Background ambient glowing details */}
       <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
       <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
@@ -51,45 +53,35 @@ export function StoreQRSection() {
               ))}
             </div>
 
-            {/* App Store Badges (Prominent White Buttons) */}
+            {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
             <div className="flex flex-wrap gap-4">
-              <a
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
-                href="https://apps.apple.com/us/app/nearle/id1596895375"
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
-              >
-                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
                   <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
                 </svg>
                 <div className="text-left leading-tight">
-                  <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                    Download on the
-                  </div>
-                  <div className="text-sm font-black">
                     App Store
                   </div>
+                  <div className="text-sm font-black">
+                    Coming Soon
+                  </div>
                 </div>
-              </a>
+              </div>
 
-              <a
+              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
-                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
-                target="_blank"
-                rel="noopener noreferrer"
-                className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
-              >
-                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
                   <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
                 </svg>
                 <div className="text-left leading-tight">
-                  <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                    GET IT ON
-                  </div>
-                  <div className="text-sm font-black">
                     Google Play
                   </div>
+                  <div className="text-sm font-black">
+                    Coming Soon
+                  </div>
                 </div>
-              </a>
+              </div>
             </div>
           </div>
 
@@ -104,7 +96,7 @@ export function StoreQRSection() {
 
               <div className="relative w-32 h-32 bg-white flex items-center justify-center">
                 <Image
-                  src="/QR code .png"
+                  src="/nearle-qr-code.png"
                   alt="Nearle Store QR Code"
                   width={132}
                   height={132}
@@ -129,16 +121,7 @@ export function StoreQRSection() {
               />
             </div>
 
-            {/* Overlapping Confirmation Bubble */}
+
-            <div className="absolute -left-8 bottom-[15%] z-20 hidden xl:flex bg-white p-4.5 rounded-2xl shadow-2xl border border-outline-variant/20 max-w-[210px] text-brand-dark items-center gap-3">
-              <div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center shrink-0">
-                <MaterialIcon icon="check_circle" size={18} className="text-secondary" />
-              </div>
-              <div className="min-w-0">
-                <p className="text-xs font-black">Order Confirmed</p>
-                <p className="text-[10px] text-on-surface-variant font-medium mt-0.5 leading-tight">Your order is preparing</p>
-              </div>
-            </div>
           </div>
         </div>
 
@@ -166,7 +149,7 @@ export function StoreQRSection() {
 
             <div className="relative w-36 h-36 bg-white flex items-center justify-center">
               <Image
-                src="/QR code .png"
+                src="/nearle-qr-code.png"
                 alt="Nearle Store QR Code"
                 width={144}
                 height={144}
@@ -210,49 +193,41 @@ export function StoreQRSection() {
             />
           </div>
 
-          {/* 5. App store buttons */}
+          {/* 5. App store buttons — TODO: replace with real URLs once app is live */}
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <a
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
-              href="https://apps.apple.com/us/app/nearle/id1596895375"
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
-            >
-              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
                 <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
               </svg>
               <div className="text-left leading-tight">
-                <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                  Download on the
-                </div>
-                <div className="text-sm font-black">
                   App Store
                 </div>
+                <div className="text-sm font-black">
+                  Coming Soon
+                </div>
               </div>
-            </a>
+            </div>
 
-            <a
+            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
-            >
-              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
                 <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
               </svg>
               <div className="text-left leading-tight">
-                <div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
+                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
-                  GET IT ON
-                </div>
-                <div className="text-sm font-black">
                   Google Play
                 </div>
+                <div className="text-sm font-black">
+                  Coming Soon
+                </div>
               </div>
-            </a>
+            </div>
           </div>
         </div>
 
+        </div>
       </div>
-    </section>
+    </div>
+  </section>
   );
 }

src/components/home/WhyNearle.tsx

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

src/components/layout/Navbar.tsx

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

src/components/layout/PremiumFooter.tsx

@@ -28,118 +28,126 @@ const LEGAL = [
 
 export function PremiumFooter() {
   return (
-    <footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
+    <footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-t-[2.5rem] md:rounded-t-[3.5rem] rounded-b-none overflow-hidden text-white select-none w-full shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
+      <div className="page-container pt-16 pb-10 flex flex-col">
-        {/* Column 1: Brand & Description */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[minmax(320px,1.6fr)_repeat(3,minmax(150px,1fr))] gap-8 lg:gap-x-[clamp(56px,6vw,120px)] w-full text-left items-start">
-        <div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
+          {/* Column 1: Brand & Description */}
-          <Link href="/" className="inline-block">
+          <div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
-            <Image
+            <Link href="/" className="inline-block">
-              src="/logo-light.png"
+              <Image
-              alt="Nearle"
+                src="/logo-light.png"
-              width={130}
+                alt="Nearle"
-              height={30}
+                width={130}
-              className="h-7 w-auto object-contain"
+                height={30}
-            />
+                className="h-7 w-auto object-contain"
-          </Link>
+              />
-          <p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
+            </Link>
-            India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
+            <p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-[340px]">
-          </p>
+              India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
-          {/* Social Icons */}
-          <div className="flex gap-2.5 mt-2">
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
-              <MaterialIcon icon="share" size={16} />
-            </a>
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
-              <MaterialIcon icon="public" size={16} />
-            </a>
-            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
-              <MaterialIcon icon="help" size={16} />
-            </a>
-          </div>
-        </div>
-
-        {/* Column 2: Company */}
-        <div>
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
-          <ul className="flex flex-col gap-2.5">
-            {COMPANY.map((l) => (
-              <li key={l.label}>
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
-                  {l.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        {/* Column 3: Nearle */}
-        <div>
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
-          <ul className="flex flex-col gap-2.5">
-            {PARTNERSHIPS.map((l) => (
-              <li key={l.label}>
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
-                  {l.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        {/* Column 4: Support */}
-        <div>
-          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
-          <ul className="flex flex-col gap-2.5">
-            {LEGAL.map((l) => (
-              <li key={l.label}>
-                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
-                  {l.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      {/* HQ Address card at bottom-left and info */}
-      <div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
-        {/* HQ Address Card */}
-        <div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
-          <div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
-            <MaterialIcon icon="location_on" size={16} />
-          </div>
-          <div className="text-left">
-            <h6 className="text-xs font-black text-white">Nearle HQ</h6>
-            <p className="text-[11px] text-white/60 leading-normal mt-0.5">
-              424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
             </p>
+            {/* Social Icons */}
+            <div className="flex gap-3 mt-4">
+              <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
+                <MaterialIcon icon="share" size={16} />
+              </a>
+              <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
+                <MaterialIcon icon="public" size={16} />
+              </a>
+              <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
+                <MaterialIcon icon="help" size={16} />
+              </a>
+            </div>
+          </div>
+
+          {/* Column 2: Company */}
+          <div className="flex flex-col">
+            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
+            <ul className="flex flex-col gap-[22px]">
+              {COMPANY.map((l) => (
+                <li key={l.label}>
+                  <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 3: Nearle */}
+          <div className="flex flex-col">
+            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
+            <ul className="flex flex-col gap-[22px]">
+              {PARTNERSHIPS.map((l) => (
+                <li key={l.label}>
+                  <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 4: Support */}
+          <div className="flex flex-col">
+            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
+            <ul className="flex flex-col gap-[22px]">
+              {LEGAL.map((l) => (
+                <li key={l.label}>
+                  <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
           </div>
         </div>
 
-        {/* Call center */}
+        {/* Divider */}
-        <div className="flex flex-col items-start md:items-end gap-1">
+        <div className="border-t border-white/10 w-full mt-[56px] mb-[48px]" />
-          <span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
-          <a
-            href="tel:+918049123456"
-            className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
-          >
-            <div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
-              <MaterialIcon icon="phone" size={14} className="text-white" />
-            </div>
-            <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
-          </a>
-        </div>
-      </div>
 
-      {/* Bottom Copyright & legal links */}
+        {/* Middle Contact Row */}
-      <div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-[48px] w-full py-1.5 md:py-2">
-        <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
+          {/* HQ Address Card */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
+          <div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm w-full md:w-auto">
-          <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
+            <div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
-          <span className="opacity-50">•</span>
+              <MaterialIcon icon="location_on" size={16} />
-          <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
+            </div>
-          <span className="opacity-50">•</span>
+            <div className="text-left">
-          <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
+              <h6 className="text-xs font-black text-white">Nearle HQ</h6>
+              <p className="text-[11px] text-white/60 leading-normal mt-0.5">
+                424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
+              </p>
+            </div>
+          </div>
+
+          {/* Call center */}
+          <div className="flex flex-col items-center md:items-end gap-1.5 shrink-0 text-center md:text-right">
+            <span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
+            <a
+              href="tel:+918049123456"
+              className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
+            >
+              <div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
+                <MaterialIcon icon="phone" size={14} className="text-white" />
+              </div>
+              <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
+            </a>
+          </div>
+        </div>
+
+        {/* Bottom Divider */}
+        <div className="border-t border-white/5 w-full mt-10 mb-8" />
+
+        {/* Bottom Row */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-[11px] text-white/40 w-full">
+          <p className="text-center md:text-left">© {new Date().getFullYear()} Nearle. All rights reserved.</p>
+          <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center items-center">
+            <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
+            <span className="opacity-35 select-none font-bold">·</span>
+            <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
+            <span className="opacity-35 select-none font-bold">·</span>
+            <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
+          </div>
         </div>
       </div>
     </footer>

src/components/layout/PremiumNavbar.tsx

@@ -19,7 +19,7 @@ export function PremiumNavbar() {
   const pathname = usePathname();
 
   return (
-    <header className="w-full bg-white border-b border-[#EEE7F4] px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
+    <header className="w-full bg-[rgba(61,45,143,0.88)] border-b border-white/10 px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
       <div className="flex items-center justify-between w-full">
         {/* LOGO (LEFT) */}
         <Link
@@ -27,7 +27,7 @@ export function PremiumNavbar() {
           className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
         >
           <Image
-            src="/logo.png"
+            src="/logo-light.png"
             alt="Nearle"
             width={120}
             height={30}
@@ -45,12 +45,12 @@ export function PremiumNavbar() {
                 key={link.label}
                 href={link.href}
                 className={`relative py-1 text-sm font-bold transition-all duration-200 ${
-                  isActive ? "text-[#6330D6]" : "text-[#5E5866] hover:text-[#16001D]"
+                  isActive ? "text-white" : "text-white/70 hover:text-white"
                 }`}
               >
                 {link.label}
                 {isActive && (
-                  <span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-[#6330D6] rounded-full" />
+                  <span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-white rounded-full" />
                 )}
               </Link>
             );
@@ -61,13 +61,13 @@ export function PremiumNavbar() {
         <div className="hidden md:flex items-center gap-3">
           <Link
             href="#"
-            className="inline-flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold px-5 py-1.5 rounded-full text-xs hover:bg-[#6330D6]/5 active:scale-95 transition-all duration-200 whitespace-nowrap"
+            className="inline-flex items-center justify-center border-2 border-white/20 text-white font-bold px-5 py-1.5 rounded-full text-xs hover:bg-white/10 active:scale-95 transition-all duration-200 whitespace-nowrap"
           >
             Login
           </Link>
           <Link
             href="/people#download-section"
-            className="inline-flex items-center justify-center bg-[#6330D6] text-white font-bold px-5 py-2 rounded-full text-xs hover:bg-[#5225b8] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
+            className="inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-5 py-2 rounded-full text-xs hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
           >
             Get App
           </Link>
@@ -75,7 +75,7 @@ export function PremiumNavbar() {
 
         {/* Mobile menu toggle */}
         <button
-          className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#6330D6]/5 text-[#16001D] transition-all active:scale-90 cursor-pointer"
+          className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label="Toggle menu"
         >
@@ -85,7 +85,7 @@ export function PremiumNavbar() {
 
       {/* Mobile Drawer */}
       {mobileOpen && (
-        <div className="absolute top-full left-0 right-0 z-50 bg-white border-b border-[#6330D6]/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
+        <div className="absolute top-full left-0 right-0 z-50 bg-[rgba(61,45,143,0.95)] backdrop-blur-md border-b border-white/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
           {NAV_LINKS.map((link) => {
             const isActive = pathname === link.href;
             return (
@@ -94,30 +94,30 @@ export function PremiumNavbar() {
                 href={link.href}
                 className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
                   isActive
-                    ? "bg-[#6330D6]/10 text-[#6330D6]"
+                    ? "bg-white/10 text-white"
-                    : "text-[#5E5866] hover:text-[#16001D] hover:bg-[#6330D6]/5"
+                    : "text-white/70 hover:text-white hover:bg-white/5"
                 }`}
                 onClick={() => setMobileOpen(false)}
               >
                 {link.label}
                 {isActive && (
-                  <span className="w-1.5 h-1.5 rounded-full bg-[#6330D6]" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-white" />
                 )}
               </Link>
             );
           })}
-          <div className="flex flex-col gap-2 pt-2 border-t border-[#6330D6]/5 mt-2">
+          <div className="flex flex-col gap-2 pt-2 border-t border-white/10 mt-2">
             <Link
               href="#"
               onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold py-2.5 rounded-xl text-sm"
+              className="flex items-center justify-center border-2 border-white/20 text-white font-bold py-2.5 rounded-xl text-sm"
             >
               Login
             </Link>
             <Link
               href="/people#download-section"
               onClick={() => setMobileOpen(false)}
-              className="flex items-center justify-center bg-[#6330D6] text-white font-bold py-2.5 rounded-xl text-sm"
+              className="flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold py-2.5 rounded-xl text-sm"
             >
               Get App
             </Link>

src/components/layout/PremiumPageShell.tsx

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

src/config/site-content.ts

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