Deploy

src/components/sections/GuestsLalaKahlePraiseSection.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+export default function GuestsLalaKahlePraiseSection() {
+  const testimonials = [
+    { name: "Sipho Mkhize", role: "Business traveller from Durban", quote: "Immaculate cleanliness, secure parking, and the warmest welcome. Woke up to zebras grazing across the road — unforgettable." },
+    { name: "Linda Botha", role: "UKZN visiting lecturer", quote: "Perfect for academics. Peaceful, fast Wi-Fi, and a hearty English breakfast. Felt like a queen during my stay." },
+    { name: "James & Karen Wilson", role: "Transit guests from the UK", quote: "One night turned into three. The braai area and pool made our stopover feel like a mini-holiday." },
+  ]
+
+  return (
+    <section data-vula-section="guestslalakahlepraise" id="guest-praise" className="py-16 bg-neutral-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h2 className="text-3xl font-bold text-[#d4af37] text-center mb-4">Lala Kahle — Rest Well</h2>
+        <p className="text-center text-neutral-600 mb-12 max-w-2xl mx-auto">
+          Hear from guests who experienced regal treatment and restful sleep at KwaNtofontofo.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {testimonials.map((t, i) => (
+            <div key={i} className="bg-card rounded-xl p-6 border border-border shadow-[var(--shadow-card)]">
+              <p className="text-muted-foreground mb-4 italic">&ldquo;{t.quote}&rdquo;</p>
+              <p className="font-semibold text-foreground">{t.name}</p>
+              <p className="text-sm text-muted-foreground">{t.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}