Deploy

src/components/sections/UmlolozeloSection.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+export default function UmlolozeloSection() {
+  const testimonials = [
+    {
+      name: 'Thandi Mthembu',
+      role: 'Frequent visitor, Johannesburg',
+      quote: 'The staff remembered our names and dietary preferences from our first stay. That kind of attention makes Zulu Lodge feel like home.'
+    },
+    {
+      name: 'David & Sarah Johnson',
+      role: 'First-time safari guests, London',
+      quote: 'We came for the wildlife but left with a deep appreciation for Zulu culture. The storytelling around the boma fire was unforgettable.'
+    },
+    {
+      name: 'Mr. & Mrs. Van der Merwe',
+      role: 'Cape Town, yearly family reunion',
+      quote: 'Three generations under one thatched roof — the lodge catered to toddlers and grandparents alike with grace and warmth.'
+    }
+  ]
+
+  return (
+    <section data-vula-section="umlolozelo" id="umlolozelo-testimonials" className="py-20 bg-[#f9f7f4]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-4xl font-semibold text-[#211c0d] mb-2 text-center">
+          A Chorus of Guest Praise
+        </h2>
+        <p className="text-lg text-[#211c0d]/70 mb-12 text-center max-w-2xl mx-auto">
+          Real voices that convey trust and warmth — stories of serenity, adventure, and heartfelt Zulu hospitality.
+        </p>
+        <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-6 shadow-md border border-[#e2dfd4]">
+              <p className="text-[#211c0d] mb-4 italic leading-relaxed">"{t.quote}"</p>
+              <p className="font-semibold text-[#211c0d]">{t.name}</p>
+              <p className="text-sm text-[#211c0d]/60">{t.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}