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

---
 src/components/layout/Footer.tsx | 122 +++++++++++++++++++++++++++++++
 1 file changed, 122 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..505ad73
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react';
+
+const footerLinks = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Featured', href: '/#featured-products' },
+  { label: 'Our Story', href: '/#our-story' },
+  { label: 'Drops', href: '/#drops' },
+  { label: 'Lookbook', href: '/#lookbook' },
+  { label: 'Contact', href: '/#contact' },
+];
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-[#18181b] text-white">
+      <div className="max-w-7xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+        {/* Brand & Contact */}
+        <div>
+          <h3 className="font-[var(--font-display)] text-[#d4af37] text-2xl uppercase mb-4">
+            Mzansi Wear
+          </h3>
+          <div className="space-y-3 text-sm">
+            <div className="flex items-center gap-2">
+              <MapPin className="w-5 h-5 text-[#dc2626]" />
+              <span>Vilakazi Street, Soweto, 1804, South Africa</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Phone className="w-5 h-5 text-[#dc2626]" />
+              <a href="tel:+27111234567" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+                +27 11 123 4567
+              </a>
+            </div>
+            <div className="flex items-center gap-2">
+              <Mail className="w-5 h-5 text-[#dc2626]" />
+              <a href="mailto:info@mzansiwear.co.za" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+                info@mzansiwear.co.za
+              </a>
+            </div>
+          </div>
+          {/* Social Icons */}
+          <div className="flex gap-4 mt-6">
+            <a href="#" aria-label="Facebook" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+              <Globe size={20} />
+            </a>
+            <a href="#" aria-label="Instagram" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+              <Camera size={20} />
+            </a>
+            <a href="#" aria-label="X" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+              <X size={20} />
+            </a>
+            <a href="#" aria-label="TikTok" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+              <Video size={20} />
+            </a>
+            <a href="#" aria-label="WhatsApp" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
+              <MessageCircle size={20} />
+            </a>
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div>
+          <h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Quick Links</h4>
+          <ul className="space-y-2 text-sm">
+            {footerLinks.map((link) => (
+              <li key={link.label}>
+                <a
+                  href={link.href}
+                  className="hover:text-[#d4af37] transition-all duration-200 ease-out"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Business Hours */}
+        <div>
+          <h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Open Hours</h4>
+          <div className="text-sm space-y-1">
+            <p>Mon - Fri: 9:00 AM – 5:00 PM</p>
+            <p>Saturday: 10:00 AM – 3:00 PM</p>
+            <p>Sunday: Closed</p>
+          </div>
+        </div>
+
+        {/* Newsletter or extra */}
+        <div>
+          <h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Stay Fresh</h4>
+          <p className="text-sm mb-4">
+            Drop your email for exclusive early access to limited drops and kasi fashion news.
+          </p>
+          <form className="flex flex-col gap-3" onSubmit={(e) => e.preventDefault()}>
+            <input
+              type="email"
+              placeholder="your email"
+              aria-label="Email address"
+              className="bg-transparent border-2 border-[#d4af37] px-4 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:border-[#dc2626] transition-all duration-200 ease-out"
+            />
+            <button
+              type="submit"
+              className="border-2 border-[#dc2626] px-4 py-2 text-sm uppercase font-bold tracking-wide bg-[#dc2626] text-white hover:bg-transparent hover:text-[#dc2626] transition-all duration-200 ease-out"
+            >
+              Sign Up
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* Bottom Bar */}
+      <div className="border-t-2 border-[#d4af37] py-6">
+        <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-400">
+          <p>© {currentYear} Mzansi Wear. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file