hero section content

2026-06-22 19:28:43 +05:30
parent bbbc6cb067
commit 1b9ceb4a52
14 changed files with 241 additions and 323 deletions
--- a/AGENTS.md
+++ b/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.
--- a/public/Nearle
+++ b/public/Nearle
--- a/src/app/about/page.tsx
+++ b/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">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
+        <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
--- a/src/app/businesses/page.tsx
+++ b/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">
-        <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_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
+      <section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
+        {/* Background Image with Overlay */}
+        <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
--- a/src/app/contact/page.tsx
+++ b/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) */}
--- a/src/app/globals.css
+++ b/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-light: #ffe08b;
-  --brand-cream: #faf8f5;
+  --brand-accent: #e0c8f7;
+  --brand-accent-light: #E4D0FC;
+  --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;
-    overflow: hidden;
+    margin-top: 0;
+    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;
-    width: min(50vw, 820px);
+    bottom: 0;
+    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;
-    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
+    background: #E7D3EF;
+    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);
-    bottom: clamp(26px, 4vw, 60px);
-    width: min(78%, 600px);
-    max-width: 600px;
-    max-height: calc(100% - 80px);
-    aspect-ratio: 455 / 374;
+    width: 60%;
+    height: 60%;
+    left: 10%; /* Shift logo right to account for diagonal clip path visually */
    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;
-    transform: translateY(-50%);
-    padding-left: clamp(72px, 7.5vw, 150px);
-    padding-right: clamp(72px, 7.5vw, 150px);
-    margin-bottom: -45px;
+    z-index: 10;
+    margin-top: -85px;
+    padding-left: var(--spacing-margin-desktop);
+    padding-right: var(--spacing-margin-desktop);
  }
 }

-@media (min-width: 768px) and (max-width: 1099px) {
-  .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) {
+@media (max-width: 1023px) {
  .hero {
    position: relative;
+    margin-top: 0;
    background: #120018;
-    padding-bottom: 48px;
-    overflow: hidden;
+    padding-bottom: 110px;
+    overflow: visible;
  }

  .hero-dark-panel {
@@ -502,42 +485,14 @@ body {
  }

  .hero-visual-layer {
-    position: relative;
-    z-index: 2;
-    width: 95%;
-    max-width: 450px;
-    aspect-ratio: 1080 / 867;
-    margin: 20px auto 0 auto;
-    pointer-events: none;
-    filter: none;
-    overflow: hidden;
+    display: none;
  }

-  .hero-visual-panel {
-    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 {
+  .service-cards-wrapper {
    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);
  }
 }
+
--- a/src/app/people/page.tsx
+++ b/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">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
+        <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%)]" />
          
--- a/src/components/home/AppPromo.tsx
+++ b/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 */}
--- a/src/components/home/BusinessSection.tsx
+++ b/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" />
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -26,6 +26,7 @@ const QUICK_LINKS = [

 export function Hero() {
  return (
+    <>
      <div className="hero">
        {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
        <div className="hero-dark-panel select-none pointer-events-none">
@@ -103,7 +104,7 @@ export function Hero() {
            />
          </svg>

-        {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
+          {/* 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>

@@ -111,11 +112,11 @@ export function Hero() {
        <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">
+            <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-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
+            <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">
@@ -123,49 +124,28 @@ export function Hero() {
              </span>
            </h1>

-          <p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
+            <p className="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>

-          {/* 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"
+            {/* 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
                />
-              <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) */}
+          {/* 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">
@@ -174,15 +154,16 @@ export function Hero() {
                alt="Nearle delivery"
                fill
                sizes="(max-width: 768px) 95vw, 48vw"
-              className="object-contain object-bottom drop-shadow-2xl"
+                className="object-contain drop-shadow-2xl"
                priority
              />
            </div>
          </div>
        </div>
+      </div>

-      {/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
-      <div className="hero-cards">
+      {/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */}
+      <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>
+    </>
  );
 }
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/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;
--- a/src/components/home/ServiceCategories.tsx
+++ b/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">
--- a/src/components/layout/Footer.tsx
+++ b/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 ${
--- a/src/components/layout/Navbar.tsx
+++ b/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">
-      <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">
+    <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-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" }}
-              className="h-9 w-auto object-contain"
+              style={{ height: "40px", width: "auto" }}
+              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="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
+        <div className="md:hidden bg-[#4d046a] border-t border-white/10">
+          <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}