Breathe - Caregiver Support Landing page Template

Quick summary

Breathe is a single-page, anchor-nav template designed for services that connect family caregivers with certified asthma educators. It opens with an animated line-art hero, guides visitors through six caregiver-searched FAQ sections, and converts them through a five-step assessment modal that leads to a personalized plan review booking.

Who this template is for

This template is built for healthcare service providers who support family caregivers managing a loved one's asthma. It speaks directly to the people who lie awake listening for coughs and search for answers alone at 2 AM.

• Asthma educator practices and caregiver support services looking to qualify and book consultations online
• Health and medical businesses targeting parents, spouses, and grandparents as the primary care decision-maker
• Clinics or telehealth services offering personalized asthma action plan reviews

What problem this template solves

Family caregivers dealing with asthma often feel overwhelmed, under-informed, and unable to find trustworthy guidance in one place. They arrive at a service's website mid-panic with very specific fears, and a generic homepage does not meet them where they are.

• Caregivers cannot quickly find answers to the specific questions they are already searching, such as device technique or school coordination
• There is no structured way to capture a caregiver's situation before a consultation, leading to repeated intake conversations
• Most medical landing pages feel cold and impersonal, pushing anxious visitors away before they convert

What you get with this template

This template delivers a full single-page structure organized around real caregiver anxiety. Every section is purpose-built to lower a visitor's stress level and move them confidently toward booking a plan review.

• An animated SVG hero with a fade-in headline, a three-step how-it-works bento layout, and six anchor-linked FAQ spoke sections
• A five-step quiz modal with tiered results (Prepared, Learning, Overwhelmed) and a pre-filled consultation booking form
• A persistent floating call-to-action button, caregiver testimonial section, and a minimal horizontal-flow footer

Feature list

This template includes purpose-built components that work together to earn caregiver trust and drive consultation bookings.

Breathing SVG Line-Art Hero

The header features a full-width continuous line drawing of adult hands guiding a child around an inhaler. The bronchial branches animate on a four-second CSS expansion and contraction cycle, creating a calm, breathing rhythm that sets the emotional tone immediately.

Anchor Navigation Rail

A fixed left-rail navigation links directly to each of the six FAQ spoke sections. Caregivers arriving with a specific fear can jump straight to their question rather than scrolling the full page. Active states are highlighted in clinical sky for clear position feedback.

Five-Step Quiz Modal

The primary conversion tool opens as a stepped modal with one question per screen. It covers the caregiver's relationship to the patient, current severity level, device confidence, written action plan status, and biggest daily worry. No email address is required until results are shown.

Tiered Results and Pre-Filled Booking

Quiz results segment each caregiver into one of three tiers: Prepared, Learning, or Overwhelmed. Each tier receives a tailored recommendation and a secondary call-to-action button to book a free plan review. Quiz answers are pre-filled into the consultation form automatically.

FAQ-Driven Spoke Sections

Six spoke sections are each anchored to a bold caregiver question. Each section answers the question in two calm paragraphs and pairs the text with a micro line-art diagram. The structure follows a question, relief, evidence rhythm designed to reduce visitor anxiety section by section.

Caregiver Testimonials Section

A dedicated testimonials block presents specific outcome-focused quotes from real caregivers. Social proof is positioned after the FAQ spokes to reinforce trust at the moment visitors are closest to converting.

Page sections overview

Design & branding system

The visual identity follows a Corporate Precision theme paired with a Forest Trust color palette. The result feels like a well-funded pediatric clinic: sterile enough to trust, warm enough to exhale in.

• Deep evergreen (#1B4332) anchors the navigation rail and section headers; soft fern (#52796F) carries body text and secondary containers; birch bark cream (#F0EDE5) fills open space between content blocks
• Clinical sky (#A8DADC) highlights active navigation states, quiz progress bars, and hover effects throughout the page
• Typography uses DM Sans for body precision and Fraunces for headline warmth, balancing clinical clarity with a human, approachable tone

Mobile & speed optimization

This template is designed mobile-first, reflecting the reality that most caregivers search for answers on their phones late at night. Every interactive element is built with that context in mind.

• CSS animations handle the breathing SVG cycle and scroll reveal effects, keeping the animation layer lightweight
• Intersection Observer drives scroll-based section reveals, so off-screen content does not load its reveal logic until the visitor reaches it
• The anchor navigation rail adapts for mobile browsing, and the persistent floating quiz button remains accessible across all screen sizes

How this template helps you convert

Every structural decision in this template is pointed toward one outcome: a completed quiz that becomes a booked consultation. The page earns trust first, then asks for action.

1. The FAQ spoke structure answers the exact questions caregivers are already searching, establishing credibility before any call-to-action appears
2. The five-step quiz modal removes email friction early, collecting a complete caregiver profile before asking for contact details, which reduces drop-off at the form step
3. Pre-filled quiz answers in the booking form eliminate repeated intake questions, making the transition from assessment to consultation feel seamless and respectful of the caregiver's time

Other information about this template

This template is part of the Health and Medical category, specifically built for the asthma care subcategory and the asthma caregiver support service niche. It is a strong fit for any service that educates caregivers rather than treating patients directly.

• The template is localized for English-speaking audiences in the United States, using imperial measurements and 12-hour time formatting throughout
• Scroll reveals are powered by Intersection Observer, and all animation is CSS-based, keeping the implementation straightforward to edit and maintain
• The hub and spoke architecture means new FAQ topics can be added as additional spoke sections without redesigning the page layout

Show more