Mesa - Immersive Brazilian Landing Page Template

Quick summary

Mesa is a single-page event registration template designed for an immersive Brazilian tasting menu experience. It opens with a cinematic video hero, flows through a staggered course masonry grid, and closes with a full reservation form. Every section is built to make visitors feel the meal before they book a seat.

Who this template is for

This template is built for hosts and operators running intimate, high-touch dining events. It speaks directly to the people selling the experience and the guests they want to attract.

• Supper club organizers and private chefs hosting fixed-seat tasting menu dinners
• Restaurant operators launching a premium Brazilian dining concept with limited nightly covers
• Corporate event planners who need a polished reservation page for client entertainment dinners

What problem this template solves

Most event pages treat dinner like a transaction. They show a price, a date, and a button. Mesa solves the gap between a plain booking form and the emotional weight a premium experience deserves.

• Visitors arrive without context and leave before they feel anything, so this template builds sensory storytelling into every scroll step
• Standard registration pages offer no visual pacing, so the masonry grid mimics the rhythm of an actual seven-course meal
• Gift reservations are often ignored as a revenue path, so a dedicated secondary flow captures that audience without disrupting the primary booking journey

What you get with this template

Mesa delivers a complete single-page layout with every section pre-built and ready to customize. You get a cohesive design system, structured content zones, and interactive components that guide visitors toward one action: reserving their seat.

• A full-screen video hero with a floating glass overlay card and a primary call-to-action button
• A seven-card masonry course grid with staggered heights, macro image placeholders, and course note copy areas
• A visual date calendar showing upcoming dinner sessions with remaining seat counts, a party size stepper, a dietary notes field, and a gift reservation modal

Feature list

Mesa packages each functional layer into a distinct design component. Every feature below is drawn directly from the template brief.

Full-Screen Video Hero with Floating Card

The hero plays a slow, handheld video sequence, pão de queijo being torn, steam rising, a chef ladling tucupi broth, and fades to a delicate serif headline on a floating glass card. A video poster fallback is included for situations where autoplay is restricted.

Staggered Masonry Course Grid

Seven course cards are arranged in a Pinterest-style masonry layout with varied heights. Tall cards are image-dominant; shorter cards carry handwritten-style course notes. Cards reveal in a staggered sequence as the visitor scrolls, and each card lifts slightly on hover.

Visual Dinner Calendar with Seat Counts

The upcoming dinners section displays available dates as a visual calendar. Each date shows the number of remaining seats, giving visitors a clear, low-pressure way to pick their evening without navigating away from the page.

Event Registration Form with Gift Flow

The reservation form captures preferred date, party size (one to four guests), and optional dietary notes. A secondary "Gift This Experience" path opens a simplified modal for purchasing a transferable reservation, keeping both buyer types on the same page.

Floating Call-to-Action Button

A "Reserve Your Seat" button appears in dendê gold after the visitor passes the second scroll depth. It persists as a floating element throughout the scroll journey and reappears as a full-width section below the final course card.

Inline Social Proof Integration

Testimonial quotes from named guests are woven directly into the masonry grid alongside course cards. Guest snapshots and quote text sit naturally within the scroll rhythm rather than being isolated in a separate reviews section.

Page sections overview

Design & branding system

Mesa uses a Pastoral Calm visual theme with a Sunset Gradient color system. The palette moves from warm afternoon tones at the top of the page to deep dusk tones near the footer, matching the emotional arc of a long dinner.

• Colors: soft papaya (#F4845F) into ripe açaí (#7B2D8E), anchored by fired-clay terracotta (#C1440E), deep jabuticaba night (#1A0A2E) for text backgrounds, and dendê gold (#E2A83E) for all interactive elements and hover states
• Typography: Fraunces serif for headlines and display text, DM Sans for body copy, and a handwritten-style accent font reserved for course note cards
• Visual tone: cinematic, editorial, and warm; the overall atmosphere references a Brazilian fazenda at golden hour, with candlelit textures and slow, unhurried pacing throughout

Mobile & speed optimization

Mesa is designed desktop-first, reflecting the deliberate and unhurried nature of a dinner reservation. The layout scales down gracefully so visitors on smaller screens still experience the full emotional journey.

• The video hero includes a poster image fallback, so the opening visual loads cleanly on any connection speed or device that restricts autoplay
• Masonry images use lazy loading, meaning off-screen course cards only load as the visitor scrolls toward them, keeping the initial page load responsive
• The masonry grid and registration form reflow into single-column layouts on mobile, preserving readability and form usability without losing the visual hierarchy

How this template helps you convert

Mesa earns the reservation click by building appetite before presenting the booking form. Every design and layout decision moves the visitor closer to committing, without feeling like a sales push.

1. The video hero and staggered course grid create sensory immersion early, so visitors arrive at the registration form already emotionally invested in the experience rather than evaluating it cold
2. The floating "Reserve Your Seat" button appears at a natural scroll point and stays visible through the course grid, reducing friction by keeping the action available exactly when desire peaks
3. The visual seat count calendar creates honest, visible scarcity by showing how many spots remain on each dinner date, giving visitors a clear reason to book now rather than later

Other information about this template

Mesa is a single landing page template suited to any operator running a premium supper club, chef's table, or experiential dining concept. It works equally well for a standalone pop-up dinner series and for a recurring seated event program.

• The template is built for English (US) audiences with United States dollar pricing and standard US date formatting throughout the calendar and form components
• Animation intensity is high: the hero uses a parallax scroll effect, the masonry grid uses staggered reveal transitions, and all course cards respond to hover with a subtle lift
• The footer follows a horizontal layout pattern with supporting links, rounding out the page as a complete standalone registration experience

Show more