73 lines
3.0 KiB
TypeScript
73 lines
3.0 KiB
TypeScript
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",
|
|
},
|
|
{
|
|
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",
|
|
},
|
|
{
|
|
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",
|
|
},
|
|
];
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
|
|
<div className="max-w-container-max mx-auto">
|
|
{/* Header Section */}
|
|
<div className="text-center mb-8 md:mb-10">
|
|
<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-12">
|
|
{/* 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-12 lg:gap-16 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>
|
|
|
|
<h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
|
|
{step.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|