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

add image

Browse Source
This commit is contained in:
Aravind
2026-06-25 13:56:36 +05:30
parent d3c7d93cef
commit b233992f30
32 changed files with 632 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const STEPS = [
@@ -7,6 +8,8 @@ const STEPS = [
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",
@@ -14,6 +17,8 @@ const STEPS = [
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",
@@ -21,15 +26,17 @@ const STEPS = [
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="px-6 py-12 md:py-16">
<div className="w-full">
<section className="section bg-white w-full overflow-hidden">
<div className="page-container">
{/* Header Section */}
<div className="text-center mb-12 md:mb-16">
<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>
@@ -39,11 +46,11 @@ export function HowItWorks() {
</div>
{/* Steps Layout - Timeline style */}
<div className="relative mt-8 md:mt-12">
<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-12 lg:gap-16 relative z-10">
<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 */}
@@ -54,12 +61,25 @@ export function HowItWorks() {
</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 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>
@@ -69,4 +89,3 @@ export function HowItWorks() {
);
}