vula-projects/vula-178c5c77
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-06-23 08:38:54 +00:00
parent f8b10895a6
commit a69ed504cd
1 changed files with 189 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/FindUsInNatureSection.tsx
+189
View File
@@ -0,0 +1,189 @@
'use client'
import { useEmDashContent } from '@/hooks/useEmDashContent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Car, Clock, Lock, Mail, MapPin, Phone, Shield, Wifi } from 'lucide-react'
import Image from 'next/image'
export default function FindUsInNatureSection() {
const { items, loading } = useEmDashContent('business_hours')
if (loading) {
return (
<div className="flex justify-center py-16">
<div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
</div>
)
}
if (items.length === 0) return null
const hours = items.map((item) => {
const d = item.data as {
day_of_week?: string
open_time?: string
close_time?: string
is_closed?: boolean
note?: string
}
return {
day: d.day_of_week ?? '',
open: d.open_time ?? '',
close: d.close_time ?? '',
closed: d.is_closed ?? false,
note: d.note ?? ''
}
})
return (
<section
id="find-us-in-nature"
data-vula-section="findusinnature"
data-vula-cms="business_hours"
className="py-20 px-6 bg-white"
>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-4xl font-bold text-[#111827] mb-2">
Find Us in Nature
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
Nestled in the quiet suburb of Bisley, just a stone&#39;s throw from the airport
and the Ukulinga Nature Reserve – your peaceful home-away-from-home.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Left column: address & contact */}
<Card className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out">
<CardHeader>
<CardTitle className="text-2xl font-semibold text-[#111827] flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#8b5a3c]" />
Our Location
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-[#d4af37] mt-1 shrink-0" />
<div>
<p className="font-medium text-[#111827]">44 Rutherford Circle</p>
<p className="text-gray-600">Bisley, Pietermaritzburg, 3201</p>
<p className="text-gray-600">KwaZulu-Natal, South Africa</p>
</div>
</div>
<div className="flex items-start gap-3">
<Phone className="w-5 h-5 text-[#d4af37] mt-1 shrink-0" />
<div>
<p className="font-medium text-[#111827]">+27 33 000 0000</p>
<p className="text-sm text-gray-500">Call us direct</p>
</div>
</div>
<div className="flex items-start gap-3">
<Mail className="w-5 h-5 text-[#d4af37] mt-1 shrink-0" />
<div>
<p className="font-medium text-[#111827]">info@kwantofontofo.co.za</p>
<p className="text-sm text-gray-500">We reply within 2 hours</p>
</div>
</div>
<div className="flex flex-wrap gap-3 mt-6">
<div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-full">
<Car className="w-4 h-4 text-[#16a34a]" />
Secure Parking
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-full">
<Lock className="w-4 h-4 text-[#16a34a]" />
Burglar Alarm
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-full">
<Wifi className="w-4 h-4 text-[#16a34a]" />
Free Wi-Fi
</div>
</div>
</CardContent>
</Card>
{/* Right column: hours & landmarks */}
<div className="space-y-6">
{/* Business Hours */}
<Card className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)]">
<CardHeader>
<CardTitle className="text-2xl font-semibold text-[#111827] flex items-center gap-2">
<Clock className="w-5 h-5 text-[#8b5a3c]" />
Reception Hours
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-1">
{hours.map((h, idx) => (
<div
key={idx}
className="flex justify-between items-center py-1 border-b border-gray-100 last:border-0"
>
<span className="font-medium text-[#111827] w-28">{h.day}</span>
{h.closed ? (
<span className="text-red-500 text-sm font-medium">Closed</span>
) : (
<span className="text-gray-700">
{h.open} – {h.close}
</span>
)}
{h.note && (
<span className="text-xs text-gray-400 ml-2">({h.note})</span>
)}
</div>
))}
</div>
</CardContent>
</Card>
{/* Nearby landmarks */}
<Card className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)]">
<CardHeader>
<CardTitle className="text-2xl font-semibold text-[#111827] flex items-center gap-2">
<MapPin className="w-5 h-5 text-[#8b5a3c]" />
What&#39;s Nearby
</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2">
<li className="flex items-center gap-3">
<span className="w-2 h-2 bg-[#d4af37] rounded-full" />
<span className="text-gray-700">1 km – Pietermaritzburg Airport</span>
</li>
<li className="flex items-center gap-3">
<span className="w-2 h-2 bg-[#d4af37] rounded-full" />
<span className="text-gray-700">4 km – UKZN University</span>
</li>
<li className="flex items-center gap-3">
<span className="w-2 h-2 bg-[#d4af37] rounded-full" />
<span className="text-gray-700">4–8 km – Major shopping centres</span>
</li>
<li className="flex items-center gap-3">
<span className="w-2 h-2 bg-[#d4af37] rounded-full" />
<span className="text-gray-700">Across the road – Ukulinga Nature Reserve</span>
</li>
</ul>
</CardContent>
</Card>
</div>
</div>
{/* Map placeholder */}
<div className="mt-10 rounded-xl overflow-hidden shadow-[var(--shadow-lifted)]">
<div className="relative h-64 w-full">
<Image
src="https://images.pexels.com/photos/13871326/pexels-photo-13871326.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="Aerial view of Bisley, Pietermaritzburg"
fill
sizes="(max-width: 768px) 100vw, 50vw"
className="object-cover"
/>
</div>
</div>
</div>
</section>
)
}