Vula Builder
91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
|
||
|
||
export default function Footer() {
|
||
return (
|
||
<footer className="bg-[#111827] text-white py-16">
|
||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||
{/* Brand */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-3xl font-bold font-heading text-[#8b5a3c]">Kapa Roast</h3>
|
||
<p className="text-gray-300 text-sm leading-relaxed">
|
||
Roasting single-origin African beans in the heart of Cape Town.
|
||
Every batch tells a story of origin, care, and community.
|
||
</p>
|
||
<div className="flex space-x-4 pt-2">
|
||
<a href="#" aria-label="Facebook" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
|
||
<Globe className="h-5 w-5" />
|
||
</a>
|
||
<a href="#" aria-label="Instagram" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
|
||
<Camera className="h-5 w-5" />
|
||
</a>
|
||
<a href="#" aria-label="X" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
|
||
<X className="h-5 w-5" />
|
||
</a>
|
||
<a href="#" aria-label="TikTok" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
|
||
<Video className="h-5 w-5" />
|
||
</a>
|
||
<a href="#" aria-label="WhatsApp" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
|
||
<MessageCircle className="h-5 w-5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div>
|
||
<h4 className="text-lg font-semibold font-heading mb-4 text-white">Browse</h4>
|
||
<ul className="space-y-2 text-sm text-gray-400">
|
||
<li><a href="/" className="hover:text-[#ea580c] transition-colors duration-200">Home</a></li>
|
||
<li><a href="#menu" className="hover:text-[#ea580c] transition-colors duration-200">Menu</a></li>
|
||
<li><a href="#gallery" className="hover:text-[#ea580c] transition-colors duration-200">Gallery</a></li>
|
||
<li><a href="#contact" className="hover:text-[#ea580c] transition-colors duration-200">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div>
|
||
<h4 className="text-lg font-semibold font-heading mb-4 text-white">Get in Touch</h4>
|
||
<ul className="space-y-3 text-sm text-gray-400">
|
||
<li className="flex items-start gap-2">
|
||
<MapPin className="h-4 w-4 mt-0.5 text-[#8b5a3c]" />
|
||
<span>14 Roeland Street<br />Cape Town 8001</span>
|
||
</li>
|
||
<li className="flex items-center gap-2">
|
||
<Phone className="h-4 w-4 text-[#8b5a3c]" />
|
||
<a href="tel:+27210000000" className="hover:text-[#ea580c] transition-colors duration-200">+27 21 000 0000</a>
|
||
</li>
|
||
<li className="flex items-center gap-2">
|
||
<Mail className="h-4 w-4 text-[#8b5a3c]" />
|
||
<a href="mailto:hello@kaparoast.co.za" className="hover:text-[#ea580c] transition-colors duration-200">hello@kaparoast.co.za</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Hours */}
|
||
<div>
|
||
<h4 className="text-lg font-semibold font-heading mb-4 text-white">Roastery Hours</h4>
|
||
<ul className="space-y-2 text-sm text-gray-400">
|
||
<li className="flex justify-between">
|
||
<span>Monday–Friday</span>
|
||
<span>7am – 5pm</span>
|
||
</li>
|
||
<li className="flex justify-between">
|
||
<span>Saturday</span>
|
||
<span>8am – 3pm</span>
|
||
</li>
|
||
<li className="flex justify-between">
|
||
<span>Sunday</span>
|
||
<span>9am – 1pm</span>
|
||
</li>
|
||
</ul>
|
||
<p className="mt-4 text-xs text-gray-500">
|
||
Public holidays may vary — call ahead.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-gray-700 text-center text-sm text-gray-400">
|
||
<p>© {new Date().getFullYear()} Kapa Roast. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
)
|
||
} |