Deploy
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { Car, Coffee, MapPin, Tag, UtensilsCrossed, Waves, Wifi } from 'lucide-react'
|
||||
|
||||
export default function AboutKwaNtofontofoSection() {
|
||||
const amenities = [
|
||||
{ icon: Coffee, label: 'Tea & Coffee' },
|
||||
{ icon: Car, label: 'Free Secure Parking' },
|
||||
{ icon: Wifi, label: 'Wi-Fi' },
|
||||
{ icon: Tag, label: 'Laundry Service' },
|
||||
{ icon: Waves, label: 'Swimming Pool' },
|
||||
{ icon: UtensilsCrossed, label: 'Breakfast Included' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section data-vula-section="aboutkwantofontofo" id="about-kwantofontofo" className="bg-background py-16 md:py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="relative rounded-xl overflow-hidden shadow-[var(--shadow-lifted)]">
|
||||
<Image
|
||||
src="https://images.pexels.com/photos/6354991/pexels-photo-6354991.jpeg?auto=compress&cs=tinysrgb&h=350"
|
||||
alt="Tranquil pool and entertainment area at KwaNtofontofo"
|
||||
width={800}
|
||||
height={500}
|
||||
className="object-cover w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
||||
A Home Away From Home
|
||||
</h2>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Established in 2004, KwaNtofontofo has grown into one of the finest graded guest houses in KwaZulu-Natal.
|
||||
We blend ubuntu warmth with English formality to create a space where every guest feels treated like a King or Queen.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||||
Just across the street, the Nature Reserve invites you to watch zebras grazing and monkeys swinging in the trees.
|
||||
We are 1 km from Pietermaritzburg Airport, 4 km from UKZN University, and 4–8 km from major shopping centres.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
|
||||
{amenities.map((item) => {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<div key={item.label} className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Icon className="w-4 h-4 text-[#16a34a]" />
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="bg-[#d4af37]/10 rounded-xl p-4 border border-[#d4af37]/20">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-[#8b5a3c] shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">44 Rutherford Circle</p>
|
||||
<p className="text-sm text-muted-foreground">Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user