This commit is contained in:
Vula Builder
2026-07-26 16:56:16 +00:00
parent 00addb5a18
commit d267cdcc71
+77
View File
@@ -0,0 +1,77 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react';
;
export default function Footer() {
const year = new Date().getFullYear();
return (
<footer className="bg-[#f4f9f5] border-t border-[#d4e2d9] mt-24">
<div className="max-w-7xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Contact */}
<div>
<h3 className="font-heading text-lg font-bold text-[#0d2114] mb-4">vaVenda Lodge</h3>
<ul className="space-y-3 text-sm text-[#0d2114]/80">
<li className="flex items-start gap-2">
<MapPin className="w-4 h-4 mt-0.5 text-[#16a34a] flex-shrink-0" />
<span>Makhado Road, Louis Trichardt<br />Limpopo 0920, South Africa</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-4 h-4 text-[#16a34a] flex-shrink-0" />
<span>+27 15 123 4567</span>
</li>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4 text-[#16a34a] flex-shrink-0" />
<span>stay@vavendalodge.co.za</span>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h4 className="font-heading font-bold text-[#0d2114] mb-4">Quick Links</h4>
<ul className="space-y-2 text-sm">
<li><a href="/" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Home</a></li>
<li><a href="/booking" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Book a Room</a></li>
<li><a href="/#venda-rooms" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Venda Heritage Rooms</a></li>
<li><a href="/#our-story" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Venda Roots Story</a></li>
<li><a href="/#venda-experiences" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Cultural Immersion</a></li>
<li><a href="/#gallery" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Gallery</a></li>
<li><a href="/#contact" className="text-[#0d2114]/70 hover:text-[#16a34a] transition-all duration-200 ease-out">Contact</a></li>
</ul>
</div>
{/* Opening Hours */}
<div>
<h4 className="font-heading font-bold text-[#0d2114] mb-4">Lodge Hours</h4>
<ul className="space-y-2 text-sm text-[#0d2114]/80">
<li className="flex justify-between"><span>Reception</span><span>06:00 22:00</span></li>
<li className="flex justify-between"><span>Checkin</span><span>from 14:00</span></li>
<li className="flex justify-between"><span>Checkout</span><span>by 11:00</span></li>
<li className="flex justify-between"><span>Kitchen</span><span>07:00 21:00</span></li>
</ul>
</div>
{/* Social / Newsletter */}
<div>
<h4 className="font-heading font-bold text-[#0d2114] mb-4">Stay Connected</h4>
<p className="text-sm text-[#0d2114]/70 mb-4">
Follow our Venda stories and seasonal offers.
</p>
<div className="flex gap-4 mb-6">
<a href="#" aria-label="Facebook" className="text-[#0d2114]/60 hover:text-[#16a34a] transition-all duration-200 ease-out"><Globe className="w-5 h-5" /></a>
<a href="#" aria-label="Instagram" className="text-[#0d2114]/60 hover:text-[#16a34a] transition-all duration-200 ease-out"><Camera className="w-5 h-5" /></a>
<a href="#" aria-label="X" className="text-[#0d2114]/60 hover:text-[#16a34a] transition-all duration-200 ease-out"><X className="w-5 h-5" /></a>
<a href="#" aria-label="WhatsApp" className="text-[#0d2114]/60 hover:text-[#16a34a] transition-all duration-200 ease-out"><MessageCircle className="w-5 h-5" /></a>
</div>
<p className="text-xs text-[#0d2114]/50">
© {year} vaVenda Lodge. All rights reserved.
</p>
</div>
</div>
<div className="border-t border-[#d4e2d9] py-4 text-center text-xs text-[#0d2114]/50">
Pioneering authentic Venda heritage stays in the Soutpansberg
</div>
</footer>
);
}