Sri - Modern Lankan Landing Page Template Template | Build Fully Functional Applications with Rocket
Sri - Modern Lankan Landing Page Template
Sri is a modular card-grid landing page built for an authentic Sri Lankan restaurant. It uses a cinematic cinemagraph hero, a flip-card dish reveal grid, and a persistent booking call to action to turn curious visitors into confirmed reservations. Earthy turmeric gold, rice cream, and lacquer black create a warm, handmade atmosphere that makes the food irresistible before the form even appears.
by Rocket studio
Loading preview…
Quick summary
Sri is a single-page restaurant landing page designed to make visitors hungry before they book a table. A cinemagraph header, an interactive flip-card dish grid, and a persistent gold "Reserve Your Table" button work together across a carefully layered scroll journey. The template is built for Sri Lankan restaurants that want dine-in reservations and need their food to do the convincing first.
Who this template is for
This template suits Sri Lankan restaurants and regional dining venues that want to convert online visitors into table bookings. It works equally well for new openings and established restaurants refreshing their digital presence.
Restaurants serving authentic regional cuisine to adventurous diners and food explorers
Venues offering communal feasts and shared platters for group celebrations
Sri Lankan restaurants serving expat communities and nostalgia-driven guests
What problem this template solves
Most restaurant landing pages show a menu and a phone number. That rarely convinces someone to book. The real problem is appetite: visitors need to feel the food before they commit.
Generic templates fail to communicate the sensory identity of a specific cuisine
Booking forms presented too early lose visitors who have not yet been made hungry
Group dining and celebration bookings need visual storytelling, not just a price list
What you get with this template
You get a fully structured single-page layout with five distinct content sections, a persistent floating call to action, and a minimal booking form. Every visual and interactive element is designed to build appetite and guide the visitor toward a reservation.
A cinemagraph hero section with a CSS steam animation and a two-second headline reveal
A modular flip-card grid showing raw ingredients on one face and the finished dish on the other
A minimal booking form with date, time, party size, and one optional field for celebrations or dietary needs
Theme
Organic Flow
Creative direction
Before/After Reveal
Color system
Japanese Zen
Style
Card Grid (Modular)
Direction
Booking/Scheduling
Page Sections
Cinemagraph Hero with CSS Steam Loop
Flip-card Ingredient-to-dish Reveal
Persistent Floating Reservation Button
Minimal Friction Booking Form
Full-width Interlude Panels
Group Dining Bento Showcase
Related questions
Can I change the dishes shown in the flip-card grid?
Does the booking form connect to a reservation system?
Is the takeaway call to action easy to remove?
Can this template be adapted for a different regional cuisine?
Will the flip card and steam animations work on mobile devices?
Feature list
This template is built around six tightly integrated features. Each one earns its place by moving the visitor one step closer to booking a table.
Cinemagraph Hero with Steam Animation
The header uses a still frame of a brass-plate table setting with a single animated element: a thin curl of steam rising from a freshly cracked egg hopper. A CSS keyframe drives the loop. The headline "The island, served." fades in after a two-second hold, giving the visitor a moment to settle before the page asks anything of them.
Flip-Card Dish Grid
Each dish card in the modular grid shows the raw ingredient on its front face. On hover or tap, the card flips with a CSS three-dimensional transform to reveal the finished plate on a brass dish. The grid shifts from individual dishes to panoramic shared feast spreads as the visitor scrolls deeper, building appetite through escalating abundance.
Persistent Floating Booking Button
After the first scroll, a gold "Reserve Your Table" button floats persistently at the edge of the viewport. It is always visible but never intrusive. The button anchors to the booking form section when tapped, keeping the path to reservation one touch away at all times.
Minimal Reservation Form
The booking form collects only what is necessary: date, time, and party size. A single optional field asks about celebrations or dietary needs. The stripped-back form reduces friction and keeps the focus on completing the booking rather than filling out a questionnaire.
Full-Width Interlude Panels
Between card clusters, full-width image panels show hands tearing roti, fingers mixing rice, and a clay pot being unsealed. These interludes break the grid rhythm and reinforce the intimate, hands-on character of Sri Lankan eating. They slow the scroll at key moments and deepen the sensory narrative.
Takeaway Secondary Path
A secondary call to action, "Order Hoppers Home", gives takeaway-minded visitors a clear exit path. The page architecture still funnels toward dine-in, but the option is present for visitors who prefer delivery or collection. It broadens reach without diluting the primary booking message.
Page sections overview
Section
Purpose
Hero Cinemagraph
Opens with steam animation and headline reveal to set the atmosphere
Signature Dishes Grid
Flip cards move from raw ingredient to finished brass-plate dish
Our Story
Asymmetric split with hands and clay pots plus authenticity copy
Shared Feasts Grid
Bento panoramic layout showcases group dining and shared platters
Reserve Your Table
Minimal booking form anchored by the persistent floating call to action
Footer
Logo and tagline left, navigation links right, split layout
Design & branding system
The visual identity follows an Organic Flow theme using a Japanese Zen-inspired colour palette. Every colour has a defined role, and none are used decoratively without purpose.
Lacquer black (#1A1410) anchors all body typography with the weight of a cast-iron grinding stone
Unhusked rice cream (#F5F0E8) dominates backgrounds, giving the page the feel of a linen tablecloth
Turmeric ceremony gold (#C49A2A) highlights interactive cards, section dividers, and the floating call-to-action button
Muted clay red (#8B4513) appears only on hover states and active reservation confirmations, arriving like warmth after commitment
Fraunces serif is used for display headings; DM Sans handles all body and form text
Mobile & speed optimization
The template is built mobile-first. Restaurant bookings happen predominantly on phones, and every interaction is designed for a thumb, not a cursor.
Card flip interactions are triggered by tap as well as hover, keeping the dish reveal accessible on touchscreens
The persistent floating button is positioned and sized for single-thumb reach on standard mobile viewports
CSS-only animations, including the steam keyframe and card flip transforms, avoid JavaScript overhead where possible
How this template helps you convert
Every decision in this template is sequenced to earn the booking before asking for it. The visitor is made hungry first; the form appears only after appetite has been built.
The cinemagraph hero and two-second headline hold create immediate atmosphere, giving visitors a reason to stay on the page rather than bounce back to a search result.
The flip-card grid and full-width interlude panels build progressive appetite through visual storytelling, so by the time the booking form appears, skipping dinner feels like a personal loss.
The persistent gold button keeps the path to reservation visible throughout the entire scroll, reducing the effort required to commit at any moment of peak desire.
Other information about this template
This template is a strong fit for Sri Lankan restaurants operating in competitive urban markets, particularly those with multiple locations or an established social-proof story to tell.
The template includes space for social proof such as award recognition (the brief references a Michelin Bib Gourmand acknowledgement and a charity initiative) and multiple location details
Localisation fields support United Kingdom English, GBP pricing, London addresses, and the DD/MM/YYYY date format in the booking form
The scroll-triggered reveal animations use CSS transitions and are designed to work without third-party animation libraries
The footer follows an Arc Browser Split pattern: logo and tagline sit on the left, navigation links on the right
The template is built with Next.js image optimisation in mind, using the framework's native image component for dish photography throughout the grid
