From acab3cf230b3ca8c53f13c08b433d0fd6dc5422a Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sun, 26 Jul 2026 17:41:18 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 99 ++++++++++++++++++++++++++++++++
 1 file changed, 99 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..23f7df4
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,99 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Star, X } from 'lucide-react'
+
+export default function Footer() {
+  return (
+    <footer className="bg-background border-t border-border px-6 py-16 lg:px-24">
+      <div className="mx-auto max-w-7xl">
+        <div className="grid gap-12 lg:grid-cols-4">
+          {/* Identity */}
+          <div className="space-y-5">
+            <div className="flex items-center gap-2">
+              <Star className="h-6 w-6 text-secondary" />
+              <span className="font-[var(--font-display)] text-2xl tracking-wide text-foreground">
+                Mpofana Lodge
+              </span>
+            </div>
+            <p className="text-foreground/75 text-sm leading-relaxed">
+              10 suites, 1 200 hectares of private bushveld. A next‑generation
+              KwaZulu‑Natal lodge where Shangaan wisdom meets butler‑led
+              indulgence.
+            </p>
+            <div className="flex gap-4 pt-2">
+              <a href="#" aria-label="Facebook" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><Globe className="h-5 w-5" /></a>
+              <a href="#" aria-label="Instagram" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><Camera className="h-5 w-5" /></a>
+              <a href="#" aria-label="X" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><X className="h-5 w-5" /></a>
+              <a href="#" aria-label="WhatsApp" className="text-foreground/60 hover:text-secondary transition-all duration-200 ease-out"><MessageCircle className="h-5 w-5" /></a>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Navigate</h4>
+            <ul className="space-y-3 text-sm">
+              <li><a href="/" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Home</a></li>
+              <li><a href="/#luxury-accommodations" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Luxury Accommodations</a></li>
+              <li><a href="/#bush-story" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Bush Story</a></li>
+              <li><a href="/#safari-experiences" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Safari Experiences</a></li>
+              <li><a href="/#guest-gallery" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Guest Gallery</a></li>
+              <li><a href="/#contact" className="text-foreground/70 hover:text-secondary transition-all duration-200 ease-out">Contact</a></li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Reach Us</h4>
+            <ul className="space-y-4 text-sm">
+              <li className="flex items-start gap-3">
+                <MapPin className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
+                <span className="text-foreground/80">Mpofana Private Reserve, R22 Hluhluwe, KwaZulu‑Natal 3960</span>
+              </li>
+              <li className="flex items-center gap-3">
+                <Phone className="h-5 w-5 text-secondary shrink-0" />
+                <a href="tel:+27354100123" className="text-foreground/80 hover:text-secondary transition-all duration-200 ease-out">+27 35 410 0123</a>
+              </li>
+              <li className="flex items-center gap-3">
+                <Mail className="h-5 w-5 text-secondary shrink-0" />
+                <a href="mailto:stay@mpofanalodge.com" className="text-foreground/80 hover:text-secondary transition-all duration-200 ease-out">stay@mpofanalodge.com</a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Hours */}
+          <div>
+            <h4 className="font-[var(--font-display)] text-lg text-foreground mb-5">Lodge Hours</h4>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-foreground/70">Check‑in</span>
+                <span className="text-foreground/90">14:00</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-foreground/70">Check‑out</span>
+                <span className="text-foreground/90">11:00</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-foreground/70">Game drives</span>
+                <span className="text-foreground/90">06:00 & 16:30</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-foreground/70">Spa</span>
+                <span className="text-foreground/90">08:00 – 20:00</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-foreground/70">Dining</span>
+                <span className="text-foreground/90">07:00 – 22:00</span>
+              </div>
+            </div>
+            <a href="/booking" className="mt-6 inline-block rounded-sm border border-secondary px-6 py-2.5 text-xs uppercase tracking-[0.28em] text-secondary hover:bg-secondary hover:text-background transition-all duration-200 ease-out">
+              Book a Room
+            </a>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="mt-16 border-t border-border pt-6 text-center text-xs text-foreground/50">
+          © {new Date().getFullYear()} Mpofana Lodge. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}