how to works image fix
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user