Theme · Company Site · Beginner
Restaurant Website
Restaurant website = a nav with a reserve button, a warm hero, menu category pills, and dish cards with price and description.
Tips
Keep the accent on the reserve action and the prices only — let the photography and whitespace do the rest. Render the menu description in two lines so cards stay even.
See also
Build a warm restaurant website for a modern Mediterranean bistro called "Olive & Vine".
STYLE
- Warm off-white #faf6f1 page, ink #1d1d1f text, terracotta accent #c8642a
- Soft 10px radii, hairline #ececf0 borders, generous whitespace
- System sans; the accent appears only on the primary button and prices
LAYOUT
- Top bar: "Olive & Vine" wordmark left, links Menu / Reservations / About, a pill "Book a table" button right
- [tall] Hero: kicker "Modern Mediterranean", headline "Dinner, served slow.", one supporting line, and a "Reserve a table" button
- A single row of menu category pills: Starters (active), Mains, Desserts, Wine
- A dish grid (3 across desktop): each card has a dish name, a price, and a one-line description
- Burrata & Peach — $16 — Creamy burrata, white peach, basil oil
- Wood-fired Branzino — $34 — Whole fish, lemon, charred fennel
- Pistachio Tart — $12 — Sicilian pistachio, honey, sea salt
- [tall] A reservation panel: Date, Time, Party size fields and a "Confirm" button
- [tall] Footer: "© 2026 Olive & Vine" + Hours · Location · Menu
COMPONENTS
- Navbar, button, card, input
- Dish card: name, price (accent), description (2-line clamp)
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui