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