Deploy

src/components/sections/ClientStoriesSection.tsx

@@ -0,0 +1,28 @@
+export default function ClientStoriesSection() {
+  const testimonials = [
+    { name: 'Thandi M.', service: 'Knotless braids + copper colour', quote: 'My knotless braids lasted eight weeks with zero frizz. The colour was exactly the copper shade I brought in.' },
+    { name: 'Naledi K.', service: 'Keratin smoothing treatment', quote: 'My 4C hair has never been easier to manage. Wash days went from two hours to thirty minutes.' },
+    { name: 'Aisha P.', service: 'Bridal updo + gel nails', quote: 'Zama did my bridal updo and nails — every guest asked where I had them done.' },
+  ]
+
+  return (
+    <section data-vula-section="clientstories" id="client-stories" className="py-20 bg-[#F0F8FF]">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="max-w-2xl mb-10">
+          <p className="text-sm font-medium text-[#00A8CC] mb-2">Client stories from Fourways</p>
+          <h2 className="text-3xl font-bold text-[#1A2B3C]">Cared for by hands that listen</h2>
+        </div>
+        <div className="grid gap-6 md:grid-cols-3">
+          {testimonials.map((t, i) => (
+            <div key={i} className="rounded-xl bg-white shadow-md p-6">
+              <span className="text-[#FFD700] text-lg">★★★★★</span>
+              <p className="mt-3 text-[#1A2B3C]/80">"{t.quote}"</p>
+              <p className="mt-4 font-semibold text-[#1A2B3C]">{t.name}</p>
+              <p className="text-sm text-[#00A8CC]">{t.service}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}