Yardie - Soulful Jamaican Landing Page Template

Quick summary

Yardie is a single-page landing page template for Jamaican food trucks. It opens with a bold mascot hero, unrolls the brand's origin story through illustrated scroll sections, and closes every beat with one glowing call-to-action button. The layout is 90 percent hero-driven and built for mobile-first visitors who are hungry and on the move.

Who this template is for

This template is built for food truck owners who want their page to work as hard as their kitchen does. It fits brands rooted in a personal story, a family recipe, or a neighborhood identity.

• Jamaican food truck operators ready to launch or refresh their online presence
• Street food vendors whose brand personality is bigger than a basic menu listing
• Small food businesses that want to drive foot traffic without a complicated website

What problem this template solves

Most food truck pages look like afterthoughts. They list a phone number, maybe a photo, and leave visitors with no sense of who is behind the food or where to find it. Yardie fixes that.

• Visitors land on a page with no clear call to action and leave without acting
• The brand story never gets told, so the food feels interchangeable with any other truck
• Regulars and new customers both need different things, and most pages serve neither well

What you get with this template

You get a fully designed, single-page layout with every section already planned and styled. The creative direction, color system, and typography are baked in from the start.

• A hero section built around the grandmother mascot illustration and headline copy
• An origin story scroll with sepia illustrated panels, a handwritten quote block, and dish reveal sections
• A sticky call-to-action button and a secondary route-finder text link that persist through the scroll

Feature list

This template includes purpose-built components that match the character and commercial goals of a Jamaican food truck landing page.

Grandmother Mascot Hero Section

The hero opens with a hand-illustrated grandmother character in a tied headwrap and flour-dusted apron, wooden spoon raised over a steaming Dutch pot. She stands in front of the truck, painted in marigold and black. The illustration style is textured and slightly weathered, like a hand-painted sign on a Kingston shopfront. A chunky, hand-brushed typeface runs the truck name across the side, and illustrated smoke wisps curl into the headline space above.

Origin Story Scroll Layout

Past the hero, the page unrolls like a family album. A sepia-toned illustrated panel depicts the Clarendon kitchen where the recipes began, paired with a handwritten grandmother quote block. Each following section pairs a short paragraph with a warm, grainy image or textured illustration. Spice jar and ingredient sketches float in the margins like cookbook annotations throughout the scroll.

Staggered Dish Reveal Sections

Jerk chicken, oxtail, and curry goat each get their own reveal moment as the visitor scrolls. Each dish card is interactive on hover and appears with a staggered animation. The menu becomes inseparable from the story, with each dish introduced at a natural story beat rather than dropped into a static list.

Persistent Sticky Call-to-Action Button

A scotch bonnet orange button labeled "Find the Truck Today" appears first beneath the hero mascot. After the second scroll, it pins to the bottom of the screen with a pulsing animation. A secondary text link beneath it reads "See this week's route" for returning customers who already know what they want.

Social Proof Section

A dedicated section called "The Regulars" presents three customer archetypes with short quotes. Credibility markers like "Sold out by 1pm" are woven into the layout to reinforce demand without requiring formal reviews.

Warm Artisan Animation System

Floating illustrated elements, scroll-triggered reveals, and CSS-based smoke wisp animations bring the page to life. Every animation is built to feel like golden-hour warmth rather than generic web motion, keeping the artisan identity intact across every interaction.

Page sections overview

Design & branding system

The visual identity follows a Warm Artisan theme built on the Citrus Burst color system. Every color has a deliberate role, and the typography pairs a display serif with a clean body face to balance character with readability.

• Color palette: charred plantain black (#1C1710) for backgrounds, scotch bonnet orange (#E8751A) for calls to action and hover states, ripe mango yellow (#F5C542) for accents and illustrated flourishes, and fresh sugarcane cream (#FFF8E7) for text areas
• Typography: Fraunces serif for headlines and display text, DM Sans for body copy
• Illustration style: textured, slightly weathered, hand-painted signage aesthetic inspired by Kingston shopfront art

Mobile & speed optimization

This template is built mobile-first because food truck customers are on their phones. Every layout decision assumes a smaller screen and a visitor who is already outside and hungry.

• Layouts stack cleanly on small screens without losing the visual storytelling hierarchy
• CSS animations are preferred throughout to keep motion smooth and lightweight on mobile devices
• The sticky call-to-action button is designed to remain accessible and tappable at the bottom of the screen during scroll

How this template helps you convert

Every design and layout choice in Yardie is pointed toward one outcome: getting the visitor to tap "Find the Truck Today."

1. The grandmother mascot creates immediate emotional trust before a single word is read, lowering resistance from the first second on the page
2. The origin story scroll holds attention through the full page length, so visitors arrive at the call-to-action already invested in the brand
3. The sticky button removes every possible friction point by keeping the action visible at all times, with no form, no login, and no extra steps

Other information about this template

Yardie is a strong starting point for any food vendor who wants a page that tells a real story and drives real foot traffic.

• The template is localized for English-language markets with USD pricing context and an urban food truck setting in mind
• The footer follows a minimal horizontal layout pattern suitable for a single-page food truck presence
• The template can support linking the "Find the Truck Today" button to a live location page or third-party ordering platform URL

Show more