vula-projects/vula-e994460c
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-29 19:04:16 +00:00
parent 3d32ca8868
commit b62cf40eba
1 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+84
View File
@@ -0,0 +1,84 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-[#1A2B3C] text-white">
<div className="container mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Brand & Contact */}
<div>
<h3 style={{ fontFamily: 'var(--font-heading)' }} className="text-2xl uppercase tracking-wider mb-4">
Diva
</h3>
<div className="space-y-3 text-sm">
<div className="flex items-start gap-2">
<MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-[#FFD700]" />
<span>Suite 17, The Pavilion, V&A Waterfront, Cape Town, 8001</span>
</div>
<div className="flex items-center gap-2">
<Phone className="w-4 h-4 flex-shrink-0 text-[#FFD700]" />
<span>+27 21 555 2888</span>
</div>
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 flex-shrink-0 text-[#FFD700]" />
<span>hello@diva.co.za</span>
</div>
</div>
</div>
{/* Quick Links */}
<div>
<h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-4">
Shop & Explore
</h4>
<ul className="space-y-2 text-sm">
<li><a href="/" className="hover:text-[#FFD700] transition-colors">Home</a></li>
<li><a href="/products" className="hover:text-[#FFD700] transition-colors">Products</a></li>
<li><a href="/#just-dropped" className="hover:text-[#FFD700] transition-colors">Just Dropped</a></li>
<li><a href="/#featured-products" className="hover:text-[#FFD700] transition-colors">Featured Products</a></li>
<li><a href="/#most-popular" className="hover:text-[#FFD700] transition-colors">Most Popular</a></li>
<li><a href="/#lookbook" className="hover:text-[#FFD700] transition-colors">Diva Lookbook</a></li>
<li><a href="/#style-obsessions" className="hover:text-[#FFD700] transition-colors">Style Obsessions</a></li>
<li><a href="/#style-diaries" className="hover:text-[#FFD700] transition-colors">Style Diaries</a></li>
<li><a href="/#shop-now" className="hover:text-[#FFD700] transition-colors">Shop Now</a></li>
<li><a href="/#connect" className="hover:text-[#FFD700] transition-colors">Connect</a></li>
</ul>
</div>
{/* Customer Care & Social */}
<div>
<div className="mb-6">
<h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-4">
Customer Care
</h4>
<div className="text-sm space-y-2">
<p>Monday – Friday: 8am – 6pm SAST</p>
<p>Saturday: 9am – 1pm SAST</p>
<p className="text-white/60">Online orders accepted 24/7</p>
<a href="/#shipping-returns" className="block text-[#FFD700] hover:underline">Shipping & Returns</a>
</div>
</div>
<div>
<h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-3">
Follow Diva
</h4>
<div className="flex gap-4 text-xl">
<a href="#" aria-label="Facebook" className="hover:text-[#FFD700] transition-colors"><Globe /></a>
<a href="#" aria-label="Instagram" className="hover:text-[#FFD700] transition-colors"><Camera /></a>
<a href="#" aria-label="X" className="hover:text-[#FFD700] transition-colors"><X /></a>
<a href="#" aria-label="TikTok" className="hover:text-[#FFD700] transition-colors"><Video /></a>
<a href="#" aria-label="WhatsApp" className="hover:text-[#FFD700] transition-colors"><MessageCircle /></a>
</div>
</div>
</div>
</div>
<div className="border-t border-white/10 mt-10 pt-6 text-center text-sm text-white/60">
<p>&copy; {year} Diva. All rights reserved.</p>
</div>
</div>
</footer>
)
}