update privacy policy page

src/components/home/HyperlocalFeatures.tsx

@@ -27,72 +27,123 @@ const FEATURES = [
 
 export function HyperlocalFeatures() {
   return (
-    <section className="section bg-white w-full relative">
+    <section className="relative bg-white w-full py-1 lg:py-1">
       {/* Subtle background radial glows */}
       <div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
       <div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
 
       {/* Inner container */}
-      <div className="page-container relative z-10">
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-center">
+     <div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6"> 
+        <div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-center">
           
           {/* Left Column: Visual Storytelling */}
-          <div className="w-full max-w-[530px] justify-self-center relative rounded-[2rem] border border-outline-variant/15 bg-slate-100/50 z-10 overflow-hidden aspect-[10/11] lg:h-[580px]">
-            
-            {/* Main Background Cover Image */}
-            <div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
-              <Image
-                src="/images/cat-daily-essentials.png"
-                alt="Local store background"
-                fill
-                sizes="(max-width: 900px) 420px, 470px"
-                className="object-cover"
-                priority
-              />
+          <div className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]">
+            <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>
 
-            {/* Banner Label at Top */}
-            <div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
-              <span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
-              <h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
+            <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>
 
-            {/* Main Store/Product Card (Middle floating) */}
-            <div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-[18px] border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
-              <div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
-                <Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
+            <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="flex-1 min-w-0">
-                <h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
-                <p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
-                <div className="flex items-center gap-1 mt-1.5">
-                  <MaterialIcon icon="star" size={14} className="text-amber-500" />
-                  <span className="text-xs font-bold text-brand-dark">Top Rated</span>
-                  <span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
+            ))}
+
+            <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.png" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h5 className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</h5>
+                  <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>
 
-            {/* Small Delivery Status Card (Bottom floating) */}
-            <div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
-              <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
-                <MaterialIcon icon="check" size={16} className="text-white font-bold" />
+            <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-xs md:text-sm font-black">Order Confirmed</p>
-                <p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
+                <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>
 
           </div>
 
           {/* Right Column: Feature Panel directly on page background */}
-          <div className="w-full py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
+          <div className="w-full py-6 md:py-8 lg:py-10 pl-4 md:pl-8 lg:pl-12 xl:pl-44 relative z-10 text-[#16001D]">
             <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
               Community & Trust
             </span>
             
-            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-6 mb-8 leading-tight tracking-tight">
+            <h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight">
               Built Around Your<br />
               <span className="text-primary font-black">Neighbourhood</span>
             </h3>
@@ -132,10 +183,10 @@ export function HyperlocalFeatures() {
             </div>
 
             {/* Divider Line above CTA Area */}
-            <hr className="border-t border-[#EEE7F4] my-8 relative z-10" />
+            <hr className="border-t border-[#EEE7F4] my-6 relative z-10" />
 
             {/* Onboarding Call to Action */}
-            <div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
+            <div className="mt-2 flex flex-wrap gap-6 items-center relative z-10">
               <Link
                 href="/#download"
                 className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
@@ -162,4 +213,3 @@ export function HyperlocalFeatures() {
     </section>
   );
 }
-