From 08a44524fdb03be1cdc05be2bb7e91f3916f5116 Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Thu, 2 Jul 2026 10:43:29 +0530
Subject: [PATCH] how to works image fix

---
 src/components/home/BusinessSection.tsx    |  87 +++++++++++--
 src/components/home/HowItWorks.tsx         | 143 +++++++++++++--------
 src/components/home/HyperlocalFeatures.tsx | 105 ++-------------
 3 files changed, 179 insertions(+), 156 deletions(-)

diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx
index 7b136e0..eab81dc 100644
--- a/src/components/home/BusinessSection.tsx
+++ b/src/components/home/BusinessSection.tsx
@@ -64,6 +64,73 @@ const BENEFITS = [
   },
 ];
 
+function LocalDiscoveryVisual() {
+  return (
+    <div className="relative h-[260px] w-full overflow-hidden bg-[#FAF8FC] sm:h-[300px]">
+      {/* Map Background (SVG) */}
+      <svg className="absolute inset-0 h-full w-full opacity-[0.85]" viewBox="0 0 400 300" fill="none" preserveAspectRatio="xMidYMid slice">
+        <path d="M-20 50C30 40 100 45 150 70C220 105 280 95 380 60" stroke="#E6DFF0" strokeWidth="8" strokeLinecap="round" />
+        <path d="M-10 220C50 190 120 200 180 230C250 260 310 255 400 220" stroke="#DDF0E3" strokeWidth="12" strokeLinecap="round" />
+        <path d="M50 -20L80 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
+        <path d="M180 -20L150 320" stroke="#E5DEEF" strokeWidth="6" strokeLinecap="round" />
+        <path d="M300 -20L270 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
+        <path d="M-20 100H420" stroke="#E8E1F0" strokeWidth="6" strokeLinecap="round" />
+        <path d="M-20 180H420" stroke="#E2DAEC" strokeWidth="6" strokeLinecap="round" />
+      </svg>
+
+      {/* Halos around main pin */}
+      <div className="absolute left-[35%] top-[45%] h-44 w-44 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-xl" />
+      <div className="absolute left-[35%] top-[45%] h-28 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 animate-pulse blur-md" />
+
+      {/* Main Pin */}
+      <div className="absolute left-[35%] top-[45%] z-20 -translate-x-1/2 -translate-y-1/2 drop-shadow-xl transition-transform hover:scale-110">
+        <div className="relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] bg-primary">
+          <div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-inner" />
+        </div>
+      </div>
+
+      {/* Other Pins */}
+      {[
+        ["left-[15%] top-[25%]", "bg-primary", "scale-75"],
+        ["left-[50%] top-[15%]", "bg-primary", "scale-[0.65]"],
+        ["left-[22%] top-[68%]", "bg-primary", "scale-[0.70]"],
+      ].map(([pos, color, scale], i) => (
+        <div key={i} className={`absolute ${pos} ${scale} z-10 drop-shadow-md`}>
+          <div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color}`}>
+            <div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+          </div>
+        </div>
+      ))}
+
+      {/* Store Card (Right Side) */}
+      <div className="absolute bottom-4 right-4 z-30 w-[200px] overflow-hidden rounded-[1.25rem] bg-white shadow-[0_12px_32px_rgba(22,0,29,0.12)] border border-primary/10 sm:bottom-6 sm:right-6 sm:w-[240px]">
+        <div className="relative h-[90px] w-full bg-brand-accent-light sm:h-[110px]">
+          <Image src="/images/nearle-merchant/success-owner.webp" alt="Owner" fill className="object-cover" />
+        </div>
+        <div className="p-3.5 sm:p-4">
+          <h4 className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</h4>
+          <p className="mt-0.5 truncate text-[10px] font-medium text-on-surface-variant sm:text-[11px]">Gandhi Nagar, West Delhi</p>
+          
+          <div className="mt-2.5 flex gap-1.5">
+            <span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Groceries</span>
+            <span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Essentials</span>
+          </div>
+
+          <div className="mt-3 flex items-center gap-1.5 text-[10px] font-bold sm:text-[11px]">
+            <span className="text-[#006D37]">Open</span>
+            <span className="text-on-surface-variant/40">•</span>
+            <span className="text-on-surface-variant">Closes 10:00 PM</span>
+          </div>
+
+          <button className="mt-3.5 w-full rounded-xl bg-primary py-2 text-[11px] font-black text-white transition-colors hover:bg-primary-container sm:py-2.5 sm:text-xs">
+            View Store
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function BusinessSection() {
   return (
     <section className="section bg-white w-full overflow-hidden">
@@ -181,14 +248,18 @@ export function BusinessSection() {
                     </div>
                   </div>
                   <div className="mt-auto w-full overflow-hidden">
-                    <Image
-                      src={feature.visual}
-                      alt={feature.alt}
-                      width={900}
-                      height={560}
-                      sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
-                      className="block h-auto w-full object-cover"
-                    />
+                    {feature.title === "Local Discovery" ? (
+                      <LocalDiscoveryVisual />
+                    ) : (
+                      <Image
+                        src={feature.visual}
+                        alt={feature.alt}
+                        width={900}
+                        height={560}
+                        sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
+                        className="block h-auto w-full object-cover"
+                      />
+                    )}
                   </div>
                 </motion.article>
               ))}
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
index 5ca179d..608034b 100644
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -112,69 +112,110 @@ function GrowthPill() {
 function PhoneMapVisual() {
   return (
     <div className="relative flex h-full w-full items-center justify-center">
-      <div className="absolute bottom-1 h-6 w-36 rounded-full bg-brand-dark/18 blur-xl" />
-      <div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[256px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
-        <div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
-          <div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
-          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-brand-dark/55">
-            <span>9:41</span>
-            <span className="h-1.5 w-5 rounded-full bg-brand-dark/40" />
-          </div>
+      <div className="absolute bottom-1 h-6 w-32 rounded-full bg-brand-dark/20 blur-xl" />
+      
+      {/* REALISTIC MOBILE DEVICE FRAME */}
+      <div className="relative aspect-[140/280] h-[95%] min-h-[240px] max-h-[280px] rounded-[24px] bg-[linear-gradient(145deg,#d1d5db_0%,#4b5563_15%,#111827_85%,#4b5563_100%)] p-[2px] shadow-[0_20px_50px_rgba(22,0,29,0.25),0_0_0_1px_rgba(0,0,0,0.1),inset_0_0_2px_rgba(255,255,255,0.4)]">
+        
+        {/* Hardware Buttons */}
+        <div className="absolute -left-[2px] top-[18%] h-4 w-[2px] rounded-l bg-gradient-to-r from-[#9ca3af] to-[#374151] shadow-sm" />
+        <div className="absolute -left-[2px] top-[26%] h-7 w-[2px] rounded-l bg-gradient-to-r from-[#9ca3af] to-[#374151] shadow-sm" />
+        <div className="absolute -left-[2px] top-[34%] h-7 w-[2px] rounded-l bg-gradient-to-r from-[#9ca3af] to-[#374151] shadow-sm" />
+        <div className="absolute -right-[2px] top-[28%] h-9 w-[2px] rounded-r bg-gradient-to-l from-[#9ca3af] to-[#374151] shadow-sm" />
 
-          <div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
-            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
-              <rect width="140" height="255" fill="#FAF8FC" />
-              <path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
-              <path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
-              <path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
-              <path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
-              <path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
-              <path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
-              <path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
-              <path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
-              <path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
-              <path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
-              <path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
-            </svg>
+        {/* Inner Black Bezel */}
+        <div className="relative h-full w-full overflow-hidden rounded-[22px] bg-black p-[4px] shadow-[inset_0_0_4px_rgba(255,255,255,0.1)]">
+          
+          {/* Inner Screen */}
+          <div className="relative h-full w-full overflow-hidden rounded-[18px] bg-[#FAF8FC] shadow-[inset_0_0_8px_rgba(0,0,0,0.05)]">
+            
+            {/* Dynamic Island */}
+            <div className="absolute left-1/2 top-1.5 z-50 flex h-[12px] w-[38px] -translate-x-1/2 items-center justify-end rounded-full bg-black px-1 shadow-[inset_0_-1px_1px_rgba(255,255,255,0.1)] ring-[0.5px] ring-white/10">
+              <div className="relative h-[6px] w-[6px] overflow-hidden rounded-full bg-[#050515] shadow-[inset_0_0_1px_rgba(255,255,255,0.2)]">
+                <div className="absolute right-0 top-0 h-[3px] w-[3px] rounded-full bg-blue-400/30 blur-[0.5px]" />
+              </div>
+            </div>
 
-            {[
-              ["left-[17%] top-[30%]", "bg-primary"],
-              ["right-[16%] top-[28%]", "bg-[#006D37]"],
-              ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
-              ["right-[18%] bottom-[32%]", "bg-primary"],
-              ["right-[35%] top-[20%]", "bg-primary"],
-            ].map(([position, color]) => (
-              <div key={position} className={`absolute ${position} z-10`}>
-                <div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
-                  <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+            {/* Status Bar */}
+            <div className="absolute inset-x-0 top-0 z-40 flex items-center justify-between px-3 pt-2 text-[5px] font-black text-brand-dark">
+              <span className="tracking-tighter">9:41</span>
+              <div className="flex items-center gap-[2px] opacity-80">
+                {/* Signal */}
+                <div className="flex items-end gap-[0.5px]">
+                  <div className="h-[3px] w-[1px] rounded-full bg-brand-dark" />
+                  <div className="h-[4px] w-[1px] rounded-full bg-brand-dark" />
+                  <div className="h-[5px] w-[1px] rounded-full bg-brand-dark" />
+                  <div className="h-[6px] w-[1px] rounded-full bg-brand-dark/30" />
+                </div>
+                {/* Wifi */}
+                <svg width="6" height="6" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 21C11.5 21 11.1 20.9 10.7 20.6C8 18.2 4.4 17.5 1.4 18.3C0.8 18.5 0.2 18.1 0 17.5C-0.2 16.9 0.2 16.3 0.8 16.1C4.8 15 9.4 15.9 12.8 18.9C13.2 19.3 13.3 19.9 12.9 20.3C12.7 20.8 12.3 21 12 21Z" />
+                  <path d="M12 16C11.6 16 11.2 15.9 10.9 15.7C5.3 12.2 0.4 14 0.3 14C-0.3 14.2 -0.8 13.9 -0.9 13.3C-1.1 12.7 -0.8 12.2 -0.2 12.1C0.2 11.9 5.9 9.8 12 13.7C12.5 14 12.6 14.6 12.3 15.1C12.2 15.7 12 16 12 16Z" opacity="0.7"/>
+                </svg>
+                {/* Battery */}
+                <div className="relative flex h-[5px] w-[10px] items-center rounded-[1.5px] border-[1px] border-brand-dark/80 p-[0.5px]">
+                  <div className="h-full w-[80%] rounded-[0.5px] bg-brand-dark" />
+                  <div className="absolute -right-[1.5px] top-1/2 h-[2px] w-[1px] -translate-y-1/2 rounded-r-[0.5px] bg-brand-dark/80" />
                 </div>
               </div>
-            ))}
-
-            <div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
-              <div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-primary/18 blur-md" />
-              <div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_14px_28px_rgba(101,20,154,0.30)]">
-                <div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
-              </div>
             </div>
 
-            <div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
-              <p className="truncate text-[9.5px] font-black leading-none text-brand-dark">Your Store</p>
-              <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-on-surface-variant">
-                <span className="inline-flex items-center gap-0.5">
-                  <MaterialIcon icon="star" size={10} fill className="text-amber-500" />
-                  4.8
-                </span>
-                <span className="font-black text-[#006D37]">Open</span>
-                <span>0.8 km</span>
+            {/* Map Visual Content */}
+            <div className="absolute inset-0 top-3 bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
+              <svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
+                <rect width="140" height="255" fill="#FAF8FC" />
+                <path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
+                <path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
+                <path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+                <path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
+                <path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+                <path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
+                <path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
+                <path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
+                <path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
+                <path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
+                <path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
+              </svg>
+
+              {[
+                ["left-[17%] top-[30%]", "bg-primary"],
+                ["right-[16%] top-[28%]", "bg-[#006D37]"],
+                ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
+                ["right-[18%] bottom-[32%]", "bg-primary"],
+                ["right-[35%] top-[20%]", "bg-primary"],
+              ].map(([position, color]) => (
+                <div key={position} className={`absolute ${position} z-10`}>
+                  <div className={`relative h-4 w-4 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_4px_8px_rgba(22,0,29,0.12)]`}>
+                    <div className="absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+                  </div>
+                </div>
+              ))}
+
+              <div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
+                <div className="absolute left-1/2 top-[82%] h-8 w-14 -translate-x-1/2 rounded-full bg-primary/18 blur-sm" />
+                <div className="relative h-12 w-12 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_10px_20px_rgba(101,20,154,0.30)]">
+                  <div className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
+                </div>
+              </div>
+
+              <div className="absolute bottom-2 left-2 right-2 z-30 rounded-xl bg-white/94 p-2 shadow-[0_8px_20px_rgba(22,0,29,0.12)] backdrop-blur">
+                <p className="truncate text-[8.5px] font-black leading-none text-brand-dark">Your Store</p>
+                <div className="mt-1 flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[6.5px] font-bold text-on-surface-variant">
+                  <span className="inline-flex items-center gap-[1.5px]">
+                    <MaterialIcon icon="star" size={8} fill className="text-amber-500" />
+                    4.8
+                  </span>
+                  <span className="font-black text-[#006D37]">Open</span>
+                  <span>0.8 km</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
+        <div className="absolute -left-7 top-[29%] z-40 rounded-full bg-white px-2.5 py-1 text-[8px] font-black text-[#006D37] shadow-[0_8px_16px_rgba(22,0,29,0.12)] ring-1 ring-[#006D37]/10">
           Offers
         </div>
-        <div className="absolute -right-7 top-[43%] z-40 rounded-full bg-primary px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(101,20,154,0.24)]">
+        <div className="absolute -right-6 top-[43%] z-40 rounded-full bg-primary px-2.5 py-1 text-[8px] font-black text-white shadow-[0_8px_16px_rgba(101,20,154,0.20)]">
           Shop
         </div>
       </div>
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx
index 3b04910..421039c 100644
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/src/components/home/HyperlocalFeatures.tsx
@@ -48,103 +48,14 @@ export function HyperlocalFeatures() {
             whileInView="visible"
             viewport={viewport}
           >
-            <div className="absolute inset-0 bg-[radial-gradient(circle_at_52%_42%,rgba(124,58,237,0.12),transparent_34%),linear-gradient(145deg,rgba(255,255,255,0.94),rgba(243,232,246,0.62))]" />
-            <div className="absolute inset-6 rounded-[1.5rem] overflow-hidden bg-white/55 ring-1 ring-white/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
-              <svg
-                className="absolute inset-0 h-full w-full"
-                viewBox="0 0 640 700"
-                fill="none"
-                aria-hidden="true"
-              >
-                <rect width="640" height="700" fill="#FAF8FC" />
-                <path d="M-26 184C70 156 159 154 245 192C328 229 407 229 487 193C563 159 628 153 690 178" stroke="#E2DAE9" strokeWidth="18" strokeLinecap="round" opacity="0.9" />
-                <path d="M-14 520C92 480 181 482 255 524C352 579 440 581 546 531C603 504 654 490 704 496" stroke="#E8E0EF" strokeWidth="24" strokeLinecap="round" opacity="0.8" />
-                <path d="M100 -40L162 742" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
-                <path d="M300 -42L258 744" stroke="#E9E1F0" strokeWidth="10" strokeLinecap="round" />
-                <path d="M510 -30L462 740" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
-                <path d="M-26 84H690" stroke="#EDE7F3" strokeWidth="10" strokeLinecap="round" />
-                <path d="M-26 328H690" stroke="#E1D9E8" strokeWidth="12" strokeLinecap="round" />
-                <path d="M-26 628H690" stroke="#E9E2F0" strokeWidth="10" strokeLinecap="round" />
-                <path d="M-8 680L658 22" stroke="#E7DFEE" strokeWidth="10" strokeLinecap="round" />
-                <path d="M52 736L700 240" stroke="#EEE8F4" strokeWidth="8" strokeLinecap="round" />
-                <path d="M-62 296L614 -30" stroke="#E9E3F0" strokeWidth="10" strokeLinecap="round" />
-                <path d="M74 246L197 182L350 238L502 166L615 218" stroke="#D9EFDF" strokeWidth="46" strokeLinecap="round" opacity="0.45" />
-                <path d="M30 594L156 546L272 594L389 532L540 576" stroke="#DDF2E3" strokeWidth="50" strokeLinecap="round" opacity="0.42" />
-                <path d="M210 470C254 421 285 375 320 350C369 316 422 302 484 268" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.58" />
-                <path d="M320 350C271 319 229 293 174 286C123 279 89 252 55 225" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
-                <path d="M320 350C377 385 431 429 500 430" stroke="#006D37" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.42" />
-                <path d="M320 350C335 281 367 227 430 190" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
-              </svg>
-
-              <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.52),rgba(255,255,255,0.14)_44%,rgba(255,255,255,0.48))]" />
-            </div>
-
-            <div className="absolute top-[22%] left-[14%] z-50 rounded-full bg-white/88 backdrop-blur-xl px-4 py-3 shadow-[0_16px_42px_rgba(23,0,31,0.10)] border border-white/80 flex items-center gap-2">
-              <MaterialIcon icon="sell" size={18} className="text-[#006D37]" />
-              <span className="text-xs md:text-sm font-black text-[#006D37]">Offers Nearby</span>
-            </div>
-
-            <div className="absolute top-[33%] left-[12%] z-50 rounded-full bg-white/86 backdrop-blur-xl px-4 py-3 shadow-[0_14px_38px_rgba(23,0,31,0.09)] border border-white/80 flex items-center gap-2">
-              <MaterialIcon icon="schedule" size={18} className="text-primary" />
-              <span className="text-xs md:text-sm font-black text-primary">Open Now</span>
-            </div>
-
-            {[
-              ["left-[31%] top-[24%]", "bg-primary", "scale-90"],
-              ["right-[20%] top-[22%]", "bg-[#006D37]", "scale-100"],
-              ["right-[13%] top-[39%]", "bg-primary", "scale-90"],
-              ["left-[20%] top-[52%]", "bg-primary", "scale-80"],
-              ["left-[37%] bottom-[31%]", "bg-[#006D37]", "scale-95"],
-              ["right-[31%] top-[33%]", "bg-primary", "scale-100"],
-            ].map(([position, color, scale]) => (
-              <div key={position} className={`absolute ${position} ${scale} z-20`}>
-                <div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_14px_28px_rgba(101,20,154,0.22)]`}>
-                  <div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/92" />
-                </div>
-              </div>
-            ))}
-
-            <div className="absolute left-1/2 top-[41%] z-30 -translate-x-1/2 -translate-y-1/2">
-              <div className="absolute left-1/2 top-[78%] h-20 w-36 -translate-x-1/2 rounded-full bg-primary/15 blur-md" />
-              <div className="absolute left-1/2 top-[87%] h-8 w-24 -translate-x-1/2 rounded-full bg-primary/30" />
-              <div className="relative h-28 w-28 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_30px_60px_rgba(101,20,154,0.30)] md:h-32 md:w-32">
-                <div className="absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/94 shadow-inner md:h-14 md:w-14" />
-              </div>
-            </div>
-
-            <div className="absolute left-[30%] right-[4%] top-[49%] z-40 rounded-[1.35rem] border border-white/80 bg-white/88 p-2.5 shadow-[0_24px_70px_rgba(23,0,31,0.16)] backdrop-blur-xl md:left-[45%] md:right-[5%] md:top-[52%] md:p-4">
-              <div className="flex items-center gap-3">
-                <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-brand-accent/40 ring-1 ring-outline-variant/20 md:h-20 md:w-20">
-                  <Image src="/images/cat-daily-essentials.webp" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</div>
-                  <p className="mt-0.5 truncate text-xs font-medium text-on-surface-variant md:text-sm">Fresh Harvest & Daily Needs</p>
-                  <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs md:text-sm">
-                    <span className="inline-flex items-center gap-1 font-bold text-on-surface-variant">
-                      <MaterialIcon icon="star" size={15} fill className="text-amber-500" />
-                      4.8
-                    </span>
-                    <span className="inline-flex items-center gap-1 font-black text-[#006D37]">
-                      <span className="h-2 w-2 rounded-full bg-[#16A34A]" />
-                      Open Now
-                    </span>
-                    <span className="font-bold text-on-surface-variant">0.8 km away</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute bottom-[8%] left-[7%] right-[7%] z-40 flex items-center gap-4 rounded-[1.35rem] border border-white/15 bg-[linear-gradient(135deg,#7C3AED,#65149A)] px-5 py-4 text-white shadow-[0_24px_60px_rgba(101,20,154,0.28)]">
-              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white shadow-[0_10px_24px_rgba(23,0,31,0.12)]">
-                <MaterialIcon icon="check" size={24} className="text-primary" />
-              </div>
-              <div className="min-w-0">
-                <p className="text-sm font-black md:text-base">Order Confirmed</p>
-                <p className="mt-0.5 text-xs font-medium text-white/82 md:text-sm">Your local store is preparing your order</p>
-              </div>
-            </div>
-
+            <Image
+              src="/map1.webp"
+              alt="Map Background"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+              priority
+            />
           </motion.div>
 
           {/* Right Column: Feature Panel directly on page background */}