diff --git a/src/components/sections/ContactVaultSection.tsx b/src/components/sections/ContactVaultSection.tsx new file mode 100644 index 0000000..74d9bb1 --- /dev/null +++ b/src/components/sections/ContactVaultSection.tsx @@ -0,0 +1,163 @@ +'use client' + +import { useVulaContent } from '@/hooks/useVulaContent' +import { useState } from 'react' +import { Clock, Mail, MapPin, Phone } from 'lucide-react' +import Input from '@/components/ui/Input' +import Button from '@/components/ui/Button' +import { Card, CardContent } from '@/components/ui/Card' + +export default function ContactVaultSection() { + const { items, loading } = useVulaContent('business_hours') + const [form, setForm] = useState({ name: '', email: '', message: '' }) + + if (loading) { + return ( +
+
+
+ ) + } + + if (items.length === 0) return null + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + // Enquiry submission placeholder + alert('Thank you for your enquiry. Our concierge will be in touch within 24 hours.') + setForm({ name: '', email: '', message: '' }) + } + + return ( +
+
+
+ {/* Contact details & hours */} +
+
+ + + Private Appointments + +
+

+ Visit Our Sandton Showroom +

+ +
+
+ +
+

Vault by Mkhize

+

5th Floor, Sandton City Mall

+

Sandton, Johannesburg, 2196

+

South Africa

+
+
+
+ +
+

+27 11 234 5678

+

WhatsApp: +27 71 234 5678

+
+
+
+ +

concierge@vaultbymkhize.co.za

+
+ +
+
+ + + Operating Hours + +
+ {items.map((hour) => { + const d = hour.data as { + day_of_week?: string + open_time?: string + close_time?: string + is_closed?: boolean + note?: string + } + return ( +
+ {d.day_of_week} + + {d.is_closed + ? 'Closed' + : `${d.open_time} – ${d.close_time}`} + +
+ ) + })} +

+ Closed on South African public holidays. +

+
+
+
+ + {/* Enquiry form */} +
+ + +

+ Request a Private Appointment +

+

+ Experience the collection in person. Our team will confirm + within 24 hours. +

+ +
+ setForm({ ...form, name: e.target.value })} + required + className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]" + /> + setForm({ ...form, email: e.target.value })} + required + className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]" + /> + setForm({ ...form, message: e.target.value })} + required + className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]" + /> + +
+
+
+
+
+
+
+ ) +}