Cun - Authentic Vietnamese Landing Page Template

Quick summary

Cun is a single-page template designed for artisan Vietnamese food shops. It combines a warm, ceramic-toned visual identity with immersive process photography and a mascot-led hero to tell the story of handmade bánh cuốn rice rolls. Every scroll beat earns attention before a persistent call-to-action bar closes the sale.

Who this template is for

This template suits food businesses that lead with craft, tradition, and sensory storytelling rather than feature lists or discounts. It works best when the food itself is the main reason people show up.

• Vietnamese restaurant owners and rice roll shops wanting a page that reflects genuine artisan technique
• Food entrepreneurs targeting diaspora communities, curious local diners, and students chasing a specific taste memory
• Small food businesses ready to move visitors from browsing to online ordering in one scroll session

What problem this template solves

Most food landing pages feel like a takeout menu printed on a screen. They list items and prices without ever making a visitor feel the warmth of the kitchen. For a dish as delicate and craft-driven as bánh cuốn, that gap costs real customers.

• Visitors arrive without context and leave before the dish registers as something worth ordering
• The story behind handmade preparation never reaches the people most likely to drive across town for it
• Generic layouts bury the sensory details that separate a grandmother's technique from a factory product

What you get with this template

You get a fully designed, section-complete landing page ready to adapt for your own rice roll shop or Vietnamese food business. Every layout decision serves the core goal: turn a scroll into an order.

• A mascot hero section featuring a hand-illustrated grandmother character with animated steam SVG wisps and a handwritten-style shop name reveal
• A full-bleed immersive gallery with alternating photo and detail card rhythm, an ingredient marquee ticker, interactive menu cards with hover crossfade, and a split-layout story section
• A persistent amber call-to-action bottom bar, secondary "See Full Menu" text links under each detail card, and a structured footer with tagline and navigation links

Feature list

This template is built around a specific set of designed components. Each one comes from the brief and serves a clear purpose in the page's sensory-to-conversion flow.

Mascot Hero with Animated Steam

The header centers a hand-illustrated grandmother character drawn in loose ink-and-watercolor style. She lifts a translucent rice sheet mid-roll while animated SVG steam wisps curl upward. The shop name appears in handwritten Vietnamese script after a two-second pause, letting the illustration land before any text competes.

Full-Bleed Immersive Gallery

After the hero, the page moves through edge-to-edge process photographs. Images show wet rice batter on cloth, the precise moment of rolling, and nước chấm being poured from height. Each photo bleeds to the screen edge before the visitor scrolls into a quiet detail card with ingredient origins and preparation notes.

Ingredient Marquee Ticker

An infinite horizontal ticker runs between sections, cycling through dish names and key ingredients in a continuous sensory loop. It functions as both a visual breath between dense photo moments and a practical signal of what the kitchen makes fresh each day.

Interactive Menu Cards

Menu items display with image crossfade on hover, prices highlighted in amber, and a secondary "See Full Menu" text link below each card. The layout rewards browsers who are not yet ready to order while keeping the primary conversion path visible at all times.

Persistent Call-to-Action Bar

Once the gallery section begins, a fixed bottom bar carries the primary "Order Bánh Cuốn Now" button in amber on stone. It stays on screen through every subsequent scroll beat so the ordering moment is never more than one tap away when a visitor's appetite decides.

Split-Layout Story Section

A dedicated about section uses a two-column split to present craft credentials and the origin story side by side. It covers the Thanh Trì technique, daily steaming process, and the shop's connection to the grandmother method without interrupting the visual scroll rhythm.

Page sections overview

Design & branding system

The visual identity follows an Organic Flow theme built on a Warm Stone color palette. Every color decision maps to a specific role on the page, keeping the layout intentional rather than decorative.

• Unglazed ceramic cream (#EDE5D8) covers the background like muslin on a steamer; wet river stone (#6B5E50) anchors all body text for quiet legibility
• Nước chấm amber (#C48A3F) marks every interactive element, price, and call-to-action button so the eye lands on the right thing without being pushed
• Fresh herb green (#7A9A5A) appears only as a garnish accent on hover states, the way cilantro lands on the finished plate; typography pairs Fraunces serif display with DM Sans body text

Mobile & speed optimization

Food discovery happens on phones. This template is built mobile-first, so every layout decision starts with how it reads and taps on a small screen before scaling up.

• Full-bleed photography, the marquee ticker, and the persistent bottom bar are all designed to work within a single-column mobile scroll without losing visual impact
• Static sections use server components for fast initial load, while interactive elements such as the steam animation, hover crossfade, and gallery parallax run as client components to keep the experience responsive
• The persistent call-to-action bar sits at the bottom of the screen on mobile, matching the natural thumb position for a tap-to-order moment

How this template helps you convert

The page earns the click through accumulated hunger rather than persuasive copy. By the time a visitor has scrolled through four full-bleed process images, the only friction left is making sure the button is close enough.

1. The amber "Order Bánh Cuốn Now" button appears immediately after the mascot hero, then stays fixed in the persistent bottom bar for every scroll beat that follows, so no committed visitor ever has to hunt for the next step.
2. Each detail card in the gallery pairs a sensory image with a quiet ingredient or preparation note, building trust in the craft and keeping the visitor inside the story long enough for appetite to take over.
3. Secondary "See Full Menu" links sit below every menu card for visitors who need one more browse before they commit, reducing the chance of a cold exit and giving the page a second conversion path.

Other information about this template

This template is a single landing page, not a multi-page site. It is designed for direct adaptation by a Vietnamese food shop, artisan restaurant, or similar direct-to-consumer food business. Below are a few practical notes for buyers considering this template.

• The layout is localized for a United States market context, with Vietnamese dish names paired with English descriptions and USD pricing built into the menu card design
• Social proof is structured into the layout through real customer quote placement and visual "line out the door" signals, supporting trust for both returning diaspora customers and first-time visitors
• The footer follows a split layout pattern with a tagline area and navigation links, keeping the page tidy without requiring a full multi-page site structure
• The template is built with scroll-reveal animations, marquee motion, gallery parallax, and image crossfade interactions as specified in the design brief

Show more