255 lines
14 KiB
TypeScript
255 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
import { fadeUp, slideInLeft, staggerContainer, viewport } from "@/lib/animations";
|
|
|
|
const FEATURES = [
|
|
{
|
|
title: "Trusted Nearby Stores",
|
|
icon: "store",
|
|
desc: "Connect directly with the local merchants you already know.",
|
|
},
|
|
{
|
|
title: "Short-Distance Delivery",
|
|
icon: "local_shipping",
|
|
desc: "Delivered quickly from nearby shops to keep items fresh.",
|
|
},
|
|
{
|
|
title: "Easy Reorders",
|
|
icon: "replay",
|
|
desc: "Save your favourite stores and reorder in seconds.",
|
|
},
|
|
{
|
|
title: "Support Local Businesses",
|
|
icon: "favorite",
|
|
desc: "Help local neighbourhood stores thrive digitally.",
|
|
},
|
|
];
|
|
|
|
export function HyperlocalFeatures() {
|
|
return (
|
|
<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="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 */}
|
|
<motion.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)]"
|
|
variants={slideInLeft}
|
|
initial="hidden"
|
|
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>
|
|
|
|
</motion.div>
|
|
|
|
{/* Right Column: Feature Panel directly on page background */}
|
|
<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]">
|
|
<motion.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"
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
Community & Trust
|
|
</motion.span>
|
|
|
|
<motion.h2
|
|
className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight"
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
Built Around Your<br />
|
|
<span className="text-primary font-black">Neighbourhood</span>
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
|
|
</motion.p>
|
|
|
|
{/* Features List with vertical connector line */}
|
|
<motion.div
|
|
className="relative space-y-8"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
{/* Vertical connector line */}
|
|
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />
|
|
|
|
{FEATURES.map((item) => (
|
|
<motion.div key={item.title} variants={fadeUp} className="flex gap-5 group relative z-10">
|
|
|
|
{/* Icon circle */}
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
|
|
<MaterialIcon
|
|
icon={item.icon}
|
|
className="text-white"
|
|
size={22}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Divider Line above CTA Area */}
|
|
<hr className="border-t border-[#EEE7F4] my-6 relative z-10" />
|
|
|
|
{/* Onboarding Call to Action */}
|
|
<motion.div
|
|
className="mt-2 flex flex-wrap gap-6 items-center relative z-10"
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
<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"
|
|
>
|
|
Get Nearle App
|
|
</Link>
|
|
<Link
|
|
href="/businesses"
|
|
className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
|
|
>
|
|
<span>Learn How to Partner</span>
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
size={16}
|
|
className="transition-transform group-hover:translate-x-1"
|
|
/>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|