Nonna

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.

Qué incluye

• 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)

La 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.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/nonna-dark/. 8 páginas, hecha con Astro 5, React 19, TypeScript, CSS Modules, GSAP, Lenis.