how to works image fix
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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