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