Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,122 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react';
|
||||||
|
|
||||||
|
const footerLinks = [
|
||||||
|
{ label: 'Home', href: '/' },
|
||||||
|
{ label: 'Products', href: '/products' },
|
||||||
|
{ label: 'Featured', href: '/#featured-products' },
|
||||||
|
{ label: 'Our Story', href: '/#our-story' },
|
||||||
|
{ label: 'Drops', href: '/#drops' },
|
||||||
|
{ label: 'Lookbook', href: '/#lookbook' },
|
||||||
|
{ label: 'Contact', href: '/#contact' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="bg-[#18181b] text-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||||
|
{/* Brand & Contact */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-[var(--font-display)] text-[#d4af37] text-2xl uppercase mb-4">
|
||||||
|
Mzansi Wear
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-5 h-5 text-[#dc2626]" />
|
||||||
|
<span>Vilakazi Street, Soweto, 1804, South Africa</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-5 h-5 text-[#dc2626]" />
|
||||||
|
<a href="tel:+27111234567" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
+27 11 123 4567
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-5 h-5 text-[#dc2626]" />
|
||||||
|
<a href="mailto:info@mzansiwear.co.za" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
info@mzansiwear.co.za
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Social Icons */}
|
||||||
|
<div className="flex gap-4 mt-6">
|
||||||
|
<a href="#" aria-label="Facebook" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
<Globe size={20} />
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="Instagram" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
<Camera size={20} />
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="X" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
<X size={20} />
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="TikTok" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
<Video size={20} />
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="WhatsApp" className="hover:text-[#d4af37] transition-all duration-200 ease-out">
|
||||||
|
<MessageCircle size={20} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Quick Links</h4>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
{footerLinks.map((link) => (
|
||||||
|
<li key={link.label}>
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
className="hover:text-[#d4af37] transition-all duration-200 ease-out"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Business Hours */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Open Hours</h4>
|
||||||
|
<div className="text-sm space-y-1">
|
||||||
|
<p>Mon - Fri: 9:00 AM – 5:00 PM</p>
|
||||||
|
<p>Saturday: 10:00 AM – 3:00 PM</p>
|
||||||
|
<p>Sunday: Closed</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Newsletter or extra */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-[var(--font-display)] text-[#d4af37] uppercase mb-4">Stay Fresh</h4>
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Drop your email for exclusive early access to limited drops and kasi fashion news.
|
||||||
|
</p>
|
||||||
|
<form className="flex flex-col gap-3" onSubmit={(e) => e.preventDefault()}>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="your email"
|
||||||
|
aria-label="Email address"
|
||||||
|
className="bg-transparent border-2 border-[#d4af37] px-4 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:border-[#dc2626] transition-all duration-200 ease-out"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="border-2 border-[#dc2626] px-4 py-2 text-sm uppercase font-bold tracking-wide bg-[#dc2626] text-white hover:bg-transparent hover:text-[#dc2626] transition-all duration-200 ease-out"
|
||||||
|
>
|
||||||
|
Sign Up
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Bar */}
|
||||||
|
<div className="border-t-2 border-[#d4af37] py-6">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-400">
|
||||||
|
<p>© {currentYear} Mzansi Wear. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user