Savor — Elevated Asian Cuisine Landing Page Template

Quick summary

Kain is a single-page Filipino fine dining template built around a modular card grid. Visitors move through an ingredient-to-plate visual journey, browse set menus, and book a table or order a Boodle Box without ever leaving the page. The Parchment and Rust palette and GSAP-powered animations deliver heritage warmth inside a strict, restrained layout.

Who this template is for

This template suits Filipino restaurant owners who want to convert curious visitors into confirmed diners. It is also a strong fit for operators running communal dining concepts, private event packages, or takeaway meal kits alongside dine-in service.

• Filipino fine dining restaurants seeking direct online reservations and takeaway orders
• Restaurant owners targeting second-generation Filipino guests, adventurous downtown foodies, and corporate event planners
• Operators who want an immersive, story-driven menu presentation rather than a static PDF menu

What problem this template solves

Most restaurant landing pages show a menu and a phone number, then leave visitors to figure out the rest. Kain fixes that gap by turning the menu browse itself into the checkout flow, so appetite builds into commitment before a visitor ever clicks away.

• Visitors have no reason to stay engaged when a page offers flat photography and no interaction
• Reservation friction is high when date pickers and party selectors live on a separate booking site
• Corporate planners and first-time guests need clear private dining pathways, not generic contact forms

What you get with this template

You get a fully structured, single-page layout with every section pre-built and wired for high interactivity. The template includes animated flip cards, a pinned reservation drawer, and a takeaway order path, all styled in a cohesive Luxe Minimal identity.

• A masonry hero photo wall, modular dish flip grid, set menu cards, communal feast section, and guest testimonial cards
• A pinned calamansi-gold reservation bar with date picker, party-size selector, and Kamayan Feast toggle
• A secondary Boodle Box add-to-cart flow for takeaway orders, sitting alongside the dine-in reservation path

Feature list

This template ships with a carefully scoped set of interactive and visual features drawn directly from the design brief. Each one serves a specific conversion or storytelling purpose.

Masonry UGC Hero Photo Wall

A viewport-filling masonry grid of real guest photos, desaturated and toned to the parchment palette. The single word "KAIN" sits centered in basalt-weight serif type and pulses once before settling, anchoring the brand with quiet confidence.

Ingredient-to-Plate Flip Card Grid

Each modular card shows a raw ingredient on its front face, such as whole milkfish on banana leaf or green tamarind pods, then flips or slides to reveal the finished, gallery-lit plated dish. The grid tightens progressively as visitors scroll from individual dishes into set menus and private dining packages.

Pinned Reservation Drawer

A warm calamansi-gold bar stays fixed at the bottom of the viewport at all times. Clicking it opens a reservation drawer with a date picker, a party-size selector covering two, four, six, or full buyout options, and an optional Kamayan Feast toggle that pre-selects the signature communal spread.

Per-Dish Reservation Buttons

Every dish card carries its own "Add to Reservation" button. Guests build a prix fixe selection as they scroll the menu, turning the browsing experience into the order flow itself.

Boodle Box Takeaway Flow

A secondary conversion path lets visitors order the Boodle Box for takeaway using a simplified add-to-cart interaction. It sits alongside the dine-in path without competing for visual priority.

GSAP ScrollTrigger Animations

Scroll-driven reveals, card flip transforms, a marquee ticker, and the hero pulse headline are all handled through GSAP ScrollTrigger. Animations are sequenced to build narrative momentum as a visitor scrolls deeper into the page.

Page sections overview

Design & branding system

The visual identity pairs heritage warmth with strict typographic restraint. Fraunces, a variable serif, handles all display headlines and dish names, while DM Sans carries body copy and interface labels at a clean, readable weight.

• Color palette: aged rice-paper cream (#F5EDE0) for backgrounds, caramelized adobo rust (#A0522D) for primary elements, volcanic basalt (#2B2B2B) for body text, and warm calamansi gold (#D4A843) reserved for hover states and price highlights
• Guest photography is desaturated and toned to the parchment palette, keeping the visual story cohesive without relying on stock imagery or studio lighting
• The overall aesthetic reads like a handwritten recipe card stained with coconut oil and tucked inside a matte-black menu folio, heritage materials held inside a composed, minimal frame

Mobile & speed optimization

The template is designed desktop-first to match the fine dining reservation context, where most booking decisions happen on a larger screen. Mobile parity is fully maintained so guests on any device can browse the menu and complete a reservation.

• Interactive components such as the reservation drawer, party-size selector, and flip cards are built with Client Components, while static sections use Server Components to keep the initial load lean
• The pinned reservation bar adapts to smaller viewports so the primary call to action remains visible during mobile scroll
• GSAP animations are scoped to scroll triggers, so they fire progressively rather than all at once on page load

How this template helps you convert

Every layout decision in Kain is oriented toward one outcome: turning a curious visitor into a confirmed guest or an order placed. The page removes the usual friction between discovery and commitment.

1. The ingredient-to-plate flip grid builds appetite and curiosity with each scroll, so visitors arrive at the reservation section already primed to commit rather than still deciding.
2. The pinned reservation bar keeps the primary call to action visible at every point in the scroll journey, so a motivated visitor never has to hunt for the booking flow.
3. The per-dish "Add to Reservation" buttons merge menu browsing with the checkout process, reducing the number of steps between interest and a confirmed table.

Other information about this template

This template is localized for the United States market, using English copy, USD pricing, and the standard US date format inside the reservation drawer. The layout follows a single-page, section-led structure rather than a multi-page site, which keeps the journey focused and the conversion path short. Typography is set with Fraunces for display use and DM Sans for interface and body text, both of which are freely available via Google Fonts. The footer follows a linear single-row pattern, keeping brand links, contact details, and navigation accessible without adding visual weight to the bottom of the page.

• Template style: Card Grid (Modular), desktop-first with full mobile parity
• Animation stack: GSAP ScrollTrigger for scroll reveals, card flip transforms, marquee ticker, and hero pulse
• Localization: English language, USD pricing, US date format
• Footer pattern: Linear Single-Row layout

Show more