Broth — Luxe Hot Pot Landing Page Template

Quick summary

This template turns a hot pot restaurant's landing page into a full sensory journey. A staggered UGC photo wall greets visitors, a gallery walk showcases each course, and a pinned "Reserve Your Pot" drawer drives direct bookings. It is built for premium dining brands that want atmosphere and action on the same page.

Who this template is for

This template fits hot pot restaurant owners and operators who want a polished, high-converting website without starting from scratch. It is especially suited for those serving an experience-first crowd.

• Groups booking birthday dinners or milestone celebrations
• Couples and food-obsessed duos browsing for adventurous date nights
• Corporate dining teams planning group meals with premium ingredients

What problem this template solves

Most hot pot restaurant pages fail to capture the heat, texture, and energy of the actual experience. Visitors land on flat menus and static photos, then leave without booking. This template fixes that gap.

• It replaces generic hero images with a living UGC photo wall that proves the restaurant is already loved
• It guides visitors through each course visually, making the scroll itself feel like sitting down to eat
• It removes booking friction with a streamlined drawer requiring only party size, broth choice, tier, and date

What you get with this template

You get a fully structured, single-page hot pot landing page with every section already designed and in place. The template is ready to customize with your own photos, copy, and pricing.

• A masonry UGC hero, gallery walk sections, pricing tier cards, and a reservation drawer
• Fire and Earth color system with volcanic black, ember red, clay tan, and bone ivory
• Fraunces serif headlines paired with DM Sans body text for elegant, readable typography

Feature list

This template includes six core features, each designed to showcase the hot pot experience and move visitors toward a reservation.

Staggered UGC Photo Wall Hero

The header is a dense, edge-to-edge masonry grid of guest photos. Tiles load in a cascading sequence, each tagged with a guest handle, making social proof the first thing visitors see. High-resolution imagery of bubbling broth, chopsticks, and laughing faces sets the atmosphere immediately.

Gallery Walk Course Sections

Past the hero, each masonry section represents a course: broth selection, premium proteins, house-made dumplings, dipping sauces, and desserts. Scale shifts between large statement tiles and small detail tiles mimic the rhythm of dishes arriving at the table. Short looping videos of meat blooming in broth are supported within the tile grid.

Embedded Reservation Drawer

A "Reserve Your Pot" call-to-action button is pinned to the bottom of the viewport on every device. Tapping it opens a smooth slide-up drawer where guests choose party size, broth base, a preset pricing tier (Weeknight at $45, Celebration at $68, or Chef's Selection at $88), and a date and time. The form is intentionally minimal, limiting fields to reduce user effort.

Build Your Own Spread Cart

A secondary ordering path lets visitors add individual menu items directly from gallery tiles into a running cart. This display option gives groups a way to pre-plan their spread before arriving, making the booking process feel personal and interactive.

Pricing Tier Cards

Three clearly structured cards present each dining tier with its per-person price and included experience. Ember red highlights prices and interactive elements, making the tiers easy to scan and compare. Financial clarity here supports confident booking decisions.

Minimal Footer with Social Links

The footer follows a centered, minimal layout with social links and copyright. It keeps the page clean after the reservation section without adding visual noise.

Page sections overview

Design & branding system

The template uses a Fire and Earth palette that feels like charcoal still warm after a fire. Every color choice is intentional and tied to the hot pot experience.

• Volcanic black (#1A1110) dominates backgrounds, ember red (#8B2500) marks prices and interactive elements, clay tan (#C4956A) anchors body text, and bone ivory (#F5F0E8) breathes between masonry tiles
• Fraunces serif headlines deliver editorial weight while DM Sans handles navigation and body text with clean legibility
• Generous use of ivory space between tiles creates an uncluttered, premium feel that emphasizes quality over quantity

Mobile & speed optimization

Luxury diners book on the go, so the template is built mobile-first. Every section adapts cleanly across screen sizes without losing atmosphere.

• The masonry grid reflows for smaller screens, making the photo wall and gallery walk just as immersive on a phone as on a tablet
• The reservation drawer is optimized for thumb interaction, keeping the booking flow accessible on any device
• Scroll-reveal animations use CSS transforms for smooth performance, and the pinned call-to-action stays visible as users scroll on any device

How this template helps you convert

High-end dining decisions are driven by perceived value and atmosphere, not just information. This template is structured to build both before the visitor ever reaches the booking form.

1. The UGC photo wall establishes trust immediately by showing real guests enjoying premium hot pot, making social proof the hero rather than a footnote
2. The gallery walk builds appetite course by course, so visitors are already emotionally invested by the time they reach the pricing tier cards and the reservation drawer

Other information about this template

This template also works as a visual pitch tool for hot pot restaurant operators presenting to partners or investors. A well-structured page can quickly convey the restaurant's value to decision-makers by combining market appeal, customer segment clarity, and financial tier transparency in one scrollable view. Showing per-diner revenue tiers ($45, $68, $88) and a clear call-to-action section helps communicate profitability potential without a separate deck. The template is designed for easy edits, so branding, content, and pricing can be updated quickly. Using this template saves significant time during website development while enhancing professionalism in presentation.

• The template supports quick customization, making it practical for operators who need to update branding or seasonal pricing fast
• It helps protect the consistency of your visual identity by keeping all color, type, and layout decisions pre-structured and on-brand
• Restaurant templates like this one help organize content clearly, improving communication with both customers and potential investors

Show more