Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,94 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
|
||||||
|
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
import { Card, CardContent } from '@/components/ui/Card'
|
||||||
|
|
||||||
|
const ADDRESS = 'Shop 12, Fourways Crossing, Witkoppen Road, Fourways, Johannesburg, 2191'
|
||||||
|
const PHONE = '+27 82 555 0199'
|
||||||
|
const PHONE_HREF = 'tel:+27825550199'
|
||||||
|
const EMAIL = 'bookings@zamasalon.co.za'
|
||||||
|
const WHATSAPP_HREF = 'https://wa.me/27825550199'
|
||||||
|
|
||||||
|
export default function LocationContactSection() {
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setSubmitted(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section data-vula-section="locationcontact" id="location-contact" className="bg-white py-20">
|
||||||
|
<div className="mx-auto max-w-7xl px-4">
|
||||||
|
<div className="mb-12 max-w-2xl">
|
||||||
|
<p className="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]">Visit the salon</p>
|
||||||
|
<h2 className="font-sora text-3xl font-bold text-[#1A2B3C] md:text-4xl">We're right here in Fourways - pull in and say hello.</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||||
|
<Card className="overflow-hidden rounded-xl shadow-md">
|
||||||
|
<div className="h-64 w-full sm:h-72">
|
||||||
|
<iframe
|
||||||
|
title="Zama Salon location in Fourways, Johannesburg"
|
||||||
|
src="https://www.google.com/maps?q=Zama+Salon+Fourways+Johannesburg&output=embed"
|
||||||
|
className="h-full w-full border-0"
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
allowFullScreen
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<CardContent className="space-y-4 p-5">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><MapPin className="h-5 w-5" /></span>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-[#1A2B3C]/60">Address</p>
|
||||||
|
<p className="text-[#1A2B3C]">{ADDRESS}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><Phone className="h-5 w-5" /></span>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-[#1A2B3C]/60">Call or WhatsApp</p>
|
||||||
|
<a href={PHONE_HREF} className="text-[#1A2B3C] hover:text-[#0077BE]">{PHONE}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<span className="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]"><Mail className="h-5 w-5" /></span>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-[#1A2B3C]/60">Email</p>
|
||||||
|
<a href={`mailto:${EMAIL}`} className="text-[#1A2B3C] hover:text-[#0077BE]">{EMAIL}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="rounded-xl shadow-md">
|
||||||
|
<CardContent className="p-5 md:p-8">
|
||||||
|
<h3 className="text-xl font-bold text-[#1A2B3C]">Send us a message</h3>
|
||||||
|
<p className="mt-1 text-sm text-[#1A2B3C]/60">Tell us what you need - we'll confirm your appointment.</p>
|
||||||
|
{submitted ? (
|
||||||
|
<div className="mt-6 rounded-xl bg-[#F0F8FF] p-6 text-center">
|
||||||
|
<p className="font-semibold text-[#0077BE]">Thank you! Your message has been received.</p>
|
||||||
|
<p className="mt-1 text-sm text-[#1A2B3C]/70">We'll get back to you within one business day.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||||
|
<Input name="name" placeholder="Your name" required className="w-full rounded-xl border-[#d4dadd] bg-white px-4 py-3" />
|
||||||
|
<Input name="phone" type="tel" placeholder="Phone or WhatsApp number" required className="w-full rounded-xl border-[#d4dadd] bg-white px-4 py-3" />
|
||||||
|
<textarea name="message" placeholder="What are you booking? (cut, colour, keratin, braids, nails...)" required rows={4} className="w-full rounded-xl border border-[#d4dadd] bg-white px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#0077BE]/30" />
|
||||||
|
<Button type="submit" className="w-full !bg-[#0077BE] !text-white hover:!bg-[#0077BE]/90 rounded-full py-3">Send message</Button>
|
||||||
|
<div className="flex flex-col gap-3 pt-1 sm:flex-row">
|
||||||
|
<a href={PHONE_HREF} className="inline-flex items-center justify-center gap-2 rounded-full border border-[#00A8CC] px-5 py-3 text-sm font-semibold text-[#0077BE] transition-all duration-200 ease-out hover:bg-[#00A8CC]/10"><Phone className="h-4 w-4" /> Call now</a>
|
||||||
|
<a href={WHATSAPP_HREF} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center gap-2 rounded-full bg-[#25D366] px-5 py-3 text-sm font-semibold text-white transition-all duration-200 ease-out hover:bg-[#25D366]/90"><MessageCircle className="h-4 w-4" /> WhatsApp us</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user