update content

2026-06-23 15:05:50 +05:30
parent 9ea89c317f
commit 6cb34f5b8f
17 changed files with 554 additions and 297 deletions
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -0,0 +1,74 @@
+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, food, and daily essentials from nearby shops.",
+    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.",
+    icon: "local_shipping",
+    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+  },
+];
+
+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">
+      <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">
+            Simple Process
+          </span>
+          <h2 className="text-display text-brand-dark mt-3 leading-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.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>
+
+              {/* 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>
+    </section>
+  );
+}