Contagion - Patient Education Landing Page Template

Quick summary

Contagion is a single-page patient education template built for infectious disease platforms. It uses a hub and spoke anchor navigation to organize five focused content spokes. Each spoke opens with a self-assessment checklist, delivers knowledge through sequential cards, and closes with a lead-generation call to action. The layout is mobile-first, warm in tone, and clinically precise.

Who this template is for

This template is built for health and medical publishers who need to reach patients at their most anxious moments. It works equally well for platforms serving patients directly and for clinical practices that want a trusted resource to share with people leaving an appointment.

• Newly diagnosed patients searching for answers on a phone in a hospital parking lot
• Caregivers managing a loved one's medication schedule for conditions like tuberculosis
• Primary care physicians who need a reliable, readable resource to send home with confused patients

What problem this template solves

Complex infectious disease information is routinely published at a reading level patients cannot follow after a frightening diagnosis. Most health pages overwhelm visitors with dense paragraphs, buried action steps, and no clear sense of where they are in their care journey. This template solves that by portioning knowledge into single-concept cards and giving visitors a visible sense of progress.

• Patients arrive scared and leave without understanding their next step
• Caregivers have no structured tool to track medication schedules and follow-up dates
• Physicians have no single trusted link that matches clinical accuracy with patient-friendly language

What you get with this template

You get a fully structured hub and spoke landing page with five interactive spoke sections, each independently navigable via a fixed anchor navigation bar. Every component in the template is designed around the checklist and audit creative direction, so visitors always know where they stand.

• A hero section with a half-page photo and text split, a headline in deep hospital blue, and dual call-to-action buttons
• Five spoke sections covering condition search, lab reading, medication tracking, questions, and caregiver support
• A personal care checklist lead-generation form, a gated PDF download path, and printable one-page summaries at the end of each spoke

Feature list

This template is purpose-built for a patient education use case. Every feature listed below comes directly from the template brief.

Fixed Anchor Navigation Bar

Five spoke labels sit in a fixed navigation bar just below the hero. Each label links directly to its spoke section. The active state updates as visitors scroll, so they always know which section they are in.

Self-Assessment Checklist Opener

Every spoke section opens with a short checklist. Questions like "Have you received your full diagnosis?" and "Do you know your follow-up date?" help visitors locate themselves in their care journey before reading any content. Unchecked boxes pulse gently in seafoam green.

Sequential Concept Card Reveal

Content inside each spoke appears as a series of single-concept cards that reveal one at a time as the visitor scrolls. Each card holds one idea, one action, and one thing to remember, so the page never delivers more than a patient can absorb at once.

Scroll-Linked Progress Bar

A progress bar at the top of each spoke section fills as the visitor scrolls through its cards. The visual fills like a loading dose entering the bloodstream, giving visitors a tangible sense of completion and encouraging them to reach the end of each section.

Personal Care Checklist Lead Form

The primary conversion form asks for condition name via a searchable dropdown of 40 or more diseases, then stage of care, then email address. This order puts the medically relevant fields first so the contact field feels earned rather than demanded.

Gated PDF Download Path

A secondary conversion path offers a free downloadable antibiotic guide gated behind an email address only. This catches visitors who are not ready to fill out the full form but still want something concrete to read tonight.

Page sections overview

Design & branding system

The visual identity follows a Healing Space theme using a Slate and Sky color system. The palette is designed to feel like early morning light through hospital blinds: calm, clean, and quietly reassuring. Typography uses DM Sans throughout, bold for headings and regular weight for body text.

• Deep hospital blue (#1A365D) for all headings and active anchor navigation states, clinical slate (#4A5568) for body text and navigation rails, and soft sky wash (#E8F4FD) across section backgrounds
• Seafoam green (#48BB78) on progress indicators, pulsing checklist boxes, and all call-to-action buttons to signal forward movement
• Medium animation level including reveal text on the hero, staggered card reveals, pulsing unchecked boxes, and scroll-linked section transitions

Mobile & speed optimization

This template is built mobile-first because the primary audience reaches the platform on a phone, often at night, often in a stressful setting. Every layout decision prioritizes thumb-friendly tap targets, readable type sizes, and a content structure that works on a small screen without horizontal scrolling.

• Server components handle static sections to keep initial load fast; client components handle the interactive checklist and progress bar
• The sequential card reveal pattern naturally limits how much content loads and renders at once, keeping the scroll experience smooth on lower-powered devices

How this template helps you convert

The lead-generation direction is embedded in the structure of every spoke section. Visitors do not encounter a form until they have already engaged with a checklist and completed at least one card sequence, which means they arrive at the form with context and intent.

1. The personal care checklist form appears first in the hero and repeats at the close of every spoke section, so visitors encounter it at the moment they feel most informed and ready to act.
2. The gated antibiotic guide PDF offers a lower-commitment conversion path for visitors who are browsing rather than ready to commit, capturing an email address from people who would otherwise leave without any contact exchange.

Other information about this template

This template is categorized under Health and Medical with a specific focus on infectious disease medicine and patient education. It is localized for English-language audiences in the United States, using the MM/DD/YYYY date format and United States dollar currency where applicable.

• The template is designed for dual audiences: direct-to-consumer (patients and caregivers) and business-to-business (primary care physicians referring patients to the platform)
• Social proof elements include a condition count of 40 or more diseases, care stage indicators, and a physician trust signal noting that guides are written by infectious disease specialists
• The footer uses a linear single-row pattern and is intended to carry trust signals, condition counts, and supplementary navigation links

Show more