Deploy

src/components/sections/TestimonialsSection.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+export default function TestimonialsSection() {
+  const testimonials = [
+    {
+      name: "Thabo Mokoena",
+      role: "CEO, Mokoena Holdings",
+      quote: "Mtungwa & Partners resolved a complex cross-border dispute within six weeks. Their grasp of South African corporate law is unmatched."
+    },
+    {
+      name: "Lindiwe Dlamini",
+      role: "Property Developer, Dlamini Estates",
+      quote: "They handled my real estate portfolio acquisition with precision. Every clause was negotiated to protect my interests."
+    },
+    {
+      name: "James Botha",
+      role: "Managing Director, Botha Logistics",
+      quote: "From business formation to litigation defense, they have been our trusted legal partners for over a decade."
+    }
+  ]
+
+  return (
+    <section data-vula-section="testimonials" id="testimonials" className="py-20 lg:py-28 bg-[#ffffff]">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="mb-12 text-center">
+          <span className="text-sm font-semibold tracking-widest uppercase text-neutral-400">Client Testimonials</span>
+          <h2 className="mt-3 text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827]">What Our Clients Say</h2>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {testimonials.map((t, i) => (
+            <div key={i} className="rounded-xl border border-neutral-100 bg-white p-6 shadow-[var(--shadow-card)]">
+              <span className="text-yellow-400 text-lg">★★★★★</span>
+              <p className="mt-4 text-neutral-600 leading-relaxed">"{t.quote}"</p>
+              <div className="mt-6">
+                <p className="font-semibold text-[#111827]">{t.name}</p>
+                <p className="text-sm text-neutral-400">{t.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}