Deploy

src/components/sections/AmenitiesSection.tsx

@@ -0,0 +1,40 @@
+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>
+  )
+}