From a566711d7d3e67b8468cfb5e449ffa8e428399e2 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 1 Aug 2026 16:13:31 +0000
Subject: [PATCH] Deploy

---
 .../sections/TestimonialsSection.tsx          | 38 +++++++++++++++++++
 1 file changed, 38 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..38395ce
--- /dev/null
+++ b/src/components/sections/TestimonialsSection.tsx
@@ -0,0 +1,38 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function TestimonialsSection() {
+  const { items, loading } = useVulaContent('posts')
+  const featured = (items ?? []).slice(0, 3)
+
+  if (loading) {
+    return <div className="flex justify-center py-16"><div className="h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" /></div>
+  }
+  if (featured.length === 0) return null
+
+  return (
+    <section id="testimonials" data-vula-section="testimonials" data-vula-cms="posts" className="bg-[#f7f9f4] py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-12 max-w-2xl">
+          <p className="text-sm font-semibold uppercase tracking-widest text-[#ea580c]">Customer stories</p>
+          <h2 className="mt-2 font-display text-3xl font-semibold text-[#1b210d] md:text-4xl">Kind words from homes across South Africa</h2>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {featured.map((item) => {
+            const d = item.data as { title?: string; excerpt?: string; body?: string; author?: string; category?: string }
+            const quote = d.excerpt || d.body?.slice(0, 140) || d.title || ''
+            return (
+              <div key={item.id} className="rounded-2xl bg-white p-6 shadow-[0_10px_30px_rgba(27,33,13,0.08)]">
+                <p className="leading-relaxed text-[#36454F]">&ldquo;{quote}&rdquo;</p>
+                <div className="mt-4 border-t border-[#dee2d4] pt-4">
+                  <p className="font-semibold text-[#1b210d]">{d.author || 'Ukaya Home customer'}</p>
+                  <p className="mt-0.5 text-sm text-[#ea580c]">{d.category || d.title || 'Verified buyer'}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file