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