hero section content

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-dark-panel select-none pointer-events-none">
-        {/* Subtle Background Dot Texture (Minimal, barely visible) */}
-        <div className="hero-map-layer select-none">
-          <Image
-            src="/images/slider-glob.png"
-            alt="Subtle Background"
-            fill
-            sizes="(max-width: 768px) 100vw, 40vw"
-            className="object-contain object-left-top"
-            priority
-          />
-        </div>
-
-        {/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
-        <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">
+    <>
+      <div className="hero">
+        {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
+        <div className="hero-dark-panel select-none pointer-events-none">
+          {/* Subtle Background Dot Texture (Minimal, barely visible) */}
+          <div className="hero-map-layer select-none">
             <Image
-              src="/nearlenewlogo.png"
-              alt="Nearle delivery"
+              src="/images/slider-glob.png"
+              alt="Subtle Background"
               fill
-              sizes="(max-width: 768px) 95vw, 48vw"
-              className="object-contain object-bottom drop-shadow-2xl"
+              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 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) */}
-      <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>
+    </>
   );
 }

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