Breathe - Exercise Program Landing page Template

Quick summary

Breathe is a single-page template designed for a 6-week guided movement program targeting adults with exercise-induced asthma. It uses a 50/50 split-screen layout, scroll-triggered week transitions, and a midpoint download form to convert curious visitors into enrolled participants. The design feels precise and warm, not clinical and cold.

Who this template is for

This template fits program creators, pulmonologists, and health educators who need a credible digital home for a medically grounded exercise program. It is built for people who want to earn trust before requesting an email address.

• Adults running an asthma exercise program and seeking email leads from a high-trust page
• Health professionals translating a clinical program into an accessible, self-guided format
• Wellness content creators whose audience uses rescue inhalers and needs careful, graduated guidance

What problem this template solves

Adults with exercise-induced asthma are routinely told to stay active but given no structured path to follow. A generic fitness landing page does not address that gap. This template solves it with visible competence: it shows the program before it asks for anything.

• Visitors with medical hesitation need proof before commitment; this template gives away weeks one and two on-page
• A standard opt-in form with no context creates friction; the midpoint placement here ties the form to a natural curiosity peak
• Generic health pages feel either too clinical or too casual; this layout holds both tones in balance

What you get with this template

The template delivers a complete, conversion-ready landing page structured around a 6-week movement program. Every section is mapped to a clear visitor goal, from orientation to download.

• A hero section with a giant centered headline, animated breathing sine wave, and a fern-colored subhead
• A scroll-driven split-screen timeline covering Weeks 1, 3, and 6 with medical illustration placeholders and breathing cue annotations
• A midpoint download form after Week 3, a no-form free chart section, and a credibility block with program statistics

Feature list

This template includes the following built-in capabilities drawn directly from the program brief.

Animated Breathing Sine Wave Header

The hero section features a slow SVG sine wave beneath the main headline. It rises and falls every four seconds, mimicking a calm breathing rhythm. No image competes with the headline; the animation reinforces the program's core idea without distraction.

Scroll-Triggered Week Progression

Each scroll transition advances the program timeline from Week 1 through Week 6. Visitors experience six weeks of progression in roughly sixty seconds. Early sections feel foundational; later sections introduce real exertion, proving the program's athletic destination.

Split-Screen Program Timeline

The 50/50 layout places the numbered phase label and week description on the left. The right panel holds a medical illustration placeholder annotated with breathing cues and peak-flow targets. The two panels advance in sync on scroll.

Midpoint Download Form

The primary call to action appears after the Week 3 reveal, when curiosity is highest. The form collects first name, email address, and one qualifying question: whether the visitor currently uses a rescue inhaler during exercise, presented as a yes/no toggle.

No-Form Trust Builder

A secondary section offers a free printable breathing-rate chart with no form required. This gives hesitant visitors a low-commitment entry point and builds confidence before they reach the download form on a return visit.

Credibility and Statistics Block

A dedicated section presents pulmonologist involvement and program statistics. This block anchors clinical authority without overstating outcomes, giving the page a grounded, trustworthy close before the footer.

Page sections overview

Design & branding system

The visual identity follows a Medical Clarity theme using a four-color Forest Trust palette. Typography pairs Fraunces as the serif display face with DM Sans for body text, keeping the page readable and warm without feeling recreational.

• Deep evergreen (#1B4332) anchors backgrounds and section dividers; soft fern (#52796F) carries subheadings and iconography
• Clinical white (#F0F4F2) opens generous space between content blocks, reducing visual congestion on a dense informational page
• Warm bark (#A3785F) is reserved for buttons and progress indicators, drawing the eye only where an action is needed

Mobile & speed optimization

The template is desktop-first by design, reflecting the complexity of the split-screen scroll-driven layout. Full mobile responsiveness is built in, stacking the two-panel sections into a single column on smaller screens.

• Scroll-triggered animations and staggered reveals are handled client-side; static content blocks use server components to keep initial load lean
• The sine wave SVG and week-transition animations are scoped to avoid layout shift on mobile viewports

How this template helps you convert

The conversion strategy is built on earned trust rather than early pressure. Visitors receive real program value before any form appears.

1. Weeks 1 and 2 are shown in full on-page, proving the program's depth and clinical grounding before the download is requested
2. The primary call-to-action form appears at the Week 3 midpoint, the moment a visitor has seen enough to feel both invested and curious about what comes next
3. The no-form chart section provides a fallback path, so visitors who are not yet ready to submit an email still leave with something useful and a reason to return

Other information about this template

This template is built specifically for the asthma care niche, where trust and clinical credibility matter more than visual novelty. A few additional details are worth noting for buyers evaluating fit.

• The qualifying question on the form ("Do you currently use a rescue inhaler during exercise?") is a yes/no toggle, keeping friction minimal while segmenting the audience meaningfully
• The page is structured as a content and resource hub, meaning the on-page program content does as much conversion work as the form itself
• Medical illustration placeholders in each week panel are designed to accept clean, annotated line-art assets consistent with a clinical visual language
• The footer follows a Pattern 1 linear single-row layout, keeping the page close light and uncluttered

Show more