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>
  )
 }