Bella Vista
Plantilla de restaurante fine-dining con 3 temas de color intercambiables y lightbox de galería
- Plantilla
- Bella Vista
- Sector
- Restaurant
- Año
- 2025
- Hecho con
- Astro 5, React 19, CSS Modules
- Páginas
- 8
Bella Vista es una plantilla de restaurante fine-dining para trattorias, bistrós y cocinas de autor. Ocho rutas cubren la portada, una carta completa con cuatro tiempos y dieciséis platos, una galería filtrable con lightbox, la página de historia, contacto con formulario de reserva por tabs, un 404 y dos rutas de preview de temas en vivo. Tres temas de color completos, Classic burdeos, Coastal azul marino y terracota, Urban carbón y oliva, se cambian con un solo prop theme en el layout, más dark mode encima. El hero corre un loop Ken Burns de veinte segundos bajo un gradiente de tres paradas con animaciones de entrada escalonadas. Construida sobre Astro 5 y React 19 con CSS Modules y un sistema completo de design tokens, sin librería de animación, y cincuenta y cuatro fotos reales optimizadas a WebP con sharp.
Qué incluye
- 8 rutas, Inicio, Carta, Galería, Nosotros, Contacto, 404, más /demo/coastal y /demo/urban como previews de tema en vivo
- 3 temas de color completos que se cambian con un solo prop
theme, Classic burdeos #8B2635, Coastal terracota #D4755E, Urban oliva #6B8E4E - Dark mode encima vía data-mode=“dark”, sobrescribe los fondos a #1A1A1A / #242424 sin tocar el tema
- Hero Ken Burns, keyframe CSS de 20s infinite-alternate que escala el fondo 1 → 1.1 bajo un gradiente oscuro de tres paradas
- Sección de carta completa, 4 tiempos (Antipasti, Pasta, Secondi, Dolci), 16 platos con precios, fotos y badges dietéticos V/GF
- Galería filtrable, 12 imágenes con caption y filtros All / Interior / Food / Team, más lightbox con navegación prev/next circular
La firma
El hero combina un loop Ken Burns lento con una entrada coreografiada. Un keyframe CSS de 20 segundos en infinite-alternate escala la foto de fondo de 1 a 1.1 mientras la desplaza -1% en ambos ejes, así la imagen nunca se queda quieta, todo bajo un gradiente oscuro de tres paradas (negro al 0.4 → 0.6 → 0.7) que mantiene legible la tipografía. Encima, un único keyframe fadeInUp recorre el bloque en cascada: el contenedor a los 0.3s, el tagline a los 0.5s, el titular en Playfair con su línea de acento en Great Vibes a los 0.7s, el subtítulo a los 0.9s y el par de CTAs a los 1.1s, CSS puro, sin librería de animación enviada al navegador.
Verlo en vivo
La demo es pública: https://fpsjago.github.io/restaurant-template-pro/. 8 páginas, hecha con Astro 5, React 19, TypeScript, CSS Modules.