From 4ae2e9db7e9f7ba002a3039f04955eb3d709afcf Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Mon, 3 Aug 2026 11:42:11 +0000
Subject: [PATCH] Deploy

---
 .../sections/LocationContactSection.tsx       | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/components/sections/LocationContactSection.tsx

diff --git a/src/components/sections/LocationContactSection.tsx b/src/components/sections/LocationContactSection.tsx
new file mode 100644
index 0000000..1cde880
--- /dev/null
+++ b/src/components/sections/LocationContactSection.tsx
@@ -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>
+  )
+}