Nonna

Sobre Este Template

Nonna es una plantilla editorial oscura para restaurantes de alta cocina, trattorias y proyectos de chef, escrita con rutas en italiano (/menu/, /storia/, /esperienze/, /prenotazioni/). Ocho páginas cubren la landing, un menú con tabs, la historia del chef, experiencias privadas, galería con lightbox, reservas, contacto y un 404 con marca. El hero llena la pantalla con DA NONNA en Cormorant Garamond itálica hasta 260px, revelado por un wipe de clip-path que sube desde la línea base mientras la foto oscurecida del interior hace parallax detrás. Las cards de platos destacados hacen tilt 3D bajo el puntero, los CTA se acercan al cursor, el formulario de reservas valida inline y resuelve a un estado de éxito, y tres skins — Nero, Bianco y Rosso — cambian toda la paleta desde un solo atributo.

Firma

Al cargar, el nombre del restaurante llena el viewport — DA NONNA en Cormorant Garamond itálica hasta 260px — y un clip-path inset se anima de 100% a 0, abriendo las letras desde la línea base hacia arriba en 1.4s. Después una regla dorada escala desde su centro, aparece la línea EST. 1987 y la foto oscurecida del interior empieza a hacer parallax con el scroll. Se lee como la portada de un menú, no como un hero web.

Características

• 8 páginas — Inicio, Menú, Storia, Esperienze, Galería, Prenotazioni, Contacto, 404
• Hero signature — DA NONNA en Cormorant Garamond itálica a clamp(14vw, 18vw, 260px), revelado con un wipe clip-path de 1.4s
• Parallax con scrub en la foto del hero, tratada con brightness 0.22 y grayscale 0.15 para que la tipografía siempre gane
• Menú con tabs como isla React — 5 categorías (Antipasti, Primi, Secondi, Dolci, Vini), 16 platos, chips de alérgenos y ARIA tablist completo
• Tilt 3D en las cards de platos destacados — perspective 900px y rotación de ±8deg según la posición del puntero
• Botones CTA magnéticos que siguen al cursor en un recorrido de 28px en horizontal y 14px en vertical (±14px / ±7px desde el reposo)
• Galería en grid CSS tipo masonry con lightbox — botones prev/next/close enfocables, dialog aria-modal, cierre al hacer click fuera y contador de imágenes
• Formulario de reservas validado — nombre, email, teléfono, fecha, hora, comensales y peticiones, con errores inline y estado de éxito
• Slider de testimonios con estrellas SVG, fuentes de Google y TripAdvisor, y reseñas en inglés e italiano
• 3 skins de color en el atributo data-skin del html — Nero (oro sobre oscuro), Bianco (claro cálido), Rosso (rojo italiano)
• 2 colecciones de contenido — 16 platos en JSON y 3 experiencias (private dining, chef's table, wine pairing)
• Las 20 fotografías pasan por getImage() de Astro a WebP con tamaños explícitos y calidad 85–90
• Overlay de grano SVG fractalNoise al 5% con mix-blend-mode overlay para una textura de menú impreso
• CSS Modules más tokens de diseño en custom properties — estilos scoped, sin framework de utilidades ni colisiones de clases
• Smooth scroll con Lenis (duration 0.7, wheelMultiplier 1.6) + Astro View Transitions con limpieza de GSAP al navegar
• Accesible por defecto — skip link, anillos focus-visible, secciones con aria-label y fallbacks para prefers-reduced-motion

Despliegue