Deploy

src/components/sections/TestimonialsSection.tsx

@@ -0,0 +1,24 @@
+'use client'
+export default function TestimonialsSection() {
+  const testimonials = [
+    { name: "Nadia Botha", role: "Café Owner, Woodstock", quote: "Kapa Roast's Ethiopian Yirgacheffe sells faster than any bean we've ever stocked." },
+    { name: "Thabo Mokoena", role: "Home Brewer", quote: "The aroma alone tells you this isn't supermarket coffee—it's something special." },
+    { name: "Sarah-Lee Govender", role: "Barista Trainer", quote: "I use Kapa Roast for every workshop. The traceability and flavour are unmatched." },
+  ]
+  return (
+    <section data-vula-section="testimonials" id="testimonials" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#111827]">What Our Community Says</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {testimonials.map((t, i) => (
+            <div key={i} className="bg-white rounded-xl p-6 border border-[#e5e7eb] border-l-4 border-l-[#8b5a3c] shadow-[var(--shadow-card)]">
+              <p className="text-[#4b5563] mb-4 italic">&ldquo;{t.quote}&rdquo;</p>
+              <p className="font-semibold text-[#111827]">{t.name}</p>
+              <p className="text-sm text-[#6b7280]">{t.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}