Breathe is a split-screen COPD patient education landing page built for digital health platforms. It pairs a warm lung illustration with a guided multi-step intake form, walks patients through four structured learning steps, and closes with a booking section where visitors schedule a free session with a certified respiratory educator. The design is calm, clinical-warm, and mobile-ready.
by Rocket studio
Loading preview…
Quick summary
Breathe is a single-page COPD patient education template built around one goal: turning fear into confidence. A split-screen layout guides recently diagnosed patients and longtime sufferers through four structured steps, from understanding their lungs to booking a free session with a certified respiratory educator. The Alpine Fresh color system keeps every screen calm and easy to read.
Who this template is for
This template is built for digital health platforms, telehealth providers, and respiratory care services that educate and support people living with chronic obstructive pulmonary disease (COPD). It works equally well for clinical teams creating patient-facing resources and for health content businesses serving the COPD caregiver market.
Recently diagnosed COPD adults who are still processing their first spirometry results and need clear, reassuring guidance
Longtime COPD sufferers with unused action plans who need a structured path back to active self-management
Caregiving spouses and family members who want to help but are not sure where to start
What problem this template solves
People living with COPD often encounter two barriers at once: clinical information that feels cold and overwhelming, and booking systems that feel disconnected from their actual needs. This template removes both barriers. It presents medical education in a calm, conversational format and connects it directly to a scheduling flow.
Patients leave educational content without taking any next step because there is no clear conversion path built in
Inhaler technique and flare-up recognition content is often buried in long documents rather than shown as a guided, visual sequence
Caregivers and patients searching for help at night need a page that feels safe and supportive, not transactional
What you get with this template
This template delivers a fully structured, single-page layout that takes a COPD patient from first visit to booked appointment. Every section has a defined role in that journey, and the design reinforces trust at every scroll point.
A hero section with a split-screen multi-step intake form and a warm lung illustration under the headline "Let's Build Your Breathing Plan"
Theme
Soft Gradient
Creative direction
Step-by-Step Guide
Color system
Alpine Fresh
Style
Split Screen (50/50)
Direction
Booking/Scheduling
Page Sections
Split-screen Multi-step Intake Form
Four-step Educational Guide
Full Booking and Scheduling Section
Secondary Email Capture Path
CSS Keyframe Breathing Animations
Patient Testimonials and Trust Badges
Related questions
Can I customize the medication checklist to match my service?
Does the calendar picker connect to a live scheduling system?
Is this template suitable for a respiratory therapy private practice?
Can the PDF download path work as the primary conversion option?
What editing skill level does this template require?
A four-step educational guide covering lung basics, inhaler mastery, flare-up recognition, and booking, each with an illustrated right-panel demonstration
A full booking section with name capture, contact method selection, a medication checklist, and a calendar picker showing next-available 30-minute slots
A secondary email-capture path offering a downloadable action plan PDF for visitors not yet ready to book
Patient testimonials with specific outcomes, trust badges referencing certified educators, and a clean single-row footer
Feature list
This template includes the following built-in components and design capabilities.
Split-Screen Multi-Step Intake Form
The hero splits the viewport equally. The left panel holds a soft gradient lung illustration with a short reassuring headline. The right panel opens a three-step intake starting with a single friendly question and large pill-shaped answer buttons. The form feels like a conversation, not a clinical intake sheet.
Four-Step Educational Guide
Four numbered learning steps scroll the page like a guided pulmonary rehabilitation session. Each step pairs a left-panel label with a right-panel illustrated or animated demonstration. The visual tone warms and opens as the visitor progresses, reflecting growing confidence alongside growing knowledge.
Full Booking and Scheduling Section
The booking section expands the multi-step form to capture name, preferred contact method (phone or video call), current medications via checkboxes, and a calendar picker displaying next-available 30-minute slots with a certified respiratory educator. Every split-screen step anchors a primary "Book a Free Breathing Session" call to action.
Secondary Email Capture Path
Visitors who are not yet ready to book can choose "Download Your Action Plan PDF" instead. This secondary path captures an email address and nurtures patients back toward scheduling, so no visitor leaves empty-handed.
CSS Keyframe Breathing Animations
Scroll-triggered reveals and CSS keyframe breathing animations bring the page to life without feeling clinical. Step transitions carry the visitor forward with a sense of movement that mirrors the experience of a breath loosening in the chest.
Page sections overview
Section
Purpose
Hero intake form
Introduce the platform and begin the guided multi-step intake
Step-by-step guide
Educate patients across four structured learning steps
Social proof
Build trust through patient testimonials and educator trust badges
Booking section
Capture name, contact preference, medications, and calendar slot
Action plan capture
Offer a PDF download as a secondary conversion path for undecided visitors
Footer
Provide a clean single-row navigation close
Design & branding system
The visual system is called Alpine Fresh. It draws on mountain-morning imagery to create a palette that feels clean, cool, and unhurried. Every color decision supports legibility and emotional calm for patients who may be anxious or elderly.
Core colors: mountain-morning blue (#A8D0E6), meadow mist green (#B8D8BA), snow-cap white (#F7F9FC), pulse-oximeter teal (#3AAFA9) for interactive elements, and calm slate (#374151) for body text
Typography: Plus Jakarta Sans for headings, DM Sans for body text, both chosen for comfortable on-screen reading
Backgrounds wash between snow-cap white and a faint blue-to-green gradient so no hard edge interrupts the reading flow
Mobile & speed optimization
This template is built mobile-first because many COPD patients, particularly older adults, access health information on their phones during or after a breathing episode. Every interactive element is sized and spaced for touch input.
The floating "Book a Free Breathing Session" call to action stays visible on mobile scroll without blocking content
The multi-step form, calendar picker, and medication checkboxes are all structured for comfortable small-screen interaction
Server components handle static sections while client components manage the interactive form and calendar, keeping the page responsive
How this template helps you convert
Every design and content decision in this template works toward one outcome: a booked session with a certified respiratory educator. The path from arrival to conversion is short, warm, and clearly signposted.
The hero intake form qualifies the visitor immediately with a single friendly question, reducing drop-off before the patient has even read the education steps
The four-step guide builds confidence and emotional readiness before the booking section appears, so visitors arrive at the calendar already motivated to commit
Other information about this template
This template is built for the COPD patient education platform niche within the broader Health and Medical category. It sits at the intersection of digital health, respiratory care, and patient-caregiver content.
The template follows a Soft Gradient theme throughout and uses the Alpine Fresh color system exclusively
The header concept is a Multi-Step Form, and the creative direction is a Step-by-Step Guide, both chosen to match the educational and scheduling intent of the COPD care subcategory
The landing page direction is Booking and Scheduling, making it suitable for any respiratory health service that needs to convert page visits into confirmed appointments
Typography and animation choices support elderly and mobile users without sacrificing the clinical-warmth tone that builds trust with a health-anxious audience
