From f9719cb57faee63d90cc6a2f02792ee58391aa79 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 25 Jul 2026 11:17:57 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 66 ++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/layout/Footer.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..3dc7932
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -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>
+  )
+}
\ No newline at end of file