vula-projects/vula-94dd8897
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-07-28 13:27:24 +00:00
parent 01ec282fad
commit 8cae240dd4
1 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+97
View File
@@ -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>
)
}