🍕Nonna’s Table
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built A landing page for Nonna's Table — a wood-fired pizza place that only exists in my head, but I built it like it's been on the corner of Mulberry St for thirty years. I leaned hard into "comfort food" being about more than the food itself — it's the whole ritual around it. So instead of a generic hero…
This submission focuses on the creation of a virtual landing page for "Nonna's Table," an imagined wood-fired pizza place that prioritizes the experience and ritual surrounding the food. Rather than adhering to conventional landing page structures, the designer opted to convey a sense of a family restaurant, achieved through a hero section promising "Sunday dinner," a three-step narrative about the pizza-making process (knead, rise, fire), a concise six-item menu, and testimonials that emulate genuine conversations rather than promotional language.
Key design elements include a sliding hero pizza that simulates coming off a peel and spinning as the viewer scrolls, an animated flame icon shared through a single GSAP loop, and a bespoke Tailwind theme with color names drawn from the menu items themselves (e.g., marinara, basil, crust, dough, parmesan). The animation flow relies on GSAP and ScrollTrigger for scroll-driven motion and Motion for interactive elements like button taps and card animations.
This combination of animation libraries, despite initial reservations, proved less cumbersome than anticipated, as each served distinct functions.
The writing process began with crafting the site's tone through the copy, which significantly influenced the overall design. A line such as "we do not talk about 1998" established the site's dry yet affectionate character. The animation strategy was similarly tailored: GSAP managed scroll-linked and physically animated elements (e.g., the rotating pizza, drifting steam, flickering flame), while Motion handled interactive features such as button taps, card elevations, and mobile menu operations.
One of the more intensive parts of the project involved refining the hero illustration, ensuring each SVG element (pizza, basil leaf, and tomato) moved independently yet harmoniously. This challenge required meticulous adjustment of duration and easing values to transform the visual composition from a jumble of elements into a cohesive scene.
Moving forward, the designer plans to incorporate a reservation system in place of the current phone number and considers adding a dark "late-night" theme to reflect the ambiance of the imagined restaurant, especially since the establishment's allure is heightened during late-night visits.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
