Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,96 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Badge from '@/components/ui/Badge'
|
||||||
|
import { CircleCheckBig, Clock, Mail, MapPin, MessageCircle, Phone, Send } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ContactSection() {
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); setSubmitted(true) }
|
||||||
|
const contactMethods = [
|
||||||
|
{ icon: MapPin, label: 'Visit', value: '12 Florida Road, Morningside, Durban, 4001' },
|
||||||
|
{ icon: Phone, label: 'Call us', value: '+27 31 555 0148' },
|
||||||
|
{ icon: Mail, label: "Email", value: "hello@ekhayalami.co.za" },
|
||||||
|
{ icon: Clock, label: 'Hours', value: 'Mon–Fri 9:00–17:00 · Sat 9:00–13:00' },
|
||||||
|
]
|
||||||
|
const instagramPosts = [
|
||||||
|
{ src: 'https://images.pexels.com/photos/5702305/pexels-photo-5702305.jpeg?auto=compress&cs=tinysrgb&h=350', alt: 'Customer styling eKhayalami throws in a bright Durban home' },
|
||||||
|
{ src: 'https://images.pexels.com/photos/2828584/pexels-photo-2828584.jpeg?auto=compress&cs=tinysrgb&h=350', alt: 'Hand-thrown ceramic vase from the Impendle co-op' },
|
||||||
|
{ src: 'https://images.pexels.com/photos/5831735/pexels-photo-5831735.jpeg?auto=compress&cs=tinysrgb&h=350', alt: 'Pattern detail inspired by Southern African beadwork' },
|
||||||
|
]
|
||||||
|
return (
|
||||||
|
<section data-vula-section="contact" id="contact" className="bg-[#f9f5f4] py-20 lg:py-28">
|
||||||
|
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
|
<div className="grid gap-12 lg:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<Badge variant="accent" className="mb-4 px-3 py-1 text-xs">Durban studio · open all week</Badge>
|
||||||
|
<h2 className="text-4xl font-bold leading-tight text-[#21140d] sm:text-5xl" style={{ fontFamily: 'var(--font-bricolage, sans-serif)' }}>Let's find the piece for your space.</h2>
|
||||||
|
<p className="mt-4 max-w-xl text-lg leading-relaxed text-[#36454F]">Whether you need personalised styling advice or a curated corporate gift box, our Durban team will connect you directly with the right makers from Nongoma, Bulwer, Impendle and Hluhluwe.</p>
|
||||||
|
<div className="mt-8 space-y-4">
|
||||||
|
{contactMethods.map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
return (
|
||||||
|
<div key={item.label} className="flex items-start gap-4 rounded-2xl bg-white p-4 shadow-sm">
|
||||||
|
<div className="rounded-xl bg-[#f9f5f4] p-2.5 text-[#ea580c]"><Icon className="h-5 w-5" /></div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-wider text-[#6b8e23]">{item.label}</p>
|
||||||
|
<p className="font-medium text-[#21140d]">{item.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<a href="https://wa.me/27315550148" target="_blank" rel="noreferrer" className="mt-6 inline-flex items-center gap-3 rounded-xl bg-[#6b8e23] px-5 py-3 font-semibold text-white transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-[#576f1b]"><MessageCircle className="h-5 w-5" /> WhatsApp Us — we reply within a day</a>
|
||||||
|
<div className="mt-10">
|
||||||
|
<h3 className="text-lg font-semibold text-[#21140d]">Tag us <span className="text-[#ea580c]">#eKhayalamiStyling</span></h3>
|
||||||
|
<p className="text-sm text-[#36454F]">Share your space and join a growing community of craft-led homes.</p>
|
||||||
|
<div className="mt-4 grid grid-cols-3 gap-3">
|
||||||
|
{instagramPosts.map((post) => (
|
||||||
|
<div key={post.src} className="relative aspect-square overflow-hidden rounded-2xl">
|
||||||
|
<Image src={post.src} alt={post.alt} fill sizes="(max-width: 768px) 30vw, 160px" className="object-cover transition-transform duration-500 ease-out hover:scale-105" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-white p-6 shadow-xl sm:p-8">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="flex h-full flex-col items-center justify-center py-16 text-center">
|
||||||
|
<CircleCheckBig className="h-12 w-12 text-[#6b8e23]" />
|
||||||
|
<h3 className="mt-4 text-2xl font-bold text-[#21140d]">Sawubona! Enquiry received.</h3>
|
||||||
|
<p className="mt-2 max-w-sm text-[#36454F]">We'll be in touch within one working day to help style your home or put together a gifting quote.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<h3 className="text-2xl font-bold text-[#21140d]">Send an enquiry</h3>
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<Input label="Full name" name="name" placeholder="Thandi Mthembu" required className="rounded-xl border-[#e2d9d4] bg-[#f9f5f4] px-4 py-3" />
|
||||||
|
<Input label="Email or phone" name="contact" placeholder="you@example.com" required className="rounded-xl border-[#e2d9d4] bg-[#f9f5f4] px-4 py-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="interest" className="mb-1.5 block text-sm font-medium text-[#21140d]">I'm interested in</label>
|
||||||
|
<select id="interest" name="interest" className="w-full rounded-xl border border-[#e2d9d4] bg-[#f9f5f4] px-4 py-3 text-[#21140d] outline-none focus:border-[#ea580c] focus:ring-2 focus:ring-[#ea580c]/20">
|
||||||
|
<option>Personalised styling advice</option>
|
||||||
|
<option>Corporate gifting</option>
|
||||||
|
<option>Trade / interior designer enquiry</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="mb-1.5 block text-sm font-medium text-[#21140d]">Tell us about your space</label>
|
||||||
|
<textarea id="message" name="message" rows={4} placeholder="Colours, room type, preferred patterns or quantities..." className="w-full resize-none rounded-xl border border-[#e2d9d4] bg-[#f9f5f4] px-4 py-3 text-[#21140d] outline-none focus:border-[#ea580c] focus:ring-2 focus:ring-[#ea580c]/20" />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" size="lg" className="w-full bg-[#ea580c] text-white hover:bg-[#c2450a]">Send enquiry <Send className="ml-2 h-4 w-4" /></Button>
|
||||||
|
<div className="grid gap-2 pt-1 text-sm text-[#36454F]">
|
||||||
|
<p>Free nationwide delivery over R1 000.</p>
|
||||||
|
<p>7-day easy returns · EFT, Ozow, SnapScan and cards accepted.</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user