Deploy
This commit is contained in:
Vula Builder
@@ -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 (
|
||||||
|
<div className="flex justify-center py-24">
|
||||||
|
<div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin text-[#c0c0c0]" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<section
|
||||||
|
id="contact-vault"
|
||||||
|
data-vula-section="contactvault"
|
||||||
|
data-vula-cms="business_hours"
|
||||||
|
className="bg-[#0f0f17] py-24 lg:py-32 px-4"
|
||||||
|
>
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||||
|
{/* Contact details & hours */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<span className="h-px w-14 bg-[#c0c0c0]" />
|
||||||
|
<span className="font-sans text-xs uppercase tracking-[0.15em] text-[#c0c0c0]">
|
||||||
|
Private Appointments
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="font-serif text-3xl lg:text-4xl text-[#e7e7ee] leading-tight mb-12">
|
||||||
|
Visit Our <span className="italic text-[#c0c0c0]">Sandton</span> Showroom
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6 text-[#a0a0b0] text-sm">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<MapPin className="w-5 h-5 mt-0.5 text-[#c0c0c0]" />
|
||||||
|
<div>
|
||||||
|
<p className="text-[#e7e7ee] font-medium">Vault by Mkhize</p>
|
||||||
|
<p>5th Floor, Sandton City Mall</p>
|
||||||
|
<p>Sandton, Johannesburg, 2196</p>
|
||||||
|
<p>South Africa</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Phone className="w-5 h-5 mt-0.5 text-[#c0c0c0]" />
|
||||||
|
<div>
|
||||||
|
<p>+27 11 234 5678</p>
|
||||||
|
<p className="text-xs mt-1">WhatsApp: +27 71 234 5678</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Mail className="w-5 h-5 mt-0.5 text-[#c0c0c0]" />
|
||||||
|
<p>concierge@vaultbymkhize.co.za</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-[#303040]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Clock className="w-5 h-5 text-[#c0c0c0]" />
|
||||||
|
<span className="text-[#e7e7ee] font-medium uppercase text-xs tracking-widest">
|
||||||
|
Operating Hours
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{items.map((hour) => {
|
||||||
|
const d = hour.data as {
|
||||||
|
day_of_week?: string
|
||||||
|
open_time?: string
|
||||||
|
close_time?: string
|
||||||
|
is_closed?: boolean
|
||||||
|
note?: string
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={hour.id}
|
||||||
|
className="flex justify-between text-sm py-2 border-b border-[#303040]/50 last:border-none"
|
||||||
|
>
|
||||||
|
<span className="text-[#e7e7ee]">{d.day_of_week}</span>
|
||||||
|
<span className="text-[#a0a0b0]">
|
||||||
|
{d.is_closed
|
||||||
|
? 'Closed'
|
||||||
|
: `${d.open_time} – ${d.close_time}`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<p className="text-xs text-[#707080] mt-4">
|
||||||
|
Closed on South African public holidays.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enquiry form */}
|
||||||
|
<div>
|
||||||
|
<Card className="bg-[#18181b] border border-[#303040] rounded-lg">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<h3 className="font-sans text-xl text-[#e7e7ee] mb-2">
|
||||||
|
Request a Private Appointment
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[#a0a0b0] mb-8">
|
||||||
|
Experience the collection in person. Our team will confirm
|
||||||
|
within 24 hours.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<Input
|
||||||
|
label="Full Name"
|
||||||
|
placeholder="Your name"
|
||||||
|
value={form.name}
|
||||||
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||||
|
required
|
||||||
|
className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Email Address"
|
||||||
|
type="email"
|
||||||
|
placeholder="you@example.com"
|
||||||
|
value={form.email}
|
||||||
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||||
|
required
|
||||||
|
className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Message"
|
||||||
|
placeholder="Your enquiry or preferred date"
|
||||||
|
value={form.message}
|
||||||
|
onChange={(e) => setForm({ ...form, message: e.target.value })}
|
||||||
|
required
|
||||||
|
className="bg-[#0f0f17] border-[#303040] text-[#e7e7ee] placeholder:text-[#707080]"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="default"
|
||||||
|
className="w-full bg-[#c0c0c0] text-[#0f0f17] hover:bg-[#d0d0d0] py-4 uppercase tracking-widest text-sm font-semibold"
|
||||||
|
>
|
||||||
|
Send Enquiry
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user