92 lines
4.0 KiB
TypeScript
92 lines
4.0 KiB
TypeScript
import Image from "next/image";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const STEPS = [
|
|
{
|
|
num: "01",
|
|
title: "Choose Your Area",
|
|
desc: "See stores available around your neighbourhood.",
|
|
icon: "location_on",
|
|
color: "bg-primary/5 text-primary border-primary/10",
|
|
image: "/images/nearle-redesign/choose-area.webp",
|
|
alt: "Hand holding a smartphone with a local map and purple location pins",
|
|
},
|
|
{
|
|
num: "02",
|
|
title: "Pick Your Favourite Store",
|
|
desc: "Browse groceries, medicines, and daily essentials nearby.",
|
|
icon: "storefront",
|
|
color: "bg-secondary/5 text-secondary border-secondary/10",
|
|
image: "/images/nearle-redesign/pick-store.webp",
|
|
alt: "Customer selecting groceries from a nearby store shelf",
|
|
},
|
|
{
|
|
num: "03",
|
|
title: "Place Order & Get Delivery",
|
|
desc: "Order easily and get swift delivery from local partners.",
|
|
icon: "local_shipping",
|
|
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
|
|
image: "/images/nearle-redesign/delivery-doorstep.webp",
|
|
alt: "Nearle delivery partner handing a grocery bag to a customer",
|
|
},
|
|
];
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section className="section bg-white w-full overflow-hidden">
|
|
<div className="page-container">
|
|
{/* Header Section */}
|
|
<div className="text-center mb-10 md:mb-14">
|
|
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
|
|
Simple Process
|
|
</span>
|
|
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
|
|
From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Steps Layout - Timeline style */}
|
|
<div className="relative mt-8 md:mt-10">
|
|
{/* Connecting Line (Desktop Only) */}
|
|
<div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 relative z-10">
|
|
{STEPS.map((step) => (
|
|
<div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
|
|
{/* Icon Container with watermark number */}
|
|
<div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-white border border-primary/10 text-primary shadow-sm mb-6 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
|
|
<MaterialIcon icon={step.icon} size={32} />
|
|
<span className="absolute -top-3.5 -right-3.5 w-9 h-9 rounded-full bg-primary text-white font-display font-black text-sm flex items-center justify-center shadow-md">
|
|
{step.num}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex w-full max-w-md flex-col items-center gap-5 sm:flex-row sm:text-left lg:items-start">
|
|
<div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)] ring-1 ring-primary/10">
|
|
<Image
|
|
src={step.image}
|
|
alt={step.alt}
|
|
fill
|
|
sizes="128px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display text-2xl md:text-[28px] font-black text-brand-dark mb-3 leading-tight">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
|
|
{step.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|