vula-projects/vula-d6e6a2f2
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:41:18 +00:00
parent 888ef4d985
commit acab3cf230
1 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+99
View File
@@ -0,0 +1,99 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Star, X } from 'lucide-react'
export default function Footer() {
return (
<footer className="bg-background border-t border-border px-6 py-16 lg:px-24">
<div className="mx-auto max-w-7xl">
<div className="grid gap-12 lg:grid-cols-4">
{/* Identity */}
<div className="space-y-5">
<div className="flex items-center gap-2">
<Star className="h-6 w-6 text-secondary" />
<span className="font-[var(--font-display)] text-2xl tracking-wide text-foreground">
Mpofana Lodge
</span>
</div>
<p className="text-foreground/75 text-sm leading-relaxed">
10 suites, 1 200 hectares of private bushveld. A next‑generation
KwaZulu‑Natal lodge where Shangaan wisdom meets butler‑led
indulgence.
</p>
<div className="flex gap-4 pt-2">
<a href="#" aria-label="Facebook" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><Globe className="h-5 w-5" /></a>
<a href="#" aria-label="Instagram" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><Camera className="h-5 w-5" /></a>
<a href="#" aria-label="X" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><X className="h-5 w-5" /></a>
<a href="#" aria-label="WhatsApp" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><MessageCircle className="h-5 w-5" /></a>
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Navigate</h4>
<ul className="space-y-3 text-sm">
<li><a href="/" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Home</a></li>
<li><a href="/#luxury-accommodations" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Luxury Accommodations</a></li>
<li><a href="/#bush-story" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Bush Story</a></li>
<li><a href="/#safari-experiences" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Safari Experiences</a></li>
<li><a href="/#guest-gallery" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Guest Gallery</a></li>
<li><a href="/#contact" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Contact</a></li>
</ul>
</div>
{/* Contact */}
<div>
<h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Reach Us</h4>
<ul className="space-y-4 text-sm">
<li className="flex items-start gap-3">
<MapPin className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
<span className="text-foreground/80">Mpofana Private Reserve, R22 Hluhluwe, KwaZulu‑Natal 3960</span>
</li>
<li className="flex items-center gap-3">
<Phone className="h-5 w-5 text-secondary shrink-0" />
<a href="tel:+27354100123" className="text-foreground/80 hover:text-secondary transition-all duration-200 ease-out">+27 35 410 0123</a>
</li>
<li className="flex items-center gap-3">
<Mail className="h-5 w-5 text-secondary shrink-0" />
<a href="mailto:stay@mpofanalodge.com" className="text-foreground/80 hover:text-secondary transition-all duration-200 ease-out">stay@mpofanalodge.com</a>
</li>
</ul>
</div>
{/* Hours */}
<div>
<h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Lodge Hours</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-foreground/70">Check‑in</span>
<span className="text-foreground/90">14:00</span>
</div>
<div className="flex justify-between">
<span className="text-foreground/70">Check‑out</span>
<span className="text-foreground/90">11:00</span>
</div>
<div className="flex justify-between">
<span className="text-foreground/70">Game drives</span>
<span className="text-foreground/90">06:00 & 16:30</span>
</div>
<div className="flex justify-between">
<span className="text-foreground/70">Spa</span>
<span className="text-foreground/90">08:00 – 20:00</span>
</div>
<div className="flex justify-between">
<span className="text-foreground/70">Dining</span>
<span className="text-foreground/90">07:00 – 22:00</span>
</div>
</div>
<a href="/booking" className="mt-6 inline-block rounded-sm border border-secondary px-6 py-2.5 text-xs uppercase tracking-[0.28em] text-secondary hover:bg-secondary hover:text-background transition-all duration-200 ease-out">
Book a Room
</a>
</div>
</div>
{/* Copyright */}
<div className="mt-16 border-t border-border pt-6 text-center text-xs text-foreground/50">
© {new Date().getFullYear()} Mpofana Lodge. All rights reserved.
</div>
</div>
</footer>
)
}