Deploy

2026-08-03 11:42:10 +00:00
parent 7c5e698bf8
commit 321acc4c10
1 changed files with 28 additions and 0 deletions
@@ -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>
  )
 }