vula-projects/vula-2c639e0c
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-27 18:06:14 +00:00
parent f44fd13ace
commit af1308a288
1 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+58
View File
@@ -0,0 +1,58 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
return (
<footer className="bg-[#18181b] text-white border-t-[3px] border-t-[#16a34a]">
<div className="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Brand info */}
<div>
<h4 className="text-2xl uppercase tracking-tight mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Mzansi Urban</h4>
<p className="text-sm opacity-90">Soweto-born streetwear. African prints, limited drops, kasi pride.</p>
<div className="flex gap-3 mt-4">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Globe size={20} /></a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Camera size={20} /></a>
<a href="https://x.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><X size={20} /></a>
<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><Video size={20} /></a>
<a href="https://wa.me/27112345678" target="_blank" rel="noopener noreferrer" className="hover:text-[#16a34a] transition-colors"><MessageCircle size={20} /></a>
</div>
</div>
{/* Quick Links */}
<div>
<h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Shop</h5>
<ul className="space-y-2 text-sm">
<li><Link href="/" className="hover:text-[#16a34a] transition-colors">Home</Link></li>
<li><Link href="/products" className="hover:text-[#16a34a] transition-colors">Products</Link></li>
<li><Link href="/#new-arrivals" className="hover:text-[#16a34a] transition-colors">New Arrivals</Link></li>
<li><Link href="/#limited-drops" className="hover:text-[#16a34a] transition-colors">Limited Drops</Link></li>
</ul>
</div>
{/* Contact */}
<div>
<h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Reach Us</h5>
<ul className="space-y-2 text-sm">
<li className="flex items-start gap-2"><MapPin size={16} className="mt-0.5 shrink-0" /> 1457 Vilakazi Street, Orlando West, Soweto 1804</li>
<li className="flex items-center gap-2"><Phone size={16} /> +27 11 234 5678</li>
<li className="flex items-center gap-2"><Mail size={16} /> shouts@mzansiurban.co.za</li>
</ul>
</div>
{/* Hours */}
<div>
<h5 className="text-lg uppercase mb-3" style={{ fontFamily: 'var(--font-heading)' }}>Open Hours</h5>
<ul className="text-sm space-y-1">
<li>Mon - Fri: 9:00 - 18:00</li>
<li>Sat: 10:00 - 16:00</li>
<li>Sun: 11:00 - 15:00</li>
</ul>
</div>
</div>
<div className="border-t border-t-white/20 py-4 text-center text-xs opacity-80">
© {new Date().getFullYear()} Mzansi Urban. All rights reserved. Kasi built, globally loved.
</div>
</footer>
)
}