Vula Builder
72 lines
4.1 KiB
TypeScript
72 lines
4.1 KiB
TypeScript
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
|
||
|
||
import Link from 'next/link'
|
||
|
||
export default function Footer() {
|
||
const year = new Date().getFullYear()
|
||
return (
|
||
<footer className="bg-[#18181b] text-white border-t-[3px] border-[#d4af37]">
|
||
<div className="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{/* Brand */}
|
||
<div>
|
||
<h3 className="text-2xl [font-family:var(--font-heading)] uppercase tracking-wide text-[#d4af37] mb-4">Kasi Wear</h3>
|
||
<p className="text-sm text-white/80 mb-4">Soweto-born streetwear. Yebo, sharp sharp — authentic kasi drip for the culture.</p>
|
||
<div className="flex space-x-4">
|
||
<a href="https://facebook.com/kasiwear" aria-label="Facebook" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Globe size={20} /></a>
|
||
<a href="https://instagram.com/kasiwear" aria-label="Instagram" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Camera size={20} /></a>
|
||
<a href="https://x.com/kasiwear" aria-label="X" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><X size={20} /></a>
|
||
<a href="https://tiktok.com/@kasiwear" aria-label="TikTok" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><Video size={20} /></a>
|
||
<a href="https://wa.me/27119360000" aria-label="WhatsApp" target="_blank" rel="noopener noreferrer" className="hover:text-[#d4af37] transition-colors"><MessageCircle size={20} /></a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div>
|
||
<h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Quick Links</h4>
|
||
<ul className="space-y-2 text-sm">
|
||
<li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
|
||
<li><Link href="/products" className="hover:text-[#d4af37] transition-colors">Products</Link></li>
|
||
<li><a href="#indaba-yethu" className="hover:text-[#d4af37] transition-colors">Indaba Yethu</a></li>
|
||
<li><a href="#soweto-style-gallery" className="hover:text-[#d4af37] transition-colors">Soweto Style Gallery</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div>
|
||
<h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Reach Us</h4>
|
||
<ul className="space-y-3 text-sm">
|
||
<li className="flex items-start gap-2">
|
||
<MapPin size={16} className="mt-0.5 text-[#dc2626] flex-shrink-0" />
|
||
<span>123 Vilakazi Street, Soweto, Johannesburg 1804, South Africa</span>
|
||
</li>
|
||
<li className="flex items-center gap-2">
|
||
<Phone size={16} className="text-[#dc2626]" />
|
||
<a href="tel:+27119360000" className="hover:text-[#d4af37] transition-colors">+27 11 936 0000</a>
|
||
</li>
|
||
<li className="flex items-center gap-2">
|
||
<Mail size={16} className="text-[#dc2626]" />
|
||
<a href="mailto:info@kasiwear.co.za" className="hover:text-[#d4af37] transition-colors">info@kasiwear.co.za</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Hours */}
|
||
<div>
|
||
<h4 className="text-sm [font-family:var(--font-heading)] uppercase tracking-wider text-[#d4af37] mb-4">Store Hours</h4>
|
||
<ul className="space-y-2 text-sm">
|
||
<li className="flex justify-between"><span>Mon – Fri</span><span>9:00 – 18:00</span></li>
|
||
<li className="flex justify-between"><span>Saturday</span><span>9:00 – 15:00</span></li>
|
||
<li className="flex justify-between"><span>Sunday</span><span>10:00 – 16:00</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-white/20 py-6 px-4">
|
||
<div className="max-w-7xl mx-auto text-center text-sm text-white/60">
|
||
© {year} Kasi Wear. All rights reserved.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)
|
||
}
|