From af1308a28891232df820ae51257334c1aebc5a30 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Mon, 27 Jul 2026 18:06:14 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 58 ++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/layout/Footer.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..7ab3106
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,58 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+import Link from 'next/link'
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#18181b] text-white border-t-[3px] border-t-[#16a34a]">
+      <div className="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
+        {/* Brand info */}
+        <div>
+          <h4 className="text-2xl uppercase tracking-tight mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Mzansi Urban</h4>
+          <p className="text-sm opacity-90">Soweto-born streetwear. African prints, limited drops, kasi pride.</p>
+          <div className="flex gap-3 mt-4">
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Globe size={20} /></a>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Camera size={20} /></a>
+            <a href="https://x.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><X size={20} /></a>
+            <a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Video size={20} /></a>
+            <a href="https://wa.me/27112345678" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><MessageCircle size={20} /></a>
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div>
+          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Shop</h5>
+          <ul className="space-y-2 text-sm">
+            <li><Link href="/" className="hover:text-[#16a34a] transition-colors">Home</Link></li>
+            <li><Link href="/products" className="hover:text-[#16a34a] transition-colors">Products</Link></li>
+            <li><Link href="/#new-arrivals" className="hover:text-[#16a34a] transition-colors">New Arrivals</Link></li>
+            <li><Link href="/#limited-drops" className="hover:text-[#16a34a] transition-colors">Limited Drops</Link></li>
+          </ul>
+        </div>
+
+        {/* Contact */}
+        <div>
+          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Reach Us</h5>
+          <ul className="space-y-2 text-sm">
+            <li className="flex items-start gap-2"><MapPin size={16} className="mt-0.5 shrink-0" /> 1457 Vilakazi Street, Orlando West, Soweto 1804</li>
+            <li className="flex items-center gap-2"><Phone size={16} /> +27 11 234 5678</li>
+            <li className="flex items-center gap-2"><Mail size={16} /> shouts@mzansiurban.co.za</li>
+          </ul>
+        </div>
+
+        {/* Hours */}
+        <div>
+          <h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Open Hours</h5>
+          <ul className="text-sm space-y-1">
+            <li>Mon - Fri: 9:00 - 18:00</li>
+            <li>Sat: 10:00 - 16:00</li>
+            <li>Sun: 11:00 - 15:00</li>
+          </ul>
+        </div>
+      </div>
+      <div className="border-t border-t-white/20 py-4 text-center text-xs opacity-80">
+        © {new Date().getFullYear()} Mzansi Urban. All rights reserved. Kasi built, globally loved.
+      </div>
+    </footer>
+  )
+}