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 + menu + footer page, I tried to make it feel like someone's actually telling you about their family restaurant: a hero that promises "Sunday dinner," a three-step story section about the dough (knead, rise, fire), a short six-item menu instead of an exhaustive one, and testimonials that sound like real people instead of five-star review copy.

Little details I'm happy with:

  • The hero pizza slowly bobs like it just came off the peel, and spins as you scroll past it
  • Every flame icon on the page (menu, story) flickers off one shared GSAP loop
  • A custom Tailwind theme with color names pulled straight from the food — marinara, basil, crust, dough, parmesan — instead of gray-500/orange-600 style naming
  • Sections fade/slide in on scroll using a small reusable Reveal component instead of a full animation library for that part

Stack: Next.js (App Router), React, Tailwind v4, GSAP + ScrollTrigger for the scroll-tied motion, and Motion for the hover/tap micro-interactions on buttons and cards.

Demo

https://dev-to-food-landing-page.vercel.app/

Journey

I started with the copy before touching any styling, which is not how I normally work but it ended up shaping everything else. Once I'd written "we do not talk about 1998" for the dough-rise step, the whole tone of the site kind of fell into place — a little dry, a little affectionate, not trying to sell you anything too hard.

The animation split ended up being GSAP for anything tied to scroll or physical motion (the pizza rotating as you scroll past, the steam drifting, the flame flicker), and Motion for the small interactive stuff — button taps, card hover lifts, the mobile menu opening. Having both in the same project felt like overkill at first, but they're solving different problems and mixing them was less painful than I expected.

The part I spent the most time tweaking was the hero illustration — getting the pizza, basil leaf and tomato SVGs to move independently but not fight each other took a lot of nudging duration and easing values until it stopped looking like clutter and started looking like things settling into place.

Next, I'd like to add a real reservation flow instead of just a phone number, and maybe a dark "late night" theme for the site since half the point of a place like this is showing up after 9pm.