vula-projects/vula-96ceb4dc
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-25 13:58:34 +00:00
parent 6f0c53b83f
commit cce5708749
1 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+61
View File
@@ -0,0 +1,61 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="bg-card text-card-foreground border-t border-border">
<div className="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Brand & About */}
<div>
<h3 className="font-display text-xl font-bold mb-3">Masai Suites</h3>
<p className="text-sm leading-relaxed">
Authentic Kenyan hospitality, curated safari experiences, and personalized service in the heart of Nairobi.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="font-display text-base font-semibold mb-3">Quick Links</h4>
<ul className="space-y-2 text-sm">
<li><a href="/" className="hover:text-accent transition-colors">Home</a></li>
<li><a href="/#rooms" className="hover:text-accent transition-colors">Rooms</a></li>
<li><a href="/#our-story" className="hover:text-accent transition-colors">Our Story</a></li>
<li><a href="/#gallery" className="hover:text-accent transition-colors">Gallery</a></li>
<li><a href="/#contact" className="hover:text-accent transition-colors">Contact</a></li>
<li><a href="/booking" className="hover:text-accent transition-colors font-semibold">Book a Room</a></li>
</ul>
</div>
{/* Contact & Hours */}
<div>
<h4 className="font-display text-base font-semibold mb-3">Contact & Hours</h4>
<ul className="space-y-2 text-sm">
<li className="flex items-start gap-2"><MapPin size={16} className="mt-0.5 shrink-0 text-secondary" />Masai Suites, Langata Road, Nairobi, Kenya</li>
<li className="flex items-center gap-2"><Phone size={16} className="shrink-0 text-secondary" /><a href="tel:+254700123456" className="hover:text-accent transition-colors">+254 700 123456</a></li>
<li className="flex items-center gap-2"><Mail size={16} className="shrink-0 text-secondary" /><a href="mailto:reservations@masaisuites.co.ke" className="hover:text-accent transition-colors">reservations@masaisuites.co.ke</a></li>
</ul>
<div className="mt-3 text-sm space-y-1">
<p><span className="font-medium">Reception:</span> Open 24 hours</p>
<p><span className="font-medium">Check-in:</span> 2:00 PM · Check-out: 11:00 AM</p>
<p><span className="font-medium">Restaurant & Bar:</span> 6:30 AM – 10:30 PM</p>
</div>
</div>
{/* Social & Newsletter */}
<div>
<h4 className="font-display text-base font-semibold mb-3">Connect With Us</h4>
<div className="flex space-x-3 mb-4">
<a href="#" className="hover:text-accent transition-colors" aria-label="Facebook"><Globe size={20} /></a>
<a href="#" className="hover:text-accent transition-colors" aria-label="Instagram"><Camera size={20} /></a>
<a href="#" className="hover:text-accent transition-colors" aria-label="X"><X size={20} /></a>
<a href="https://wa.me/254700123456" className="hover:text-accent transition-colors" aria-label="WhatsApp"><MessageCircle size={20} /></a>
</div>
<p className="text-xs text-muted-foreground">Follow us for safari stories and special offers.</p>
</div>
</div>
<div className="border-t border-border py-4 text-center text-xs">
© {currentYear} Masai Suites. All rights reserved.
</div>
</footer>
)
}