vula-projects/vula-d7439b06
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-31 18:44:25 +00:00
parent ebf5c6708c
commit 172e18e4bc
1 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+79
View File
@@ -0,0 +1,79 @@
import { Camera, Globe, Mail, MapPin, Phone, Star } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
return (
<footer className="bg-secondary text-secondary-foreground pt-16 pb-8">
<div className="container mx-auto px-6 lg:px-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
{/* Brand & Contact */}
<div>
<h3 className="text-xl font-bold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>eKhayalami</h3>
<p className="text-sm opacity-80 mb-4 leading-relaxed">
Handcrafted homeware from KwaZulu-Natal — contemporary African décor by local artisans.
</p>
<ul className="space-y-3 text-sm">
<li className="flex items-start gap-3">
<MapPin size={16} className="mt-0.5 shrink-0 text-primary" />
<span>123 Florida Road, Durban, 4001, South Africa</span>
</li>
<li className="flex items-center gap-3">
<Phone size={16} className="shrink-0 text-primary" />
<a href="tel:+27310011234" className="hover:text-primary transition-colors">+27 31 001 1234</a>
</li>
<li className="flex items-center gap-3">
<Mail size={16} className="shrink-0 text-primary" />
<a href="mailto:hello@ekhayalami.co.za" className="hover:text-primary transition-colors">hello@ekhayalami.co.za</a>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Quick Links</h4>
<ul className="space-y-3 text-sm">
<li><Link href="/" className="hover:text-primary transition-colors">Home</Link></li>
<li><Link href="/products" className="hover:text-primary transition-colors">Products</Link></li>
<li><Link href="/#our-heritage" className="hover:text-primary transition-colors">Our Heritage</Link></li>
<li><Link href="/#artisans-gallery" className="hover:text-primary transition-colors">Gallery</Link></li>
<li><Link href="/#artisan-stories" className="hover:text-primary transition-colors">Artisan Stories</Link></li>
<li><Link href="/#contact" className="hover:text-primary transition-colors">Contact</Link></li>
</ul>
</div>
{/* Business Hours */}
<div>
<h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Showroom Hours</h4>
<ul className="space-y-2 text-sm">
<li className="flex justify-between"><span>Monday – Friday</span><span>9:00 AM – 5:00 PM</span></li>
<li className="flex justify-between"><span>Saturday</span><span>9:00 AM – 1:00 PM</span></li>
<li className="flex justify-between"><span>Sunday</span><span>Closed</span></li>
</ul>
<p className="text-xs mt-3 opacity-70">Online orders ship nationwide, Mon–Fri.</p>
</div>
{/* Social & Newsletter CTA */}
<div>
<h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Follow Along</h4>
<div className="flex space-x-4 mb-6">
<a href="#" aria-label="Instagram" className="hover:text-primary transition-colors"><Camera size={20} /></a>
<a href="#" aria-label="Facebook" className="hover:text-primary transition-colors"><Globe size={20} /></a>
<a href="#" aria-label="Pinterest" className="hover:text-primary transition-colors"><Star size={20} /></a>
</div>
<p className="text-xs opacity-70">Tag your style with <strong>#MyEKhayalami</strong></p>
</div>
</div>
{/* Bottom bar */}
<div className="border-t border-white/10 pt-6 flex flex-col sm:flex-row justify-between items-center text-xs opacity-70">
<span>&copy; {new Date().getFullYear()} eKhayalami. All rights reserved.</span>
<div className="flex gap-4 mt-2 sm:mt-0">
<Link href="#" className="hover:text-primary transition-colors">Privacy Policy</Link>
<Link href="#" className="hover:text-primary transition-colors">Terms of Service</Link>
</div>
</div>
</div>
</footer>
)
}