Nonna

Nonna is a dark editorial template for fine-dining restaurants, trattorias, and chef-led venues, written with Italian routes (/menu/, /storia/, /esperienze/, /prenotazioni/). Eight pages cover the landing page, a tabbed menu, the chef’s story, private experiences, a lightbox gallery, reservations, contact, and a branded 404. The hero fills the screen with DA NONNA set in Cormorant Garamond italic at up to 260px, revealed by a clip-path wipe that rises from the baseline while the darkened interior photo parallaxes behind it. Featured dish cards tilt in 3D under the pointer, CTAs pull toward the cursor, the reservation form validates inline and resolves to a success state, and three color skins, Nero, Bianco, and Rosso, swap the entire palette from one attribute.

What’s inside

• 8 pages, Home, Menu, Storia, Esperienze, Gallery, Prenotazioni, Contact, 404
• Signature hero, DA NONNA in Cormorant Garamond italic at clamp(14vw, 18vw, 260px), revealed by a 1.4s clip-path wipe
• Hero photo parallax on scrub, treated with brightness 0.22 and grayscale 0.15 so the type always wins
• Tabbed menu React island, 5 categories (Antipasti, Primi, Secondi, Dolci, Vini), 16 dishes, allergen chips, full ARIA tablist
• 3D tilt on featured dish cards, perspective 900px, ±8deg rotation tracked from pointer position
• Magnetic CTA buttons that track the cursor across a 28px horizontal and 14px vertical travel range (±14px / ±7px from rest)

The signature

On load the restaurant name fills the viewport, DA NONNA in Cormorant Garamond italic at up to 260px, and a clip-path inset animates from 100% to 0, wiping the letters open from the baseline upward over 1.4s. A gold rule then scales out from its center, the EST. 1987 line fades in, and the darkened interior photo behind it begins to parallax on scroll. It reads like the cover plate of a menu rather than a web hero.

See it live

The demo is public: https://fpsjago.github.io/nonna-dark/. 8 pages, built with Astro 5, React 19, TypeScript, CSS Modules, GSAP, Lenis.