vula-projects/vula-0b9cc299
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-14 19:08:59 +00:00
parent e888af443c
commit a7e63cac60
1 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+98
View File
@@ -0,0 +1,98 @@
import Link from 'next/link'
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X, Youtube } from 'lucide-react'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-[#36454F] text-white">
<div className="mx-auto max-w-7xl px-6 py-16 lg:py-20">
<div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
{/* About */}
<div>
<h3 className="mb-5 font-heading text-2xl font-semibold" style={{ fontFamily: 'var(--font-heading)' }}>
Molten Rock Private Reserve
</h3>
<p className="text-sm/relaxed text-gray-300">
An exclusive six‑suite retreat in the Greater Kruger, blending understated luxury with profound conservation purpose. Every stay funds anti‑poaching and community initiatives.
</p>
<div className="mt-6 flex items-center gap-4">
<a href="https://facebook.com" aria-label="Facebook" className="transition-colors duration-200 hover:text-[#d4af37]">
<Globe size={20} />
</a>
<a href="https://instagram.com" aria-label="Instagram" className="transition-colors duration-200 hover:text-[#d4af37]">
<Camera size={20} />
</a>
<a href="https://x.com" aria-label="X (Twitter)" className="transition-colors duration-200 hover:text-[#d4af37]">
<X size={20} />
</a>
<a href="https://youtube.com" aria-label="YouTube" className="transition-colors duration-200 hover:text-[#d4af37]">
<Youtube size={20} />
</a>
<a href="https://wa.me/27000000000" aria-label="WhatsApp" className="transition-colors duration-200 hover:text-[#d4af37]">
<MessageCircle size={20} />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="mb-5 font-heading text-lg font-semibold" style={{ fontFamily: 'var(--font-heading)' }}>
Quick Links
</h4>
<ul className="space-y-3 text-sm">
<li><Link href="/" className="transition-colors duration-200 hover:text-[#d4af37]">Home</Link></li>
<li><Link href="/#suites" className="transition-colors duration-200 hover:text-[#d4af37]">Exclusive Suites</Link></li>
<li><Link href="/#our-story" className="transition-colors duration-200 hover:text-[#d4af37]">Molten Rock Story</Link></li>
<li><Link href="/#bespoke-experiences" className="transition-colors duration-200 hover:text-[#d4af37]">Bespoke Experiences</Link></li>
<li><Link href="/#safari-gallery" className="transition-colors duration-200 hover:text-[#d4af37]">Safari Gallery</Link></li>
<li><Link href="/booking" className="font-semibold text-[#d4af37] transition-colors duration-200 hover:text-white">Book a Room</Link></li>
</ul>
</div>
{/* Contact */}
<div>
<h4 className="mb-5 font-heading text-lg font-semibold" style={{ fontFamily: 'var(--font-heading)' }}>
Contact
</h4>
<ul className="space-y-4 text-sm">
<li className="flex items-start gap-3">
<MapPin size={18} className="mt-0.5 shrink-0 text-[#d4af37]" />
<span>Molten Rock Private Reserve, Greater Kruger, Limpopo Province, South Africa</span>
</li>
<li className="flex items-center gap-3">
<Phone size={18} className="shrink-0 text-[#d4af37]" />
<a href="tel:+27000000000" className="transition-colors duration-200 hover:text-[#d4af37]">+27 (0) 00 000 0000</a>
</li>
<li className="flex items-center gap-3">
<Mail size={18} className="shrink-0 text-[#d4af37]" />
<a href="mailto:reservations@moltenrock.co.za" className="transition-colors duration-200 hover:text-[#d4af37]">reservations@moltenrock.co.za</a>
</li>
</ul>
</div>
{/* Hours & Newsletter placeholder */}
<div>
<h4 className="mb-5 font-heading text-lg font-semibold" style={{ fontFamily: 'var(--font-heading)' }}>
Lodge Hours
</h4>
<ul className="space-y-2 text-sm text-gray-300">
<li className="flex justify-between"><span>Reception</span><span>08:00 – 18:00 SAST</span></li>
<li className="flex justify-between"><span>Reservations</span><span>24/7 Online</span></li>
<li className="flex justify-between"><span>Guest Enquiries</span><span>08:00 – 20:00</span></li>
</ul>
<div className="mt-6">
<p className="text-xs text-gray-400">
Priority reservations for direct-book guests. Last-minute availability: +27 (0) 11 000 0000.
</p>
</div>
</div>
</div>
<div className="mt-14 border-t border-white/10 pt-8 text-center text-xs text-gray-400">
<p>&copy; {year} Molten Rock Private Reserve. All rights reserved.</p>
</div>
</div>
</footer>
)
}