Deploy

src/components/sections/RoyalKwaNtofontofoServicesSection.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent } from "@/components/ui/Card"
+import { Car, Coffee, Flame, MapPin, Sofa, Star, Tag, UtensilsCrossed, Waves } from 'lucide-react'
+
+export default function RoyalKwaNtofontofoServicesSection() {
+  const services = [
+    { icon: Coffee, title: "Traditional English Breakfast", desc: "Start your day with a full English breakfast, served fresh daily." },
+    { icon: UtensilsCrossed, title: "Personalised Dinner", desc: "Request a home-cooked dinner with local flavours and seasonal produce." },
+    { icon: Flame, title: "Braai Facilities", desc: "Enjoy a classic South African braai by the pool in our tranquil entertainment area." },
+    { icon: Car, title: "Airport Transfers", desc: "We are 1 km from Pietermaritzburg Airport – we can arrange pick-up and drop-off." },
+    { icon: Waves, title: "Swimming Pool", desc: "Take a dip in our sparkling pool, surrounded by lush gardens and privacy." },
+    { icon: Sofa, title: "Lounge & Dining Room", desc: "Relax in our cosy lounge or enjoy meals in the elegant dining room." },
+    { icon: Star, title: "Fully Equipped Kitchen", desc: "Guests have access to a modern kitchen for self-catering convenience." },
+    { icon: Tag, title: "Launderette & Laundry", desc: "We offer laundry services to keep your wardrobe fresh during your stay." },
+  ]
+
+  return (
+    <section data-vula-section="royalkwantofontofoservices" id="services" className="py-20 px-6 bg-[#FDF6EC]">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-12">
+          <span className="text-sm uppercase tracking-widest text-[#E67E22] font-semibold">Royal Services</span>
+          <h2 className="text-3xl md:text-4xl font-bold text-[#2C1810] mt-2 mb-4">
+            Everything You Need
+          </h2>
+          <p className="text-[#2C1810]/70 max-w-2xl mx-auto">
+            From hearty breakfasts to secure parking, every detail is designed to make
+            your stay effortless and memorable.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {services.map((service, index) => {
+            const IconComponent = service.icon
+            return (
+              <Card key={index} className="shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                <CardContent className="p-6 flex flex-col items-center text-center">
+                  <div className="w-12 h-12 rounded-full bg-[#C0392B]/10 flex items-center justify-center mb-4">
+                    <IconComponent className="w-6 h-6 text-[#C0392B]" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-[#2C1810] mb-2">{service.title}</h3>
+                  <p className="text-sm text-[#2C1810]/70">{service.desc}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}