Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Aravind
2026-06-23 15:05:50 +05:30
parent 9ea89c317f
commit 6cb34f5b8f
17 changed files with 554 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/home/HyperlocalFeatures.tsx
View File

@@ -1,27 +1,33 @@
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [
{
title: "Verified Community Partners",
icon: "verified_user",
desc: "Every merchant on Nearle is manually verified for food hygiene, service quality, and local licensing.",
title: "Trusted Nearby Stores",
icon: "store",
desc: "Connect directly with the local merchants you know and shop from regularly.",
},
{
title: "Eco-Friendly 2KM Logistics",
icon: "electric_moped",
desc: "By capping deliveries at 2km, we run a fast, eco-friendly moped fleet that reduces emissions and saves fuel.",
title: "Short-Distance Local Delivery",
icon: "local_shipping",
desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
},
{
title: "Exclusive Society Discounting",
icon: "local_activity",
desc: "We coordinate with housing societies to negotiate collective discount rates and free scheduled delivery runs.",
title: "Easy Reorders",
icon: "replay",
desc: "Save your favourite stores and reorder your weekly essentials in seconds.",
},
{
title: "Support Local Businesses",
icon: "favorite",
desc: "Help neighbourhood stores thrive and remain competitive in a digital world.",
},
];
export function HyperlocalFeatures() {
return (
<section className="bg-background py-28 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
{/* Scoped CSS styles for precise layout enforcement */}
<style>{`
@media (min-width: 901px) {
@@ -64,80 +70,85 @@ export function HyperlocalFeatures() {
<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-2 border-white/90 bg-gradient-to-br from-[#fdfbf7] to-[#f5f0e6] shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10">
<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">
{/* Grocery image inside the lower area (occupies exactly 62% height) */}
<div className="absolute inset-x-0 bottom-0 h-[62%] w-full overflow-hidden select-none pointer-events-none">
{/* 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="Fresh groceries and goods delivered at home"
alt="Local store background"
fill
sizes="(max-width: 900px) 420px, 470px"
className="object-cover object-bottom block transition-transform duration-500 hover:scale-[1.02]"
className="object-cover"
priority
/>
</div>
{/* Eco-Friendly floating pill */}
<div className="absolute bottom-[22px] left-[22px] right-[22px] bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/15 shadow-xl z-20">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-brand-accent/15 flex items-center justify-center flex-shrink-0">
<MaterialIcon icon="eco" className="text-brand-accent" size={20} />
</div>
<div>
<h4 className="text-[13px] font-black text-brand-dark leading-tight">100% Eco-Friendly</h4>
<p className="text-[10px] text-on-surface-variant font-bold mt-0.5 leading-none">Reducing neighbor carbon footprint</p>
{/* 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>
{/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */}
<div className="absolute top-[40px] -left-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
<MaterialIcon icon="location_on" className="text-brand-accent" size={14} />
{/* 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>
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">2KM Local Delivery</span>
</div>
<div className="absolute top-[144px] -right-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
<MaterialIcon icon="verified" className="text-brand-accent" size={14} />
<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>
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">Verified Partners</span>
</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 (subtle) */}
{/* 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-label-sm 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">
Care & Quality
<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-display mt-6 mb-8 leading-tight tracking-tight">
Relax at Home,<br />
<span className="text-brand-accent font-black">We Care.</span>
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 connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards.
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 (orange low-opacity) */}
{/* 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">
{/* Orange icon circle */}
{/* 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}
@@ -150,7 +161,7 @@ export function HyperlocalFeatures() {
<h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
{item.title}
</h4>
<p className="text-body-md text-white/60 mt-1 leading-relaxed">
<p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
{item.desc}
</p>
</div>
@@ -163,23 +174,23 @@ export function HyperlocalFeatures() {
{/* Onboarding Call to Action */}
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
<a
href="#download"
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
<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
</a>
<a
href="#"
className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2"
</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"
>
Partner Code of Ethics
<span>Learn How to Partner</span>
<MaterialIcon
icon="arrow_forward"
size={16}
className="transition-transform group-hover:translate-x-1"
/>
</a>
</Link>
</div>
</div>