Souk — Tasting Menu Landing Page Template

Quick summary

Souk is a single-page template designed to sell an immersive Moroccan tasting menu experience. The layout is hero-dominant, filling ninety percent of the viewport with a looping cinemagraph of steam rising from a cracked tagine lid. A staggered day-in-the-life scroll narrative moves through morning markets, a working kitchen, and a candlelit dining room, building appetite and trust before the reservation call to action appears.

Who this template is for

This template is built for fine dining operators, experiential restaurant concepts, and hospitality entrepreneurs who want their landing page to feel like an event in itself. If your food tells a story and your room earns a reaction, this template matches that ambition.

• Moroccan tasting menu restaurants and supper clubs seeking direct reservation conversions
• Occasion-dining concepts targeting anniversary couples, food-focused friend groups, and corporate entertainment clients
• Hospitality creatives who want a landing page that transports visitors before they click "Reserve"

What problem this template solves

Most restaurant landing pages list a menu and add a booking button. That approach works for casual dining. It fails completely when the product is an atmosphere, a ritual, and seven courses that arrive with stories. Visitors who cannot feel the room before they arrive will not commit to a premium experience.

• Generic restaurant pages do not build the sensory anticipation that justifies a high-ticket dinner
• Standard booking layouts ignore the gift-purchase path, losing a significant secondary revenue stream
• Flat, static designs cannot convey the texture and warmth of moroccan culture and artisan craft

What you get with this template

You get a fully structured, single-page layout that moves a visitor from curiosity to confirmed reservation. Every section is designed with a specific emotional job: the hero creates desire, the scroll narrative builds trust, the course reveals deepen commitment, and the dual call-to-action closes the sale. The template ships with defined typography, a complete color system, animation guidance, and two conversion forms.

• A cinemagraph hero section with delayed serif headline reveal and animated steam loop
• A three-act day-in-the-life scroll sequence with background transitions from parchment to terracotta to kohl
• Seven staggered course reveal cards, a testimonial section, a reservation modal with date picker and party-size selector, and a gift experience form

Feature list

This section details the core built-in capabilities of the Souk template as specified in the source brief.

Cinemagraph Hero with Animated Steam Loop

The hero fills ninety percent of the viewport with a still frame of a long communal table. The only motion is a looping steam curl rising from a cracked tagine lid, drawing the eye without overwhelming the senses. After four seconds, hand-lettered type emerges from the steam, creating a theatrical reveal that sets the tone for everything that follows. The low, plate-level camera angle adds depth, softening distant lanterns into warm bokeh.

Day-in-the-Life Three-Act Scroll Narrative

Scrolling follows a single evening from first light to last sip. The first act shows the morning market: hands selecting fresh produce, a butcher trimming lamb, saffron threads dropping into a brass mortar. The second act moves to the kitchen at golden hour, where dough is stretched by hand and charcoal glows under a grill. The final act opens the dining room at night, with courses arriving one by one and guests reaching across the table. Each transition deepens the background tone, pulling visitors further into the evening.

Staggered Seven-Course Reveal Cards

Seven individual course cards appear in sequence as the visitor scrolls. Each card offers a teaser description without revealing the full menu, building curiosity and reinforcing the concept of a meal prepared with intention. Hover states reveal additional detail, using the brass accent color to highlight key ingredients like spices, slow-braised meats, and aromatic elements. This section is where the visitor begins to feel seated at the table.

Dual Conversion Path: Reservation and Gift Form

The primary call to action is a "Reserve Your Evening" button in harissa red, anchored after the third course reveal and again at the page footer. It opens a modal with a date picker, party-size selector, and a single dietary toggle. A secondary "Send as a Gift" path opens a minimal form collecting recipient name, date preference, and a personal note field. Both paths are built into the template layout and ready to connect to your booking workflow.

Testimonial and Occasion Framing Section

A dedicated section presents intimate guest testimonials alongside occasion context. Reviews are framed by the type of visit: anniversary dinner, corporate client evening, or a food-obsessed friend group. This framing helps prospective guests see themselves in the story and confirms that the experience delivers across different occasions.

Warm Artisan Color and Typography System

The full Parchment and Rust color system ships with the template, including hex values and usage rules for each tone. Fraunces handles all display and headline type, bringing a hand-lettered warmth to the page. DM Sans carries body copy with clean legibility. The harissa red appears only on the primary call to action, so it reads like a single decisive accent against the warmer, aged-parchment field.

Page sections overview

Design & branding system

The Souk template uses a Warm Artisan visual identity built around a Parchment and Rust color system. Every color choice has a specific role: backgrounds stay warm and aged, headlines carry heat, and the primary call to action lands with the surprise of something unexpectedly spicy.

