update privacy policy page
This commit is contained in:
@@ -24,104 +24,72 @@ const HERO_BENEFITS = [
|
||||
|
||||
function PhoneMapVisual() {
|
||||
return (
|
||||
// Single phone frame — no outer wrapper needed, no floating pills
|
||||
<div
|
||||
className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
|
||||
style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
|
||||
>
|
||||
{/* Status bar */}
|
||||
<div className="flex items-center justify-between px-3 pt-2.5 pb-1">
|
||||
<span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[4, 6, 8, 10].map((h) => (
|
||||
<span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex h-full w-full items-center justify-center">
|
||||
<div className="absolute bottom-1 h-6 w-36 rounded-full bg-[#16001D]/18 blur-xl" />
|
||||
<div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[264px] 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-[#16001D]/55">
|
||||
<span>9:41</span>
|
||||
<span className="h-1.5 w-5 rounded-full bg-[#16001D]/40" />
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
|
||||
<svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
|
||||
<circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
|
||||
<path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
|
||||
</svg>
|
||||
<span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
|
||||
<svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
|
||||
<path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Map */}
|
||||
<div
|
||||
className="relative mx-2.5 overflow-hidden rounded-2xl"
|
||||
style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
|
||||
>
|
||||
{/* Street grid */}
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
|
||||
backgroundSize: "16px 16px",
|
||||
}} />
|
||||
{/* Subtle glow under main pin */}
|
||||
<div className="absolute rounded-full bg-[#6330D6]/10"
|
||||
style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
|
||||
{[
|
||||
["left-[17%] top-[30%]", "bg-[#6330D6]"],
|
||||
["right-[16%] top-[28%]", "bg-[#006D37]"],
|
||||
["left-[20%] bottom-[33%]", "bg-[#006D37]"],
|
||||
["right-[18%] bottom-[32%]", "bg-[#6330D6]"],
|
||||
["right-[35%] top-[20%]", "bg-[#6330D6]"],
|
||||
].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" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Large center pin */}
|
||||
<svg className="absolute" aria-hidden="true"
|
||||
style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
|
||||
width="24" height="30" viewBox="0 0 16 20" fill="none">
|
||||
<path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
|
||||
<circle cx="8" cy="8.6" r="3.2" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — top-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — upper-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — lower-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — lower-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
</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-[#6330D6]/18 blur-md" />
|
||||
<div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#6330D6)] shadow-[0_14px_28px_rgba(99,48,214,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>
|
||||
|
||||
{/* Store preview card — bottom sheet inside phone */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
|
||||
{/* Store thumbnail */}
|
||||
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
|
||||
style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
|
||||
<svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
|
||||
<path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
|
||||
<rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
|
||||
<div className="mt-1 flex items-center gap-1">
|
||||
<span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">4.8</span>
|
||||
<span className="text-[7.5px] leading-none">⭐</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
|
||||
<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-[#16001D]">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-[#5E5866]">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
|
||||
<path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<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">
|
||||
Offers
|
||||
</div>
|
||||
<div className="absolute -right-7 top-[43%] z-40 rounded-full bg-[#6330D6] px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(99,48,214,0.24)]">
|
||||
Shop
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -139,8 +107,9 @@ export default function BusinessesPage() {
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
|
||||
{/* TWO-COLUMN GRID */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
|
||||
|
||||
<div className="border-b border-[#6330D6]/10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
|
||||
|
||||
{/* Left Column: Copy & Actions */}
|
||||
<div className="flex flex-col text-left max-w-xl">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
|
||||
@@ -184,16 +153,19 @@ export default function BusinessesPage() {
|
||||
isPhoneCenter={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM HERO BENEFITS */}
|
||||
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<FeatureStatsRow items={HERO_BENEFITS} />
|
||||
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
|
||||
<FeatureStatsRow items={HERO_BENEFITS} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<div className="max-w-2xl text-left">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
|
||||
Together, we grow
|
||||
@@ -279,7 +251,7 @@ export default function BusinessesPage() {
|
||||
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
|
||||
<div className="relative z-0 mt-auto h-[270px] lg:h-[290px] flex items-center justify-center">
|
||||
<PhoneMapVisual />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user