Deploy

src/components/sections/VendaGuestStoriesSection.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+export default function VendaGuestStoriesSection() {
+  const stories = [
+    {
+      initials: "AK",
+      name: "A. K., Johannesburg",
+      quote: "I learned how to say 'Ndaa' with the right tone, and the whole village smiled. That moment of connection was worth the entire trip."
+    },
+    {
+      initials: "MT",
+      name: "M. T., Cape Town",
+      quote: "Tasting mopani worms for the first time — crunchy, nutty, and cooked by a grandmother who laughed at my hesitation. Now I crave them."
+    },
+    {
+      initials: "LR",
+      name: "L. R., London",
+      quote: "Watching the sunrise from the lodge deck, with the Soutpansberg turning gold and the baobabs silhouetted, I felt completely still."
+    }
+  ]
+
+  return (
+    <section data-vula-section="vendagueststories" id="guest-stories" className="py-20 bg-[#f4f9f5]">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <h2 className="text-4xl md:text-5xl font-heading text-[#0d2114] mb-4 text-center">
+          What our guests say
+        </h2>
+        <p className="text-lg text-[#8b5a3c] mb-12 max-w-2xl mx-auto text-center">
+          Real stories shared over the fire, around the table.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {stories.map((s, i) => (
+            <div key={i} className="bg-white rounded-2xl p-8 shadow-soft border-l-4 border-[#d4af37]">
+              <div className="flex items-center gap-4 mb-4">
+                <div className="w-12 h-12 rounded-full bg-[#d4af37]/20 flex items-center justify-center font-bold text-[#d4af37] text-lg">
+                  {s.initials}
+                </div>
+                <p className="text-[#0d2114] font-heading font-semibold">{s.name}</p>
+              </div>
+              <p className="text-[#0d2114]/80 leading-relaxed font-body italic text-base">
+                &ldquo;{s.quote}&rdquo;
+              </p>
+              <div className="mt-4 flex gap-1 text-[#d4af37]">
+                <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}