vula-projects/vula-50f737dd
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 11:45:18 +00:00
parent 73b81617b9
commit 1b0dcf15fd
1 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+122
View File
@@ -0,0 +1,122 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-[#111827] text-white pb-6">
<div className="mx-auto max-w-7xl px-6 py-20 lg:py-28">
<div className="grid gap-12 lg:grid-cols-12">
{/* Brand + Contact */}
<div className="lg:col-span-4 space-y-5">
<h3 className="text-2xl font-semibold font-[var(--font-heading)] text-[#ea580c]">
Durban Curry
</h3>
<p className="text-neutral-400 leading-relaxed">
Hand-ground masalas, KZN-sourced produce, and a table where Durban
meets India. Every plate supports local farmers and spice artisans.
</p>
<div className="space-y-3 mt-4">
<div className="flex items-center gap-3 text-neutral-300 hover:text-[#ea580c] transition-colors duration-200">
<MapPin size={18} />
<span>15 Mahatma Gandhi Road, Durban CBD, 4001</span>
</div>
<div className="flex items-center gap-3 text-neutral-300 hover:text-[#ea580c] transition-colors duration-200">
<Phone size={18} />
<a href="tel:+27315551234" className="hover:underline">+27 31 555 1234</a>
</div>
<div className="flex items-center gap-3 text-neutral-300 hover:text-[#ea580c] transition-colors duration-200">
<Mail size={18} />
<a href="mailto:hello@durbancurry.co.za" className="hover:underline">hello@durbancurry.co.za</a>
</div>
</div>
</div>
{/* Hours */}
<div className="lg:col-span-3">
<h4 className="text-lg font-semibold text-white mb-5 font-[var(--font-heading)]">
Opening Hours
</h4>
<ul className="space-y-3 text-neutral-400">
<li className="flex justify-between">
<span>Monday</span>
<span className="text-[#ea580c]">Closed</span>
</li>
<li className="flex justify-between">
<span>Tue – Thu</span>
<span>11:00 – 14:30 / 17:30 – 21:30</span>
</li>
<li className="flex justify-between">
<span>Friday</span>
<span>11:00 – 14:30 / 17:30 – 22:30</span>
</li>
<li className="flex justify-between">
<span>Saturday</span>
<span>11:00 – 22:30</span>
</li>
<li className="flex justify-between">
<span>Sunday</span>
<span>11:00 – 20:30</span>
</li>
</ul>
</div>
{/* Quick Links */}
<div className="lg:col-span-2">
<h4 className="text-lg font-semibold text-white mb-5 font-[var(--font-heading)]">
Explore
</h4>
<ul className="space-y-3 text-neutral-400">
<li>
<a href="#hero" 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>
{/* Social & Community */}
<div className="lg:col-span-3">
<h4 className="text-lg font-semibold text-white mb-5 font-[var(--font-heading)]">
Community Table
</h4>
<p className="text-neutral-400 mb-6 leading-relaxed">
Proud member of KZN's hospitality family. We support Durban
vegetable growers and spice merchants – because great curry
starts close to home.
</p>
<div className="flex gap-4 text-2xl text-neutral-400">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="hover:text-[#ea580c] transition-colors duration-200"><Globe /></a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="hover:text-[#ea580c] transition-colors duration-200"><Camera /></a>
<a href="https://x.com" target="_blank" rel="noopener noreferrer" aria-label="X" className="hover:text-[#ea580c] transition-colors duration-200"><X /></a>
<a href="https://wa.me/27315551234" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="hover:text-[#ea580c] transition-colors duration-200"><MessageCircle /></a>
</div>
</div>
</div>
{/* Bottom bar */}
<div className="mt-16 border-t border-neutral-800 pt-8 flex flex-col sm:flex-row justify-between items-center text-sm text-neutral-500">
<span>&copy; {year} Durban Curry. All rights reserved.</span>
<span className="mt-4 sm:mt-0">
Hand-ground masalas &bull; Locally sourced &bull; Served with ubuntu
</span>
</div>
</div>
</footer>
)
}