Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,138 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video } from 'lucide-react'
|
||||
import Button from '@/components/ui/Button'
|
||||
import Input from '@/components/ui/Input'
|
||||
|
||||
export default function ContactSection() {
|
||||
const [form, setForm] = useState({ name: '', email: '', message: '' })
|
||||
const [sent, setSent] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (form.name && form.email && form.message) {
|
||||
setSent(true)
|
||||
setForm({ name: '', email: '', message: '' })
|
||||
}
|
||||
}
|
||||
|
||||
const contactDetails = {
|
||||
address: '123 Vilakazi Street, Orlando West, Soweto, 1804',
|
||||
phone: '+27 11 123 4567',
|
||||
email: 'info@mzansiurban.co.za',
|
||||
whatsapp: '+27 11 123 4567'
|
||||
}
|
||||
|
||||
return (
|
||||
<section data-vula-section="contact" id="contact" className="bg-white border-t-[3px] border-black py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Left: Form + contact info */}
|
||||
<div>
|
||||
<h2 className="text-4xl md:text-5xl font-['Archivo_Black'] uppercase text-black mb-4">
|
||||
Get in Touch
|
||||
</h2>
|
||||
<p className="font-mono text-sm uppercase text-[#101418] mb-8">
|
||||
Collabs, stockist enquiries, or just to holler.
|
||||
</p>
|
||||
|
||||
{sent ? (
|
||||
<p className="text-[#16a34a] font-bold text-lg uppercase">
|
||||
Message received. We'll hit you back within 48 hours.
|
||||
</p>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
className="border-2 border-black bg-white text-black placeholder-gray-500 px-4 py-3 uppercase text-sm"
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
required
|
||||
className="border-2 border-black bg-white text-black placeholder-gray-500 px-4 py-3 uppercase text-sm"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Your message"
|
||||
value={form.message}
|
||||
onChange={(e) => setForm({ ...form, message: e.target.value })}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full border-2 border-black bg-white text-black placeholder-gray-500 px-4 py-3 uppercase text-sm resize-none"
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
size="lg"
|
||||
type="submit"
|
||||
className="bg-[#16a34a] text-black border-2 border-black shadow-[4px_4px_0_0_black] hover:shadow-[2px_2px_0_0_black] transition-all duration-200 ease-out uppercase tracking-widest text-sm"
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Contact details */}
|
||||
<div className="mt-10 space-y-4 font-mono text-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-[#16a34a]" />
|
||||
<span className="text-black">{contactDetails.address}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-[#16a34a]" />
|
||||
<span className="text-black">{contactDetails.phone}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-[#16a34a]" />
|
||||
<span className="text-black">{contactDetails.email}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageCircle className="w-5 h-5 text-[#16a34a]" />
|
||||
<a
|
||||
href={`https://wa.me/${contactDetails.whatsapp.replace(/\+/g, '').replace(/\s/g, '')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-black underline hover:text-[#16a34a] transition-colors"
|
||||
>
|
||||
WhatsApp Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social links */}
|
||||
<div className="flex gap-6 mt-8">
|
||||
<a href="https://www.instagram.com/mzansiurban" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors">
|
||||
<Camera className="w-6 h-6 text-black" />
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@mzansiurban" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors">
|
||||
<Video className="w-6 h-6 text-black" />
|
||||
</a>
|
||||
<a href="https://www.facebook.com/mzansiurban" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors">
|
||||
<Globe className="w-6 h-6 text-black" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Embedded map placeholder */}
|
||||
<div className="relative w-full min-h-[300px] lg:min-h-full border-[3px] border-black shadow-[6px_6px_0_0_black] overflow-hidden">
|
||||
<iframe
|
||||
src={`https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3580.4586145984166!2d27.858932415253!3d-26.218543983432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e95a4e4b4b4b4b4%3A0x4b4b4b4b4b4b4b4b!2sVilakazi%20St%2C%20Orlando%20West%2C%20Soweto%2C%201804!5e0!3m2!1sen!2sza!4v1699999999999`}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Mzansi Urban Studio Location"
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user