Deploy

src/components/sections/GuestPraiseSection.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+export default function GuestPraiseSection() {
+  const testimonials = [
+    {
+      name: 'Thandi M.',
+      role: 'Business traveler, Durban',
+      quote: 'I felt like a queen from the moment I arrived. The hosts went above and beyond to make my stay comfortable.'
+    },
+    {
+      name: 'Kevin D.',
+      role: 'Weekend guest, Johannesburg',
+      quote: 'Spotless rooms, delicious braai evenings, and complete peace of mind with the security. Highly recommend.'
+    },
+    {
+      name: 'Nomsa P.',
+      role: 'University visitor, Pietermaritzburg',
+      quote: 'Perfect for a business traveler needing a quiet, luxurious space. The proximity to the airport is a huge bonus.'
+    }
+  ]
+
+  return (
+    <section data-vula-section="guestpraise" id="guest-praise" className="py-20 bg-[#ffffff]">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold text-center text-[#111827] mb-4">What Our Guests Say</h2>
+        <p className="text-center text-[#8b5a3c] mb-12 max-w-2xl mx-auto">Real voices from KwaNtofoNtofo</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 border border-[#e5e7eb] p-6 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-shadow duration-200 flex flex-col">
+              <div className="text-[#d4af37] text-lg mb-3">★★★★★</div>
+              <p className="text-[#111827] italic mb-4 leading-relaxed flex-1">"{t.quote}"</p>
+              <div className="border-t border-[#e5e7eb] pt-3">
+                <p className="font-semibold text-[#8b5a3c]">{t.name}</p>
+                <p className="text-sm text-[#111827]/60">{t.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}