vula-projects/vula-20fcd39d
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:10:21 +00:00
parent ce65923821
commit 04a5df6451
1 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+97
View File
@@ -0,0 +1,97 @@
import Link from 'next/link';
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-[#18181b] text-white py-12 border-t-[3px] border-[#d4af37]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* About / Brand */}
<div>
<h3 className="text-xl font-bold text-[#d4af37] uppercase tracking-wider mb-4 font-[var(--font-display)]">
Urban Threads
</h3>
<p className="text-gray-300 text-sm leading-relaxed">
Soweto-born streetwear. Limited capsules of African-print hoodies, caps, and tees worn by the culture.
</p>
<div className="flex space-x-4 mt-6">
<a href="https://facebook.com/urbanthreads" aria-label="Facebook" className="text-gray-300 hover:text-[#d4af37] transition-all duration-200 ease-out">
<Globe size={20} />
</a>
<a href="https://instagram.com/urbanthreads" aria-label="Instagram" className="text-gray-300 hover:text-[#d4af37] transition-all duration-200 ease-out">
<Camera size={20} />
</a>
<a href="https://twitter.com/urbanthreads" aria-label="X (Twitter)" className="text-gray-300 hover:text-[#d4af37] transition-all duration-200 ease-out">
<X size={20} />
</a>
<a href="https://tiktok.com/@urbanthreads" aria-label="TikTok" className="text-gray-300 hover:text-[#d4af37] transition-all duration-200 ease-out">
<Video size={20} />
</a>
<a href="https://wa.me/27111234567" aria-label="WhatsApp" className="text-gray-300 hover:text-[#d4af37] transition-all duration-200 ease-out">
<MessageCircle size={20} />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h3 className="text-base font-semibold text-[#d4af37] uppercase tracking-wider mb-4">Quick Links</h3>
<ul className="space-y-2 text-sm text-gray-300">
<li><Link href="/" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Home</Link></li>
<li><Link href="/products" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Products</Link></li>
<li><Link href="#shop" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Featured</Link></li>
<li><Link href="#our-story" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Our Story</Link></li>
<li><Link href="#drops" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Campaigns</Link></li>
<li><Link href="#lookbook" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Lookbook</Link></li>
<li><Link href="#contact" className="hover:text-[#d4af37] transition-all duration-200 ease-out">Contact</Link></li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="text-base font-semibold text-[#d4af37] uppercase tracking-wider mb-4">Reach Us</h3>
<ul className="space-y-3 text-sm text-gray-300">
<li className="flex items-start gap-2">
<MapPin className="w-4 h-4 mt-1 text-[#d4af37]" />
<span>123 Vilakazi Street, Soweto, Johannesburg, 1804</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-4 h-4 text-[#d4af37]" />
<a href="tel:+27119365000" className="hover:text-[#d4af37] transition-all duration-200 ease-out">+27 11 936 5000</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4 text-[#d4af37]" />
<a href="mailto:info@urbanthreads.co.za" className="hover:text-[#d4af37] transition-all duration-200 ease-out">info@urbanthreads.co.za</a>
</li>
</ul>
</div>
{/* Store Hours */}
<div>
<h3 className="text-base font-semibold text-[#d4af37] uppercase tracking-wider mb-4">Store Hours</h3>
<ul className="space-y-2 text-sm text-gray-300">
<li className="flex justify-between">
<span>Mon - Fri</span>
<span>9:00 AM – 6:00 PM</span>
</li>
<li className="flex justify-between">
<span>Saturday</span>
<span>9:00 AM – 5:00 PM</span>
</li>
<li className="flex justify-between">
<span>Sunday</span>
<span>10:00 AM – 4:00 PM</span>
</li>
</ul>
</div>
</div>
<div className="mt-10 pt-6 border-t border-gray-700 text-center text-sm text-gray-400">
<p>&copy; {currentYear} Urban Threads. All rights reserved.</p>
</div>
</div>
</footer>
);
}