207 lines
9.3 KiB
TypeScript
207 lines
9.3 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
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="pt-4 md:pt-5 lg:pt-6 pb-2 md:pb-3 lg:pb-4 relative">
|
|
{/* Scoped CSS styles for precise layout enforcement */}
|
|
<style>{`
|
|
@media (min-width: 901px) {
|
|
.custom-care-grid {
|
|
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
|
|
gap: 56px !important;
|
|
width: min(1360px, 100%) !important;
|
|
}
|
|
.custom-care-visual {
|
|
max-width: 530px !important;
|
|
height: 580px !important;
|
|
}
|
|
.custom-care-card {
|
|
min-height: 580px !important;
|
|
padding: 60px !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
.custom-care-grid {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 40px !important;
|
|
width: 100% !important;
|
|
}
|
|
.custom-care-visual {
|
|
max-width: 420px !important;
|
|
height: 460px !important;
|
|
}
|
|
.custom-care-card {
|
|
min-height: auto !important;
|
|
padding: 36px 24px !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
|
|
{/* 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="custom-care-grid mx-auto grid items-center">
|
|
|
|
{/* Left Column: Visual Storytelling */}
|
|
<div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border border-outline-variant/15 bg-slate-100 shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10 overflow-hidden">
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* Main Store/Product Card (Middle floating) */}
|
|
<div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-4.5 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>
|
|
<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">4.9</span>
|
|
<span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Right Column: Dark Feature Panel */}
|
|
<div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
|
|
{/* Internal ambient glows */}
|
|
<div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
|
|
|
|
<div className="relative z-10">
|
|
<span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
|
|
Community & Trust
|
|
</span>
|
|
|
|
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-white mt-6 mb-8 leading-tight tracking-tight">
|
|
Built Around Your<br />
|
|
<span className="text-brand-accent font-black">Neighbourhood</span>
|
|
</h3>
|
|
|
|
<p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
|
|
Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
|
|
</p>
|
|
|
|
{/* Features List with vertical connector line */}
|
|
<div className="relative space-y-8">
|
|
|
|
{/* Vertical connector line */}
|
|
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
|
|
|
|
{FEATURES.map((item) => (
|
|
<div key={item.title} className="flex gap-5 group relative z-10">
|
|
|
|
{/* Icon circle */}
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
|
|
<MaterialIcon
|
|
icon={item.icon}
|
|
className="text-brand-dark"
|
|
size={22}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-lg md:text-xl font-black text-white group-hover:text-brand-accent transition-colors">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Divider Line above CTA Area */}
|
|
<hr className="border-t border-white/10 my-8 relative z-10" />
|
|
|
|
{/* Onboarding Call to Action */}
|
|
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
|
|
<Link
|
|
href="/#download"
|
|
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark 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-white hover:text-brand-accent font-bold 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>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|