Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,175 @@
|
||||
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react';
|
||||
;
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="bg-[#101418] text-white py-12 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||
{/* Brand Column */}
|
||||
<div>
|
||||
<h3 className="font-heading text-3xl uppercase text-[#ea580c] mb-4">
|
||||
Mzansi
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed opacity-80">
|
||||
Streetwear rooted in South African energy. Every piece crafted for
|
||||
the culture, built to move. Fresh drops. Local voices. No walls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-4 uppercase tracking-widest">
|
||||
Quick Links
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<a href="/" className="hover:text-[#ea580c] transition-colors duration-200">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/products"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#our-story"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
Mzansi Story
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#campaigns"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
Hype Campaigns
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#gallery"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
Street Style Gallery
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#contact"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
Keep Mzansi Connected
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Column */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-4 uppercase tracking-widest">
|
||||
Contact Us
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<MapPin className="w-4 h-4 mt-0.5 text-[#ea580c]" />
|
||||
<span>145 Vilakazi Street, Soweto, Johannesburg, 1804</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-[#ea580c]" />
|
||||
<a
|
||||
href="tel:+27100123456"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
+27 10 012 3456
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-[#ea580c]" />
|
||||
<a
|
||||
href="mailto:hello@mzansi.co.za"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
>
|
||||
hello@mzansi.co.za
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Hours & Social */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-4 uppercase tracking-widest">
|
||||
Open Doors
|
||||
</h4>
|
||||
<ul className="space-y-1 text-sm mb-6">
|
||||
<li>Mon – Fri: 9:00 AM – 7:00 PM</li>
|
||||
<li>Sat: 9:00 AM – 6:00 PM</li>
|
||||
<li>Sun: 10:00 AM – 4:00 PM</li>
|
||||
</ul>
|
||||
|
||||
<h4 className="font-semibold text-lg mb-3 uppercase tracking-widest">
|
||||
Find Us On
|
||||
</h4>
|
||||
<div className="flex items-center gap-4">
|
||||
<a
|
||||
href="https://facebook.com/mzansistreetwear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Globe className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://instagram.com/mzansi.streetwear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Camera className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://x.com/mzansistreet"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
aria-label="X"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://tiktok.com/@mzansi.streetwear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
aria-label="TikTok"
|
||||
>
|
||||
<Video className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://wa.me/27100123456"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[#ea580c] transition-colors duration-200"
|
||||
aria-label="WhatsApp"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto mt-12 pt-8 border-t border-white/20 text-center text-xs opacity-70">
|
||||
<p>© {currentYear} Mzansi. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user