vula-projects/vula-d50e2f7f
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 19:05:18 +00:00
parent 4b14c6f780
commit 0c9556ead1
1 changed files with 107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+107
View File
@@ -0,0 +1,107 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="bg-[#17120f] border-t border-[#403630] text-[#eeeae7]">
<div className="mx-auto max-w-7xl px-6 py-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Brand column */}
<div>
<h3 className="font-light text-2xl tracking-wide mb-6" style={{ fontFamily: 'var(--font-cormorant)' }}>
Masai Suites
</h3>
<p className="text-sm leading-relaxed text-[#c5bbb2]">
A boutique sanctuary in the heart of Nairobi, where warm Kenyan hospitality meets
contemporary comfort. Every stay tells a story.
</p>
<div className="flex gap-3 mt-6">
<a href="#" aria-label="Facebook" className="text-[#d4af37] hover:text-[#c49a1a] transition-colors">
<Globe size={20} />
</a>
<a href="#" aria-label="Instagram" className="text-[#d4af37] hover:text-[#c49a1a] transition-colors">
<Camera size={20} />
</a>
<a href="#" aria-label="X (Twitter)" className="text-[#d4af37] hover:text-[#c49a1a] transition-colors">
<X size={20} />
</a>
<a href="#" aria-label="WhatsApp" className="text-[#d4af37] hover:text-[#c49a1a] transition-colors">
<MessageCircle size={20} />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="text-xs uppercase tracking-[0.3em] text-[#d4af37] mb-6 font-light">
Discover
</h4>
<ul className="space-y-3 text-sm">
<li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
<li><Link href="/#our-rooms" className="hover:text-[#d4af37] transition-colors">Rooms & Suites</Link></li>
<li><Link href="/#our-story" className="hover:text-[#d4af37] transition-colors">Our Story</Link></li>
<li><Link href="/#special-offers" className="hover:text-[#d4af37] transition-colors">Special Offers</Link></li>
<li><Link href="/#gallery" className="hover:text-[#d4af37] transition-colors">Gallery</Link></li>
<li><Link href="/#location" className="hover:text-[#d4af37] transition-colors">Location</Link></li>
<li><Link href="/booking" className="hover:text-[#d4af37] transition-colors">Book Now</Link></li>
</ul>
</div>
{/* Contact */}
<div>
<h4 className="text-xs uppercase tracking-[0.3em] text-[#d4af37] mb-6 font-light">
Reach Us
</h4>
<ul className="space-y-4 text-sm">
<li className="flex items-start gap-3">
<MapPin size={18} className="text-[#d4af37] mt-0.5 shrink-0" />
<span>Karura Forest Close, off Limuru Road, Nairobi, Kenya</span>
</li>
<li className="flex items-center gap-3">
<Phone size={18} className="text-[#d4af37] shrink-0" />
<a href="tel:+254711222333" className="hover:text-[#d4af37] transition-colors">+254 711 222 333</a>
</li>
<li className="flex items-center gap-3">
<Mail size={18} className="text-[#d4af37] shrink-0" />
<a href="mailto:hello@masaisuites.co.ke" className="hover:text-[#d4af37] transition-colors">hello@masaisuites.co.ke</a>
</li>
</ul>
</div>
{/* Hours & More */}
<div>
<h4 className="text-xs uppercase tracking-[0.3em] text-[#d4af37] mb-6 font-light">
Hours
</h4>
<div className="space-y-2 text-sm">
<p className="text-[#c5bbb2]">
<span className="block text-[#eeeae7]">Check‑in</span>
2:00 PM – 10:00 PM
</p>
<p className="text-[#c5bbb2]">
<span className="block text-[#eeeae7]">Check‑out</span>
7:00 AM – 11:00 AM
</p>
<p className="text-[#c5bbb2]">
<span className="block text-[#eeeae7]">Reception</span>
24 hours, every day
</p>
</div>
<div className="mt-8">
<Link
href="/booking"
className="btn-luxe text-xs"
>
Reserve Your Stay
</Link>
</div>
</div>
</div>
<div className="border-t border-[#403630] py-6 text-center text-xs text-[#c5bbb2]">
<p>&copy; {currentYear} Masai Suites. All rights reserved.</p>
</div>
</footer>
)
}