Bella Vista

Sobre Este Template

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.

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.

Características

• 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
• Formulario de reserva + contacto por tabs con estados de envío y éxito, abriendo la tab de reserva automáticamente con el hash #reserve
• Navegación sticky que se compacta pasados 50px, con overlay móvil a pantalla completa y bloqueo de scroll del body mientras está abierta
• Bloque de testimonios con valoraciones de 5 estrellas y atribución de fuente (Google, OpenTable, prensa)
• Sección de ubicación con dirección, teléfono, email y embed opcional de Google Maps con fallback a imagen de mapa estática
• Horario de apertura renderizado en el footer y en la página de contacto desde arrays simples de día/hora que editas en el sitio
• Scroll reveals con IntersectionObserver (.reveal / .reveal-left / .reveal-right) — sin librería de animación ni JS extra
• CSS Modules por componente con locales camelCase — 11 componentes, cero colisiones de clases globales
• Sistema de design tokens en custom properties — colores, escala tipográfica de 11 pasos (xs → 7xl), spacing, radios, sombras, transiciones y z-index
• 54 fotos reales en src/assets pre-optimizadas a WebP con getImage() y el servicio sharp en dimensiones explícitas
• View Transitions de Astro, skip link al contenido, toggle móvil con aria-expanded y TypeScript estricto — cero any

Despliegue