Fogn - Authentic Ecuadorian Catering Landing Page Template

Fogn is a modular card grid landing page built for an authentic Ecuadorian catering service. It uses a Neo-Retro visual identity warmed by a Japanese Zen color palette to tell a sensory food story before asking for a booking. The stepped reservation form, floating call-to-action button, and category-toggle menu grid are all designed to move event planners and brides from browsing to booking.

by Rocket studio

Quick summary

Fogn is a single-page catering landing page template built for an Ecuadorian food business. It opens with a nine-tile photo mosaic, flows through a browsable card grid of dishes, and closes with a multi-step booking form. The design feels like a quiet, well-lit kitchen rooted in tradition.

Who this template is for

This template suits food professionals who serve events, not walk-in diners. It was shaped around a specific kind of client relationship: one built on trust, taste, and logistics.

  • Catering business owners offering highland and coastal Ecuadorian cuisine at corporate or private events
  • Event planners and office managers who need a polished booking experience for multicultural team lunches or company gatherings
  • Independent caterers serving weddings, fundraisers, and large-scale events for groups from 20 to 500 guests

What problem this template solves

Most catering pages fail before the visitor reaches the inquiry form. They list dishes without making the reader feel anything, and they ask for a booking before earning the trust. Fogn fixes this by letting the food tell the story first.

  • Visitors lose interest when food photography is scattered and unstructured, but the mosaic hero and card grid create a focused, visual-first first impression
  • Event clients need to understand service tiers and logistics quickly, so the asymmetric bento service cards and stepped booking form remove ambiguity
  • Generic contact forms miss important details like guest count and dietary needs, while the multi-step modal collects everything relevant before a single reply is sent

What you get with this template

Fogn delivers a complete, ready-to-customize landing page for a catering business. Every section was designed with a specific conversion role in mind.

  • A nine-tile Photo Grid Mosaic hero with a serif business name animation and the Spanish tagline "De la sierra al plato, sin atajos"
  • A modular card grid with a Costa, Sierra, and Fusión category toggle, dish-level hover micro-animations, and interleaved sensory testimonial cards
  • A stepped booking modal covering event date, guest count, service style, dietary flags, and a free-text event description field, plus a secondary PDF menu download path

Feature list

This template ships with a tightly coordinated set of interactive and visual components. Each one serves a specific role in the visitor journey from first impression to confirmed reservation.

Nine-Tile Mosaic Hero

The header fills the full viewport with nine unevenly sized, tightly cropped overhead food photographs on dark ceramic plates. After a two-second breath, the business name rises from center in a Fraunces serif, followed by the tagline. There are no gutters, no logo, and no text overlay competing with the imagery.

Category-Toggle Menu Grid

Visitors can browse dishes filtered by Costa, Sierra, or Fusión. The card grid reorders itself when a category is selected, keeping the page feeling alive and browsable. Each card triggers a hover micro-animation specific to the dish, such as steam rising, a spoon dipping, or a lime being squeezed.

Stepped Booking Modal

The primary call-to-action opens a five-step reservation form. Steps move through event date, guest count slider from 20 to 500, service style selection of buffet, estaciones, or plated, dietary flags, and a free-text event description field. This structure collects precise event context before any back-and-forth begins.

Floating Reserve Button

A vermillion "Reserve Our Kitchen" button pins to the viewport after the first scroll. It stays visible throughout the page so the path to booking is always one tap away, without interrupting the food storytelling.

PDF Menu Download Path

A secondary conversion path lets visitors download a seasonal menu as a PDF without completing a full booking. The capture flow collects email address and event type, building a lead list from visitors who are not yet ready to reserve.

Sensory Testimonial Cards

Past client quotes are woven into the card grid rather than grouped in a separate section. Each quote captures a specific sensory detail, for example the smell of cumin before the trays were even open. This placement keeps social proof contextual and reinforces the food story in motion.

Page sections overview

