Food Menu Landing Page

Problem

The brief was a food menu as a single landing page, with the phone as the screen that mattered. A menu is content people scan rather than read: the only two questions worth answering in the first few seconds are what is there and what it costs, and both have to be reachable without pinching or hunting.

A layout built like a poster works against that. Posters are designed for a wall and a fixed reading distance (type sized to be read from far away, sections running side by side), and the same arrangement on a phone collapses into one long vertical scroll, where the part you want is never the part on screen.

Solution

One page, one column, built with Tailwind CSS and laid out mobile-first: the small screen sets the constraints and the desktop view is the one that gets the extra room, not the other way round. Menu content sits in full-width blocks on a single spacing scale, so the rhythm holds from the smallest screen up instead of being re-decided section by section.