Deploy

src/components/sections/GuestVoicesSection.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import Image from 'next/image'
+
+export default function GuestVoicesSection() {
+  const voices = [
+    {
+      quote: "Watching elephants drink from the waterhole at dusk — our children will never forget that quiet magic.",
+      name: "The Dlamini Family",
+      location: "Johannesburg",
+      image: "https://images.pexels.com/photos/37769918/pexels-photo-37769918.jpeg?auto=compress&cs=tinysrgb&h=350"
+    },
+    {
+      quote: "Marietjie's home-baked bread with apricot jam, fresh from the oven... pure Thornveld warmth.",
+      name: "Sarah & Tom",
+      location: "London, UK",
+      image: "https://images.pexels.com/photos/7431701/pexels-photo-7431701.jpeg?auto=compress&cs=tinysrgb&h=350"
+    },
+    {
+      quote: "Learning to track spoor with ranger Thabo — warthog, kudu, even a leopard's pugmark. Real bush school.",
+      name: "Jenna & Ryan",
+      location: "Cape Town",
+      image: "https://images.pexels.com/photos/7431701/pexels-photo-7431701.jpeg?auto=compress&cs=tinysrgb&h=350"
+    }
+  ]
+
+  return (
+    <section id="guest-voices" data-vula-section="guestvoices" className="py-20 bg-[#f5f5dc]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="font-heading text-3xl md:text-4xl text-[#1b210d] mb-12 text-center">
+          Entries from our veranda guestbook
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {voices.map((voice, i) => (
+            <div
+              key={i}
+              className="bg-[#f7f9f4] rounded-2xl p-6 shadow-soft border border-[#dee2d4]"
+            >
+              <div className="flex items-center mb-4">
+                <div className="relative w-12 h-12 rounded-full overflow-hidden mr-3">
+                  <Image
+                    src={voice.image}
+                    alt={`Photo of ${voice.name}`}
+                    fill
+                    sizes="48px"
+                    className="object-cover"
+                  />
+                </div>
+                <div>
+                  <p className="font-semibold text-[#1b210d]">{voice.name}</p>
+                  <p className="text-sm text-[#8b5a3c]">{voice.location}</p>
+                </div>
+              </div>
+              <p className="font-serif italic text-[#1b210d]/80 leading-relaxed">
+                &ldquo;{voice.quote}&rdquo;
+              </p>
+              <div className="mt-4 h-px bg-[#dee2d4] w-16" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}