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

update layout

Browse Source
This commit is contained in:
Aravind
2026-06-23 19:50:35 +05:30
parent 8ffc7809ce
commit 230be11899
14 changed files with 841 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/home/HowItWorks.tsx
View File

@@ -11,14 +11,14 @@ const STEPS = [
{
num: "02",
title: "Pick Your Favourite Store",
desc: "Browse groceries, medicines, food, and daily essentials from nearby shops.",
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 it delivered by the store or a Nearle delivery partner.",
desc: "Order easily and get swift delivery from local partners.",
icon: "local_shipping",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
},
@@ -26,49 +26,47 @@ const STEPS = [
export function HowItWorks() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
<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-12">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full">
<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-display text-brand-dark mt-3 leading-tight">
<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 */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
{/* Connector Line (Desktop Only) */}
<div className="hidden lg:block absolute top-[44px] left-[15%] right-[15%] h-[2px] bg-dashed border-t border-dashed border-outline-variant/30 -z-10" />
{/* 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" />
{STEPS.map((step) => (
<div
key={step.num}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-lg flex flex-col h-full relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300"
>
{/* Step number watermark */}
<div className="absolute top-4 right-6 text-4xl font-black text-brand-dark/10 select-none">
{step.num}
<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>
{/* Step Circle with Icon */}
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 shadow-sm ${step.color}`}>
<MaterialIcon icon={step.icon} size={28} />
</div>
{/* Title & Description */}
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
{step.title}
</h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{step.desc}
</p>
</div>
))}
))}
</div>
</div>
</div>
</section>
);
}