Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,144 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEmDashContent } from '@/hooks/useEmDashContent'
|
||||||
|
import { Clock, Mail, MapPin, Phone } from 'lucide-react'
|
||||||
|
|
||||||
|
interface BusinessHour {
|
||||||
|
day_of_week: string
|
||||||
|
open_time?: string
|
||||||
|
close_time?: string
|
||||||
|
is_closed?: boolean
|
||||||
|
note?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContactSection() {
|
||||||
|
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) => item.data as BusinessHour)
|
||||||
|
|
||||||
|
// Static contact info (these could also come from CMS but are hardcoded per brief)
|
||||||
|
const address = '23 Mary Fitzgerald Street, Newtown, Johannesburg, 2001'
|
||||||
|
const phone = '+27 11 832 4500'
|
||||||
|
const email = 'info@mashobanefirm.co.za'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="contact"
|
||||||
|
data-vula-section="contact"
|
||||||
|
data-vula-cms="business_hours"
|
||||||
|
className="py-20 bg-white"
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4 max-w-7xl">
|
||||||
|
<div className="text-center mb-14">
|
||||||
|
<h2 className="text-4xl font-bold text-[#111827] mb-4">Get in Touch</h2>
|
||||||
|
<p className="text-lg text-[#36454F] max-w-2xl mx-auto">
|
||||||
|
We're here for you. Call, email, or visit our offices in Newtown.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||||
|
{/* Left — Contact details */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
|
||||||
|
<MapPin className="w-6 h-6 text-[#000080]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#111827]">Office Address</h3>
|
||||||
|
<p className="text-[#36454F]">{address}</p>
|
||||||
|
<p className="text-sm text-[#16a34a] mt-1">
|
||||||
|
<a
|
||||||
|
href="https://maps.google.com/?q=23+Mary+Fitzgerald+Street+Newtown+Johannesburg"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="underline underline-offset-2 hover:no-underline"
|
||||||
|
>
|
||||||
|
View on Google Maps
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
|
||||||
|
<Phone className="w-6 h-6 text-[#000080]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#111827]">Phone</h3>
|
||||||
|
<p className="text-[#36454F]">
|
||||||
|
<a href={`tel:${phone}`} className="hover:text-[#16a34a] transition-colors duration-200">{phone}</a>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-[#16a34a] mt-1">
|
||||||
|
<a
|
||||||
|
href="https://wa.me/27118324500"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="underline underline-offset-2 hover:no-underline"
|
||||||
|
>
|
||||||
|
WhatsApp Us
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
|
||||||
|
<Mail className="w-6 h-6 text-[#000080]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#111827]">Email</h3>
|
||||||
|
<p className="text-[#36454F]">
|
||||||
|
<a href={`mailto:${email}`} className="hover:text-[#16a34a] transition-colors duration-200">{email}</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
|
||||||
|
<Clock className="w-6 h-6 text-[#000080]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[#111827]">Office Hours</h3>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{hours.map((h, i) => (
|
||||||
|
<div key={i} className="flex justify-between text-[#36454F] text-sm">
|
||||||
|
<span className="font-medium">{h.day_of_week}</span>
|
||||||
|
{h.is_closed ? (
|
||||||
|
<span className="text-[#16a34a]">Closed</span>
|
||||||
|
) : (
|
||||||
|
<span>{h.open_time} – {h.close_time}</span>
|
||||||
|
)}
|
||||||
|
{h.note && <span className="text-xs italic ml-2">({h.note})</span>}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-[#36454F] mt-2">Closed on South African public holidays.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right — Map placeholder */}
|
||||||
|
<div className="rounded-xl overflow-hidden shadow-[var(--shadow-lifted)] border border-[#e5e7eb]">
|
||||||
|
<div className="aspect-[4/3] bg-[#f3f4f6] flex items-center justify-center">
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<MapPin className="w-12 h-12 text-[#000080] mx-auto mb-2" />
|
||||||
|
<p className="text-[#36454F] font-medium">Map loaded here</p>
|
||||||
|
<p className="text-sm text-[#6b7280]">23 Mary Fitzgerald Street, Newtown, Johannesburg</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user