Vula Builder
83 lines
4.0 KiB
TypeScript
83 lines
4.0 KiB
TypeScript
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>
|
||
)
|
||
}
|