Vula Builder
79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
'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>
|
|
)
|
|
} |