From cf72b8ae1bcf5e938298c6d7dcc596461637f7cd Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:38:48 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ClientTestimonialsSection.tsx b/src/components/sections/ClientTestimonialsSection.tsx
new file mode 100644
index 0000000..36caca2
--- /dev/null
+++ b/src/components/sections/ClientTestimonialsSection.tsx
@@ -0,0 +1,49 @@
+export default function ClientTestimonialsSection() {
+  const testimonials = [
+    {
+      name: 'Bongani',
+      outcome: 'Acquitted',
+      quote: 'They believed in my innocence when no one else would. Mashobane & Associate gave me my life back.',
+    },
+    {
+      name: 'Portia',
+      outcome: 'Charges Dropped',
+      quote: 'I was terrified of going to prison for something I didn\'t do. Mr. Mashobane exposed the flaws in the state\'s case in court.',
+    },
+    {
+      name: 'Teboho',
+      outcome: 'Reduced Sentence',
+      quote: 'The team fought for me like family. Their knowledge of South African criminal procedure turned my situation around.',
+    },
+  ]
+
+  return (
+    <section data-vula-section="clienttestimonials" id="client-testimonials" className="py-20 bg-white">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-[#000080]">Real People, Real Results</h2>
+          <p className="text-[#36454F] mt-2 max-w-2xl mx-auto">
+            Hear from clients whose lives we have helped turn around.
+          </p>
+        </div>
+
+        <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-neutral-100 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
+            >
+              <p className="text-[#36454F] italic mb-4">&ldquo;{t.quote}&rdquo;</p>
+              <div className="flex items-center justify-between">
+                <span className="font-semibold text-[#000080]">{t.name}</span>
+                <span className="inline-block bg-[#d4af37] text-white text-xs font-bold px-3 py-1 rounded-full">
+                  {t.outcome}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file