Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,141 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEmDashContent } from '@/hooks/useEmDashContent'
|
||||||
|
import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
|
||||||
|
import Badge from '@/components/ui/Badge'
|
||||||
|
|
||||||
|
export default function ContactSection() {
|
||||||
|
const { items: hours, 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-[#d4af37] border-t-transparent animate-spin" /></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static contact details – consistent across the site
|
||||||
|
const contactDetails = {
|
||||||
|
address: 'R618, Mkuze, KwaZulu-Natal, 3965',
|
||||||
|
phone: '+27 82 123 4567',
|
||||||
|
email: 'reservations@mpofanalodge.co.za',
|
||||||
|
whatsapp: '+27 82 123 4567',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="contact"
|
||||||
|
data-vula-section="contact"
|
||||||
|
data-vula-cms="business_hours"
|
||||||
|
className="py-28 bg-[#0a120e] text-[#e7eeea] border-t border-[#304036]"
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4 max-w-6xl">
|
||||||
|
<div className="flex items-center justify-center gap-4 mb-6">
|
||||||
|
<span className="block w-14 h-px bg-[#d4af37]" />
|
||||||
|
<span className="text-[#d4af37] text-xs font-sans uppercase tracking-[0.2em]">
|
||||||
|
Get in Touch
|
||||||
|
</span>
|
||||||
|
<span className="block w-14 h-px bg-[#d4af37]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="font-serif font-light text-4xl md:text-5xl text-center leading-tight mb-16">
|
||||||
|
We're here to
|
||||||
|
<span className="italic text-[#d4af37]"> help</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
{/* Map embed */}
|
||||||
|
<div className="rounded-lg overflow-hidden border border-[#304036] h-80">
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3589.123456789!2d32.0!4d-27.5!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjfCsDMwJzAwLjAiUyAzMsKwMDAnMDAuMCJF!5e0!3m2!1sen!2sza!4v1710000000000"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
style={{ border: 0 }}
|
||||||
|
allowFullScreen
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
title="Mpofana Lodge location"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact info + hours */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Address, Phone, Email, WhatsApp */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<MapPin className="w-5 h-5 text-[#d4af37] mt-0.5 shrink-0" />
|
||||||
|
<p className="text-[#b0bfb8]">{contactDetails.address}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Phone className="w-5 h-5 text-[#d4af37] shrink-0" />
|
||||||
|
<p className="text-[#b0bfb8]">{contactDetails.phone}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Mail className="w-5 h-5 text-[#d4af37] shrink-0" />
|
||||||
|
<p className="text-[#b0bfb8]">{contactDetails.email}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<MessageCircle className="w-5 h-5 text-[#d4af37] shrink-0" />
|
||||||
|
<a
|
||||||
|
href={`https://wa.me/${contactDetails.whatsapp.replace(/\s/g, '')}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#b0bfb8] hover:text-[#d4af37] transition-colors duration-200 underline underline-offset-2"
|
||||||
|
>
|
||||||
|
WhatsApp Us
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Opening hours from CMS */}
|
||||||
|
{hours.length > 0 && (
|
||||||
|
<div className="border-t border-[#304036] pt-6">
|
||||||
|
<h3 className="font-sans text-xs uppercase tracking-[0.15em] text-[#d4af37] mb-4">
|
||||||
|
Opening Hours
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{hours.map((item) => {
|
||||||
|
const d = item.data as {
|
||||||
|
day_of_week?: string
|
||||||
|
open_time?: string
|
||||||
|
close_time?: string
|
||||||
|
is_closed?: boolean
|
||||||
|
note?: string
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
className="flex justify-between text-sm text-[#b0bfb8]"
|
||||||
|
>
|
||||||
|
<span className="font-medium">{d.day_of_week}</span>
|
||||||
|
<span>
|
||||||
|
{d.is_closed
|
||||||
|
? 'Closed'
|
||||||
|
: `${d.open_time} – ${d.close_time}`}
|
||||||
|
{d.note && (
|
||||||
|
<span className="text-[#6a7a72] ml-2">
|
||||||
|
({d.note})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
<p className="text-[#6a7a72] text-xs mt-3">
|
||||||
|
* Public holidays may affect hours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Enquiry teaser */}
|
||||||
|
<div className="bg-[#1a2720] rounded-lg p-5 border border-[#304036]">
|
||||||
|
<p className="text-[#b0bfb8] text-sm">
|
||||||
|
Questions about your stay? We'd love to hear from you.
|
||||||
|
Send us a message or call — every enquiry is answered within 4
|
||||||
|
hours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user