Deploy
This commit is contained in:
Vula Builder
@@ -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'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'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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user