vula-projects/vula-623f1485
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 17:52:32 +00:00
parent 7172d4555e
commit e3bf6321bc
1 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+122
View File
@@ -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>
);
}