Hearth - Welcoming Refugee Landing Page Template

Quick summary

Hearth is a campaign landing page for refugee and migration awareness. It arranges personal stories, community event details, and volunteer calls to action inside an asymmetric card grid. The visual identity is warm and editorial. Every section builds emotional weight so that by the time a visitor reaches the registration form, showing up in person feels like the natural next step.

Who this template is for

This template is built for organizations and individuals who work at the ground level of community integration. It speaks directly to the people doing the quiet, consistent work of welcome.

• Church volunteers and welcome committee coordinators who organize community events for newly arrived families
• Local teachers and school staff preparing classrooms and support programs for children from displaced backgrounds
• Municipal workers, nonprofit organizers, and community leaders who want to host a local screening or coordinate a neighborhood event

What problem this template solves

Refugee and migration awareness campaigns often struggle to communicate urgency and humanity at the same time. A generic event page cannot carry the weight of real stories. This template solves that gap.

• It replaces flat event listings with a living mosaic of quotes, photographs, audio clips, and journey objects that accumulate emotional resonance as visitors scroll
• It gives community leaders a clear secondary path to host their own screening without burying that option in a footer link
• It connects individual stories to collective community response, so visitors feel part of something already in motion rather than being asked to start from zero

What you get with this template

You get a fully structured, single-page campaign layout that handles storytelling, social proof, and registration in one continuous scroll. The page is designed to do heavy narrative work before any ask is made.

• A Community Mosaic hero with staggered portrait tile animations and a centered headline
• An asymmetric Testimonial Mosaic card grid mixing text, image, audio waveform, and object cards of varied sizes
• A dual call-to-action system with a sticky registration bar, a full-width form section, and a secondary Host a Screening intake path

Feature list

This template packages several distinct capabilities into one cohesive campaign page. Each feature is designed to serve the specific demands of a refugee and migration awareness campaign.

Staggered Mosaic Hero Animation

The hero section assembles a grid of candid portrait photographs on page load. Each tile fades in a quarter-second apart until the full mosaic resolves. A centered headline in hearthstone white rises from the grid once the assembly completes.

Asymmetric Testimonial Card Grid

The main story section uses cards of intentionally different sizes and types. Some cards are text-only quotes, some are image-heavy, and some are interactive with audio waveform players. The uneven grid feels hand-assembled, reinforcing the quilt-like human quality of the campaign.

Scroll-Linked Community Response Shift

As visitors scroll past individual story cards, the grid transitions into community response content. Local event listings, volunteer sign-up totals, and classroom photographs replace personal fragments. The narrative moves naturally from individual to collective.

Dual Registration Call to Action

The primary call to action, labeled "Save My Seat," appears first as a sticky bottom bar after the third row of cards. It reappears as a full-width section near the page end. The registration form collects first name, email, nearest city via dropdown, and one optional volunteering checkbox.

Host a Screening Secondary Path

Community leaders who want to bring the campaign to their own venue can access a separate intake form through the "Host a Screening" link. This secondary path is built into the page flow without competing with the primary registration goal.

Social Proof Marquee and Counters

The template includes a scrolling marquee of community city names alongside volunteer counts and event attendance numbers. These elements appear between content sections to reinforce that the campaign is already active and growing.

Page sections overview

Design & branding system

The visual identity follows a Community Hearth theme built around a Slate and Sky color palette. Every color choice carries a specific role in the page hierarchy.

• Hearthstone off-white (#F7F0E8) is used as the background, giving the page warmth without harshness; slate (#4A5568) grounds text and card borders; sky blue (#7BADE2) washes over hopeful sections and highlights interactive card hover states
• Ember orange (#D4764E) is reserved exclusively for calls to action and urgent callouts, keeping it visually distinct and always actionable
• Typography pairs Fraunces, a display serif, for headlines with Manrope, a clean sans-serif, for body copy, creating an editorial warmth that feels human rather than institutional

Mobile & speed optimization

The template is designed desktop-first but built with full mobile responsiveness across all sections. The animation system is structured to remain smooth regardless of viewport size.

• Portrait images in the mosaic hero and card grid are lazy-loaded, so the page does not request assets until they enter the visible area
• Staggered Intersection Observer triggers control when card animations fire, preventing layout shifts and keeping the scroll experience smooth on smaller screens

How this template helps you convert

The conversion strategy is built on accumulation. Visitors are not asked to register before they understand why it matters. The page earns the click through proximity to real stories.

1. The mosaic hero and testimonial card grid build emotional investment across multiple scroll steps before any registration prompt appears, so the ask feels earned rather than abrupt
2. The sticky bottom bar keeps the "Save My Seat" call to action visible without interrupting the storytelling flow, and the full-width form section reinforces the ask with a simple, low-friction form that takes under a minute to complete

Other information about this template

This template is built specifically for the Community and Nonprofit category, with a focus on the Refugee and Migration Awareness Campaign niche. It is well-suited for organizations running time-sensitive event campaigns that need both emotional depth and a practical registration path.

• The template style is Card Grid (Modular), making individual story cards easy to update or replace as campaign content evolves
• The page direction is Event Registration, meaning every structural decision from section order to call-to-action placement supports a single measurable outcome
• The template supports US-centric city name localization in the registration dropdown and the social proof marquee out of the box

Show more