Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,143 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { Camera, Mail, MapPin, MessageCircle, Phone, Send, Video, X } from 'lucide-react'
|
||||||
|
|
||||||
|
import Button from "@/components/ui/Button"
|
||||||
|
import Input from "@/components/ui/Input"
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"
|
||||||
|
|
||||||
|
export default function KeepMzansiConnectedSection() {
|
||||||
|
const [formData, setFormData] = useState({ name: "", email: "", message: "" })
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
// Simulate send
|
||||||
|
setSubmitted(true)
|
||||||
|
setTimeout(() => setSubmitted(false), 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const contactMethods = [
|
||||||
|
{ icon: Phone, label: "Call us", value: "+27 11 234 5678" },
|
||||||
|
{ icon: Mail, label: "Email", value: "hello@mzansi.co.za" },
|
||||||
|
{ icon: MapPin, label: "Visit", value: "42 Bree Street, Cape Town, 8001" },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section data-vula-section="keepmzansiconnected" id="contact" className="py-20 bg-[#ffffff]">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-4xl font-black uppercase tracking-tight text-[#101418]">
|
||||||
|
Keep <span className="bg-[#d4af37] text-[#101418] px-2">Mzansi</span> connected
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg text-[#101418]/70 max-w-xl mx-auto">
|
||||||
|
Hit us up — sizing questions, collab ideas, or just to say "Awe!" We reply fast.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||||
|
{/* Enquiry form */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl font-bold text-[#101418]">Send a message</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{submitted ? (
|
||||||
|
<p className="text-[#16a34a] font-medium">Thanks yini! We'll get back to you sharp.</p>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Your name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Your email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
rows={3}
|
||||||
|
placeholder="What's on your mind?"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full border-2 border-[#e7eaef] rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-[#ea580c]"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="default"
|
||||||
|
className="bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold w-full"
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" /> Send
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Contact details + social */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6 space-y-4">
|
||||||
|
{contactMethods.map((method) => {
|
||||||
|
const Icon = method.icon
|
||||||
|
return (
|
||||||
|
<div key={method.label} className="flex items-start gap-3">
|
||||||
|
<Icon className="w-5 h-5 mt-0.5 text-[#ea580c]" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[#101418]/60 font-medium">{method.label}</p>
|
||||||
|
<p className="text-[#101418] font-semibold">{method.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* WhatsApp button */}
|
||||||
|
<a
|
||||||
|
href="https://wa.me/27712345678"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="default"
|
||||||
|
size="lg"
|
||||||
|
className="bg-[#16a34a] hover:bg-[#148a3e] text-white font-bold w-full flex items-center justify-center gap-2 border-2 border-[#16a34a] shadow-[6px_6px_0_0_#101418]"
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-5 h-5" /> WhatsApp us now
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Social links */}
|
||||||
|
<div className="flex gap-4 justify-center pt-4">
|
||||||
|
<a href="https://instagram.com/mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
|
||||||
|
<Camera className="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<a href="https://x.com/mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
|
||||||
|
<X className="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<a href="https://tiktok.com/@mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
|
||||||
|
<Video className="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user