Hearth - Compassionate Childwelfare Landing Page Template

Quick summary

Hearth is a single-page event registration template designed for child welfare community foundations. It opens with a ninety-percent viewport team photo and unfolds into a layered testimonial mosaic. A simple three-field form with a volunteer-or-donor toggle closes the journey. The template is built to move real community members from first scroll to confirmed seat.

Who this template is for

Hearth is made for people doing meaningful work in child welfare, those who need a landing page that feels as real as the community it represents. If you are preparing for an annual gala, a volunteer kickoff, or both, this template gives you a ready structure that speaks directly to your audience.

• Foster parents and returning volunteers looking for a simple way to commit to another year
• Local business owners and school counselors who want to connect with a cause that is rooted in their community
• Child welfare foundations and nonprofit coordinators who need a polished event registration page without a generic feel

What problem this template solves

Most nonprofit event pages feel transactional. They list a date, show a stock photo, and ask for a name and email. That approach fails when your audience needs to feel something before they act. Hearth solves the emotional gap between awareness and action.

• Visitors arrive with different levels of familiarity, some are returning foster parents, others are first-time supporters, and the testimonial mosaic structure meets each of them where they are
• The page lacks a natural momentum builder without real social proof, so the chorus of quotes builds collective weight before the registration form ever appears
• A single toggle on the form removes friction by letting visitors self-identify as a volunteer or a donor, making follow-up easier for your team

What you get with this template

Hearth delivers a complete, section-structured landing page with a clear visual hierarchy and a focused registration path. Every section is designed to carry emotional weight before asking for a commitment.

• A full-bleed hero section with a ninety-percent viewport team photo, a spinning badge, a floating stat card, and a primary "Save My Seat" call to action in terracotta
• A scrolling testimonial mosaic in two clusters, four voices in the first, eight in the second, each paired with candid corkboard-style photos in mismatched frame sizes
• A three-field registration form with first name, email, and a volunteer-or-donor toggle, plus a secondary text link routing to a forty-dollar pre-packed supply kit donation

Feature list

This template is built around the features listed below. Each one comes directly from the design and interaction brief that shaped Hearth.

Full-Bleed Hero with Team Photo

The hero fills ninety percent of the viewport with a real annual volunteer photo, not a stock image. A spinning badge and a floating stat card overlay the image. Below the photo, a single high-impact line of text and the primary call-to-action button anchor the remaining ten percent.

Scrolling Testimonial Mosaic

Quotes from foster parents, volunteers, and teenagers who aged out of the system appear in two clustered grids. The first cluster holds four voices. The second expands to eight. Photos appear in mismatched frame sizes that feel pinned to a corkboard, and the visual density grows as the visitor scrolls.

Full-Width Statistics Bands

Between testimonial clusters, a single statistic appears alone on a full-width cream band in large, unhurried type. Two of these bands appear across the page, giving the reader a moment to absorb the foundation's real impact before moving forward.

Event Registration Form with Toggle

A lightweight form collects first name and email alongside a single toggle, "I'm coming to volunteer" or "I'm coming to give." This lets the foundation prepare name badges and seating in advance. The primary call-to-action button appears twice: once under the hero and again after the third testimonial cluster.

Secondary Supply Kit Donation Link

Below the registration form, a text link reads "Can't attend? Send a supply kit instead." This routes visitors to a forty-dollar pre-packed donation option, keeping non-attending supporters engaged without adding a second form.

Scroll-Reveal and Animation System

The template includes a marquee ticker, scroll-reveal stagger on testimonial cards, a spinning badge in the hero, and hover scale states on photos. Animations are set to medium intensity, keeping the page lively without distracting from the content.

Page sections overview

Design & branding system

Hearth uses the Cloud Canvas color system, which draws its warmth from craft paper, handmade signage, and golden-hour photography. The overall feeling is a handmade thank-you card, personal, tactile, and unhurried.

• Color palette: soft eggshell white (#F5F0EB) for backgrounds, warm heather gray (#A8A0A0) for body text, muted terracotta (#C27D5F) for buttons and highlighted names, and deep charcoal (#2E2A27) for headlines and anchor elements
• Typography: Fraunces serif for headlines, giving text a hand-lettered warmth; DM Sans for body copy, keeping readability high across all devices
• Visual style: mismatched photo frames that feel pinned to a corkboard, full-bleed golden-hour photography, cream statistics bands, and a community center gymnasium aesthetic throughout

Mobile & speed optimization

Hearth is built desktop-first with a strong mobile fallback, recognizing that many community members will visit the page on a phone. The layout and interactions are designed to hold up well across screen sizes.

• The testimonial mosaic grid and hero photo adapt for smaller screens so no content is lost or obscured on mobile devices
• Scroll-reveal animations and hover states degrade gracefully on touch devices, keeping the experience smooth for phone users
• Static sections use Server Components for efficiency, while the registration form and animations run as Client Components to keep interactions responsive

How this template helps you convert

The page is built so that the hardest persuasion work happens before the form is ever visible. By the time a visitor reaches the registration section, the testimonials have already done their job.

1. The hero section leads with faces and a real statistic, people the visitor might recognize, doing work the visitor already cares about, creating an immediate personal connection before any copy is read
2. The two testimonial clusters grow in volume as the visitor scrolls, so the sense of community momentum builds naturally and the form appears at the moment of highest emotional engagement
3. The volunteer-or-donor toggle reduces decision friction at the point of commitment, and the secondary supply kit link ensures that visitors who cannot attend still have a meaningful way to participate

Other information about this template

Hearth is part of a broader category of community and nonprofit landing page templates designed for organizations that lead with story rather than structure. A few additional details worth knowing before you decide.

• The template is designed for English-language audiences, with United States date formatting and USD donation references built into the layout
• The design direction follows the Community Hearth theme, which uses the Cloud Canvas color system as its visual foundation
• The Testimonial Mosaic creative direction and Hero-Dominant (90/10) template style are intentional structural decisions that prioritize emotional storytelling over feature-first layouts
• The Event Registration landing-page direction means the template is optimized around a single conversion goal, getting visitors to claim a seat or send a supply kit, rather than distributing attention across multiple actions

Show more