hero section content

AGENTS.md

@@ -1,5 +1,12 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
 
+# This is NOT the Next.js you know
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
+# STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER)
+Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources:
+
+1. DO NOT start the Next.js dev server or any local server.
+2. DO NOT use curl, browser tools, Puppeteer, or any network request to test localhost or any local API endpoints.
+3. DO NOT attempt to take screenshots, scrape pages, or self-verify visual/functional changes locally.
+4. DO NOT write "VERIFICATION REQUIRED" or attempt to run integration tests unless explicitly asked.
+5. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
+6. The human developer will always be responsible for running the server, executing the code, and verifying it locally.

src/app/about/page.tsx

@@ -69,7 +69,7 @@ export default function AboutPage() {
     <div className="relative min-h-screen bg-background">
       
       {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />
 
@@ -87,7 +87,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Intro Description Block ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
         <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             Our Platform
@@ -102,7 +102,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {STRATEGY_CARDS.map((card) => (
             <div
@@ -124,8 +124,8 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Global Stats counters ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-16">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {COUNTERS.map((c) => (
               <div key={c.label} className="flex flex-col items-center text-center">
@@ -143,7 +143,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Team Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
         <div className="grid lg:grid-cols-12 gap-16 items-center">
           
           {/* Left: About team content */}
@@ -193,7 +193,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Client Testimonial & Quote ─── */}
-      <section className="bg-brand-dark px-margin-mobile md:px-margin-desktop py-24 text-center text-white">
+      <section className="bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center text-white">
         <div className="mx-auto max-w-4xl relative">
           <span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
             &ldquo;
@@ -219,7 +219,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Brand Building Banner ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
         <div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
           <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
             Don&apos;t miss the opportunity

src/app/businesses/page.tsx

@@ -7,7 +7,7 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const ROTATOR_WORDS = [
   "Stand above your competitors!",
-  "Reach the right people, near you.",
+  // "Reach the right people, near you.",
   "Get noticed in your locality!"
 ];
 
@@ -90,9 +90,19 @@ export default function BusinessesPage() {
   return (
     <div className="relative min-h-screen bg-background">
       {/* ─── Hero Section with Animated Rotator ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
+        {/* Background Image with Overlay */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
+        <div className="absolute inset-0 z-0 select-none pointer-events-none">
+          <Image
+            src="/Nearle Business.png"
+            alt="Nearle Business Background"
+            fill
+            sizes="100vw"
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-[#120217]/50" />
+        </div>
 
         <div className="relative z-10 mx-auto max-w-container-max">
           <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
@@ -107,46 +117,11 @@ export default function BusinessesPage() {
             </span>
           </h1>
 
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            India&apos;s #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
-          </p>
-
-          {/* App Download Links */}
-          <div className="mt-10 flex flex-wrap justify-center gap-4">
-            <a
-              href="https://apps.apple.com/us/app/nearle/id1596895375"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
-            >
-              <div className="flex items-center gap-3 text-white text-left">
-                <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
-                <div>
-                  <div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
-                  <div className="text-sm font-black">App Store</div>
-                </div>
-              </div>
-            </a>
-            <a
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
-            >
-              <div className="flex items-center gap-3 text-white text-left">
-                <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
-                <div>
-                  <div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
-                  <div className="text-sm font-black">Google Play</div>
-                </div>
-              </div>
-            </a>
-          </div>
         </div>
       </section>
 
       {/* ─── Intro Highlight Banner ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
         <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
           <div className="max-w-2xl">
             <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
@@ -172,7 +147,7 @@ export default function BusinessesPage() {
       </section>
 
       {/* ─── Timeline / Core Process Steps ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
         <div className="text-center mb-16">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             How it works
@@ -210,7 +185,7 @@ export default function BusinessesPage() {
 
       {/* ─── Grid Stats & Value Prop ─── */}
       <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
           <div className="grid lg:grid-cols-12 gap-16 items-center">
             
             {/* Left side: features block (7 cols) */}
@@ -277,9 +252,9 @@ export default function BusinessesPage() {
       </section>
 
       {/* ─── Join/Download Call to Action ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
         <div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
           <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
             <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
               Nearle is Essential for Business Growth

src/app/contact/page.tsx

@@ -97,10 +97,10 @@ export default function ContactPage() {
   return (
     <div className="relative min-h-screen bg-background">
       {/* ─── Breadcrumbs & Hero Page Header ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-20 pb-24 text-center">
+      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
         {/* Background Decorative Gradients */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(252,163,17,0.08),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(203,157,248,0.12),transparent_50%)]" />
 
         <div className="relative z-10 mx-auto max-w-container-max">
           {/* Breadcrumbs */}
@@ -137,7 +137,7 @@ export default function ContactPage() {
       </section>
 
       {/* ─── Four Contact Info Cards ─── */}
-      <section className="relative z-20 mx-auto -mt-10 max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
           
           {/* Card 1: Location */}
@@ -225,7 +225,7 @@ export default function ContactPage() {
       </section>
 
       {/* ─── Map & Form Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-20">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
           
           {/* Left: Google Map (5 Cols) */}

src/app/globals.css

@@ -2,9 +2,9 @@
 
 /* ─── Design Tokens (Material Design 3 inspired) ─── */
 :root {
-  --surface: #f9f9fc;
+  --surface: #E7D3EF;
   --surface-dim: #dadadc;
-  --surface-bright: #f9f9fc;
+  --surface-bright: #E7D3EF;
   --surface-container-lowest: #ffffff;
   --surface-container-low: #f3f3f6;
   --surface-container: #eeeef0;
@@ -46,14 +46,14 @@
   --tertiary-fixed-dim: #ebc246;
   --on-tertiary-fixed: #241a00;
   --on-tertiary-fixed-variant: #584400;
-  --background: #f9f9fc;
+  --background: #E7D3EF;
   --on-background: #1a1c1e;
   --surface-variant: #e2e2e5;
   --brand-dark: #120217;
   --brand-dark-surface: #1e0627;
-  --brand-accent: #fca311;
+  --brand-accent: #e0c8f7;
-  --brand-accent-light: #ffe08b;
+  --brand-accent-light: #E4D0FC;
-  --brand-cream: #faf8f5;
+  --brand-cream: #E7D3EF;
 }
 
 /* ─── Tailwind v4 Theme ─── */
@@ -327,11 +327,13 @@ body {
 }
 
 /* Hero-only clipped background layers */
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .hero {
     position: relative;
-    min-height: 785px;
+    margin-top: 0;
-    overflow: hidden;
+    min-height: 500px;
+    overflow: visible;
+    padding-bottom: 100px;
     background:
       radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
       radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
@@ -358,13 +360,17 @@ body {
     z-index: 2;
   }
 
+  /* Right column occupies exactly 52% of width to ensure diagonal doesn't clip */
   .hero-visual-layer {
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
-    bottom: 110px;
+    bottom: 0;
-    width: min(50vw, 820px);
+    width: 52%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     pointer-events: none;
     filter: none;
     overflow: hidden;
@@ -374,20 +380,17 @@ body {
   .hero-visual-panel {
     position: absolute;
     inset: 0;
-    background: #ffffff;
+    background: #E7D3EF;
-    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
     z-index: 0;
   }
 
   .hero-visual-image {
-    position: absolute;
+    position: relative;
     z-index: 1;
-    right: clamp(48px, 5vw, 96px);
+    width: 60%;
-    bottom: clamp(26px, 4vw, 60px);
+    height: 60%;
-    width: min(78%, 600px);
+    left: 10%; /* Shift logo right to account for diagonal clip path visually */
-    max-width: 600px;
-    max-height: calc(100% - 80px);
-    aspect-ratio: 455 / 374;
     transform-origin: center;
   }
 
@@ -413,10 +416,12 @@ body {
     opacity: 0.8;
   }
 
+  /* Left column occupies exactly 46% of width to avoid diagonal overlap */
   .hero-content {
     position: relative;
     z-index: 3;
-    width: min(610px, 48vw);
+    width: 46%;
+    max-width: 46%;
     padding-top: 94px;
     animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
   }
@@ -424,47 +429,25 @@ body {
   .hero-stage {
     padding-left: clamp(72px, 7.5vw, 150px);
     padding-right: clamp(32px, 4vw, 80px);
-    min-height: 740px;
+    min-height: 600px;
   }
 
-  .hero-cards {
+  .service-cards-wrapper {
     position: relative;
-    z-index: 5;
+    z-index: 10;
-    transform: translateY(-50%);
+    margin-top: -85px;
-    padding-left: clamp(72px, 7.5vw, 150px);
+    padding-left: var(--spacing-margin-desktop);
-    padding-right: clamp(72px, 7.5vw, 150px);
+    padding-right: var(--spacing-margin-desktop);
-    margin-bottom: -45px;
   }
 }
 
-@media (min-width: 768px) and (max-width: 1099px) {
+@media (max-width: 1023px) {
-  .hero {
-    min-height: 720px;
-  }
-
-  .hero-visual-layer {
-    width: min(52vw, 560px);
-    bottom: 128px;
-  }
-
-  .hero-visual-image {
-    right: -8px;
-    bottom: 52px;
-    width: min(86%, 460px);
-    opacity: 0.92;
-  }
-
-  .hero-content {
-    width: min(440px, 58vw);
-  }
-}
-
-@media (max-width: 767px) {
   .hero {
     position: relative;
+    margin-top: 0;
     background: #120018;
-    padding-bottom: 48px;
+    padding-bottom: 110px;
-    overflow: hidden;
+    overflow: visible;
   }
 
   .hero-dark-panel {
@@ -502,42 +485,14 @@ body {
   }
 
   .hero-visual-layer {
-    position: relative;
+    display: none;
-    z-index: 2;
-    width: 95%;
-    max-width: 450px;
-    aspect-ratio: 1080 / 867;
-    margin: 20px auto 0 auto;
-    pointer-events: none;
-    filter: none;
-    overflow: hidden;
   }
 
-  .hero-visual-panel {
+  .service-cards-wrapper {
-    position: absolute;
-    inset: 0;
-    background: #ffffff;
-    clip-path: polygon(44% 0, 100% 0, 100% 100%, 14% 100%);
-    z-index: 0;
-  }
-
-  .hero-visual-image {
-    position: absolute;
-    z-index: 1;
-    inset: 12% 6% 12% 20%;
-    max-width: 100%;
-    max-height: 100%;
-    transform-origin: center;
-  }
-
-  .hero-visual-image img {
-    object-fit: contain;
-  }
-
-  .hero-cards {
     position: relative;
     z-index: 20;
-    margin-top: 40px;
+    margin-top: -48px;
+    overflow-x: auto;
     padding-left: var(--spacing-margin-mobile);
     padding-right: var(--spacing-margin-mobile);
   }
@@ -593,3 +548,4 @@ body {
     transform: translate3d(18px, -8px, 0) scale(1.03);
   }
 }
+

src/app/people/page.tsx

@@ -97,9 +97,9 @@ export default function PeoplePage() {
     <div className="relative min-h-screen bg-background">
       
       {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(252,163,17,0.1),transparent_45%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(203,157,248,0.15),transparent_45%)]" />
 
         <div className="relative z-10 mx-auto max-w-container-max">
           <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
@@ -132,7 +132,7 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── 9 Core Offerings Bento Grid ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
         <div className="text-center mb-16">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             What we offer
@@ -171,8 +171,8 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── Localized Stats Block ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-20">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
           <div className="text-center mb-12">
             <span className="text-label-sm font-black text-primary uppercase tracking-widest">
               Nearle Network
@@ -205,7 +205,7 @@ export default function PeoplePage() {
       </section>
 
       {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
         <div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
           

src/components/home/AppPromo.tsx

@@ -23,7 +23,7 @@ export function AppPromo() {
   return (
     <section
       id="download"
-      className="py-24 px-margin-mobile md:px-margin-desktop bg-brand-cream overflow-hidden border-t border-outline-variant/10"
+      className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10"
     >
       <div className="max-w-container-max mx-auto relative">
         {/* Background Dot pattern */}

src/components/home/BusinessSection.tsx

@@ -45,7 +45,7 @@ const STATS = [
 
 export function BusinessSection() {
   return (
-    <section className="py-24 px-margin-mobile md:px-margin-desktop bg-white">
+    <section className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-background">
       <div className="max-w-container-max mx-auto">
         
         {/* Merchant Section Grid */}
@@ -115,7 +115,7 @@ export function BusinessSection() {
         </div>
 
         {/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
-        <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-8 md:p-16 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
+        <div className="mt-32 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" />

src/components/home/Hero.tsx

@@ -26,163 +26,144 @@ const QUICK_LINKS = [
 
 export function Hero() {
   return (
-    <div className="hero">
+    <>
-      {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
+      <div className="hero">
-      <div className="hero-dark-panel select-none pointer-events-none">
+        {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
-        {/* Subtle Background Dot Texture (Minimal, barely visible) */}
+        <div className="hero-dark-panel select-none pointer-events-none">
-        <div className="hero-map-layer select-none">
+          {/* Subtle Background Dot Texture (Minimal, barely visible) */}
-          <Image
+          <div className="hero-map-layer select-none">
-            src="/images/slider-glob.png"
-            alt="Subtle Background"
-            fill
-            sizes="(max-width: 768px) 100vw, 40vw"
-            className="object-contain object-left-top"
-            priority
-          />
-        </div>
-
-        {/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
-        <svg
-          className="absolute inset-0 w-full h-full pointer-events-none"
-          viewBox="0 0 1000 800"
-          preserveAspectRatio="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <defs>
-            <filter
-              id="heroRouteGlow"
-              x="-50%"
-              y="-50%"
-              width="200%"
-              height="200%"
-            >
-              <feGaussianBlur stdDeviation="3" result="blur" />
-              <feMerge>
-                <feMergeNode in="blur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-          </defs>
-          {/* Minimal glow nodes - only 2 small ones at top */}
-          <circle
-            cx="140"
-            cy="100"
-            r="5"
-            className="fill-[#bd34fe] opacity-20 animate-pulse"
-            filter="url(#heroRouteGlow)"
-          />
-          <circle cx="140" cy="100" r="1.5" className="fill-white" />
-
-          <circle
-            cx="300"
-            cy="80"
-            r="5"
-            className="fill-[#bd34fe] opacity-20 animate-pulse"
-            filter="url(#heroRouteGlow)"
-          />
-          <circle cx="300" cy="80" r="1.5" className="fill-white" />
-
-          {/* Only 2 very thin route lines at top - staying clear of text area */}
-          <path
-            d="M140,100 Q220,85 300,80"
-            fill="none"
-            stroke="#c02cff"
-            strokeWidth="1"
-            strokeDasharray="4,4"
-            className="animate-route opacity-15"
-            filter="url(#heroRouteGlow)"
-          />
-          <path
-            d="M300,80 Q370,110 420,140"
-            fill="none"
-            stroke="#c02cff"
-            strokeWidth="1"
-            strokeDasharray="4,4"
-            className="animate-route opacity-12"
-            filter="url(#heroRouteGlow)"
-          />
-        </svg>
-
-        {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
-        <div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
-      </div>
-
-      {/* ─── Main Content Wrapper ─── */}
-      <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
-        {/* Left Column: Text & Search Content */}
-        <div className="hero-content text-white select-none">
-          <span className="inline-block text-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
-            Express Services
-          </span>
-
-          <h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
-            Express
-            <br />
-            <span className="text-brand-accent drop-shadow-md">
-              Neighborhood
-            </span>
-          </h1>
-
-          <p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
-            Get groceries, hot meals, daily essentials, and local professional
-            services delivered from trusted partners within{" "}
-            <span className="text-brand-accent font-bold">25-30 minutes</span>.
-          </p>
-
-          {/* Search Input Bar */}
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center bg-white p-2 rounded-full shadow-2xl border border-white/10 focus-within:ring-4 focus-within:ring-brand-accent/30 transition-all duration-300 max-w-[620px]">
-              <MaterialIcon
-                icon="location_on"
-                size={22}
-                className="ml-4 text-brand-accent animate-pulse-subtle"
-              />
-              <input
-                type="text"
-                placeholder="Enter your neighbourhood or delivery location..."
-                className="w-full border-none focus:ring-0 focus:outline-none text-body-md text-on-surface font-semibold placeholder-on-surface-variant/50 px-3 py-2 bg-transparent"
-              />
-              <button className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-6 py-3 rounded-full text-label-sm hover:shadow-lg transition-all active:scale-95 duration-200 whitespace-nowrap cursor-pointer">
-                Find Shops
-              </button>
-            </div>
-
-            {/* Popular tags below */}
-            <div className="flex gap-3 items-center flex-wrap px-4 mt-2">
-              <span className="text-label-sm text-white/40 uppercase tracking-widest font-black text-[10px]">
-                Popular:
-              </span>
-              {["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => (
-                <a
-                  key={tag}
-                  href="#"
-                  className="text-label-sm text-brand-accent-light hover:text-brand-accent transition-colors font-bold"
-                >
-                  {tag}
-                </a>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Right Column: Dominant delivery image (Overlapping) */}
-        <div className="hero-visual-layer select-none pointer-events-none">
-          <div className="hero-visual-panel" />
-          <div className="hero-visual-image">
             <Image
-              src="/nearlenewlogo.png"
+              src="/images/slider-glob.png"
-              alt="Nearle delivery"
+              alt="Subtle Background"
               fill
-              sizes="(max-width: 768px) 95vw, 48vw"
+              sizes="(max-width: 768px) 100vw, 40vw"
-              className="object-contain object-bottom drop-shadow-2xl"
+              className="object-contain object-left-top"
               priority
             />
           </div>
+
+          {/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
+          <svg
+            className="absolute inset-0 w-full h-full pointer-events-none"
+            viewBox="0 0 1000 800"
+            preserveAspectRatio="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <filter
+                id="heroRouteGlow"
+                x="-50%"
+                y="-50%"
+                width="200%"
+                height="200%"
+              >
+                <feGaussianBlur stdDeviation="3" result="blur" />
+                <feMerge>
+                  <feMergeNode in="blur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
+            {/* Minimal glow nodes - only 2 small ones at top */}
+            <circle
+              cx="140"
+              cy="100"
+              r="5"
+              className="fill-[#bd34fe] opacity-20 animate-pulse"
+              filter="url(#heroRouteGlow)"
+            />
+            <circle cx="140" cy="100" r="1.5" className="fill-white" />
+
+            <circle
+              cx="300"
+              cy="80"
+              r="5"
+              className="fill-[#bd34fe] opacity-20 animate-pulse"
+              filter="url(#heroRouteGlow)"
+            />
+            <circle cx="300" cy="80" r="1.5" className="fill-white" />
+
+            {/* Only 2 very thin route lines at top - staying clear of text area */}
+            <path
+              d="M140,100 Q220,85 300,80"
+              fill="none"
+              stroke="#c02cff"
+              strokeWidth="1"
+              strokeDasharray="4,4"
+              className="animate-route opacity-15"
+              filter="url(#heroRouteGlow)"
+            />
+            <path
+              d="M300,80 Q370,110 420,140"
+              fill="none"
+              stroke="#c02cff"
+              strokeWidth="1"
+              strokeDasharray="4,4"
+              className="animate-route opacity-12"
+              filter="url(#heroRouteGlow)"
+            />
+          </svg>
+
+          {/* Soft purple radial glow behind the diagonal edge (clipped) */}
+          <div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
+        </div>
+
+        {/* ─── Main Content Wrapper ─── */}
+        <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
+          {/* Left Column: Text & Search Content */}
+          <div className="hero-content text-white select-none">
+            <span className="inline-block text-label-md text-brand-accent font-black tracking-widest uppercase mb-5 bg-brand-accent/10 px-5 py-2 rounded-full border border-brand-accent/20">
+              Express Services
+            </span>
+
+            <h1 className="text-5xl lg:text-[92px] lg:leading-[0.95] font-display font-black tracking-tight mb-8">
+              Express
+              <br />
+              <span className="text-brand-accent drop-shadow-md">
+                Neighborhood
+              </span>
+            </h1>
+
+            <p className="text-body-lg md:text-[22px] md:leading-9 text-white/80 mb-12 leading-relaxed max-w-2xl">
+              Get groceries, hot meals, daily essentials, and local professional
+              services delivered from trusted partners within{" "}
+              <span className="text-brand-accent font-bold">25-30 minutes</span>.
+            </p>
+
+            {/* Mobile/Tablet Only Nearle Bag Logo */}
+            <div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none">
+              <div className="relative w-[280px] h-[230px] mx-auto">
+                <Image
+                  src="/nearlenewlogo.png"
+                  alt="Nearle delivery"
+                  fill
+                  sizes="(max-width: 1023px) 280px, 0px"
+                  className="object-contain drop-shadow-2xl"
+                  priority
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Centered Nearle bag visual */}
+          <div className="hero-visual-layer select-none pointer-events-none">
+            <div className="hero-visual-panel" />
+            <div className="hero-visual-image">
+              <Image
+                src="/nearlenewlogo.png"
+                alt="Nearle delivery"
+                fill
+                sizes="(max-width: 768px) 95vw, 48vw"
+                className="object-contain drop-shadow-2xl"
+                priority
+              />
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
+      {/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */}
-      <div className="hero-cards">
+      <div className="service-cards-wrapper max-w-container-max mx-auto">
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
           {QUICK_LINKS.map((item) => (
             <div
@@ -215,6 +196,6 @@ export function Hero() {
           ))}
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/components/home/HyperlocalFeatures.tsx

@@ -21,14 +21,14 @@ const FEATURES = [
 
 export function HyperlocalFeatures() {
   return (
-    <section className="bg-[#f7f7f9] py-[72px] px-4 min-[901px]:py-[100px] min-[901px]:px-8 relative overflow-hidden border-y border-outline-variant/10">
+    <section className="bg-background py-28 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
       {/* Scoped CSS styles for precise layout enforcement */}
       <style>{`
         @media (min-width: 901px) {
           .custom-care-grid {
             grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
             gap: 56px !important;
-            width: min(1280px, calc(100% - 64px)) !important;
+            width: min(1280px, 100%) !important;
           }
           .custom-care-visual {
             max-width: 470px !important;
@@ -43,7 +43,7 @@ export function HyperlocalFeatures() {
           .custom-care-grid {
             grid-template-columns: 1fr !important;
             gap: 32px !important;
-            width: min(1280px, calc(100% - 32px)) !important;
+            width: 100% !important;
           }
           .custom-care-visual {
             max-width: 420px !important;

src/components/home/ServiceCategories.tsx

@@ -60,7 +60,7 @@ const CATEGORIES = [
 
 export function ServiceCategories() {
   return (
-    <section className="bg-background pt-28 pb-16 px-margin-mobile md:px-margin-desktop">
+    <section className="bg-background pt-32 pb-24 px-6 md:px-12 lg:px-20 xl:px-24">
       <div className="max-w-container-max mx-auto">
         {/* Header Section */}
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">

src/components/layout/Footer.tsx

@@ -124,7 +124,7 @@ export function Footer() {
   return (
     <footer className="relative z-10 bg-brand-dark text-white border-t border-white/5 pt-24 pb-6 w-full mt-24">
       {/* Overlapping Contact Helpdesk Card */}
-      <div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
+      <div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-6 md:px-12 lg:px-20 xl:px-24">
         <div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
           <div className="flex items-center gap-4 text-brand-dark">
             <div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
@@ -147,7 +147,7 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
+      <div className="max-w-[1380px] mx-auto px-6 md:px-12 lg:px-20 xl:px-24">
         
         {/* Main content grid: aligned on the same top baseline */}
         <div className={`grid grid-cols-1 md:grid-cols-2 lg:items-start gap-y-10 gap-x-6 lg:gap-x-12 mb-12 ${

src/components/layout/Navbar.tsx

@@ -17,8 +17,8 @@ export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
 
   return (
-    <nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-outline-variant/20 transition-all duration-300">
+    <nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
-      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-margin-mobile md:px-16 xl:px-24 py-3">
+      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
         {/* Left: Brand */}
         <div className="flex items-center">
           <Link
@@ -26,27 +26,26 @@ export function Navbar() {
             className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
           >
             <Image
-              src="/logo-purple-v2.png"
+              src="/logo-light.png"
               alt="Nearle"
-              width={220}
+              width={400}
               height={50}
-              style={{ height: "auto" }}
+              style={{ height: "40px", width: "auto" }}
-              className="h-9 w-auto object-contain"
+              className="object-contain"
               priority
             />
           </Link>
         </div>
 
-        {/* Center: Navigation */}
         <div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
           {NAV_LINKS.map((link) => (
             <Link
               key={link.label}
               href={link.href}
-              className="relative py-1 text-[15px] font-bold leading-5 text-on-surface-variant hover:text-primary transition-all duration-200 group whitespace-nowrap"
+              className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
             >
               {link.label}
-              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
             </Link>
           ))}
         </div>
@@ -55,14 +54,14 @@ export function Navbar() {
         <div className="flex items-center justify-end gap-3">
           <Link
             href="/#download"
-            className="hidden md:inline-flex bg-primary hover:bg-primary-container text-on-primary font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
+            className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
           >
             Get App
           </Link>
 
           {/* Mobile menu toggle */}
           <button
-            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-all active:scale-90 cursor-pointer"
+            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
             onClick={() => setMobileOpen(!mobileOpen)}
             aria-label="Toggle menu"
           >
@@ -73,13 +72,13 @@ export function Navbar() {
 
       {/* Mobile Drawer */}
       {mobileOpen && (
-        <div className="md:hidden bg-surface-container-lowest border-t border-outline-variant">
+        <div className="md:hidden bg-[#4d046a] border-t border-white/10">
-          <div className="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
+          <div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
             {NAV_LINKS.map((link) => (
               <Link
                 key={link.label}
                 href={link.href}
-                className="px-3 py-2.5 text-body-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low rounded-lg transition-colors"
+                className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
                 onClick={() => setMobileOpen(false)}
               >
                 {link.label}