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