Deploy

2026-07-26 16:40:58 +00:00
parent 6d48b888be
commit 2f0adeb83f
1 changed files with 107 additions and 0 deletions
@@ -0,0 +1,107 @@
+'use client'
+
+import Link from "next/link"
+import Image from "next/image"
+import Button from "@/components/ui/Button"
+import { Compass, Music, Star, UtensilsCrossed } from 'lucide-react'
+
+const activities = [
+  {
+    title: "Traditional Dance &amp; Drumming",
+    description: "Join local Venda dancers in a rhythmic evening under the stars. Learn the tshikona reed dance or beat the djembe around a fire.",
+    icon: Music,
+    image: "https://images.pexels.com/photos/36019668/pexels-photo-36019668.jpeg?auto=compress&cs=tinysrgb&h=350",
+  },
+  {
+    title: "Village Walk &amp; Storytelling",
+    description: "Walk through the neighbouring Makhado village with an elder guide who shares oral histories, folklore, and the meaning behind Venda symbols.",
+    icon: Compass,
+    image: "https://images.pexels.com/photos/30767896/pexels-photo-30767896.jpeg?auto=compress&cs=tinysrgb&h=350",
+  },
+  {
+    title: "Home-Cooked Venda Cuisine",
+    description: "Taste dishes passed down through generations: morogo with pap, tshiovha (pumpkin leaves), and freshly brewed mageu. Cook alongside our chefs.",
+    icon: UtensilsCrossed,
+    image: "https://images.pexels.com/photos/8168571/pexels-photo-8168571.png?auto=compress&cs=tinysrgb&h=350",
+  },
+  {
+    title: "Craft Workshops",
+    description: "Try your hand at clay pottery, basket weaving, or beadwork with Venda artisans. Take home your own creation as a souvenir.",
+    icon: Star,
+    image: "https://images.pexels.com/photos/1973889/pexels-photo-1973889.jpeg?auto=compress&cs=tinysrgb&h=350",
+  },
+]
+
+export default function VendaExperiencesSection() {
+  return (
+    <section data-vula-section="vendaexperiences" id="venda-experiences" className="py-20 lg:py-28" style={{ backgroundColor: "#f9f7f4" }}>
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-14">
+          <span className="inline-block text-[#16a34a] text-sm md:text-base tracking-widest uppercase font-semibold mb-2">
+            Cultural Immersion
+          </span>
+          <h2 className="text-3xl md:text-5xl font-bold" style={{ color: "#211c0d" }}>
+            Beyond the Lodge
+          </h2>
+          <p className="mt-4 max-w-2xl mx-auto" style={{ color: "#211c0d/80" }}>
+            Step into daily Venda life — each experience is led by community members who open their homes and
+            their hearts.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {activities.map((activity, i) => {
+            const Icon = activity.icon
+            return (
+              <div
+                key={i}
+                className="group relative rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-xl transition-all duration-300"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <Image
+                    src={activity.image}
+                    alt={activity.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 50vw"
+                    className="object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="p-2 rounded-lg" style={{ backgroundColor: "#d4af37/15" }}>
+                      <Icon className="w-5 h-5" style={{ color: "#d4af37" }} />
+                    </div>
+                    <h3 className="text-lg font-bold" style={{ color: "#211c0d" }}>
+                      {activity.title}
+                    </h3>
+                  </div>
+                  <p className="text-sm leading-relaxed" style={{ color: "#211c0d/70" }}>
+                    {activity.description}
+                  </p>
+                  <div className="mt-5">
+                    <Link href="/booking">
+                      <Button variant="outline" size="sm" className="w-full">
+                        Enquire Now
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Contact CTA */}
+        <div className="mt-16 text-center">
+          <p className="text-sm" style={{ color: "#211c0d/60" }}>
+            All experiences are seasonal — contact us to plan your itinerary.
+          </p>
+          <p className="text-sm mt-1" style={{ color: "#211c0d/60" }}>
+            +27 15 001 2345 &nbsp;·&nbsp; info@vavendalodge.co.za
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}