From 0549793a7cc12bbec8f83e97e73e4056ef04208f Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Sun, 19 Jul 2026 23:51:39 +0530
Subject: [PATCH] update navbar dropdown

---
 public/convenience.svg                        |  52 +++++++++
 src/components/layout/PremiumNavbar.tsx       |  71 ++++++++++--
 .../why-nearle/AICommerceExplainer.tsx        | 103 ++++++++++++++++--
 .../why-nearle/CommerceEvolution.tsx          |  43 +++++++-
 .../why-nearle/NeighborhoodStores.tsx         |  37 ++++++-
 5 files changed, 274 insertions(+), 32 deletions(-)
 create mode 100644 public/convenience.svg

diff --git a/public/convenience.svg b/public/convenience.svg
new file mode 100644
index 0000000..77bf44a
--- /dev/null
+++ b/public/convenience.svg
@@ -0,0 +1,52 @@
+<svg fill="none" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
+  <!-- Gradient definitions -->
+  <defs>
+    <radialGradient id="shadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#7C3AED" stop-opacity="0.15" />
+      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#9367F4" />
+      <stop offset="100%" stop-color="#6330D6" />
+    </linearGradient>
+    <linearGradient id="glowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#C9A2FF" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0.2" />
+    </linearGradient>
+  </defs>
+
+  <!-- Ground shadow -->
+  <ellipse cx="120" cy="180" rx="70" ry="20" fill="url(#shadow)" />
+
+  <!-- Container group -->
+  <g>
+    <!-- Isometric Delivery Box / Package representing doorstep convenience -->
+    <!-- Top Face -->
+    <path d="M120 75 L165 95 L120 115 L75 95 Z" fill="#F5EEFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+    <!-- Left Face -->
+    <path d="M75 95 L120 115 L120 160 L75 140 Z" fill="#EBDCFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+    <!-- Right Face -->
+    <path d="M120 115 L165 95 L165 140 L120 160 Z" fill="#DFCAFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
+
+    <!-- Isometric Lid lines -->
+    <path d="M120 115 L120 75" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
+    <path d="M75 95 L165 95" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
+
+    <!-- Location Pin / Doorstep Marker floating above the box -->
+    <g transform="translate(120, 50)">
+      <!-- Pulsing Glow -->
+      <circle cx="0" cy="-10" r="18" fill="url(#glowGradient)" opacity="0.5" />
+      
+      <!-- Pin shape -->
+      <path d="M0 8 C-10 -2 -15 -12 -15 -22 C-15 -32 -6 -40 0 -40 C6 -40 15 -32 15 -22 C15 -12 10 -2 0 8 Z" fill="url(#purpleGradient)" />
+      <!-- Inner dot -->
+      <circle cx="0" cy="-22" r="5" fill="#FFFFFF" />
+    </g>
+
+    <!-- Speed/Convenience Motion Lines -->
+    <path d="M50 110 L65 110" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M45 125 L60 125" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M175 120 L190 120" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+    <path d="M180 135 L195 135" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
+  </g>
+</svg>
diff --git a/src/components/layout/PremiumNavbar.tsx b/src/components/layout/PremiumNavbar.tsx
index ef09783..945d89a 100644
--- a/src/components/layout/PremiumNavbar.tsx
+++ b/src/components/layout/PremiumNavbar.tsx
@@ -14,13 +14,28 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
 
