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

---
 src/components/layout/Footer.tsx | 68 ++++++++++++++++++++++++++++++++
 1 file changed, 68 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..dfbc25d
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,68 @@
+import Link from 'next/link'
+import { Camera, Globe, MessageCircle, Video, X } from 'lucide-react'
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="bg-primary text-primary-foreground border-t-4 border-secondary py-12 md:py-16">
+      <div className="container mx-auto px-4 md:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Brand */}
+          <div>
+            <h3 className="text-2xl font-heading uppercase tracking-widest mb-4">Jozi wear</h3>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              Born in the heart of Soweto. Limited-edition streetwear that carries the pulse of the township — African print hoodies, caps, and tees, crafted for the culture.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Quick Links</h4>
+            <ul className="space-y-2 text-sm">
+              <li><Link href="/" className="hover:text-secondary transition-all duration-200 ease-out">Home</Link></li>
+              <li><Link href="/products" className="hover:text-secondary transition-all duration-200 ease-out">Products</Link></li>
+              <li><Link href="#featured-products" className="hover:text-secondary transition-all duration-200 ease-out">Featured</Link></li>
+              <li><Link href="#new-arrivals" className="hover:text-secondary transition-all duration-200 ease-out">New Arrivals</Link></li>
+              <li><Link href="#drops" className="hover:text-secondary transition-all duration-200 ease-out">Drop Campaigns</Link></li>
+              <li><Link href="#contact" className="hover:text-secondary transition-all duration-200 ease-out">Contact</Link></li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Contact</h4>
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <p>123 Vilakazi Street</p>
+              <p>Soweto, Johannesburg, 1860</p>
+              <p>South Africa</p>
+              <a href="tel:+27115550186" className="hover:text-secondary transition-all duration-200 ease-out block">+27 11 555 0186</a>
+              <a href="mailto:info@joziwear.co.za" className="hover:text-secondary transition-all duration-200 ease-out block">info@joziwear.co.za</a>
+            </div>
+          </div>
+
+          {/* Hours & Social */}
+          <div>
+            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Store Hours</h4>
+            <p className="text-sm text-muted-foreground mb-6">
+              Mon - Sat: 10am – 6pm<br />
+              Sun: 11am – 4pm
+            </p>
+            <h4 className="font-heading uppercase text-sm tracking-wider mb-4">Follow the Hustle</h4>
+            <div className="flex space-x-4 text-xl">
+              <a href="#" aria-label="Facebook" className="hover:text-secondary transition-all duration-200 ease-out"><Globe /></a>
+              <a href="#" aria-label="Instagram" className="hover:text-secondary transition-all duration-200 ease-out"><Camera /></a>
+              <a href="#" aria-label="X" className="hover:text-secondary transition-all duration-200 ease-out"><X /></a>
+              <a href="#" aria-label="TikTok" className="hover:text-secondary transition-all duration-200 ease-out"><Video /></a>
+              <a href="#" aria-label="WhatsApp" className="hover:text-secondary transition-all duration-200 ease-out"><MessageCircle /></a>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-border mt-10 pt-6 text-center text-xs text-muted-foreground">
+          <p>&copy; {currentYear} Jozi wear. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}