Deploy

src/components/sections/MaasaiExperiencesSection.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { Card } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Image from "next/image"
+import Link from "next/link"
+
+const experiences = [
+  {
+    id: "safari-walk",
+    title: "Guided Safari Walk",
+    description: "Track lion prides and elephant herds with a KPSGA-certified guide — just you and the wild.",
+    image: "https://images.pexels.com/photos/2854553/pexels-photo-2854553.jpeg?auto=compress&cs=tinysrgb&h=350",
+    price: "KSh 8,500 per person",
+  },
+  {
+    id: "village-visit",
+    title: "Maasai Village Immersion",
+    description: "Spend a morning with a boma: learn beadwork, milking, and the art of jumping dance.",
+    image: "https://images.pexels.com/photos/28933066/pexels-photo-28933066.jpeg?auto=compress&cs=tinysrgb&h=350",
+    price: "KSh 4,500 per person",
+  },
+  {
+    id: "sundowner-dinner",
+    title: "Sundowner Bush Dinner",
+    description: "A private four-course feast on the escarpment — lanterns, gin tonics, and a horizon of fire.",
+    image: "https://images.pexels.com/photos/7946907/pexels-photo-7946907.jpeg?auto=compress&cs=tinysrgb&h=350",
+    price: "KSh 12,000 per couple",
+  },
+]
+
+export default function MaasaiExperiencesSection() {
+  return (
+    <section data-vula-section="maasaiexperiences" id="experiences" className="py-20 bg-[#f9f4f4]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="font-bricolage text-3xl md:text-5xl font-bold text-[#210d0d] text-center mb-4">
+          Beyond the Suite
+        </h2>
+        <p className="font-lora text-center text-[#210d0d]/70 max-w-2xl mx-auto mb-12 italic">
+          Curated adventures that bring the Mara into your soul — from dawn tracking to starlit feasts.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {experiences.map((exp) => (
+            <Card key={exp.id} className="overflow-hidden rounded-xl shadow-md bg-white border border-[#e2d4d4] transition-all duration-200 ease-out hover:shadow-lg hover:-translate-y-1">
+              <div className="relative h-48 overflow-hidden">
+                <Image
+                  src={exp.image}
+                  alt={exp.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <div className="p-5">
+                <h3 className="font-bricolage text-xl font-semibold text-[#210d0d] mb-2">{exp.title}</h3>
+                <p className="font-lora text-sm text-[#210d0d]/70 mb-4 leading-relaxed">{exp.description}</p>
+                <div className="flex items-center justify-between">
+                  <span className="font-bricolage text-lg font-bold text-[#d4af37]">{exp.price}</span>
+                  <Link href={`/booking/${exp.id}`}>
+                    <Button variant="outline" size="sm" className="border-[#dc2626] text-[#dc2626] hover:bg-[#dc2626] hover:text-[#f9f4f4] rounded-lg transition-all duration-200 ease-out">
+                      Book Now
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+        <div className="text-center mt-12">
+          <Link href="/booking">
+            <Button variant="secondary" size="lg" className="bg-[#0f52ba] hover:bg-[#0a3d8f] text-[#f9f4f4] px-8 py-3 rounded-xl shadow-md transition-all duration-200 ease-out">
+              View All Experiences
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}