Hearth is a compassionate wildfire recovery landing page template built for grassroots community networks. It connects displaced families with volunteer rebuild crews, donated materials, and trauma-informed counselors through a warm, earthy design. The page drives event registration for community rebuild days using a zigzag layout, a survivor testimonial header, and a smart help-or-give toggle form.
by Rocket studio
Loading preview…
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
Theme
Community Hearth
Creative direction
Hero's Journey
Color system
Botanical
Style
Zigzag/Alternating
Direction
Event Registration
Page Sections
Survivor Testimonial Hero Card
Zigzag Alternating Section Layout
Dynamic Help-or-give Registration Form
Event Date Picker for Rebuild Days
Impact Statistics Block
Neighborhood Community Stories Carousel
Related questions
Who is this landing page template built for?
Can the registration form handle both people who need help and people who want to volunteer?
What sections are included in this template?
Is this template suitable for mobile users in emergency situations?
Can I use this template for disaster relief beyond wildfires?
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
Section
Purpose
Hero Testimonial Card
Opens with a survivor quote and portrait to establish immediate human trust
Primary Call to Action
Places the "Join the Next Rebuild Day" button directly below the hero card
Services Zigzag One
Pairs a wreckage image with text describing assessment services
Services Zigzag Two
Pairs a raised-wall image with rebuild milestone descriptions
Secondary Call to Action
Repeats the registration prompt after every second zigzag section
Impact Stats Block
Shows completed rebuilds, volunteer hours, and families served
Registration Form
Hosts the help-or-give toggle, needs/skills checklists, and date picker
Arc Browser Split pattern on a deep loam brown background
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.
The survivor testimonial hero card earns trust immediately, before any service description appears
The zigzag layout escalates emotionally from documented loss to visible rebuilds, making the network's impact undeniable by the time the registration form loads
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
