Hearth - Compassionate Wildfirerecovery Landing Page Template

Quick summary

Hearth is a single-page wildfire recovery template designed for grassroots nonprofit networks. It opens with a survivor testimonial card, guides visitors through alternating image-and-text sections, and closes with a registration form for community rebuild days. The tone is warm and human, built for people in crisis and neighbors ready to help.

Who this template is for

This template is built for community-led organizations responding to wildfire displacement. It speaks directly to two very different visitors arriving at the same page.

• Displaced homeowners searching for housing, supplies, or counseling support after a fire
• Neighbors and community members who survived and want to volunteer their time or skills
• Grassroots nonprofit teams and recovery networks coordinating rebuild days and resource fairs

What problem this template solves

Most disaster relief pages feel cold and institutional. They use stock imagery, dense bureaucratic language, and generic calls to action that do nothing for someone searching from a borrowed phone at 2 a.m.

• Displaced families need immediate clarity on what help is available and how to ask for it
• Potential volunteers need a clear, low-friction way to register and contribute their skills
• Recovery organizations need one page that handles both audiences without losing either

What you get with this template

Hearth gives you a fully structured, single-page layout built around the emotional arc of wildfire recovery. Every section is purposeful, warm, and designed to move people from grief toward agency.

• A survivor testimonial hero section with a handwritten-style quote card floating over a hands-building-a-wall photo
• Zigzag alternating sections pairing recovery imagery with service descriptions, escalating from loss toward action
• An interactive event registration form with a dynamic "I need help / I can give help" toggle and a date picker for upcoming rebuild events

Feature list

Hearth includes a focused set of components drawn directly from the brief. Each one serves the recovery network's core mission.

Survivor Testimonial Hero Card

The page opens with a floating card showing a survivor portrait, a handwritten-style quote, and location details including neighborhood, fire name, and date. This single card sets the emotional register for everything that follows.

Zigzag Alternating Layout

Sections alternate between left-image and right-text, then right-image and left-text. The sequence moves from wreckage and assessment through raised walls and rebuild milestones, creating a visual journey from loss toward recovery.

Dynamic Help-or-Give Registration Form

A single toggle reveals two distinct checklists. Visitors who need help see options for housing, supplies, counseling, and childcare. Visitors who want to give see a skills list covering framing, electrical work, cooking, childcare, and Spanish-speaking support.

Event Date Picker

The registration form includes a date picker that loads the next three scheduled rebuild events. This keeps registration concrete and action-oriented rather than vague.

Impact Statistics Block

A dedicated section displays completed rebuilds with exact volunteer hours and families served. This proof-of-impact section sits directly before the registration form, making the cost of participation feel small against visible results.

Community Stories Carousel

A horizontal-scroll testimonial section organizes survivor stories neighborhood by neighborhood. This section lets the scroll feel like watching a community come back, house by house.

Page sections overview

Design & branding system

Hearth uses a Botanical color system that feels like new growth after a burn. The palette does not deny the disaster. It insists on what comes after it.

• Deep loam brown (#3B2F2F) anchors all primary text, giving headings warmth and gravitas
• Living fern green (#4A7C59) fills section backgrounds and progress indicators, signaling recovery in progress
• Wildflower gold (#E2A84B) appears only on buttons and survivor count highlights, directing the eye toward action
• Ash-white (#F5F0EB) provides breathing space between sections, keeping the page calm and readable
• DM Serif Display carries headings with warmth; Plus Jakarta Sans keeps body text clear and easy to scan

Mobile & speed optimization

The template is built mobile-first, recognizing that many visitors arrive on borrowed or low-battery devices while standing in relief lines.

• Minimal JavaScript keeps the page responsive on low-powered devices and unreliable connections
• Native CSS smooth scroll handles section transitions without heavy script dependencies
• Scroll-linked reveal animations and staggered fade-ups use medium-weight animation that does not block content loading

How this template helps you convert

Hearth structures the visitor's journey so that registration feels like the natural next step, not a sales pitch.

1. The survivor testimonial hero card earns trust immediately, before any service description appears
2. The zigzag layout escalates emotionally from documented loss to visible rebuilds, making the network's impact undeniable by the time the registration form loads
3. The help-or-give toggle removes friction by letting each visitor self-identify, so the form they see is relevant to their exact situation

Other information about this template

Hearth is designed for Western United States wildfire recovery contexts, with language and audience assumptions suited to California, Oregon, and Washington recovery networks. The layout and registration form also adapt naturally to other disaster relief and community rebuilding use cases.

• The footer uses a Pattern 7 Arc Browser Split layout on a deep loam background, providing a structured close to the page
• The primary call to action, "Join the Next Rebuild Day," appears first below the hero card and repeats after every second zigzag section
• The Community Hearth theme and Hero's Journey creative direction mean the page reads as a story, not a brochure
• This template is suited for organizations coordinating volunteer rebuild days, resource fairs, and trauma-informed counseling referrals under one roof

Show more