From 321acc4c10a82b64158f4eadcc8826b5ef0a4929 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Mon, 3 Aug 2026 11:42:10 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ClientStoriesSection.tsx b/src/components/sections/ClientStoriesSection.tsx
new file mode 100644
index 0000000..9b892ba
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file