From 4574b0af440f0ac26432cfaa1cfd507e8a2bb48b Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 15 Jul 2026 09:25:23 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 57 ++++++++++++++++++++++++++++++++
 1 file changed, 57 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..034dca7
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,57 @@
+import Link from 'next/link'
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#211c0d] text-[#e2dfd4] py-12 px-6 md:px-12">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div>
+          <h3 className="font-heading text-2xl font-bold mb-4 text-[#d4af37]">Zulu Lodge</h3>
+          <ul className="space-y-3 text-sm">
+            <li className="flex items-start gap-2">
+              <MapPin className="w-5 h-5 text-[#d4af37] flex-shrink-0 mt-0.5" />
+              <span>R618, Hluhluwe, KwaZulu-Natal, 3960 South Africa</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Phone className="w-5 h-5 text-[#d4af37]" />
+              <a href="tel:+27351234567" className="hover:text-[#d4af37] transition-colors">+27 35 123 4567</a>
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail className="w-5 h-5 text-[#d4af37]" />
+              <a href="mailto:info@zululodge.co.za" className="hover:text-[#d4af37] transition-colors">info@zululodge.co.za</a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-heading text-lg font-semibold mb-4 text-[#d4af37]">Discover</h4>
+          <ul className="space-y-2 text-sm">
+            <li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
+            <li><Link href="#indaba-story" className="hover:text-[#d4af37] transition-colors">Indaba Story</Link></li>
+            <li><Link href="#umkhonto-safari" className="hover:text-[#d4af37] transition-colors">Umkhonto Safari</Link></li>
+            <li><Link href="#isithombe-gallery" className="hover:text-[#d4af37] transition-colors">Isithombe Gallery</Link></li>
+            <li><Link href="#imbizo-contact" className="hover:text-[#d4af37] transition-colors">Imbizo Contact</Link></li>
+            <li><Link href="/booking" className="hover:text-[#d4af37] transition-colors">Book a Room</Link></li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-heading text-lg font-semibold mb-4 text-[#d4af37]">Lodge Reception</h4>
+          <p className="text-sm mb-4">
+            Open daily, 24 hours<br />
+            Check-in: 14:00 | Check-out: 10:00
+          </p>
+          <div className="flex gap-4 mt-4">
+            <a href="#" aria-label="Facebook" className="hover:text-[#d4af37] transition-colors"><Globe size={20} /></a>
+            <a href="#" aria-label="Instagram" className="hover:text-[#d4af37] transition-colors"><Camera size={20} /></a>
+            <a href="#" aria-label="X" className="hover:text-[#d4af37] transition-colors"><X size={20} /></a>
+            <a href="#" aria-label="WhatsApp" className="hover:text-[#d4af37] transition-colors"><MessageCircle size={20} /></a>
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-[#e2dfd4]/20 mt-10 pt-6 text-center text-sm text-[#e2dfd4]/70">
+        <p>&copy; {new Date().getFullYear()} Zulu Lodge. All rights reserved.</p>
+      </div>
+    </footer>
+  )
+}