COPD Care Complete Professional Website Template

Quick summary

Breathe is a single-page COPD nutrition program template with anchor navigation and a lead-qualifying quiz. It opens with an oversized patient testimonial card, walks visitors through the clinical dietary methodology section by section, and closes each spoke with a "Find Your Breathing-Diet Score" call to action that drives email lead capture through progressive disclosure.

Who this template is for

This template is purpose-built for healthcare nutrition practitioners and COPD-focused wellness services that need to earn patient trust before asking for a commitment. It speaks directly to three distinct audiences at once.

• Recently diagnosed COPD patients at GOLD stage 2 or 3 who are sorting through conflicting dietary advice
• Pulmonary rehabilitation graduates who want to maintain their progress at home without a clinical setting
• Adult caregivers quietly researching structured meal options for a parent with breathing limitations

What problem this template solves

Most COPD patients encounter generic "eat healthy" guidance that ignores how food choices directly affect breathing effort. This template solves the trust and clarity gap by showing the science behind every dietary decision before asking for any personal information.

• Patients feel overwhelmed when nutrition advice is disconnected from their actual respiratory condition
• Caregivers struggle to find programs that explain the relationship between diet and diaphragm workload
• Generic landing pages fail to qualify leads by severity, wasting time for both the clinician and the patient

What you get with this template

You get a fully structured, single-page landing page with six purpose-built sections connected by a sticky anchor navigation bar. Every section is designed to peel back one layer of the clinical methodology in a readable, trustworthy sequence.

• An oversized testimonial hero card with a patient quote, avatar, GOLD stage label, and a six-month weight-trend sparkline
• Five content spoke sections covering macronutrient ratios, meal timing, anti-bloat architecture, and a patient results grid
• A progressive eight-question quiz assessment modal that qualifies leads by COPD severity and delivers a personalized nutrition report to email

Feature list

This template includes a focused set of interactive and structural components drawn directly from the program brief.

Sticky Anchor Navigation Bar

A persistent navigation bar links directly to each spoke section on the page. The "Find Your Breathing-Diet Score" call-to-action button lives inside the nav so it stays visible at every scroll depth, reducing friction for visitors who are ready to engage early.

Oversized Testimonial Hero Card

The header section features a single floating testimonial card on an oxygenated white background. It combines a large serif patient quote, a small avatar, a name, a GOLD stage classification, and an SVG-drawn six-month weight-trend sparkline, presenting one human result with the authority of a clinical case study.

Progressive Quiz Assessment Modal

The primary conversion mechanism is an eight-question assessment that opens with a single low-friction question and progressively discloses seven more. Questions cover GOLD stage, exacerbation frequency, weight trend, appetite, oxygen use, and current medications. Results are delivered as a personalized nutrition priority report to email.

"Why This Matters for Breathing" Section Headers

Every spoke section opens with a subheading that connects the specific dietary topic directly to airflow and respiratory effort. This structure keeps the clinical logic visible and gives readers a clear reason to continue reading each section.

GOLD Stage Outcomes Grid

The patient results section displays outcome data organized by GOLD stage classification. This grid format gives both patients and caregivers a way to locate relevant metrics quickly without reading dense narrative text.

Scroll-Reveal Animation System

Sections animate into view using staggered cubic-bezier scroll reveals. The sparkline SVG draws on entry, and the quiz modal uses progressive disclosure to reduce cognitive load during the assessment flow.

Page sections overview

Design & branding system

The visual identity follows a Corporate Precision theme built on the Teal Catalyst color system. The palette is designed to feel clinically trustworthy without being cold or institutional.

• Clinical teal (#0D7377) drives navigation anchors, call-to-action surfaces, and interactive elements; oxygenated white (#F7FAFA) fills open section backgrounds; charcoal (#2C3E50) grounds dense nutritional information in readable body text
• Spirometry green (#A8D5BA) marks progress indicators and positive-state feedback inside the quiz and results sections
• Typography pairs Fraunces serif for patient quotes and section headlines with DM Sans for body copy, data labels, and navigation text

Mobile & speed optimization

The template is built desktop-first with full mobile responsiveness. Caregivers typically research on desktop while patients more often use mobile devices, so both layouts receive deliberate attention.

• The anchor navigation collapses cleanly for smaller screens, keeping the "Find Your Breathing-Diet Score" button accessible at all times
• Scroll-reveal animations and the sparkline SVG draw are handled through client-side components, while static content sections use server-side rendering to keep initial load weight low

How this template helps you convert

The conversion architecture is built around giving genuine clinical value before making any direct sales request. Every structural decision moves a hesitant, medically cautious visitor toward a qualified lead.

1. The patient testimonial hero establishes immediate credibility by presenting a specific, stage-classified result rather than a generic success story, giving new visitors a reason to keep reading.
2. The hub-and-spoke methodology sections progressively build trust across five distinct dietary topics, so visitors arrive at the assessment call to action already convinced of the program's clinical rigor.
3. The eight-question progressive quiz qualifies each lead by COPD severity and delivers a personalized nutrition priority report to email, creating a value exchange that makes submitting contact information feel worthwhile rather than transactional.

Other information about this template

This template is a strong fit for COPD nutrition programs, respiratory dietitian practices, and pulmonary wellness services that need a single structured page to demonstrate clinical credibility and capture qualified leads.

• The template style is Hub and Spoke with Anchor Navigation, meaning each section functions as a self-contained spoke that can be reached directly from the sticky nav
• The creative direction follows a Transparent Process approach, where every scroll reveals one additional layer of the methodology rather than asking visitors to take anything on faith
• The header concept is a Testimonial Card, intentionally avoiding stock imagery in favor of a single human result presented with clinical specificity
• The primary conversion direction is a Quiz and Assessment flow, making this template well suited to services where lead qualification by health severity adds value to both the provider and the patient

Show more