update privacy policy page
This commit is contained in:
@@ -95,7 +95,7 @@ export function ContactForm() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full max-w-[520px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-7 md:p-10 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
|
||||
<div className="w-full max-w-[660px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
|
||||
{/* Background Accent Mesh */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-2xl" />
|
||||
|
||||
@@ -63,7 +63,7 @@ const BENEFITS = [
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<section className="section bg-white w-full overflow-hidden">
|
||||
<div className="page-container">
|
||||
<div className="mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
|
||||
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
|
||||
<div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
|
||||
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
|
||||
@@ -75,7 +75,7 @@ export function BusinessSection() {
|
||||
* desktop (≥1280px) : 2 col — [left: text + success story] | [right: cards 2×2]
|
||||
*/}
|
||||
<div className="relative grid gap-6 grid-cols-1 md:gap-7
|
||||
xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
|
||||
xl:grid-cols-[420px_1fr] xl:gap-8 xl:items-start">
|
||||
|
||||
{/* ── 1. Left text content (always col-1 row-1) ── */}
|
||||
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
||||
@@ -94,7 +94,7 @@ export function BusinessSection() {
|
||||
<span className="text-primary font-normal">Nearle.</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
|
||||
<p className="max-w-md text-base text-on-surface-variant leading-relaxed">
|
||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||
</p>
|
||||
|
||||
|
||||
@@ -101,31 +101,73 @@ function GrowthPill() {
|
||||
|
||||
function PhoneMapVisual() {
|
||||
return (
|
||||
// Outer wrapper: position anchor for the floating pills (no overflow-hidden here)
|
||||
<div className="relative h-44 w-40">
|
||||
{/* Inner phone frame: overflow-hidden keeps rounded corners clean */}
|
||||
<div className="absolute inset-0 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
|
||||
<div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
|
||||
Search local stores
|
||||
<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 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>
|
||||
|
||||
{[
|
||||
["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" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
|
||||
<div className="absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(#d7c4dd 1px, transparent 1px), linear-gradient(90deg, #d7c4dd 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
|
||||
<MaterialIcon icon="location_on" size={30} className="absolute left-14 top-8 text-primary" />
|
||||
<span className="absolute left-4 top-5 h-2.5 w-2.5 rounded-full bg-primary" />
|
||||
<span className="absolute bottom-4 right-5 h-2.5 w-2.5 rounded-full bg-secondary" />
|
||||
<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 bottom-3 left-5 right-5 rounded-2xl bg-white p-2 shadow-lg">
|
||||
<p className="text-[9px] font-black text-brand-dark">Your Store</p>
|
||||
<p className="text-[7px] font-bold text-on-surface-variant">Open nearby</p>
|
||||
<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)]">
|
||||
Shop
|
||||
</div>
|
||||
</div>
|
||||
{/* Pills: outside overflow-hidden so they float beyond the phone frame */}
|
||||
<span className="absolute -left-3 top-16 z-10 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||
Offers
|
||||
</span>
|
||||
<span className="absolute -right-3 top-24 z-10 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||
Shop
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -149,9 +191,8 @@ function StepVisual({ type }: { type: string }) {
|
||||
}
|
||||
|
||||
if (type === "phone") {
|
||||
// Center the phone so the floating pills don't reach the card edges
|
||||
return (
|
||||
<div className="flex h-full items-end justify-center pb-2">
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<PhoneMapVisual />
|
||||
</div>
|
||||
);
|
||||
@@ -232,7 +273,7 @@ export function HowItWorks() {
|
||||
</div>
|
||||
|
||||
{/* CARDS SECTION */}
|
||||
<div className="page-container">
|
||||
<div className="mx-auto w-full max-w-[2200px] px-6 lg:px-10 xl:px-12">
|
||||
<div className="mt-10 text-center md:mt-14 xl:mt-10">
|
||||
<span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
|
||||
How It Works
|
||||
@@ -265,7 +306,7 @@ export function HowItWorks() {
|
||||
{step.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto h-48 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 lg:h-52">
|
||||
<div className={`relative z-0 mt-auto w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 ${step.visual === "phone" ? "h-64 lg:h-72" : "h-48 lg:h-52"}`}>
|
||||
<StepVisual type={step.visual} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -14,16 +14,16 @@ const COMPANY = [
|
||||
];
|
||||
|
||||
const PARTNERSHIPS = [
|
||||
{ label: "Merchant Partner", href: "/businesses" },
|
||||
{ label: "Delivery Partner", href: "#" },
|
||||
{ label: "Direct to Customer Brands", href: "#" },
|
||||
{ label: "Merchant Partner", href: "/merchants" },
|
||||
{ label: "Delivery Partner", href: "/delivery-partners" },
|
||||
{ label: "Direct to Customer Brands", href: "/brands" },
|
||||
// { label: "Local Real Estate", href: "#" },
|
||||
];
|
||||
|
||||
const LEGAL = [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
// { label: "Sitemap", href: "#" },
|
||||
];
|
||||
|
||||
@@ -54,7 +54,7 @@ export function PremiumFooter() {
|
||||
|
||||
<div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
|
||||
<a
|
||||
href="https://www.facebook.com/"
|
||||
href="https://www.facebook.com/nearledigital"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Facebook"
|
||||
@@ -64,7 +64,7 @@ export function PremiumFooter() {
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.instagram.com/"
|
||||
href="https://www.instagram.com/nearledigital/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
@@ -191,15 +191,15 @@ export function PremiumFooter() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
<Link href="/privacy" className="transition-colors hover:text-white">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
<Link href="/terms" className="transition-colors hover:text-white">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
<Link href="/contact" className="transition-colors hover:text-white">
|
||||
Help Center
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,8 @@ export function PremiumNavbar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
|
||||
// <header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
|
||||
<header className="sticky top-0 z-50 w-full bg-[#83429f] border-b border-white/10 text-white">
|
||||
<div className="relative mx-auto flex h-16 w-full max-w-[1600px] items-center px-6 md:h-20 md:px-10 xl:px-16">
|
||||
{/* Logo - Left */}
|
||||
<Link
|
||||
|
||||
57
src/components/ui/FAQAccordion.tsx
Normal file
57
src/components/ui/FAQAccordion.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { MaterialIcon } from "./MaterialIcon";
|
||||
|
||||
export type FAQItem = {
|
||||
question: string;
|
||||
answer: string;
|
||||
};
|
||||
|
||||
type FAQAccordionProps = {
|
||||
items: FAQItem[];
|
||||
};
|
||||
|
||||
export function FAQAccordion({ items }: FAQAccordionProps) {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-2xl border border-[#6330D6]/10 bg-white overflow-hidden shadow-[0_2px_12px_rgba(22,0,29,0.04)] transition-shadow hover:shadow-[0_4px_18px_rgba(22,0,29,0.07)]"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||||
className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left"
|
||||
aria-expanded={openIndex === index}
|
||||
>
|
||||
<span className="text-sm md:text-base font-black text-[#16001D] leading-snug">
|
||||
{item.question}
|
||||
</span>
|
||||
<div
|
||||
className={`flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6] transition-transform duration-300 ${
|
||||
openIndex === index ? "rotate-180" : ""
|
||||
}`}
|
||||
>
|
||||
<MaterialIcon icon="expand_more" size={20} />
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
className={`overflow-hidden transition-all duration-300 ease-in-out ${
|
||||
openIndex === index
|
||||
? "max-h-[500px] opacity-100"
|
||||
: "max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<p className="px-6 pb-5 text-sm md:text-base text-[#5E5866] leading-relaxed border-t border-[#6330D6]/5 pt-4">
|
||||
{item.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user