From 39c38a8f90c483ff8eb786c2c86980b8829131b0 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Thu, 4 Jun 2026 09:17:02 +0000
Subject: [PATCH] Deploy

---
 .../sections/TestimonialsSection.tsx          | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/sections/TestimonialsSection.tsx

diff --git a/src/components/sections/TestimonialsSection.tsx b/src/components/sections/TestimonialsSection.tsx
new file mode 100644
index 0000000..8b149ab
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file