vula-projects/vula-7082e4ee
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-08-01 17:20:23 +00:00
parent 8fe146bf32
commit 894d3a334e
1 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+78
View File
@@ -0,0 +1,78 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react';
;
import Link from 'next/link';
export default function Footer() {
const year = new Date().getFullYear();
return (
<footer className="bg-[#18181b] text-white border-t-2 border-[#e7eaef]">
<div className="max-w-7xl mx-auto py-16 px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Brand */}
<div>
<h3 className="text-2xl font-bold uppercase tracking-widest mb-4" style={{ fontFamily: 'var(--font-anton)' }}>Kasi Drip</h3>
<p className="text-sm text-gray-300 leading-relaxed">
Born in Durban, made for the kasi. Authentic streetwear that speaks the language of the culture — bold graphics, oversized fits, limited drops.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="text-sm font-semibold uppercase tracking-wider text-[#fbbf24] mb-4">Navigate</h4>
<ul className="space-y-2 text-sm text-gray-300">
<li><Link href="/" className="hover:text-[#fbbf24] transition-colors">Home</Link></li>
<li><Link href="/products" className="hover:text-[#fbbf24] transition-colors">Products</Link></li>
<li><Link href="/#about-kasi-drip" className="hover:text-[#fbbf24] transition-colors">About Kasi Drip</Link></li>
<li><Link href="/#campaign-lookbook" className="hover:text-[#fbbf24] transition-colors">Campaign Lookbook</Link></li>
<li><Link href="/#gallery" className="hover:text-[#fbbf24] transition-colors">Gallery</Link></li>
<li><Link href="/#shop-drops" className="hover:text-[#fbbf24] transition-colors">Shop Drops</Link></li>
<li><Link href="/#collab-enquiry" className="hover:text-[#fbbf24] transition-colors">Collab Enquiry</Link></li>
</ul>
</div>
{/* Contact */}
<div>
<h4 className="text-sm font-semibold uppercase tracking-wider text-[#fbbf24] mb-4">Contact</h4>
<ul className="space-y-3 text-sm text-gray-300">
<li className="flex items-start gap-2">
<MapPin size={16} className="mt-0.5 text-[#ea580c]" />
<span>123 Umhlanga Rocks Dr, Durban, 4001</span>
</li>
<li className="flex items-center gap-2">
<Phone size={16} className="text-[#ea580c]" />
<a href="tel:+27311234567" className="hover:text-[#fbbf24] transition-colors">+27 31 123 4567</a>
</li>
<li className="flex items-center gap-2">
<Mail size={16} className="text-[#ea580c]" />
<a href="mailto:info@kasidrip.co.za" className="hover:text-[#fbbf24] transition-colors">info@kasidrip.co.za</a>
</li>
</ul>
<div className="mt-4 text-xs text-gray-400">
<p>Mon–Fri 9AM–5PM</p>
<p>Sat 10AM–2PM</p>
</div>
</div>
{/* Social + WhatsApp */}
<div>
<h4 className="text-sm font-semibold uppercase tracking-wider text-[#fbbf24] mb-4">Stay Connected</h4>
<div className="flex items-center gap-4 text-xl text-gray-300">
<a href="https://instagram.com/kasidrip" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="hover:text-[#fbbf24] transition-colors"><Camera /></a>
<a href="https://tiktok.com/@kasidrip" target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="hover:text-[#fbbf24] transition-colors"><Video /></a>
<a href="https://x.com/kasidrip" target="_blank" rel="noopener noreferrer" aria-label="X" className="hover:text-[#fbbf24] transition-colors"><X /></a>
<a href="https://facebook.com/kasidrip" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="hover:text-[#fbbf24] transition-colors"><Globe /></a>
<a href="https://wa.me/27311234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="hover:text-[#fbbf24] transition-colors"><MessageCircle /></a>
</div>
<div className="mt-6 text-xs text-gray-400">
<Link href="/products" className="block bg-[#ea580c] text-white font-semibold text-center px-6 py-3 uppercase tracking-widest hover:bg-[#fbbf24] transition-colors">
Shop Now
</Link>
</div>
</div>
</div>
<div className="border-t border-[#e7eaef] py-6 text-center text-xs text-gray-500">
&copy; {year} Kasi Drip. All rights reserved.
</div>
</footer>
);
}