Nonna

About This Template

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.

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.

Features

• 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)
• Masonry CSS grid gallery with a lightbox — focusable prev/next/close buttons, aria-modal dialog, click-outside dismiss, image counter
• Validated reservation form — name, email, phone, date, time, guests, requests, with inline errors and a success state
• Testimonial slider with SVG star ratings, Google and TripAdvisor sources, and reviews in English and Italian
• 3 color skins on the html data-skin attribute — Nero (dark gold), Bianco (warm light), Rosso (Italian red)
• 2 content collections — 16 JSON menu items and 3 experiences (private dining, chef's table, wine pairing)
• All 20 photographs routed through Astro getImage() to WebP at explicit sizes and quality 85–90
• SVG fractalNoise grain overlay at 5% opacity with mix-blend-mode overlay for a printed-menu texture
• CSS Modules plus custom-property design tokens — scoped styles, no utility framework, no class collisions
• Lenis smooth scroll (duration 0.7, wheelMultiplier 1.6) + Astro View Transitions with GSAP cleanup on navigation
• Accessible by default — skip link, focus-visible rings, aria-labelled sections, prefers-reduced-motion fallbacks

Deployment