Deploy

src/components/sections/HomeComfortsServicesSection.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import Image from 'next/image'
+import { ChefHat, Star, Trees, Tv, UtensilsCrossed, Waves } from 'lucide-react'
+
+const services = [
+  {
+    icon: UtensilsCrossed,
+    title: 'Traditional English Breakfast',
+    desc: 'Start your day with a hearty full English breakfast, served fresh each morning in our dining room. Dinner available on request.',
+  },
+  {
+    icon: Star,
+    title: 'Guest Laundry',
+    desc: 'Laundry service available – just drop your items and we take care of the rest.',
+  },
+  {
+    icon: ChefHat,
+    title: 'Fully Equipped Kitchen',
+    desc: 'A modern kitchen for self-catering guests, with all utensils, stove, microwave and fridge.',
+  },
+  {
+    icon: Waves,
+    title: 'Swimming Pool & Braai',
+    desc: 'Cool off in our pool or fire up the braai in the tranquil entertainment area – the perfect KZN afternoon.',
+  },
+  {
+    icon: Tv,
+    title: 'Lounge with DStv',
+    desc: 'Relax in our cosy lounge with comfortable seating and full DStv bouquet for your favourite shows.',
+  },
+  {
+    icon: Trees,
+    title: 'Private Nature Reserve Access',
+    desc: 'Step across the street into the reserve – spot zebras grazing, monkeys playing, and breathe the bushveld air.',
+  },
+]
+
+export default function HomeComfortsServicesSection() {
+  return (
+    <section data-vula-section="homecomfortsservices" id="home-comforts-services" className="bg-white py-24 px-4">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">All the Comforts of Home</h2>
+        <p className="text-center text-[#2C1810]/70 mb-12 max-w-2xl mx-auto">
+          Everything you need under one roof – from a hearty breakfast to a sunset braai, we have you covered.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+          {services.map((svc, i) => {
+            const Icon = svc.icon
+            return (
+              <div key={i} className="flex items-start gap-4 p-5 rounded-xl bg-[#FDF6EC]/60 border border-[#E67E22]/10">
+                <div className="shrink-0 w-12 h-12 rounded-full bg-[#E67E22]/10 flex items-center justify-center">
+                  <Icon className="w-6 h-6 text-[#E67E22]" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-[#2C1810] mb-1">{svc.title}</h3>
+                  <p className="text-sm text-[#2C1810]/70">{svc.desc}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}