vula-projects/vula-178c5c77
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-06-23 08:38:39 +00:00
parent 647bad58f0
commit 6173cb6138
1 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+79
View File
@@ -0,0 +1,79 @@
import Link from 'next/link'
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="bg-[#111827] text-gray-300">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Contact Info */}
<div>
<h3 className="text-lg font-semibold text-white mb-4">Contact Us</h3>
<ul className="space-y-3">
<li className="flex items-start gap-2">
<MapPin className="w-5 h-5 text-[#d4af37] shrink-0 mt-0.5" />
<span>44 Rutherford Circle, Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-5 h-5 text-[#d4af37] shrink-0" />
<a href="tel:+27331234567" className="hover:text-[#d4af37] transition-colors">+27 33 123 4567</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-5 h-5 text-[#d4af37] shrink-0" />
<a href="mailto:bookings@kwantofontofo.co.za" className="hover:text-[#d4af37] transition-colors">bookings@kwantofontofo.co.za</a>
</li>
</ul>
</div>
{/* Business Hours */}
<div>
<h3 className="text-lg font-semibold text-white mb-4">Reception</h3>
<ul className="space-y-2">
<li>Check-in: 14:00 – 20:00</li>
<li>Check-out: 10:00</li>
<li>Reception hours: 7:00 – 21:00</li>
<li>On-site manager 24/7</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h3 className="text-lg font-semibold text-white mb-4">Quick Links</h3>
<ul className="space-y-2">
<li><Link href="/" className="hover:text-[#d4af37] transition-colors">Home</Link></li>
<li><Link href="/booking" className="hover:text-[#d4af37] transition-colors">Book a Room</Link></li>
<li><Link href="#themed-suites" className="hover:text-[#d4af37] transition-colors">Themed Suites</Link></li>
<li><Link href="#our-story" className="hover:text-[#d4af37] transition-colors">Our Story</Link></li>
<li><Link href="#specials" className="hover:text-[#d4af37] transition-colors">Specials</Link></li>
<li><Link href="#gallery" className="hover:text-[#d4af37] transition-colors">Gallery</Link></li>
<li><Link href="#contact" className="hover:text-[#d4af37] transition-colors">Contact</Link></li>
</ul>
</div>
{/* Social Media */}
<div>
<h3 className="text-lg font-semibold text-white mb-4">Follow Us</h3>
<div className="flex space-x-4">
<a href="https://facebook.com/kwantofontofo" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-[#d4af37] transition-colors">
<Globe className="w-6 h-6" />
</a>
<a href="https://instagram.com/kwantofontofo" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-[#d4af37] transition-colors">
<Camera className="w-6 h-6" />
</a>
<a href="https://x.com/kwantofontofo" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-[#d4af37] transition-colors">
<X className="w-6 h-6" />
</a>
<a href="https://wa.me/27331234567" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-[#d4af37] transition-colors">
<MessageCircle className="w-6 h-6" />
</a>
</div>
</div>
</div>
<div className="mt-8 border-t border-gray-700 pt-8 text-center">
<p>&copy; {currentYear} KwaNtofontofo. All rights reserved.</p>
</div>
</div>
</footer>
)
}