From 8cae240dd467d883701e2a8b05f2d47eb564f37a Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 28 Jul 2026 13:27:24 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 97 ++++++++++++++++++++++++++++++++
 1 file changed, 97 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..c35931a
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,97 @@
+'use client'
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+import Link from 'next/link'
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  const quickLinks = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Latest Drops', href: '/#latest-drops' },
+    { label: 'Featured Collections', href: '/#featured-collections' },
+    { label: 'About', href: '/#about-vault' },
+    { label: 'Authenticity Guarantee', href: '/#authentication-guarantee' },
+    { label: 'Gallery', href: '/#gallery' },
+  ]
+
+  return (
+    <footer className="bg-[#0f0f17] border-t border-[#303040] text-[#e7e7ee]">
+      <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">
+        {/* Column 1 – Brand & Contact */}
+        <div>
+          <h3 className="font-heading text-[#c0c0c0] text-xl mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Vault by Mkhize</h3>
+          <div className="space-y-3 text-sm">
+            <div className="flex items-start gap-3">
+              <MapPin size={16} className="mt-0.5 text-[#c0c0c0] flex-shrink-0" />
+              <span>Shop 12, The Marc, Cnr Rivonia Road & Maude Street, Sandton, Johannesburg, 2196</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Phone size={16} className="text-[#c0c0c0] flex-shrink-0" />
+              <a href="tel:+27115551234" className="hover:text-[#c0c0c0] transition-all duration-200 ease-out">+27 11 555 1234</a>
+            </div>
+            <div className="flex items-center gap-3">
+              <Mail size={16} className="text-[#c0c0c0] flex-shrink-0" />
+              <a href="mailto:concierge@vaultbymkhize.co.za" className="hover:text-[#c0c0c0] transition-all duration-200 ease-out">concierge@vaultbymkhize.co.za</a>
+            </div>
+          </div>
+        </div>
+
+        {/* Column 2 – Business Hours */}
+        <div>
+          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Visiting Hours</h4>
+          <p className="text-sm">Monday – Saturday: 09:00 – 18:00<br />Sunday: 10:00 – 15:00</p>
+          <p className="text-sm mt-4 text-[#c0c0c0]">Private appointments available after hours for Vault Elite members.</p>
+        </div>
+
+        {/* Column 3 – Quick Links */}
+        <div>
+          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Navigate</h4>
+          <ul className="space-y-2 text-sm">
+            {quickLinks.map((link) => (
+              <li key={link.label}>
+                <Link
+                  href={link.href}
+                  className="hover:text-[#c0c0c0] transition-all duration-200 ease-out"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Column 4 – Social & Copyright */}
+        <div>
+          <h4 className="font-heading text-[#c0c0c0] text-lg mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Connect</h4>
+          <div className="flex gap-4 mb-6">
+            <a href="https://instagram.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
+              <Camera size={20} />
+            </a>
+            <a href="https://facebook.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
+              <Globe size={20} />
+            </a>
+            <a href="https://x.com/vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
+              <X size={20} />
+            </a>
+            <a href="https://tiktok.com/@vaultbymkhize" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
+              <Video size={20} />
+            </a>
+            <a href="https://wa.me/27115551234" target="_blank" rel="noopener noreferrer" className="text-[#c0c0c0] hover:text-white transition-all duration-200 ease-out">
+              <MessageCircle size={20} />
+            </a>
+          </div>
+          <p className="text-xs text-[#a0a0b0]">Every pair authenticated by our in‑house specialist, trained at Nike Johannesburg and resale forensic labs.</p>
+        </div>
+      </div>
+
+      {/* Bottom bar */}
+      <div className="border-t border-[#303040] py-6">
+        <div className="max-w-7xl mx-auto px-6 text-center text-xs text-[#a0a0b0]">
+          © {currentYear} Vault by Mkhize. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}