Upload src/components/HowItWorks.tsx

src/components/HowItWorks.tsx

@@ -0,0 +1,32 @@
+const steps = [
+  { step:'01', title:'Discover', desc:'Browse curated vendors across every category. Filter by district, budget, and style.' },
+  { step:'02', title:'Plan', desc:'Use your planner dashboard to track tasks, manage your budget, and organize your timeline.' },
+  { step:'03', title:'Contract', desc:'Review, negotiate, and digitally sign contracts — with a full audit trail for peace of mind.' },
+  { step:'04', title:'Celebrate', desc:'Everything is organized, confirmed, and ready. Now enjoy your perfect day.' },
+]
+
+export default function HowItWorks() {
+  return (
+    <section className="py-20 bg-white">
+      <div className="wedding-section">
+        <div className="text-center mb-16">
+          <p className="text-gold-400 font-heading text-sm tracking-[0.2em] uppercase mb-3">Simple steps</p>
+          <h2 className="font-heading text-3xl md:text-4xl font-semibold text-charcoal-700">How it works</h2>
+          <div className="wedding-divider mt-6" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {steps.map((s,i) => (
+            <div key={s.step} className="text-center relative">
+              {i < steps.length - 1 && <div className="hidden md:block absolute top-8 left-[60%] w-[80%] h-px bg-gradient-to-r from-gold-200 to-gold-100" />}
+              <div className="w-16 h-16 mx-auto rounded-full bg-gold-50 border-2 border-gold-200 flex items-center justify-center mb-4 relative z-10">
+                <span className="font-heading text-lg font-semibold text-gold-500">{s.step}</span>
+              </div>
+              <h3 className="font-heading text-xl font-semibold text-charcoal-700 mb-2">{s.title}</h3>
+              <p className="text-sm text-charcoal-400 leading-relaxed">{s.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}