diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
new file mode 100644
index 0000000..1a1b356
--- /dev/null
+++ b/src/components/sections/ContactSection.tsx
@@ -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>
+  )
+}
\ No newline at end of file