Deploy

2026-07-26 17:04:58 +00:00
parent 4d327b1616
commit 4c9d2d20b5
1 changed files with 101 additions and 0 deletions
@@ -0,0 +1,101 @@
 import Image from "next/image"
 import { Compass, MapPin, Moon, Star, Users } from 'lucide-react'
 export default function SafariExperiencesSection() {
  const experiences = [
    {
      icon: Compass,
      title: "Guided Game Drives",
      desc: "Open-vehicle drives through Hluhluwe-iMfolozi Park with expert trackers—early mornings and golden sundowners included.",
    },
    {
      icon: MapPin,
      title: "Walking Safaris",
      desc: "Follow the spoor of the Big Five on foot with armed rangers who read the bush like a storybook.",
    },
    {
      icon: Moon,
      title: "Sundowner Boma Dinners",
      desc: "Evenings under a KZN sky: fire-roasted meats, local wine, and the crackle of a mopane fire.",
    },
    {
      icon: Users,
      title: "Zulu Cultural Immersion",
      desc: "Visit a neighbouring village for beading, dancing, and stories passed down through generations.",
    },
  ]
  return (
    <section data-vula-section="safariexperiences"
      id="safari-experiences"
      className="relative py-20 bg-[#f9f5f4] overflow-hidden"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left side — image with overlapping sticker */}
          <div className="relative">
            <div className="relative overflow-hidden rounded-2xl shadow-2xl -rotate-2 z-10">
              <Image
                src="https://images.pexels.com/photos/6736186/pexels-photo-6736186.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
                alt="Safari vehicle at sunset in KwaZulu Natal"
                width={650}
                height={450}
                className="object-cover w-full h-80 lg:h-96"
              />
            </div>
            {/* Sticker badge */}
            <div className="absolute -top-4 -left-4 z-20 w-24 h-24 bg-[#ea580c] rounded-full flex items-center justify-center rotate-12 shadow-lg">
              <span className="text-white text-xs font-bold text-center leading-tight">
                Big Five
                <br />
                Territory
              </span>
            </div>
            {/* Second overlapping image */}
            <div className="absolute -bottom-6 -right-6 w-56 h-36 overflow-hidden rounded-xl shadow-xl rotate-3 border-4 border-[#f9f5f4] z-20">
              <Image
                src="https://images.pexels.com/photos/5831735/pexels-photo-5831735.jpeg?auto=compress&cs=tinysrgb&h=350&w=600"
                alt="Zulu cultural dancers"
                width={300}
                height={200}
                className="object-cover w-full h-full"
              />
            </div>
          </div>
          {/* Right side — content */}
          <div>
            <p className="text-sm uppercase tracking-widest text-[#2563eb] mb-2">
              Safari Experiences
            </p>
            <h2 className="text-4xl lg:text-5xl font-bold text-[#21140d] mb-6 leading-tight">
              The bush speaks —
              <br />
              <span className="italic font-normal text-2xl lg:text-3xl">we answer</span>
            </h2>
            <div className="space-y-6">
              {experiences.map((exp, i) => {
                const Icon = exp.icon
                return (
                  <div key={i} className="flex gap-4">
                    <div className="mt-1 flex-shrink-0 w-10 h-10 bg-[#ea580c]/10 rounded-full flex items-center justify-center">
                      <Icon className="w-5 h-5 text-[#ea580c]" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-[#21140d]">
                        {exp.title}
                      </h3>
                      <p className="text-[#21140d]/70 italic text-sm">
                        {exp.desc}
                      </p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }