Restaurant landing

Restaurant landing is a warm-cream, single-page site for an independent restaurant or wine bar. It opens on a candlelit dining-room hero, walks a guest through the story, a seasonal menu preview, the chef line-up, and the hours, then lands them on a direct reservation call-to-action. Everything you need to capture atmosphere and let diners book lives on one scrollable page.

The craft is in the details you can see in the code. The palette is built from cream (#fbf7ee), deep walnut, and an ember-orange accent, with olive-green text on the light sections. Headings use Playfair Display for an editorial, menu-card feel while Inter keeps body copy clean. A fixed header fades from transparent over the hero to a blurred walnut bar on scroll, sections alternate cream and dark backgrounds for rhythm, and soft entrance animations plus hover lifts on cards give the page a considered, finished polish.

Who it's for

• Independent restaurants that need one strong page, not a full site
• Wine bars and bistros that want to lead with atmosphere
• Chef-led or tasting-menu concepts showing off a seasonal kitchen
• New openings that need a credible web presence fast
• Pop-ups and supper clubs announcing a location and hours
• Hospitality brands adapting the chef cards into a team or host line-up

What's included

• A single-page React app (App.tsx) composed of clear, named sections
• Fixed header with smooth-scroll nav and a mobile hamburger drawer
• Full-bleed hero with a tagline and two scroll-to CTAs
• Story / About section with three editable stat figures and a framed photo
• Seasonal menu preview: an image plus four dish cards with prices
• Chef line-up: three profile cards with hover-revealed skill tags
• Reservation panel with dinner hours, location, and tel:/mailto: action links
• Four-column footer with quick links, contact block, social icons, and an opening-hours list
• Tailwind v4 brand tokens (cream / walnut / ember / olive ramps, Playfair + Inter) defined in index.css

This is a frontend-only template. The reservation and contact actions are plain tel: and mailto: links, ready to be pointed at your own phone, email, or booking provider — there is no backend, database, or stored data, and nothing is submitted or emailed by the page itself.

Best use cases

Single-location restaurant site

Replace the cuisine, dishes, and prices, swap in your own room and food photography, and you have a complete one-page site that mirrors the structure of a polished restaurant brand.

Seasonal or tasting menu launch

The menu preview and story sections are built to introduce a kitchen's point of view. Use it to announce a new seasonal menu and drive guests straight to the reservation CTA.

Chef or hospitality team showcase

The three chef cards adapt cleanly into founders, hosts, or event leads, making the template useful for any small hospitality brand that wants to put faces to the room.

Make it yours

1. Remix the template

Start from Restaurant landing in mythos.new and remix it. You get your own private copy of the full project — every section, color token, and image — ready to edit immediately.

2. Customize your brand

In the in-browser IDE and chat, change the restaurant name and LogoMark, rewrite the dishes and prices, replace the chef line-up, and update hours, address, phone, and email. Retune the entire look by editing the cream / walnut / ember / olive tokens and the Playfair / Inter pairing in index.css, and swap the hero, story, menu, and reservation photos for your own. Point the Call and Make Reservation links at your real phone, email, or booking platform.

3. Publish

When it looks right, publish from mythos.new to a <name>.r21.dev subdomain. Your one-page restaurant site goes live with no build setup, and you can re-edit and re-publish anytime.