From d441243abb159c287c332c9aaa94248fe35ab4d5 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:38:50 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ContactFormSection.tsx b/src/components/sections/ContactFormSection.tsx
new file mode 100644
index 0000000..cea32a1
--- /dev/null
+++ b/src/components/sections/ContactFormSection.tsx
@@ -0,0 +1,108 @@
+'use client'
+
+import { useState } from 'react'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+import Input from '@/components/ui/Input'
+import Button from '@/components/ui/Button'
+
+export default function ContactFormSection() {
+  const [submitted, setSubmitted] = useState(false)
+  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setForm(f => ({ ...f, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+    setTimeout(() => setSubmitted(false), 3000)
+  }
+
+  return (
+    <section data-vula-section="contactform" id="contact" className="py-20 bg-[#121212] text-[#F5F5F5]">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <h2 className="text-4xl font-bold mb-4 text-[#F5F5F5]">Hit Us Up</h2>
+        <p className="text-lg mb-12 text-[#A0A0A0]">Collab inquiries, bulk orders, or just vibes – we&rsquo;re here for it.</p>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          {/* Contact Info */}
+          <div className="space-y-6">
+            <div className="flex items-start gap-4">
+              <MapPin className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+              <div>
+                <p className="font-semibold">Address</p>
+                <p className="text-sm text-[#A0A0A0]">Durban, KwaZulu-Natal, South Africa</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-4">
+              <Phone className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+              <div>
+                <p className="font-semibold">Call or WhatsApp</p>
+                <a href="tel:+27311234567" className="text-sm text-[#A0A0A0] hover:text-[#4A9EFF] transition-colors">+27 31 123 4567</a>
+              </div>
+            </div>
+            <div className="flex items-start gap-4">
+              <Mail className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+              <div>
+                <p className="font-semibold">Email</p>
+                <a href="mailto:saw@example.com" className="text-sm text-[#A0A0A0] hover:text-[#4A9EFF] transition-colors">saw@example.com</a>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              className="inline-flex items-center gap-2 text-[#FFB74D] hover:text-[#F5F5F5] hover:bg-[#333] transition-all"
+              onClick={() => window.open('https://wa.me/27311234567', '_blank')}
+            >
+              <MessageCircle className="w-4 h-4" />
+              WhatsApp Us
+            </Button>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <Input
+              placeholder="Your name"
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              required
+              className="bg-[#1e1e1e] border-[#333] text-[#F5F5F5] placeholder:text-[#666] focus:border-[#4A9EFF]"
+            />
+            <Input
+              type="email"
+              placeholder="Your email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              required
+              className="bg-[#1e1e1e] border-[#333] text-[#F5F5F5] placeholder:text-[#666] focus:border-[#4A9EFF]"
+            />
+            <Input
+              placeholder="Subject (e.g. Bulk order, Collab)"
+              name="subject"
+              value={form.subject}
+              onChange={handleChange}
+              className="bg-[#1e1e1e] border-[#333] text-[#F5F5F5] placeholder:text-[#666] focus:border-[#4A9EFF]"
+            />
+            <textarea
+              placeholder="Drop your message..."
+              name="message"
+              value={form.message}
+              onChange={handleChange}
+              required
+              rows={4}
+              className="w-full px-4 py-3 rounded-lg bg-[#1e1e1e] border border-[#333] text-[#F5F5F5] placeholder:text-[#666] focus:border-[#4A9EFF] focus:outline-none resize-none"
+            />
+            <Button type="submit" variant="default" className="bg-[#4A9EFF] hover:bg-[#3a8ee6] text-white w-full py-3">
+              Send Message
+            </Button>
+            {submitted && (
+              <p className="text-[#FFB74D] text-sm text-center">Bet, we&rsquo;ll get back to you quick!</p>
+            )}
+          </form>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file