Breathe - Calming Copd Landing Page Template

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"
• 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

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.

1. 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
2. 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

Show more