vula-projects/vula-ab0b1d42
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 11:17:57 +00:00
parent 362cea5db9
commit f9719cb57f
1 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+66
View File
@@ -0,0 +1,66 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-[#2C1810] text-white py-16 px-6">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
{/* Contact */}
<div>
<h3 className="text-xl font-bold mb-4" style={{ fontFamily: 'var(--font-sora)' }}>Masai Suites</h3>
<ul className="space-y-3 text-sm text-white/80">
<li className="flex items-start gap-2">
<MapPin className="w-4 h-4 mt-1 shrink-0 text-[#E67E22]" />
<span>Langata Road, Karen, Nairobi, Kenya</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-4 h-4 shrink-0 text-[#E67E22]" />
<a href="tel:+254700123456" className="hover:text-[#F1C40F] transition-all duration-200">+254 700 123 456</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4 shrink-0 text-[#E67E22]" />
<a href="mailto:stay@masaisuites.co.ke" className="hover:text-[#F1C40F] transition-all duration-200">stay@masaisuites.co.ke</a>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h4 className="font-semibold mb-4" style={{ fontFamily: 'var(--font-sora)' }}>Quick Links</h4>
<ul className="space-y-2 text-sm text-white/80">
<li><Link href="/" className="hover:text-[#F1C40F] transition-all duration-200">Home</Link></li>
<li><Link href="/#serene-suites" className="hover:text-[#F1C40F] transition-all duration-200">Serene Suites</Link></li>
<li><Link href="/#roots-of-masai" className="hover:text-[#F1C40F] transition-all duration-200">Roots Of Masai</Link></li>
<li><Link href="/#find-us" className="hover:text-[#F1C40F] transition-all duration-200">Find Us</Link></li>
<li><Link href="/booking" className="hover:text-[#F1C40F] transition-all duration-200 font-medium">Book a Room</Link></li>
</ul>
</div>
{/* Business Hours */}
<div>
<h4 className="font-semibold mb-4" style={{ fontFamily: 'var(--font-sora)' }}>Open Daily</h4>
<ul className="text-sm text-white/80 space-y-2">
<li>Reception: 24/7</li>
<li>Restaurant: 6:30 AM – 10:00 PM</li>
<li>Spa & Pool: 8:00 AM – 8:00 PM</li>
<li>Conference Centre: 7:00 AM – 6:00 PM</li>
</ul>
</div>
{/* Social */}
<div>
<h4 className="font-semibold mb-4" style={{ fontFamily: 'var(--font-sora)' }}>Connect With Us</h4>
<div className="flex gap-4 text-2xl text-white/80">
<a href="#" className="hover:text-[#F1C40F] transition-all duration-200" aria-label="Facebook"><Globe /></a>
<a href="#" className="hover:text-[#F1C40F] transition-all duration-200" aria-label="Instagram"><Camera /></a>
<a href="#" className="hover:text-[#F1C40F] transition-all duration-200" aria-label="X"><X /></a>
<a href="https://wa.me/254700123456" className="hover:text-[#F1C40F] transition-all duration-200" aria-label="WhatsApp"><MessageCircle /></a>
</div>
<p className="mt-6 text-xs text-white/50">© {year} Masai Suites. All rights reserved.</p>
</div>
</div>
</footer>
)
}