Dojo - Playful Martial Arts Landing Page Template

Quick summary

Dojo is a playful, masonry-style landing page template designed for kids martial arts equipment and gear stores. It blends illustrated icon art, belt-level filtering, and educational content cards into a scroll experience that teaches parents before it sells to them. The primary call to action is a free "First-Class Gear Checklist" PDF download captured with a first name and email.

Who this template is for

This template is built for anyone selling or promoting children's martial arts gear to families and instructors. It speaks directly to the people who are actually making the purchase decision.

• Parents researching a child's first karate or taekwondo class gear at home, often late at night on a phone
• Dads with a martial arts background who want age-appropriate sparring equipment for their kids
• Instructors outfitting a new junior program and looking for a trusted, budget-conscious gear resource

What problem this template solves

Parents shopping for kids martial arts gear face a wall of confusing options. They do not know which belt level needs which gear, what fits a six-year-old, or which brands instructors actually trust. This template solves that problem by leading with education before products.

• No belt-level guidance: the template organizes gear into white, yellow, orange, and green belt stages so parents buy the right things at the right time
• No trust signals: star ratings, review counts, and instructor endorsements appear directly on product cards throughout the page
• No clear starting point: the "First Day Essentials" masonry room and the free gear checklist give first-time buyers a confident, structured path

What you get with this template

You get a fully structured, single-page layout that blends e-commerce display with content-led trust building. Every section is purposeful and ready to customize with your own products and copy.

• A five-section page flow: hero icon grid, trust statistics bar, three themed masonry rooms, and a linear single-row footer
• Two conversion paths: a sticky checklist bar that appears after the second masonry cluster and a full-width interstitial call-to-action before the final room
• Belt-level filter functionality that lets visitors tap to browse gear by white, yellow, orange, and green belt stage

Feature list

This template is built around specific functional components drawn directly from the Dojo brief. Each feature serves a clear purpose for the store visitor.

Illustrated Icon Grid Hero

The hero section uses a tight mosaic of sixteen hand-illustrated icons in alternating coral and yellow rounded tiles. Icons include a boxing glove, belt knot, water bottle, mouthguard case, folded gi, shin pads, headband, and medal. A centered headline fades in over the grid on load.

Gallery Walk Masonry Layout

The scroll is organized into three themed "rooms." Room one shows First Day Essentials with cards pinned at playful angles. Room two covers Sparring Ready gear with bolder colors and action photography. Room three features Sensei's Picks, which are instructor-reviewed bundles presented in a masonry cluster.

Educational Content Cards

Between masonry rooms, single-column educational cards appear inline. These include bite-sized guides such as "How to Tie a Belt in 4 Steps" and a "Mouthguard Fit Guide by Age." This teach-then-show rhythm builds parent trust before presenting products.

Belt Level Filter

Visitors can tap a filter to browse the masonry grid by belt stage: white, yellow, orange, and green. This reduces decision fatigue for parents who are not sure which gear their child needs yet.

Sticky Checklist Bar and Interstitial call to action

A sticky bottom bar appears after the second masonry cluster, promoting the free illustrated PDF checklist. The same offer reappears as a full-width interstitial section before the final room, capturing emails at two natural conversion moments.

Trust Bar with Social Proof

A four-stat trust bar sits beneath the hero. It highlights available sizes, belt levels covered, parent review counts, and years of experience. Product cards throughout the page carry star ratings and instructor endorsement labels.

Page sections overview

Design & branding system

The visual identity follows a Nurture and Care theme expressed through a Dopamine Pop color system. The palette is joyful and high-contrast, but generous white space keeps it from feeling chaotic. Display headlines use Fraunces for warmth and character, while body text uses Plus Jakarta Sans for clean readability.

• Four core colors: sunflower belt yellow (#FFD23F), sparring-mat coral (#FF6B6B), soft gi white (#FAF9F6), and deep tatami teal (#1B9AAA) for headlines and interactive states
• Animations are high throughout: icon tiles use CSS-only hover vibrate effects, masonry cards tilt on hover, and sections reveal on scroll
• Rounded tile shapes, illustrated icons at a toddler-book scale, and playful card angles reinforce the sun-filled playroom energy described in the brief

Mobile & speed optimization

The template is designed with a mobile-first approach, which directly serves the core audience of parents browsing late at night on their phones. Layout and interactions are built to feel natural on small screens.

• The masonry layout and sticky checklist bar are structured for smooth vertical scrolling on mobile devices
• Product images use lazy loading so content renders progressively as the visitor scrolls
• Icon animations are CSS-only, which keeps visual richness without adding heavy script dependencies

How this template helps you convert

The page does not push for the sale immediately. It earns trust through education first, then presents products and a low-commitment offer. Two capture moments and one filtering tool create multiple paths to conversion.

1. The free "First-Class Gear Checklist" PDF download requires only a first name and email, making it an easy yes for a parent who is already in research mode late at night
2. The belt-level filter keeps engaged visitors on the page longer by giving them a personalized browsing path matched to their child's current training stage

Other information about this template

This template is a strong fit for new kids martial arts gear stores that need to establish trust quickly without a large content library. It is also useful for existing stores launching a dedicated junior gear section or seasonal campaign page.

• The template is built in English with United States dollar formatting and United States regional conventions for a North American audience
• Typography pairing uses Fraunces for display headlines and Plus Jakarta Sans for body copy, a combination that balances warmth with legibility
• The footer follows a Pattern 1 Linear Single-Row layout, keeping the page exit clean and focused

Show more