Deploy

2026-07-26 16:56:16 +00:00
parent f1b0531a6f
commit 78d04d76dc
1 changed files with 53 additions and 0 deletions
@@ -0,0 +1,53 @@
+import Image from "next/image"
+
+export default function VendaCulturalImmersionSection() {
+  const experiences = [
+    {
+      title: "Tshigombela Dance Evenings",
+      description: "Feel the rhythm of the Venda people as dancers in beaded skirts and ankle rattles tell stories of harvest, courtship, and ancestors under the starlit Soutpansberg sky.",
+      image: "https://images.pexels.com/photos/36019668/pexels-photo-36019668.jpeg?auto=compress&cs=tinysrgb&h=350"
+    },
+    {
+      title: "Pottery with Local Artisans",
+      description: "Sit at the wheel alongside master potters from nearby villages, shaping clay fired in traditional kilns. Take home a vessel marked with the same ochre earth that colours the Limpopo landscape.",
+      image: "https://images.pexels.com/photos/36019668/pexels-photo-36019668.jpeg?auto=compress&cs=tinysrgb&h=350"
+    },
+    {
+      title: "Sacred Sites Walk",
+      description: "Walk to Lake Fundudzi, where the water lies still and the ancestors are said to speak through the reeds. Our guide shares oral histories passed down over ten generations.",
+      image: "https://images.pexels.com/photos/36019668/pexels-photo-36019668.jpeg?auto=compress&cs=tinysrgb&h=350"
+    }
+  ]
+
+  return (
+    <section data-vula-section="vendaculturalimmersion" id="venda-experiences" 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">
+          Experiences that stay with you
+        </h2>
+        <p className="text-lg text-[#8b5a3c] mb-12 max-w-2xl">
+          Every activity at vaVenda Lodge is a doorway into the living culture of the Venda people. Handpicked for depth, not spectacle.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {experiences.map((exp, i) => (
+            <div key={i} className="group bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-lg transition-all duration-300">
+              <div className="relative h-56 overflow-hidden">
+                <Image
+                  src={exp.image}
+                  alt={exp.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <div className="p-6">
+                <h3 className="text-xl font-heading text-[#16a34a] mb-2">{exp.title}</h3>
+                <p className="text-[#0d2114]/80 leading-relaxed font-body">{exp.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}