vula-projects/vula-1c2c5a36
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-27 09:51:13 +00:00
parent 255dbc8a29
commit 2e58c99639
1 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+108
View File
@@ -0,0 +1,108 @@
import { Camera, Globe, Linkedin, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react';
;
;
export default function Footer() {
return (
<footer className="bg-[#1B3A1F] text-white">
<div className="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-3 gap-12">
{/* Brand & Contact */}
<div>
<h3 className="text-2xl font-display mb-4" style={{ fontFamily: 'var(--font-heading)' }}>
Bona Vista
</h3>
<p className="text-white/70 text-sm leading-relaxed mb-6">
Traditional Italian cuisine rooted in Roman heritage, crafted with local organic ingredients and slow‑food philosophy.
</p>
<div className="flex items-start gap-3 mb-3">
<MapPin className="w-5 h-5 mt-0.5 text-[#8BC34A]" />
<span className="text-white/80 text-sm">Via della Vite 12, 00187 Rome RM, Italy</span>
</div>
<div className="flex items-center gap-3 mb-3">
<Phone className="w-5 h-5 text-[#8BC34A]" />
<a href="tel:+39061234567" className="text-white/80 text-sm hover:text-[#8BC34A] transition-colors duration-200">
+39 06 123 4567
</a>
</div>
<div className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[#8BC34A]" />
<a href="mailto:info@bonavista.it" className="text-white/80 text-sm hover:text-[#8BC34A] transition-colors duration-200">
info@bonavista.it
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="text-lg font-semibold mb-5" style={{ fontFamily: 'var(--font-heading)' }}>
Navigate
</h4>
<ul className="space-y-3">
{[
{ label: 'Home', href: '/' },
{ label: 'Menu', href: '#menu' },
{ label: 'About', href: '#about' },
{ label: 'Gallery', href: '#gallery' },
{ label: 'Team', href: '#team' },
{ label: 'Contact', href: '#contact' },
].map((link) => (
<li key={link.label}>
<a
href={link.href}
className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200 text-sm"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Hours & Social */}
<div>
<h4 className="text-lg font-semibold mb-5" style={{ fontFamily: 'var(--font-heading)' }}>
Opening Hours
</h4>
<ul className="space-y-2 text-sm text-white/70 mb-8">
<li className="flex justify-between">
<span>Monday</span>
<span className="text-white/50">Closed</span>
</li>
<li className="flex justify-between">
<span>Tue – Fri</span>
<span>12:00 – 15:00 · 19:00 – 23:00</span>
</li>
<li className="flex justify-between">
<span>Sat – Sun</span>
<span>12:30 – 16:00 · 18:30 – 23:30</span>
</li>
</ul>
<div className="flex flex-wrap gap-4">
<a href="#" aria-label="Facebook" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<Globe className="w-5 h-5" />
</a>
<a href="#" aria-label="Instagram" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<Camera className="w-5 h-5" />
</a>
<a href="#" aria-label="X (Twitter)" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<X className="w-5 h-5" />
</a>
<a href="#" aria-label="TikTok" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<Video className="w-5 h-5" />
</a>
<a href="#" aria-label="WhatsApp" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<MessageCircle className="w-5 h-5" />
</a>
<a href="#" aria-label="LinkedIn" className="text-white/70 hover:text-[#8BC34A] transition-colors duration-200">
<Linkedin className="w-5 h-5" />
</a>
</div>
</div>
</div>
<div className="border-t border-white/10 py-6 text-center text-sm text-white/50">
© {new Date().getFullYear()} Bona Vista. All rights reserved.
</div>
</footer>
);
}