Southeast Asian Cuisine & Dining Professional Website Template

Quick summary

Broth is a single-page restaurant landing page designed around warmth, story, and reservations. It opens with a full-viewport mascot illustration, moves through an origin story and menu narrative, and closes with an interactive booking form. Every section is built to feel like the restaurant itself: intimate, neighborhood-rooted, and genuinely inviting.

Who this template is for

This template is for independent pho restaurant owners who want their online presence to feel as personal as their dining room. It suits operators who rely on regular local customers and want to convert walk-in habits into advance booth reservations.

• Neighborhood pho and Vietnamese soup restaurants seeking a booking-focused landing page
• Restaurant owners who want atmosphere-first design without sacrificing a clear reservation path
• Food and beverage operators targeting local regulars across mobile devices

What problem this template solves

Most restaurant templates treat the menu as the centerpiece. Broth flips that. It leads with story and place, earning trust before asking for a booking. The result is a page that feels human rather than transactional.

• Generic restaurant pages show a menu grid with no personality, losing visitors who need context before committing
• Booking forms buried at the bottom of long pages reduce completed reservations from mobile users
• No sense of neighborhood or community leaves new visitors feeling like they stumbled onto the wrong page

What you get with this template

You get a fully structured, single-page layout with five distinct content sections and a footer. Every element is ready to populate with your own copy, photos, and reservation details. The design system, typography, and interaction patterns are all pre-built.

• A hand-inked mascot hero section with brushstroke restaurant name and scroll-triggered sticky call-to-action button
• A narrative menu section with asymmetric card layout, looping broth video embed placement, and herb delivery photo blocks
• An embedded booking form with illustrated bowl-icon party size selector and plain-language time slot cards

Feature list

A paragraph introduces the feature set: every component in this template comes directly from the source brief and serves a specific purpose in the reservation funnel.

Full-Viewport Mascot Hero

The header fills the entire screen with a hand-inked grandmother character illustration. She lifts a steaming bowl, rendered in watercolor fills that bleed warmly at the edges. Behind her, a loose neighborhood streetscape sketch grounds the page in local identity from the first scroll.

Steam Animation and Scroll Triggers

An SVG steam animation rises from the bowl in the hero section. As visitors scroll, stagger-fade reveals and parallax layers bring each new section into view. A sticky "Save Your Booth" button appears after the hero scroll and stays accessible throughout the page.

Origin Story Split Layout

A two-column section pairs a grandmother portrait with the 14-hour bone broth narrative. Morning herb delivery photos from the farmers' market sit alongside the story, giving new visitors the context that turns curiosity into appetite.

Asymmetric Menu Story Section

Menu items appear as bento-style story cards rather than a standard grid. A looping video embed slot shows broth being ladled over raw beef slices in real time. The layout feels editorial, not transactional.

Interactive Booking Form

The reservation form uses illustrated bowl icons as a tap-to-select party size picker, supporting one through six guests. Time slots are presented as three plain-language cards: Lunch Rush, Quiet Afternoon, and Dinner. A secondary link below the form routes pickup inquirers to a phone-order flow.

Neighborhood Social Proof Section

First-name customer quotes appear as warm testimonial cards styled to match the overall artisan aesthetic. This section reinforces community trust using the voices of recognizable regulars rather than anonymous five-star ratings.

Page sections overview

Design & branding system

The Warm Artisan visual theme runs consistently across every section. Colors shift from light to deep as visitors scroll, reinforcing the sense of moving closer to the kitchen.

• Color palette: warm parchment (#FFF3E2) backgrounds, soy caramel (#4A2511) body text, simmered amber (#D4883A) accents, and chili oil orange (#E8612D) for calls to action
• Typography: Fraunces serif display for headings and DM Sans for body text, pairing editorial warmth with clean legibility
• Illustration style: hand-inked line art with watercolor color fills, including a neighborhood map with pinned landmarks familiar to local visitors

Mobile & speed optimization

The template is built mobile-first, reflecting the primary use case of regulars booking a table from their phones between shifts. All interactions are touch-friendly and thumb-reachable.

• Bowl-icon party size selector and time slot cards are designed for tap interaction on small screens
• CSS animations are preferred over JavaScript-heavy effects, keeping motion smooth without heavy resource loads
• Intersection Observer API drives scroll-triggered section reveals, avoiding layout thrash on lower-powered devices

How this template helps you convert

The conversion path is woven into the page structure itself, not bolted on as an afterthought. Visitors move from emotional connection to reservation intent naturally.

1. The sticky "Save Your Booth" button appears immediately after the hero scroll and stays visible, so the primary action is always one tap away regardless of how deep a visitor reads.
2. The booking form is embedded mid-page after the menu story, catching visitors at peak appetite and reducing the distance between decision and action.

Other information about this template

This template is categorized under Food and Beverage, Southeast Asian Cuisine and Dining, with a niche focus on pho restaurants. It is localized for the United States market, uses English copy, USD pricing context, and a 12-hour time format for reservation slots.

• The footer follows an Arc Browser Split pattern, with the logo and tagline on the left and navigation links on the right
• A hand-drawn neighborhood map with pinned local landmarks is included as a design element in the scrolling story section
• The template intersection match score is 13, reflecting strong alignment across Warm Artisan theme, Sunset Gradient color system, Mascot header concept, Local and Neighborhood creative direction, and Booking and Scheduling landing-page direction
• Animation intensity is set to high, including steam SVG, parallax layers, and stagger-fade reveals across all five content sections

Show more