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

---
 src/components/layout/Footer.tsx | 84 ++++++++++++++++++++++++++++++++
 1 file changed, 84 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..1871edf
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,84 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+const currentYear = new Date().getFullYear()
+
+export default function Footer() {
+  return (
+    <footer className="bg-primary text-primary-foreground border-t-3 border-secondary mt-20">
+      <div className="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+        {/* Brand & Contact */}
+        <div>
+          <h3 className="text-2xl font-bold uppercase font-[var(--font-display)] tracking-widest mb-4">Mzansi Style</h3>
+          <p className="text-primary-foreground/80 mb-6 font-[var(--font-body)]">
+            Original Afro-urban streetwear forged in the streets of Soweto. Limited drops only.
+          </p>
+          <div className="space-y-3">
+            <div className="flex items-start gap-3">
+              <MapPin className="w-5 h-5 text-secondary shrink-0 mt-0.5" />
+              <span className="text-sm">456 Vilakazi Street, Orlando West, Soweto, Johannesburg, 1804</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Phone className="w-5 h-5 text-secondary shrink-0" />
+              <span className="text-sm">+27 11 536 0000</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Mail className="w-5 h-5 text-secondary shrink-0" />
+              <span className="text-sm">hello@mzansistyle.co.za</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div>
+          <h4 className="text-lg uppercase font-bold font-[var(--font-display)] tracking-wide mb-4 border-b-3 border-secondary pb-2 inline-block">Explore</h4>
+          <ul className="space-y-3 font-[var(--font-body)]">
+            <li><a href="/" className="hover:text-secondary transition-colors duration-200">Home</a></li>
+            <li><a href="/products" className="hover:text-secondary transition-colors duration-200">Products</a></li>
+            <li><a href="#brand-story" className="hover:text-secondary transition-colors duration-200">Brand Story</a></li>
+            <li><a href="#new-arrivals" className="hover:text-secondary transition-colors duration-200">New Arrivals</a></li>
+            <li><a href="#campaigns" className="hover:text-secondary transition-colors duration-200">Campaigns</a></li>
+            <li><a href="#gallery" className="hover:text-secondary transition-colors duration-200">Gallery</a></li>
+            <li><a href="#location" className="hover:text-secondary transition-colors duration-200">Location</a></li>
+          </ul>
+        </div>
+
+        {/* Operation Hours */}
+        <div>
+          <h4 className="text-lg uppercase font-bold font-[var(--font-display)] tracking-wide mb-4 border-b-3 border-secondary pb-2 inline-block">Hours</h4>
+          <ul className="space-y-3 text-primary-foreground/90 font-[var(--font-body)]">
+            <li className="flex justify-between gap-4">
+              <span>Online Store</span>
+              <span className="text-secondary font-semibold">24/7</span>
+            </li>
+            <li className="flex justify-between gap-4">
+              <span>Vilakazi St Pop‑up</span>
+              <span>Tue‑Sun 10:00‑18:00</span>
+            </li>
+            <li className="flex justify-between gap-4">
+              <span>Monday</span>
+              <span className="italic">Closed (production day)</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* Social & Newsletter hint */}
+        <div>
+          <h4 className="text-lg uppercase font-bold font-[var(--font-display)] tracking-wide mb-4 border-b-3 border-secondary pb-2 inline-block">Keep Up</h4>
+          <p className="text-sm text-primary-foreground/80 mb-4 font-[var(--font-body)]">
+            Drop alerts and exclusive access via our channels. Join the movement.
+          </p>
+          <div className="flex gap-4 mb-6">
+            <a href="#" aria-label="Instagram" className="hover:text-secondary transition-colors duration-200"><Camera className="w-6 h-6" /></a>
+            <a href="#" aria-label="Facebook" className="hover:text-secondary transition-colors duration-200"><Globe className="w-6 h-6" /></a>
+            <a href="#" aria-label="X (Twitter)" className="hover:text-secondary transition-colors duration-200"><X className="w-6 h-6" /></a>
+            <a href="#" aria-label="TikTok" className="hover:text-secondary transition-colors duration-200"><Video className="w-6 h-6" /></a>
+            <a href="#" aria-label="WhatsApp" className="hover:text-secondary transition-colors duration-200"><MessageCircle className="w-6 h-6" /></a>
+          </div>
+          <p className="text-xs text-primary-foreground/60 font-[var(--font-body)]">
+            © {currentYear} Mzansi Style. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file