vula-projects/vula-f731b6c5
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-04 09:17:00 +00:00
parent f5c3e1a575
commit e8f72687c4
1 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+91
View File
@@ -0,0 +1,91 @@
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>&copy; {new Date().getFullYear()} Kapa Roast. All rights reserved.</p>
</div>
</footer>
)
}