Sri - Modern Lankan Landing Page Template

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

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

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.

1. 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.
2. 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.
3. 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

Show more