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