Breathe is a zigzag landing page for an asthma patient education platform. It pairs plain-language answers with alternating illustrated panels, guiding newly diagnosed adults, parents, and school nurses from basic questions to confident asthma management. A trust-building badge ribbon leads visitors toward a free educator session booking form or a downloadable action plan.
by Rocket studio
Breathe turns complex asthma information into clear, jargon-free conversations. The landing page uses an alternating FAQ layout to walk visitors from "What is asthma?" through rescue planning and exercise confidence, then drives them toward booking a free session with a pulmonologist educator. Every section is written so a worried parent or newly diagnosed adult can act on it tonight.
This template is built for health educators, pulmonology practices, and patient-facing asthma platforms that want to convert anxious visitors into booked consultations. It fits teams who need credible, readable content delivery without overwhelming their audience with clinical language.
Patients with asthma often arrive at a website confused, scared, and unsure which question to ask first. Most health pages either bury answers in clinical text or serve generic advice that feels untrusted. This template solves that gap by presenting pulmonologist-reviewed answers in a calm, progressive sequence that builds from basics to confidence.
You get a fully structured single-page layout with six distinct content zones, a booking scheduler, and an email capture path. Every section is pre-designed with the Alpine Fresh color system, DM Sans typography, and scroll-triggered animations. The layout is ready to populate with your own questions and illustrated panels.




Theme
Medical Clarity
Creative direction
FAQ-Driven
Color system
Alpine Fresh
Style
Zigzag/Alternating
Direction
Booking/Scheduling
Page Sections
Award Badge Ribbon with Breathing Animation
Progressive FAQ Zigzag Layout
Inline Booking Scheduler
Email Action Plan Capture
Coral Call-to-action Cadence
Mobile-first Responsive Layout
Can I replace the FAQ questions with my own patient content?
How does the inline booking scheduler work?
Is the email capture path separate from the booking form?
What animations are included in the template?
Does this template use stock photography in the hero section?
A single paragraph introduces the feature set: each component below was designed specifically for the asthma education use case, balancing clinical authority with the warmth needed to keep a worried reader on the page.
The header displays four trust badges, American Lung Association Partner, Asthma and Allergy Foundation of America Reviewed, HIPAA Compliant, and a 4.9 Patient Rating, rendered in muted pine and glacial blue. Each badge carries a slow breathing-pulse micro-animation that expands and contracts like a pair of lungs, establishing authority before any body copy is read.
Each content block opens with a real patient question in large conversational type, then alternates illustration-left/answer-right and answer-left/illustration-right. The scroll rhythm mimics measured breathing and progresses from foundational questions through management skills to exercise confidence, keeping readers engaged across the full page.
A coral-highlighted call-to-action opens an inline scheduler where visitors choose a preferred date, select a time zone, pick a concern type from a dropdown (new diagnosis, child's asthma, exercise-induced, or medication review), and optionally type their biggest question. The form is built for low friction and high completion.
Visitors not yet ready to book can download a personal asthma action plan template by submitting their email address. This secondary conversion path nurtures hesitant visitors toward scheduling, giving the platform two distinct ways to move a single visitor forward.
The primary "Book a Free Educator Session" button appears beneath the badge header and resurfaces automatically after every third FAQ block. The oxygenated coral color is reserved exclusively for these calls to action and alert-level callouts, making every conversion moment visually unmistakable without disrupting the calm reading experience.
The layout prioritizes mobile viewing because parents and newly diagnosed patients most often search at night on a phone. Zigzag columns stack cleanly into a single column on small screens, and the booking form adapts to thumb-friendly input sizing.
| Section | Purpose |
|---|---|
| Badge Ribbon Hero | Display trust credentials and primary call to action |
| FAQ Block One | Cover basics: what asthma is and inhaler side effects |
| Call to Action One | Resurface booking prompt after first FAQ block |
| FAQ Block Two | Address management: peak flow meters and trigger identification |
| Call to Action Two | Resurface booking prompt after second FAQ block |
| FAQ Block Three | Build confidence: exercise and school action plans |
| Call to Action Three | Resurface booking prompt after third FAQ block |
| Booking Scheduler | Capture session preferences and visitor's top question |
| Email Action Plan | Capture email for downloadable action plan template |
| Footer | Single-row linear links and platform information |
The Alpine Fresh palette channels the feel of a Swiss sanatorium poster from the 1930s: medicinal and inviting at the same time, clean without feeling cold. DM Sans keeps every heading and answer readable at any size, from a desktop monitor to a phone screen glanced at 2 a.m.
The template is designed mobile-first because the primary audience searches on a phone, often under stress and in low-light conditions. Every layout decision favors speed of comprehension as much as visual quality.
The page earns trust before asking for anything. By the time a visitor has read through six honest, jargon-free answers, the remaining questions feel personal enough to need a live conversation.
This template is categorized under Health and Medical, specifically within the Asthma Care subcategory. It is designed for the asthma patient education platform niche and carries an intersection match score of 13, reflecting strong alignment between the layout style, creative direction, and use case.