This commit is contained in:
Vula Builder
2026-07-26 16:40:56 +00:00
parent 74209af1c3
commit 72f5b59d42
+138
View File
@@ -0,0 +1,138 @@
import { Camera, Clock, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react';
;
const footerLinks = [
{ label: 'Home', href: '/' },
{ label: 'Book a Room', href: '/booking' },
{ label: 'Our Story', href: '/#our-story' },
{ label: 'Specials', href: '/#specials' },
{ label: 'Gallery', href: '/#gallery' },
{ label: 'Cultural Insights', href: '/#cultural-insights' },
{ label: 'Contact', href: '/#contact' },
];
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-accent text-accent-foreground pt-16 pb-8 px-6">
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 border-b border-white/20 pb-12">
{/* Contact */}
<div>
<h3 className="font-heading text-2xl font-bold mb-6 text-primary">vaVenda Lodge</h3>
<ul className="space-y-4 text-sm">
<li className="flex gap-3 items-start">
<MapPin size={18} className="mt-0.5 text-secondary shrink-0" />
<span>Plot 12, Tshikota Road<br />Makhado (Louis Trichardt)<br />Limpopo, South Africa</span>
</li>
<li className="flex gap-3 items-center">
<Phone size={18} className="text-secondary shrink-0" />
<a href="tel:+27151234567" className="hover:text-primary transition-all duration-200 ease-out">+27 15 123 4567</a>
</li>
<li className="flex gap-3 items-center">
<Mail size={18} className="text-secondary shrink-0" />
<a href="mailto:stay@vavendalodge.co.za" className="hover:text-primary transition-all duration-200 ease-out">stay@vavendalodge.co.za</a>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h4 className="font-heading text-xl font-bold mb-6 text-primary">Quick Links</h4>
<ul className="space-y-3 text-sm">
{footerLinks.map((link) => (
<li key={link.label}>
<a
href={link.href}
className="hover:text-primary transition-all duration-200 ease-out inline-block py-1"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Hours */}
<div>
<h4 className="font-heading text-xl font-bold mb-6 text-primary">Reception Hours</h4>
<ul className="space-y-3 text-sm">
<li className="flex gap-3 items-start">
<Clock size={18} className="mt-0.5 text-secondary shrink-0" />
<span>Monday Friday: 6:30 AM 9:00 PM<br />Saturday: 7:00 AM 10:00 PM<br />Sunday: 7:00 AM 8:00 PM</span>
</li>
<li className="text-xs opacity-80">
Check-in: 2:00 PM | Check-out: 10:00 AM
</li>
</ul>
</div>
{/* Social & Newsletter */}
<div>
<h4 className="font-heading text-xl font-bold mb-6 text-primary">Follow Our Story</h4>
<div className="flex gap-4 mb-6">
<a
href="https://facebook.com/vavendalodge"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-accent transition-all duration-200 ease-out"
aria-label="Facebook"
>
<Globe size={20} />
</a>
<a
href="https://instagram.com/vavendalodge"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-accent transition-all duration-200 ease-out"
aria-label="Instagram"
>
<Camera size={20} />
</a>
<a
href="https://x.com/vavendalodge"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-accent transition-all duration-200 ease-out"
aria-label="X (formerly Twitter)"
>
<X size={20} />
</a>
<a
href="https://wa.me/27151234567"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-accent transition-all duration-200 ease-out"
aria-label="WhatsApp"
>
<MessageCircle size={20} />
</a>
</div>
<p className="text-xs opacity-80 mt-4">
Subscribe to receive seasonal offers and insights from the Soutpansberg one mail a month.
</p>
<form className="mt-4 flex flex-col sm:flex-row gap-3">
<input
type="email"
placeholder="Your email address"
className="px-4 py-2 rounded-md bg-white/15 border border-white/20 text-sm placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-primary flex-1"
/>
<button
type="submit"
className="btn-primary text-sm py-2 px-5 shrink-0"
>
Subscribe
</button>
</form>
</div>
</div>
<div className="max-w-7xl mx-auto mt-8 flex flex-col sm:flex-row justify-between items-center text-xs opacity-70">
<p>© {currentYear} vaVenda Lodge. All rights reserved.</p>
<p className="mt-2 sm:mt-0">
Handcrafted stays in the heart of Limpopo.
</p>
</div>
</footer>
);
}