vula-projects/vula-d07b55f0
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 18:35:17 +00:00
parent 6632b7e915
commit c99e648001
1 changed files with 112 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+112
View File
@@ -0,0 +1,112 @@
import { Camera, Globe, Linkedin, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
const year = new Date().getFullYear()
const quickLinks = [
{ label: 'Home', href: '/' },
{ label: 'Bespoke Safari Experiences', href: '/#safari-experiences' },
{ label: 'Sanctuary Suites', href: '/#luxury-suites' },
{ label: 'Our Story', href: '/#our-story' },
{ label: 'Photo Gallery', href: '/#photo-gallery' },
{ label: 'Contact', href: '/#contact' },
{ label: 'Services', href: '/services' },
]
return (
<footer className="border-t border-[var(--hairline)] bg-[var(--color-background)] py-12 text-[var(--color-foreground)]">
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Brand & Contact */}
<div>
<h4 className="font-heading text-[var(--color-primary)] text-lg mb-4 uppercase tracking-[0.3em]">
Molten Rock Private Reserve
</h4>
<div className="space-y-3 text-sm">
<div className="flex items-start gap-3">
<MapPin size={16} className="text-[var(--color-secondary)] mt-0.5 shrink-0" />
<span>Greater Kruger National Park,<br />Mpumalanga, South Africa</span>
</div>
<div className="flex items-center gap-3">
<Phone size={16} className="text-[var(--color-secondary)] shrink-0" />
<a href="tel:+27825558801" className="hover:text-[var(--color-accent)] transition-colors duration-200">
+27 82 555 8801
</a>
</div>
<div className="flex items-center gap-3">
<Mail size={16} className="text-[var(--color-secondary)] shrink-0" />
<a href="mailto:reservations@moltenrock.co.za" className="hover:text-[var(--color-accent)] transition-colors duration-200">
reservations@moltenrock.co.za
</a>
</div>
</div>
</div>
{/* Quick Links */}
<div>
<h5 className="font-heading text-[var(--color-primary)] mb-4 uppercase tracking-[0.26em] text-sm">
Navigation
</h5>
<ul className="space-y-2 text-sm">
{quickLinks.map((link) => (
<li key={link.href}>
<Link
href={link.href}
className="hover:text-[var(--color-accent)] transition-all duration-200 ease-out"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
{/* Reserve Hours */}
<div>
<h5 className="font-heading text-[var(--color-primary)] mb-4 uppercase tracking-[0.26em] text-sm">
Arrival &amp; Safari Times
</h5>
<p className="text-sm mb-2">
<strong>Reservations &amp; Arrivals:</strong>
<br />
Daily 6:00 – 22:00 SAST
</p>
<p className="text-sm">
<strong>Private Game Drives:</strong>
<br />
Depart at sunrise<br />
Evening drives at 16:00
</p>
</div>
{/* Social + Newsletter (simple) */}
<div>
<h5 className="font-heading text-[var(--color-primary)] mb-4 uppercase tracking-[0.26em] text-sm">
Follow the Pride
</h5>
<div className="flex gap-4 text-lg mb-6">
<a href="#" aria-label="Instagram" className="hover:text-[var(--color-secondary)] transition-colors duration-200">
<Camera />
</a>
<a href="#" aria-label="Facebook" className="hover:text-[var(--color-secondary)] transition-colors duration-200">
<Globe />
</a>
<a href="#" aria-label="X (Twitter)" className="hover:text-[var(--color-secondary)] transition-colors duration-200">
<X />
</a>
<a href="#" aria-label="WhatsApp" className="hover:text-[var(--color-secondary)] transition-colors duration-200">
<MessageCircle />
</a>
<a href="#" aria-label="LinkedIn" className="hover:text-[var(--color-secondary)] transition-colors duration-200">
<Linkedin />
</a>
</div>
<p className="text-xs mt-4 border-t border-[var(--hairline)] pt-4">
© {year} Molten Rock Private Reserve. All rights reserved.
</p>
</div>
</div>
</footer>
)
}