vula-projects/vula-bf109bd0
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:25:15 +00:00
parent 54709e76c1
commit 7661b80c69
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 { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-white border-t border-[var(--color-border)] pt-16 pb-8">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
<div>
<h3 className="font-heading text-2xl font-bold text-[#dc2626] mb-4">
La Roc
</h3>
<p className="text-neutral-600 text-sm leading-relaxed">
Auténtica cocina española desde 1998. <br />
Sabores de la península ibérica elaborados con ingredientes de primera calidad.
</p>
</div>
<div>
<h4 className="text-sm font-semibold tracking-widest uppercase text-neutral-400 mb-4">
Navegación
</h4>
<ul className="space-y-2 text-neutral-600 text-sm">
<li><a href="/" className="hover:text-[#dc2626] transition-colors duration-200">Inicio</a></li>
<li><a href="#menu" className="hover:text-[#dc2626] transition-colors duration-200">Menú</a></li>
<li><a href="#gallery" className="hover:text-[#dc2626] transition-colors duration-200">Galería</a></li>
<li><a href="#contact" className="hover:text-[#dc2626] transition-colors duration-200">Contacto</a></li>
</ul>
</div>
<div>
<h4 className="text-sm font-semibold tracking-widest uppercase text-neutral-400 mb-4">
Contacto
</h4>
<ul className="space-y-3 text-neutral-600 text-sm">
<li className="flex items-start gap-2">
<MapPin className="w-4 h-4 text-[#d4af37] mt-0.5 flex-shrink-0" />
<span>Calle de Serrano 45, 28001 Madrid, España</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-4 h-4 text-[#d4af37] flex-shrink-0" />
<a href="tel:+34911234567" className="hover:text-[#dc2626] transition-colors duration-200">+34 91 123 45 67</a>
</li>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4 text-[#d4af37] flex-shrink-0" />
<a href="mailto:info@laroc.es" className="hover:text-[#dc2626] transition-colors duration-200">info@laroc.es</a>
</li>
</ul>
</div>
<div>
<h4 className="text-sm font-semibold tracking-widest uppercase text-neutral-400 mb-4">
Horario
</h4>
<ul className="space-y-2 text-neutral-600 text-sm">
<li><span className="font-medium">Lun–Jue:</span> 13:00–16:00, 20:00–23:00</li>
<li><span className="font-medium">Vie–Sáb:</span> 13:00–16:00, 20:00–00:00</li>
<li><span className="font-medium">Dom:</span> 13:00–16:00</li>
</ul>
<div className="flex items-center gap-4 mt-6">
<a href="#" aria-label="Facebook" className="text-neutral-500 hover:text-[#dc2626] transition-colors duration-200">
<Globe className="w-5 h-5" />
</a>
<a href="#" aria-label="Instagram" className="text-neutral-500 hover:text-[#dc2626] transition-colors duration-200">
<Camera className="w-5 h-5" />
</a>
<a href="#" aria-label="X" className="text-neutral-500 hover:text-[#dc2626] transition-colors duration-200">
<X className="w-5 h-5" />
</a>
<a href="#" aria-label="WhatsApp" className="text-neutral-500 hover:text-[#dc2626] transition-colors duration-200">
<MessageCircle className="w-5 h-5" />
</a>
</div>
</div>
</div>
<div className="mt-12 pt-6 border-t border-neutral-200 text-center text-sm text-neutral-500">
&copy; {year} La Roc. Todos los derechos reservados.
</div>
</div>
</footer>
)
}