SectionPurpose
Photo Grid Mosaic HeroOpens the page with nine overhead food tiles and an animated business name reveal
Category Toggle Menu GridLets visitors browse dishes by region with hover micro-animations on each card
Service TiersPresents buffet, estaciones, and plated options in asymmetric bento cards with pricing accents
Sensory Testimonial CardsInterleaves specific client quotes within the food card grid for contextual social proof
Stepped Booking ModalCollects event date, guest count, service style, dietary flags, and event description in sequence
PDF Menu DownloadCaptures email and event type in exchange for a seasonal menu download
FooterDisplays logo and tagline on the left with navigation links on the right

Design & branding system

The visual identity follows a Neo-Retro theme interpreted through a Japanese Zen color philosophy. The result is warm, unhurried, and grounded in natural material textures rather than digital trends.

  • Four-color palette: tatami sand (#D4C5A9) for card backgrounds, ceremonial charcoal (#2D2926) for typography, shoji screen white (#F7F3ED) for breathing space between modules, and torii vermillion (#C73E1D) reserved for buttons, price highlights, and hover states
  • Typography uses Fraunces as the serif display face for headings and the business name, with DM Sans handling all body and interface text for clean legibility
  • Vermillion appears sparingly throughout, making every button, price callout, and hover state feel intentional rather than decorative

Mobile & speed optimization

The template is built desktop-first, reflecting how event planners typically research and book catering services. Mobile adaptation is included for browsing use cases, particularly for brides and guests exploring the menu on smaller screens.

  • Images are lazy-loaded so above-the-fold content appears quickly without waiting for the full photo grid to load
  • CSS animations are GPU-accelerated, keeping the mosaic reveal, name rise, and hover micro-animations smooth across devices
  • The stepped booking form and category toggle are touch-friendly, with large interactive targets suited for mobile interaction

How this template helps you convert

Fogn is structured so visitors arrive at the booking form already engaged. The page earns the click before it asks for it.

  1. The mosaic hero and category-toggle card grid build appetite and trust through immersive food photography and sensory testimonials, so visitors feel connected to the cuisine before they see any pricing or forms
  2. The floating "Reserve Our Kitchen" button stays visible from the second scroll onward, removing any friction in finding the booking path once a visitor is ready
  3. The secondary PDF download path captures email leads from visitors who are curious but not ready to commit, keeping them in the pipeline with minimal friction

Other information about this template

Fogn is a strong fit for catering businesses that serve both English-speaking clients and communities familiar with Ecuadorian food culture. The template preserves Spanish dish names and the Spanish tagline throughout, creating an authentic bilingual tone.

  • The page is localized for the United States market, using USD currency formatting and the standard USA date format inside the booking form
  • Guest capacity display covers the 20 to 500 range, making the template suitable for intimate office lunches and large fundraiser events alike
  • The footer follows an Arc Browser Split layout, placing the logo and tagline on the left and navigation links on the right for a clean, professional close to the page
Fogn - Authentic Ecuadorian Catering Landing Page Template
Fogn - Authentic Ecuadorian Catering Landing Page Template
Fogn - Authentic Ecuadorian Catering Landing Page Template
Fogn - Authentic Ecuadorian Catering Landing Page Template

Theme

Neo-Retro

Creative direction

Sensory Appeal

Color system

Japanese Zen

Style

Card Grid (Modular)

Direction

Booking/Scheduling

Page Sections

Nine-tile Mosaic Hero with Name Animation

Category-toggle Card Grid

Stepped Five-stage Booking Form

Floating Reserve Call-to-action Button

PDF Menu Download Lead Capture

Interleaved Sensory Testimonial Cards

Related questions

Can I customize the dish names and menu categories in this template?

Does the stepped booking form connect to a calendar or scheduling tool?

Is the PDF menu download section included in the template?

Can I adapt this template for a catering business that serves a different cuisine?

How does the mosaic hero animation work?