Deploy

src/components/sections/FiveRoomHomesteadSection.tsx

@@ -0,0 +1,82 @@
+import Image from 'next/image'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+
+export default function FiveRoomHomesteadSection() {
+  const rooms = [
+    {
+      name: 'The Gable Room',
+      desc: 'Four-poster bed and antique armoire overlooking the front garden and gable.',
+      image: 'https://images.pexels.com/photos/6287228/pexels-photo-6287228.jpeg?auto=compress&cs=tinysrgb&h=350',
+      price: 'R1,800',
+    },
+    {
+      name: 'The Vineyard Room',
+      desc: 'French doors open onto a private stoep with vineyard views. Hand-painted dresser.',
+      image: 'https://images.pexels.com/photos/22937955/pexels-photo-22937955.jpeg?auto=compress&cs=tinysrgb&h=350',
+      price: 'R2,100',
+    },
+    {
+      name: 'The Orchard Room',
+      desc: 'Lace curtains and a claw‑foot tub. Wake to the scent of peach blossoms.',
+      image: 'https://images.pexels.com/photos/6287228/pexels-photo-6287228.jpeg?auto=compress&cs=tinysrgb&h=350',
+      price: 'R2,300',
+    },
+    {
+      name: 'The Garden Room',
+      desc: 'Yellowwood floors and a writing desk. Steps away from the herb garden.',
+      image: 'https://images.pexels.com/photos/32963319/pexels-photo-32963319.jpeg?auto=compress&cs=tinysrgb&h=350',
+      price: 'R1,950',
+    },
+    {
+      name: 'The Homestead Suite',
+      desc: 'The largest room, with a sitting area, fireplace, and views over the dam.',
+      image: 'https://images.pexels.com/photos/5692285/pexels-photo-5692285.jpeg?auto=compress&cs=tinysrgb&h=350',
+      price: 'R2,800',
+    },
+  ]
+
+  return (
+    <section data-vula-section="fiveroomhomestead" id="rooms" className="py-20 bg-[#f4f5f2]">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <span className="inline-block text-sm uppercase tracking-widest text-[#6b8e23] mb-2">Franschhoek</span>
+        <h2 className="text-3xl md:text-5xl font-bold text-[#2c331f] mb-14">Five sanctuaries, each one a story.</h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {rooms.map((room) => (
+            <Card key={room.name} className="bg-white rounded-[22px] overflow-hidden shadow-lg border-none">
+              <div className="relative aspect-video overflow-hidden">
+                <Image
+                  src={room.image}
+                  alt={room.name}
+                  fill
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                  className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <CardHeader>
+                <CardTitle className="text-xl font-semibold text-[#36454F]">{room.name}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-[#2c331f]/80">{room.desc}</p>
+                <p className="mt-2 text-lg font-bold text-[#6b8e23]">{room.price}<span className="text-xs font-normal"> / night</span></p>
+              </CardContent>
+              <CardFooter className="pt-0">
+                <Button variant="outline" size="sm" className="rounded-full border-[#6b8e23] text-[#6b8e23] hover:bg-[#6b8e23] hover:text-white">
+                  <a href="#book-now">Book this room</a>
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        {/* Trust row */}
+        <div className="mt-10 flex flex-wrap gap-4 text-sm text-[#36454F] justify-center">
+          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Free Wi‑Fi</span>
+          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Farm breakfast included</span>
+          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Check‑in 14:00 · Check‑out 11:00</span>
+        </div>
+      </div>
+    </section>
+  )
+}