• Color palette: aged parchment (#F2E8D5) for backgrounds, terracotta rust (#A0522D) for headlines, burnished brass (#C5962A) for hover states and accent borders, deep harissa red (#8B2500) exclusively for the primary call to action, and charcoal kohl (#1C1714) for body text
• Typography: Fraunces serif for display and headline use, DM Sans for all body copy, creating a pairing that feels both literary and grounded
• Animation style: high-motion GSAP ScrollTrigger transitions, CSS steam animation, parallax depth layers, staggered card reveals, and IntersectionObserver triggers throughout the scroll sequence

Mobile & speed optimization

The template is built desktop-first, which reflects how occasion dining decisions are typically made. That said, the layout is fully responsive and adapts to mobile viewports without losing its atmospheric quality. Animation-heavy sections use Client Components for interactivity while static sections use Server Components for faster initial load.

• Desktop-first layout that scales responsively to tablet and mobile screen sizes
• Client Components handle animations and forms; Server Components serve static content sections for leaner delivery
• Reservation modal and gift form are thumb-friendly on mobile, with clear tap targets and a simplified toggle for dietary needs

How this template helps you convert

A landing page that makes visitors feel the atmosphere of the evening before they book removes the hesitation that kills premium reservations. This template is structured to move the visitor emotionally through the meal before showing them the booking button.

1. The hero and scroll narrative build desire progressively, so by the time the "Reserve Your Evening" call to action appears after the third course card, the visitor is already invested in the experience and ready to commit
2. The dual conversion path captures both direct diners and gift buyers in a single page flow, preventing a secondary audience from bouncing when they realize they want to purchase the experience for someone else

Other information about this template

The Souk template draws design inspiration from the real world of moroccan souks, where tradition and daily life intertwine across centuries of craft and commerce. Marrakech's souks date back to the eleventh century, when merchants entered the city to trade goods ranging from leather goods and rugs to spices and musical instruments. The souks of marrakech are a maze-like network, each square or stretch of narrow alleys specializing in its own trade: weavers in one lane, artisans shaping brass in another, bakeries and fresh produce stalls filling the medina with fragrant herbs and moroccan spices.

This context shapes the template's design language. The souk nejjarine, one of the most recognized craft markets in Fes, is emblematic of the kind of intricate patterns and textured surfaces the template's visual system draws from. Zellige-inspired typography and a modular bazaar grid layout echo the side-by-side stalls of a busy souk, while metallic brass accents reference the burnished goods that locals and shoppers alike pause to examine. The parchment backdrop evokes the aged pages of a spice merchant's ledger, stained with turmeric and warmed by natural light through latticed screens.

Moroccan cuisine is a rich melting pot of influences from Mediterranean, arabic, Jewish, Amazigh, and West African traditions. The tasting menu concept built into this template reflects that layered cultural experience. Dishes in the menu arc include harira soup, finger-food starters like marinated olives with harissa served alongside fresh Khobz bread, a vegetable couscous course, chicken tagine with preserved lemon and olives, lamb tagine with prunes and toasted almonds, and assorted Moroccan pastries with a fresh fruit platter to close. Ingredients like saffron, cumin, cheese, dried fruits, and nuts appear throughout the meal, echoing what you might discover on a souk tour through the food stalls of a busy medina.

The design philosophy also borrows from the souk's commercial culture. In the real markets of morocco, haggling is expected, and the initial price named by local vendors is rarely the final one. The template's gift form echoes this negotiation spirit by keeping the secondary purchase path minimal and personal. Most vendors in the souks prefer cash and many will not accept credit cards, but this template's reservation flow is built for modern digital bookings. Visitors wearing comfortable shoes could spend hours wandering the narrow alleys and markets of Marrakech; this page aims to create the same feeling of discovery in a browser window.

The red city of Marrakech, the souk tour routes through the medina, the unesco world heritage site designation of Fes's old city, the atlas mountains visible at the horizon, the souk nejjarine's carved cedar facades, the traditional remedies sold alongside essential oils in the spice stalls, the beaten path that leads from the main square of Jemaa el-Fna into the layered interior of the souks: all of these reference points inform the template's atmosphere. The landing page carries local culture into a digital format, giving restaurants and experiential dining concepts a tool that feels as considered as the meal it promotes.

Practical notes for template users:

• The template is localized for English-language audiences using United States dollar (USD) pricing and the MM/DD/YYYY date format
• The footer uses Arc Pattern 7: logo and tagline aligned left, navigation links aligned right
• Reservation pricing and per-person rates are set by the restaurant operator; the template does not include default pricing, moroccan dirhams conversion, or a fixed ticket cost
• The gift form is a minimal modal collecting recipient name, date preference, and a personal note; it does not include built-in payment processing by default
• The page type is a landing page, not a multi-page website, so all content and conversions live within a single scroll-driven layout
• This template supports the creation of an immersive cultural experience that helps restaurants go beyond what standard booking pages deliver, creating a daily life narrative that resonates with occasion diners and food-curious visitors alike

Show more