Deploy

2026-07-14 19:09:00 +00:00
parent 1f2b4ce929
commit 9799231e90
1 changed files with 74 additions and 0 deletions
@@ -0,0 +1,74 @@
+'use client'
+
+import Image from 'next/image'
+import { MapPin, Soup, Wine } from 'lucide-react'
+
+export default function BespokeExperiencesSection() {
+  const experiences = [
+    {
+      title: 'Private Game Drives',
+      icon: MapPin,
+      description: 'Venture before dawn in an open Land Cruiser with a tracker who knows every spoor. Witness the predators return, the herds stir, and the sun paint the escarpment gold — without another vehicle in sight.',
+      image: 'https://images.pexels.com/photos/20179668/pexels-photo-20179668.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tag: 'Signature'
+    },
+    {
+      title: 'Bush Spa Rituals',
+      icon: Soup,
+      description: 'Indulge in treatments using indigenous botanicals — marula oil, rooibos, and African potato. Your therapist sets up on a sala overlooking the dry riverbed; the only soundtrack is the wind in the knobthorn trees.',
+      image: 'https://images.pexels.com/photos/16448674/pexels-photo-16448674.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tag: 'Wellness'
+    },
+    {
+      title: 'Starlit Dining',
+      icon: Wine,
+      description: "Our Michelin-trained chef curates a menu drawn from the region's bounty — game, foraged herbs, and heirloom vegetables. Dinner is served beneath the Southern Cross, with lanterns and a crackling fire.",
+      image: 'https://images.pexels.com/photos/7766481/pexels-photo-7766481.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tag: 'Culinary'
+    }
+  ]
+
+  return (
+    <section data-vula-section="bespokeexperiences" id="bespoke-experiences" className="py-24 bg-[#f2f4f5]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-16 max-w-2xl mx-auto">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#1f2b33] mb-4" style={{ fontFamily: 'Sora, sans-serif' }}>
+            Tailor each day <span className="text-[#d4af37]">to your pulse</span>
+          </h2>
+          <p className="text-lg text-[#36454F]/70 leading-relaxed">
+            No two stays are alike. Select from our signature encounters — or let us design a journey that only you will ever experience.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {experiences.map((exp, i) => {
+            const Icon = exp.icon
+            return (
+              <div key={i} className="bg-white rounded-3xl overflow-hidden shadow-soft group transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+                <div className="relative h-56 overflow-hidden">
+                  <Image
+                    src={exp.image}
+                    alt={exp.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    className="object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                  <div className="absolute top-4 left-4 bg-[#16a34a] text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">
+                    {exp.tag}
+                  </div>
+                </div>
+                <div className="p-6">
+                  <div className="flex items-center gap-3 mb-3">
+                    <Icon className="w-6 h-6 text-[#d4af37]" />
+                    <h3 className="text-xl font-semibold text-[#1f2b33]">{exp.title}</h3>
+                  </div>
+                  <p className="text-[#36454F]/70 leading-relaxed">{exp.description}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}