vula-projects/vula-313458ba
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-26 17:04:56 +00:00
parent 56c6ed40ff
commit 9c84cff174
1 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+71
View File
@@ -0,0 +1,71 @@
import Link from 'next/link'
import { Camera, Clock, Globe, Mail, MapPin, MessageCircle, Phone, X, Youtube } from 'lucide-react'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="bg-[#f9f5f4] border-t border-[#e2d9d4] py-12 px-4">
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Brand & Description */}
<div>
<h3 className="font-semibold text-lg text-[#21140d] mb-3" style={{ fontFamily: 'var(--font-heading), serif' }}>Zulwini Lodge</h3>
<p className="text-sm text-[#21140d]/80 leading-relaxed">
Luxury bush accommodation in KwaZulu Natal, where genuine Zulu hospitality meets untamed wilderness. Five individually designed chalets, each opening onto a private deck overlooking the Umfolozi valley.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="font-semibold text-[#21140d] mb-3">Quick Links</h4>
<ul className="space-y-2 text-sm">
<li><Link href="/#rooms" className="text-[#21140d]/70 hover:text-[#ea580c] transition-colors">Rooms</Link></li>
<li><Link href="/#our-story" className="text-[#21140d]/70 hover:text-[#ea580c] transition-colors">Our Story</Link></li>
<li><Link href="/#safari-experiences" className="text-[#21140d]/70 hover:text-[#ea580c] transition-colors">Safari Experiences</Link></li>
<li><Link href="/#gallery" className="text-[#21140d]/70 hover:text-[#ea580c] transition-colors">Gallery</Link></li>
<li><Link href="/#contact" className="text-[#21140d]/70 hover:text-[#ea580c] transition-colors">Contact</Link></li>
<li><Link href="/booking" className="text-[#ea580c] font-medium hover:text-[#ea580c]/80 transition-colors">Book a Room</Link></li>
</ul>
</div>
{/* Contact Details */}
<div>
<h4 className="font-semibold text-[#21140d] mb-3">Contact</h4>
<ul className="space-y-3 text-sm">
<li className="flex items-start gap-2">
<MapPin className="w-4 h-4 text-[#ea580c] mt-0.5 flex-shrink-0" />
<span className="text-[#21140d]/80">D464 District Road, Hluhluwe, 3960, KwaZulu Natal, South Africa</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-4 h-4 text-[#ea580c] flex-shrink-0" />
<a href="tel:+27355621234" className="text-[#21140d]/80 hover:text-[#ea580c] transition-colors">+27 35 562 1234</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4 text-[#ea580c] flex-shrink-0" />
<a href="mailto:hello@zulwinilodge.co.za" className="text-[#21140d]/80 hover:text-[#ea580c] transition-colors">hello@zulwinilodge.co.za</a>
</li>
<li className="flex items-start gap-2">
<Clock className="w-4 h-4 text-[#ea580c] mt-0.5 flex-shrink-0" />
<div>
<span className="text-[#21140d]/80 block">Reception: 06:00 – 22:00</span>
<span className="text-[#21140d]/80 block">Check-in: 14:00 | Check-out: 10:00</span>
</div>
</li>
</ul>
</div>
{/* Social & Copyright */}
<div>
<h4 className="font-semibold text-[#21140d] mb-3">Follow the Bush</h4>
<div className="flex items-center gap-3 mb-6">
<a href="#" aria-label="Facebook" className="text-[#21140d]/60 hover:text-[#ea580c] transition-colors"><Globe size={20} /></a>
<a href="#" aria-label="Instagram" className="text-[#21140d]/60 hover:text-[#ea580c] transition-colors"><Camera size={20} /></a>
<a href="#" aria-label="X (Twitter)" className="text-[#21140d]/60 hover:text-[#ea580c] transition-colors"><X size={20} /></a>
<a href="#" aria-label="WhatsApp" className="text-[#21140d]/60 hover:text-[#ea580c] transition-colors"><MessageCircle size={20} /></a>
<a href="#" aria-label="YouTube" className="text-[#21140d]/60 hover:text-[#ea580c] transition-colors"><Youtube size={20} /></a>
</div>
<p className="text-xs text-[#21140d]/50">© {currentYear} Zulwini Lodge. All rights reserved.</p>
</div>
</div>
</footer>
)
}