Warm Hearth — A Landing Page Built Around One Fire

This is a submission for the Frontend Challenge - Comfort Food Edition, titled "Warm Hearth." The project focuses on a landing page for a comfort food restaurant that revolves around a single concept: all dishes share the same wood-fired hearth. To represent this unique idea, the page features an interactive hearth centerpiece at the center of the hero section.

Upon landing, users can click on the hand-drawn SVG fire pit, causing the flame to flare, embers to burst upward, and a small counter to track the number of times they stoke the fire during their visit.

The page showcases four dishes, each with distinct cultural identities. These dishes include ramen, warm pies, cheesy pasta bake, and gulab jamun, each illustrated with hand-drawn SVG graphics and unique border motifs inspired by their respective cuisines. The steam rising off the ramen, pies, and pasta bake utilizes the same whisp animation as the hero's hearth, resulting in a consistent "warmth" language throughout the entire page.

The gulab jamun, however, incorporates a syrup shimmer and drip, as steam is not the appropriate detail for a syrup-soaked dessert.

In place of standard price tags, the page features kitchen tickets hanging from a string and swaying gently in a subtle flick when hovered over. This detail adds a tactile feel to the page, giving it a handmade appearance rather than a templated one. The site also includes Mira, an illustrated host who offers rotating table tips by clicking her, providing a personal touch instead of a generic "contact us" widget.

The project was designed with actual use in mind, not just for aesthetics. The page includes keyboard-focusable tab filters, a skip-to-content link, ARIA-live regions for interactive elements, and full prefers-reduced-motion support that disables all animations without compromising the functionality of the page. The design process began with the concept of "a restaurant that runs on one hearth," which significantly altered the approach to the project.

The author is most proud of the price tags, which add an extra layer of realism to the page. The detail of the tickets swaying and flicking on hover required careful tuning to achieve the desired effect. Looking ahead, the author plans to expand the selection of dishes to provide more content for the category tabs and create a dedicated "our hearth" section that delves into the history behind the restaurant's wood-fired hearth.