Deploy

src/components/sections/ClientVindicationSection.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { Quote, Star } from 'lucide-react'
+
+export default function ClientVindicationSection() {
+  const testimonials = [
+    {
+      initials: 'T.M.',
+      caseType: 'Assault — Charges Withdrawn',
+      quote: 'Mashobane & Associate handled my case with absolute professionalism. I was facing serious charges, but they fought tirelessly and the charges were withdrawn before trial.',
+    },
+    {
+      initials: 'S.K.',
+      caseType: 'Theft — Acquitted',
+      quote: 'I felt heard and respected throughout. The team explained every step in simple terms and secured a full acquittal. I am forever grateful.',
+    },
+    {
+      initials: 'N.P.',
+      caseType: 'Domestic Violence — Case Dismissed',
+      quote: 'They understood the emotional weight of my situation. The compassionate support alongside expert legal strategy made all the difference.',
+    },
+  ]
+
+  return (
+    <section id="client-stories" data-vula-section="clientstories" className="bg-[#d4af37] py-20">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="text-center mb-14">
+          <h2 className="text-4xl font-bold text-[#000080] mb-4">Client Vindication</h2>
+          <p className="text-lg text-gray-800 max-w-xl mx-auto">
+            Real outcomes that speak to our commitment
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((t, i) => (
+            <div
+              key={i}
+              className="bg-white rounded-xl p-8 shadow-[var(--shadow-lifted)] border border-[#000080]/10 flex flex-col"
+            >
+              <div className="flex items-center gap-2 mb-4">
+                <Quote className="w-6 h-6 text-[#000080] opacity-40" />
+                <span className="text-sm font-semibold text-[#36454F] uppercase tracking-wider">
+                  {t.caseType}
+                </span>
+              </div>
+              <p className="text-gray-700 italic flex-1">&ldquo;{t.quote}&rdquo;</p>
+              <div className="mt-6 flex items-center gap-3 border-t pt-4 border-gray-200">
+                <div className="w-10 h-10 rounded-full bg-[#000080] flex items-center justify-center text-white font-bold text-sm">
+                  {t.initials}
+                </div>
+                <div>
+                  <p className="font-semibold text-gray-800">{t.initials}</p>
+                  <span className="text-yellow-500 text-sm">★★★★★</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}