This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
A landing page for jollof rice — not a restaurant, not a recipe blog, just a love letter to one dish.
Jollof is comfort food with a personality: everyone has an opinion about how it should be made, and the most contested part of the whole pot is the crispy, caramelized layer that forms at the bottom while it cooks. That “bottom pot” crust is the centerpiece of the whole page.
What I Built
The site is built with React and features a hero section, a short story about why jollof feels like comfort food, a lighthearted section around the eternal “whose jollof is best?” debate, a step-by-step breakdown of how the dish comes together, and an interactive centerpiece: the Bottom Pot Dial.
The dial lets you choose your preferred crust level, from soft and fluffy to full party crust. As you drag the slider, the pot illustration and the accompanying content update live.
Demo
https://jollof-nine.vercel.app
Journey
I wanted to avoid the two landing-page defaults I kept seeing myself reach for: a cream background with a terracotta accent, or a stock hero with a big stat and a gradient.
Since jollof already has a strong, specific visual identity — pot-iron black, stew red, and scorched amber — I built the palette directly from the dish instead of creating a generic “food site” look. The crust colors then became both the UI accent and the visual element controlled by the interactive dial.
The Bottom Pot Dial is the part I'm most proud of. It's a simple useState slider under the hood, but tying it to three things at once — the SVG pot's fill color, the headline copy, and a small “argument likelihood” stat — made it feel like a real signature moment rather than just decoration.
The How It's Built section numbers the four layers of the dish in actual cooking order, since that's a real sequence and not just a stylistic choice.
On the code side, I split the component into a .jsx file and a separate .css file rather than keeping styles inline. This made the component easier to read and matches how I structure my projects elsewhere.
I also paid close attention to accessibility throughout: visible focus states on the slider, button, and email input; aria-label and aria-valuetext on the dial; a properly associated visually hidden label on the email field; and a prefers-reduced-motion fallback for the steam animation in the hero.
Thanks for reading — go put some rice on. 🍚🔥
Top comments (0)