Vula Builder
40 lines
2.5 KiB
TypeScript
40 lines
2.5 KiB
TypeScript
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
|
|
import { Eye, Heart, TreePine, UtensilsCrossed, Wifi, Wine } from 'lucide-react'
|
|
|
|
const amenities = [
|
|
{ icon: Wifi, title: 'Complimentary Wi-Fi', description: 'Stay connected even in the bush with high-speed satellite internet in all rooms and common areas.' },
|
|
{ icon: UtensilsCrossed, title: 'Fine Dining', description: 'Enjoy gourmet African cuisine prepared by our in-house chef using fresh local ingredients.' },
|
|
{ icon: Wine, title: 'Curated Wine Cellar', description: "A selection of South Africa's finest wines available for pairing with your meals." },
|
|
{ icon: TreePine, title: 'Nature Trails', description: "Guided bush walks led by experienced rangers revealing the region's flora and fauna." },
|
|
{ icon: Eye, title: 'Game Drives', description: 'Daily morning and sunset game drives in open vehicles across the private reserve.' },
|
|
{ icon: Heart, title: 'Spa & Wellness', description: 'Bespoke treatments using organic African botanicals in an open-air spa overlooking the plains.' },
|
|
]
|
|
|
|
export default function AmenitiesSection() {
|
|
return (
|
|
<section data-vula-section="amenities" id="amenities" className="py-20 lg:py-28 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-center mb-4 text-[#111827]">Luxury Amenities</h2>
|
|
<p className="text-lg text-neutral-600 text-center max-w-2xl mx-auto mb-12 leading-relaxed">
|
|
Every detail curated for an unforgettable wilderness experience.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{amenities.map((item, index) => {
|
|
const Icon = item.icon
|
|
return (
|
|
<Card key={index} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out p-8 text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<Icon className="w-10 h-10 text-[#36454F]" />
|
|
</div>
|
|
<CardTitle className="text-xl font-semibold mb-2 text-[#111827]">{item.title}</CardTitle>
|
|
<CardContent className="p-0">
|
|
<p className="text-neutral-600 text-sm leading-relaxed">{item.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |