Deploy

2026-07-26 17:41:20 +00:00
parent c63fcc97c6
commit 73537f0b87
1 changed files with 65 additions and 0 deletions
@@ -0,0 +1,65 @@
+import Image from "next/image"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+import Badge from "@/components/ui/Badge"
+
+const experiences = [
+  {
+    title: "Game Drives",
+    description: "Twice‑daily guided safaris in open vehicles. Track lion, leopard and elephant with rangers who grew up on these trails.",
+    image: "https://images.pexels.com/photos/13314777/pexels-photo-13314777.jpeg?auto=compress&cs=tinysrgb&h=350",
+    label: "Daily"
+  },
+  {
+    title: "Bush Walks",
+    description: "Walk the ancient paths with a Zulu tracker. Learn the medicinal flora and read the prints left in the red sand.",
+    image: "https://images.pexels.com/photos/885013/pexels-photo-885013.jpeg?auto=compress&cs=tinysrgb&h=350",
+    label: "By request"
+  },
+  {
+    title: "Cultural Encounters",
+    description: "Visit a nearby Zulu homestead to hear oral histories, taste amasi and witness beadwork that tells a story.",
+    image: "https://images.pexels.com/photos/38153685/pexels-photo-38153685.jpeg?auto=compress&cs=tinysrgb&h=350",
+    label: "Half‑day"
+  }
+]
+
+export default function SafariExperiencesSection() {
+  return (
+    <section data-vula-section="safariexperiences" id="safari-experiences" className="py-24 bg-[#15221a]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center gap-4 justify-center mb-4">
+          <span className="h-px w-14 bg-[#d4af37]" />
+          <span className="text-[#d4af37] font-sans tracking-[0.2em] uppercase text-xs">Experiences</span>
+          <span className="h-px w-14 bg-[#d4af37]" />
+        </div>
+        <h2 className="font-serif text-4xl md:text-5xl text-[#e7eeea] text-center font-light mb-16">
+          The <span className="italic text-[#d4af37]">bush</span> is your playground
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {experiences.map((exp) => (
+            <Card key={exp.title} className="border border-white/10 rounded-lg overflow-hidden group">
+              <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 className="absolute top-3 left-3">
+                  <Badge variant="accent" className="text-xs">{exp.label}</Badge>
+                </div>
+              </div>
+              <CardHeader>
+                <CardTitle className="font-serif text-xl text-[#e7eeea]">{exp.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-[#b0c4b4]">{exp.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}