Hearth - Powerful Grassroots Landing Page Template

Quick summary

Hearth is a single-column landing page template for neighborhood-level gun violence prevention organizing. It opens in silence with handheld community video, then builds through testimony, evidence, and a timeline of wins, earning the chapter sign-up ask only after the visitor has seen proof that showing up changes something.

Who this template is for

This template is built for people doing real, grief-powered organizing work. It speaks the language of community members who need a digital home that matches the weight of what they carry.

• Survivors, mothers, and faith leaders running local gun violence prevention chapters
• Youth organizers and volunteers who need to recruit neighbors into action
• Grassroots nonprofit teams building a presence before a bigger site is ready

What problem this template solves

Most nonprofit templates feel like brochures. They lead with logos and donation buttons before a visitor knows why any of it matters. For a gun violence prevention grassroots organization, that disconnect can cost real people walking away.

• Visitors arrive grieving or skeptical and leave without understanding the movement's momentum
• Organizations lose potential volunteers who needed testimony and evidence before they were ready to act
• The page fails to guide people from emotional recognition to a concrete next step

What you get with this template

You get a fully structured single-column landing page that moves the visitor through a deliberate emotional and evidential arc. Every section earns the next one.

• A full-screen video hero section with a serif headline fade-in and no premature call to action
• A testimony section, a live counter with a neighborhood map, and a legislative win timeline
• A click-through call to action that leads visitors to a chapter-finder by zip code

Feature list

This template includes the following built-in capabilities, each designed to serve the specific purpose of a gun violence prevention grassroots organization.

Full-Screen Video Hero

The header runs handheld community footage on autoplay, slightly slowed, with a single serif headline fading in over it. There is no button here. The moment is given space to breathe before any ask is made.

Named Survivor Testimony Section

Large italic first-person quotes are set against dark space with amber accents on each speaker's name. The staggered reveal animation gives each voice room to land individually rather than competing in a grid.

Real-Time Death Counter with Neighborhood Map

A counter displays local gun deaths for the current year and ticks in real time. It sits alongside a hand-drawn-style neighborhood map SVG marking active intervention zones, pairing urgency with a sense of place.

Legislative Win Timeline

A scrolling timeline shows community actions and policy wins in chronological order. Each node pulses in clearing blue, making momentum visible and giving new visitors a reason to believe that joining produces results.

Scroll-Linked Animation System

The page uses scrollBlur transitions, staggered text reveals, and pulsing node animations throughout. The animation system respects reduced-motion preferences, so the experience adapts without breaking the visual arc.

Click-Through Chapter Join Flow

The primary call to action, "Join Your Block's Chapter", appears first as a quiet text link after the testimonies, then returns as a full-width button after the timeline. A secondary link, "Read the Policy Agenda," serves visitors who need facts before feeling.

Page sections overview

Design & branding system

The visual identity is built around a Community Hearth theme using a Slate and Sky color system. The palette is intentionally narrow and emotionally specific, it evokes the hour when streetlights click off and the sky first turns blue again.

• Background in pre-dawn navy (#1A202C), body text in soft warm white (#FFFAF0), with weathered slate (#4A5568) used for dividers
• Hopeful clearing blue (#63B3ED) drives links, buttons, and timeline node accents throughout
• Candle-glow amber (#F6AD55) appears once per section as a highlight, a name, a statistic, a date, and never competes for attention

Mobile & speed optimization

The template is built mobile-first, because community organizers work from phones. Every section reflows cleanly for small screens without sacrificing the emotional weight of the layout.

• Video autoplay is handled with lazy loading so the hero does not delay the rest of the page on slower connections
• The scroll-linked animation system includes reduced-motion support, adapting for users who have that preference enabled on their device

How this template helps you convert

The landing page is structured as a click-through that earns trust before it asks for anything. Conversion is treated as a relationship, not a transaction.

1. The testimony and evidence sections do the emotional and factual work first, so the chapter-join button arrives after the visitor already understands what they are joining.
2. The zip code chapter-finder on the destination page reduces the commitment to five digits, removing the friction that causes motivated visitors to drop off before acting.

Other information about this template

Hearth uses Fraunces as its serif headline typeface and DM Sans for all body text. This pairing brings warmth and legibility together across both large display headlines and smaller paragraph copy. The footer follows a horizontal flow pattern suited to minimal navigation and a single closing message.

• The template is designed for United States English-language audiences and is localized for domestic gun violence prevention organizing contexts
• Page animation intensity is high by design, but the entire system degrades gracefully when motion is restricted by the visitor's device settings
• The single-column flow structure keeps the scroll path linear and intentional, removing the temptation to branch off before the call to action is reached
• This template is appropriate as a standalone chapter recruitment page or as a campaign-specific launch page for a larger nonprofit web presence

Show more