-type NavChild = { label: string; href: string };
+type NavChild = { label: string; href: string; icon: string; desc: string };
 type NavLink = { label: string; href: string; children?: NavChild[] };
 
 const SOLUTIONS_CHILDREN: NavChild[] = [
-  { label: "For Business", href: "/businesses" },
-  { label: "For People", href: "/people" },
-  { label: "For D2C Brands", href: "/brands" },
+  {
+    label: "For Business",
+    href: "/businesses",
+    icon: "storefront",
+    desc: "Run your neighborhood shop online.",
+  },
+  {
+    label: "For People",
+    href: "/people",
+    icon: "shopping_bag",
+    desc: "Order from local stores you trust.",
+  },
+  {
+    label: "For D2C Brands",
+    href: "/brands",
+    icon: "auto_awesome",
+    desc: "Connect regional catalogs direct.",
+  },
 ];
 
 const NAV_LINKS: NavLink[] = [
@@ -29,7 +44,6 @@ const NAV_LINKS: NavLink[] = [
   { label: "Platform", href: "/platform" },
   { label: "Solutions", href: "/businesses", children: SOLUTIONS_CHILDREN },
   { label: "About", href: "/about" },
-  { label: "Contact", href: "/contact" },
 ];
 
 const mobileMenuVariants = {
@@ -203,7 +217,7 @@ export function PremiumNavbar() {
                         initial="hidden"
                         animate="visible"
                         exit="exit"
-                        className="absolute left-1/2 top-full z-50 mt-2 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-white/12 bg-[#30226F]/98 p-1.5 shadow-[0_18px_45px_rgba(20,0,30,0.45)] backdrop-blur-xl"
+                        className="absolute left-1/2 top-full z-50 mt-3 w-100 -translate-x-1/2 overflow-hidden rounded-2xl border border-white/12 bg-gradient-to-b from-[#1C0F4E] to-[#0A0524] p-2 shadow-[0_24px_50px_rgba(0,0,0,0.55)] backdrop-blur-2xl"
                         role="menu"
                       >
                         {link.children.map((child) => {
@@ -214,13 +228,25 @@ export function PremiumNavbar() {
                               href={child.href}
                               role="menuitem"
                               onClick={() => setOpenDropdown(null)}
-                              className={`block rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
+                              className={`group flex items-start gap-3.5 rounded-xl p-3 transition-all duration-200 ${
                                 childActive
-                                  ? "bg-white/15 text-white"
-                                  : "text-white/75 hover:bg-white/10 hover:text-white"
+                                  ? "bg-white/12 text-white shadow-sm"
+                                  : "text-white/70 hover:bg-white/[0.07] hover:text-white"
                               }`}
                             >
-                              {child.label}
+                              {/* Left — Medallion Icon */}
+                              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/10 bg-white/[0.05] text-[#C9A2FF] transition-colors duration-200 group-hover:border-[#C9A2FF]/30 group-hover:bg-[#C9A2FF]/10 group-hover:text-white">
+                                <MaterialIcon icon={child.icon} size={18} />
+                              </div>
+                              {/* Right — Info */}
+                              <div className="flex flex-col text-left">
+                                <span className="text-lg font-bold tracking-tight leading-none mb-1 text-white group-hover:text-[#C9A2FF] transition-colors">
+                                  {child.label}
+                                </span>
+                                <span className="text-[12px] font-normal leading-normal text-white/55 transition-colors group-hover:text-white/70">
+                                  {child.desc}
+                                </span>
+                              </div>
                             </Link>
                           );
                         })}
@@ -271,6 +297,16 @@ export function PremiumNavbar() {
           })}
         </nav>
 
+        {/* Desktop Action Button */}
+        <div className="hidden lg:block">
+          <Link
+            href="/contact"
+            className="inline-flex items-center justify-center rounded-full bg-white px-7 py-3 text-sm font-black uppercase tracking-wider text-[#6330D6] shadow-[0_4px_20px_rgba(0,0,0,0.15)] hover:bg-[#FAF7FD] hover:text-[#5225b8] hover:scale-[1.03] active:scale-95 transition-all duration-200"
+          >
+            Contact Us
+          </Link>
+        </div>
+
         {/* Mobile Toggle */}
         <button
           type="button"
@@ -342,13 +378,13 @@ export function PremiumNavbar() {
                                     key={child.href}
                                     href={child.href}
                                     onClick={closeMobile}
-                                    className={`flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
+                                    className={`flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
                                       childActive
                                         ? "bg-white/12 text-white"
                                         : "text-white/60 hover:bg-white/10 hover:text-white"
                                     }`}
                                   >
-                                    <span className="h-1 w-1 rounded-full bg-white/40" />
+                                    <MaterialIcon icon={child.icon} size={18} className="text-[#C9A2FF]" />
                                     {child.label}
                                   </Link>
                                 );
@@ -381,6 +417,17 @@ export function PremiumNavbar() {
                   </motion.div>
                 );
               })}
+
+              {/* Mobile Contact CTA */}
+              <motion.div variants={mobileItemVariants} className="mt-4 px-4">
+                <Link
+                  href="/contact"
+                  onClick={closeMobile}
+                  className="flex w-full items-center justify-center rounded-full bg-white py-3.5 text-sm font-black uppercase tracking-wider text-[#6330D6] shadow-md active:scale-[0.98] transition-all hover:bg-[#FAF7FD] hover:text-[#5225b8]"
+                >
+                  Contact Us
+                </Link>
+              </motion.div>
             </motion.nav>
           </motion.div>
         )}
diff --git a/src/components/why-nearle/AICommerceExplainer.tsx b/src/components/why-nearle/AICommerceExplainer.tsx
index a7a3728..b465f4d 100644
--- a/src/components/why-nearle/AICommerceExplainer.tsx
+++ b/src/components/why-nearle/AICommerceExplainer.tsx
@@ -1,22 +1,107 @@
 "use client";
 
+import { ReactNode } from "react";
 import { motion, useReducedMotion } from "framer-motion";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { cardReveal, fadeUp, staggerContainer, staggerSlow, viewport } from "@/lib/animations";
 
 const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
 
-const HAVE = [
-  { img: "/trust.svg", label: "Trust", desc: "Built over years, face to face." },
-  { img: "/customers.svg", label: "Customers", desc: "Regulars who already walk in." },
-  { img: "/location.svg", label: "Location", desc: "Minutes from every doorstep." },
+const HAVE: { img: string; label: string; desc: ReactNode }[] = [
+  {
+    img: "/trust.svg",
+    label: "Trust",
+    desc: (
+      <>
+        Built over years, face to face.
+        <br />
+        Deeply rooted in the community.
+        <br />
+        Built on handshakes and daily greetings.
+      </>
+    ),
+  },
+  {
+    img: "/customers.svg",
+    label: "Customers",
+    desc: (
+      <>
+        Regulars who already walk in.
+        <br />
+        Familiar names, familiar preferences.
+        <br />
+        A loyal community built on daily visits.
+      </>
+    ),
+  },
+  {
+    img: "/location.svg",
+    label: "Location",
+    desc: (
+      <>
+        Minutes from every doorstep.
+        <br />
+        Closer than any mega warehouse.
+        <br />
+        Fast delivery by design, not by speed.
+      </>
+    ),
+  },
 ];
 
-const ADD = [
-  { icon: "auto_awesome", label: "AI", desc: "ProductLLM builds the catalog." },
-  { icon: "storefront", label: "Digital Storefront", desc: "Their shop, now online." },
-  { icon: "inventory_2", label: "Inventory", desc: "Live stock, always accurate." },
-  { icon: "shopping_bag", label: "Ordering", desc: "Pickup and delivery, built in." },
+const ADD: { icon: string; label: string; desc: ReactNode }[] = [
+  {
+    icon: "auto_awesome",
+    label: "AI",
+    desc: (
+      <>
+        ProductLLM builds the catalog.
+        <br />
+        Zero-effort digitized listings.
+        <br />
+        From shelf to screen in seconds.
+      </>
+    ),
+  },
+  {
+    icon: "storefront",
+    label: "Digital Storefront",
+    desc: (
+      <>
+        Their shop, now online.
+        <br />
+        Open 24/7 for neighborhood orders.
+        <br />
+        Modern shopping, locally fulfilled.
+      </>
+    ),
+  },
+  {
+    icon: "inventory_2",
+    label: "Inventory",
+    desc: (
+      <>
+        Live stock, always accurate.
+        <br />
+        Real-time updates, zero cancellations.
+        <br />
+        What they see is exactly what they get.
+      </>
+    ),
+  },
+  {
+    icon: "shopping_bag",
+    label: "Ordering",
+    desc: (
+      <>
+        Pickup and delivery, built in.
+        <br />
+        Flexible choices for every neighbor.
+        <br />
+        Simple checkout, direct to the store.
+      </>
+    ),
+  },
 ];
 
 export function AICommerceExplainer() {
diff --git a/src/components/why-nearle/CommerceEvolution.tsx b/src/components/why-nearle/CommerceEvolution.tsx
index 2e8ee72..4bfb994 100644
--- a/src/components/why-nearle/CommerceEvolution.tsx
+++ b/src/components/why-nearle/CommerceEvolution.tsx
@@ -1,34 +1,67 @@
 "use client";
 
+import { ReactNode } from "react";
 import { motion, useReducedMotion } from "framer-motion";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
 
 const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
 
-const STAGES = [
+const STAGES: { era: string; title: string; desc: ReactNode; icon: string; highlight?: boolean }[] = [
   {
     era: "The corner shop",
     title: "Traditional Retail",
-    desc: "Trust and relationships, built one street at a time.",
+    desc: (
+      <>
+        Trust and relationships, built one street at a time.
+        <br />
+        The heart of the local neighborhood economy.
+        <br />
+        Every customer is known by name, not by ID.
+      </>
+    ),
     icon: "storefront",
   },
   {
     era: "The catalog goes online",
     title: "E-Commerce",
-    desc: "Endless shelves, but the neighborhood disappears.",
+    desc: (
+      <>
+        Endless shelves, but the neighborhood disappears.
+        <br />
+        Convenient searching, but distant shipping times.
+        <br />
+        Algorithms replace genuine community interactions.
+      </>
+    ),
     icon: "shopping_cart",
   },
   {
     era: "Speed at all costs",
     title: "Quick Commerce",
-    desc: "Minutes-fast delivery, powered by dark stores.",
+    desc: (
+      <>
+        Minutes-fast delivery, powered by dark stores.
+        <br />
+        High fees and margin pressure on store owners.
+        <br />
+        Faceless transactions that bypass the community.
+      </>
+    ),
     icon: "bolt",
   },
   {
     era: "The store, upgraded",
     title: "AI Commerce",
-    desc: "Local stores digitized by AI — trust and technology together.",
+    desc: (
+      <>
+        Local stores digitized by AI — trust and technology together.
+        <br />
+        Empowering real owners with bleeding-edge tech.
+        <br />
+        The speed of quick commerce, the soul of local retail.
+      </>
+    ),
     icon: "auto_awesome",
     highlight: true,
   },
diff --git a/src/components/why-nearle/NeighborhoodStores.tsx b/src/components/why-nearle/NeighborhoodStores.tsx
index 05397e2..ee53fa7 100644
--- a/src/components/why-nearle/NeighborhoodStores.tsx
+++ b/src/components/why-nearle/NeighborhoodStores.tsx
@@ -1,25 +1,50 @@
 "use client";
 
+import { ReactNode } from "react";
 import { motion, useReducedMotion } from "framer-motion";
 import { cardReveal, fadeUp, staggerContainer, viewport } from "@/lib/animations";
 
 const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
 
-const CARDS = [
+const CARDS: { img: string; label: string; desc: ReactNode }[] = [
   {
     img: "/trust.svg",
     label: "Trust",
-    desc: "A face the street has known for years.",
+    desc: (
+      <>
+        A face the street has known for years.
+        <br />
+        Generations of families served with care.
+        <br />
+        A relationship built on personal handshake deals.
+      </>
+    ),
   },
   {
     img: "/customers.svg",
     label: "Community",
-    desc: "Regulars who shop where they belong.",
+    desc: (
+      <>
+        Regulars who shop where they belong.
+        <br />
+        Familiar faces making daily connection points.
+        <br />
+        A vibrant local gathering spot for everyone.
+      </>
+    ),
   },
   {
-    img: "/location.svg",
+    img: "/convenience.svg",
     label: "Convenience",
-    desc: "Always minutes from the doorstep.",
+    desc: (
+      <>
+        Always minutes from the doorstep.
+        <br />
+        No long delivery waits, no massive depots.
+        <br />
+        Fulfillment straight from your local corner shop.
+      </>
+    ),
   },
 ];
 
@@ -90,7 +115,7 @@ export function NeighborhoodStores() {
               <p className="relative mt-8 font-display font-black text-[#16001D] leading-tight tracking-tight" style={{ fontSize: "clamp(24px, 2.2vw, 30px)" }}>
                 {card.label}
               </p>
-              <p className="relative mt-2 max-w-[240px] text-[15px] leading-relaxed text-[#5E5866]">
+              <p className="relative mt-2 max-w-[300px] text-[15px] leading-relaxed text-[#5E5866]">
                 {card.desc}
               </p>
             </motion.div>