vula-projects/vula-12cb21b6
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-15 09:25:23 +00:00
parent f5ed015eed
commit 4574b0af44
1 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+57
View File
@@ -0,0 +1,57 @@
import Link from 'next/link'
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
return (
<footer className="bg-[#211c0d] text-[#e2dfd4] py-12 px-6 md:px-12">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 className="font-heading text-2xl font-bold mb-4 text-[#d4af37]">Zulu Lodge</h3>
<ul className="space-y-3 text-sm">
<li className="flex items-start gap-2">
<MapPin className="w-5 h-5 text-[#d4af37] flex-shrink-0 mt-0.5" />
<span>R618, Hluhluwe, KwaZulu-Natal, 3960 South Africa</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-5 h-5 text-[#d4af37]" />
<a href="tel:+27351234567" className="hover:text-[#d4af37] transition-colors">+27 35 123 4567</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-5 h-5 text-[#d4af37]" />
<a href="mailto:info@zululodge.co.za" className="hover:text-[#d4af37] transition-colors">info@zululodge.co.za</a>
</li>
</ul>
</div>
<div>
<h4 className="font-heading text-lg font-semibold mb-4 text-[#d4af37]">Discover</h4>
<ul className="space-y-2 text-sm">
<li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
<li><Link href="#indaba-story" className="hover:text-[#d4af37] transition-colors">Indaba Story</Link></li>
<li><Link href="#umkhonto-safari" className="hover:text-[#d4af37] transition-colors">Umkhonto Safari</Link></li>
<li><Link href="#isithombe-gallery" className="hover:text-[#d4af37] transition-colors">Isithombe Gallery</Link></li>
<li><Link href="#imbizo-contact" className="hover:text-[#d4af37] transition-colors">Imbizo Contact</Link></li>
<li><Link href="/booking" className="hover:text-[#d4af37] transition-colors">Book a Room</Link></li>
</ul>
</div>
<div>
<h4 className="font-heading text-lg font-semibold mb-4 text-[#d4af37]">Lodge Reception</h4>
<p className="text-sm mb-4">
Open daily, 24 hours<br />
Check-in: 14:00 | Check-out: 10:00
</p>
<div className="flex gap-4 mt-4">
<a href="#" aria-label="Facebook" className="hover:text-[#d4af37] transition-colors"><Globe size={20} /></a>
<a href="#" aria-label="Instagram" className="hover:text-[#d4af37] transition-colors"><Camera size={20} /></a>
<a href="#" aria-label="X" className="hover:text-[#d4af37] transition-colors"><X size={20} /></a>
<a href="#" aria-label="WhatsApp" className="hover:text-[#d4af37] transition-colors"><MessageCircle size={20} /></a>
</div>
</div>
</div>
<div className="border-t border-[#e2dfd4]/20 mt-10 pt-6 text-center text-sm text-[#e2dfd4]/70">
<p>&copy; {new Date().getFullYear()} Zulu Lodge. All rights reserved.</p>
</div>
</footer>
)
}