Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,145 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useVulaContent } from '@/hooks/useVulaContent'
|
||||
import { Clock, Mail, MapPin, Phone } from 'lucide-react'
|
||||
import Input from '@/components/ui/Input'
|
||||
import Button from '@/components/ui/Button'
|
||||
|
||||
export default function ContactSection() {
|
||||
const { items, loading } = useVulaContent('business_hours')
|
||||
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
|
||||
const [sent, setSent] = useState(false)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center py-16">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-[#6b8e23] border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (items.length === 0) return null
|
||||
|
||||
const hours = items.map((item) => item.data as {
|
||||
day_of_week?: string
|
||||
open_time?: string
|
||||
close_time?: string
|
||||
is_closed?: boolean
|
||||
note?: string
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// In production send to backend
|
||||
setSent(true)
|
||||
setFormData({ name: '', email: '', message: '' })
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" data-vula-section="contact" data-vula-cms="business_hours" className="py-20 bg-[#f4f5f2]">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#2c331f]">We'd Love to Hear from You</h2>
|
||||
<p className="text-[#8b5a3c] mt-3 max-w-lg mx-auto">
|
||||
From our studio in Pretoria to your skin — every enquiry is handwritten care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
{/* Contact details */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<MapPin className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#2c331f]">Studio & Workshop</h3>
|
||||
<p className="text-[#8b5a3c]">42 Marula Lane, Hatfield, Pretoria, 0028</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Phone className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#2c331f]">Phone</h3>
|
||||
<p className="text-[#8b5a3c]">+27 12 345 6789</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Mail className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#2c331f]">Email</h3>
|
||||
<p className="text-[#8b5a3c]">hello@ngcobonaturals.co.za</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Clock className="w-5 h-5 text-[#6b8e23] mt-1 shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#2c331f]">Trading Hours</h3>
|
||||
<ul className="text-[#8b5a3c] space-y-1">
|
||||
{hours.map((h, i) => (
|
||||
<li key={i} className="flex justify-between gap-4">
|
||||
<span>{h.day_of_week ?? '—'}</span>
|
||||
{h.is_closed ? (
|
||||
<span className="italic">Closed</span>
|
||||
) : (
|
||||
<span>{h.open_time ?? '—'} – {h.close_time ?? '—'}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-xs text-[#8b5a3c]/70 mt-2">Closed on South African public holidays.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enquiry form */}
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg shadow-[#6b8e23]/5 border border-[#daddd4]">
|
||||
<h3 className="text-xl font-bold text-[#2c331f] mb-6">Send an Enquiry</h3>
|
||||
{sent ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 mx-auto bg-[#6b8e23]/10 rounded-full flex items-center justify-center mb-4">
|
||||
<Mail className="w-6 h-6 text-[#6b8e23]" />
|
||||
</div>
|
||||
<p className="text-[#6b8e23] font-medium">Thank you! We'll be in touch soon.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="rounded-xl border-[#daddd4] bg-[#f4f5f2]"
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="rounded-xl border-[#daddd4] bg-[#f4f5f2]"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Tell us about your skincare journey..."
|
||||
rows={4}
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
required
|
||||
className="w-full rounded-xl border border-[#daddd4] bg-[#f4f5f2] p-3 focus:outline-none focus:ring-2 focus:ring-[#6b8e23] resize-none"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="default"
|
||||
size="md"
|
||||
className="w-full bg-[#6b8e23] hover:bg-[#5a7a1d] text-white border-none rounded-xl"
|
||||
>
|
||||
Send Message
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user