Hearth - Compassionate Refugee Landing Page Template

Quick summary

Hearth is a donation-focused landing page template for refugee aid and resettlement organizations. It guides visitors through an origin story, animated impact counters, and a week-by-week family timeline before presenting a transparent, preset donation form. The Forest Trust color system and single-column flow create an intimate, campfire-conversation experience that builds trust and moves visitors toward giving.

Who this template is for

This template is built for mission-driven organizations that need a fundraising page as emotionally grounded as the work they do. It suits teams who want donors to feel connected to a specific family, not just a cause.

• Diaspora-led giving circles and community groups raising funds for resettlement support
• Church congregations sponsoring named families through the resettlement process
• Corporate social responsibility teams that need transparent impact reporting for internal stakeholders

What problem this template solves

Most nonprofit fundraising pages feel distant. They show statistics without stories and ask for money before donors understand where it goes. Hearth closes that gap by building intimacy first and asking second.

• Donors cannot see exactly where their money lands, which reduces giving confidence
• Organizations struggle to communicate week-by-week impact in a format that feels human, not bureaucratic
• Recurring giving options are often buried or confusing, reducing long-term donor retention

What you get with this template

You get a fully structured, single-column landing page designed specifically for refugee and migration fundraising. Every section is sequenced to build emotional investment before presenting the donation ask.

• A user-generated photo mosaic header with parallax scrolling and a hand-written-style headline
• Animated impact counters, a week-by-week family timeline, and a preset donation form with a recurring giving toggle
• A trust row featuring charity ratings, financial transparency figures, and a live donation feed showing first names and cities

Feature list

This template includes purpose-built sections and interactions designed for donation-first, story-led campaigns.

UGC Photo Mosaic Header

The header displays a casually arranged mosaic of real, unpolished photographs submitted by resettled families and volunteers. Images overlap and tilt as if pinned to a bulletin board. As the visitor scrolls, the mosaic shifts with a gentle parallax effect. A hand-written-style headline emerges from the center of the composition.

Animated Impact Counters

A dedicated section displays key organizational statistics: families resettled, meals delivered, and legal cases supported. Each number animates upward as it enters the viewport, using an IntersectionObserver trigger so the count-up only fires when the visitor actually sees it.

Week-by-Week Family Timeline

Bento-style cards lay out exactly where donations go, week by week. Week one covers temporary shelter, week three covers language classes, and week eight marks a signed lease. This format shows donors the specific outcome their gift enables rather than a vague promise.

Preset Donation Form with Recurring Toggle

The donation form offers labeled preset amounts tied to tangible outcomes: $35 covers one week of groceries, $120 funds a legal consultation, and $500 supports the first month's rent. A custom amount field sits alongside the presets. A single tap toggles between one-time and monthly recurring giving.

Sticky Call-to-Action Bar

After the visitor scrolls past the impact timeline, a sticky bottom bar appears with the primary call to action: "Fund a Family's Next Chapter." The bar stays visible as the donor continues reading, keeping the giving path accessible without being intrusive.

Live Donation Feed and Trust Row

Below the form, a trust row displays charity ratings and financial transparency figures. A real-time feed shows recent donations by first name and city, reinforcing that others are already giving and that the organization is openly accountable.

Page sections overview

Design & branding system

The Forest Trust color system anchors every design decision in warmth and organic texture. The palette was built to feel like a cabin in a clearing rather than a corporate campaign page.

• Deep evergreen (#1B3A2D) dominates the upper scroll as the primary background, shifting to soft birch (#F4EDE4) as the page opens up in lower sections
• Hearthstone amber (#D4913B) appears only on donation buttons and progress bars, reserving its visual weight for moments that require action
• Typography pairs Fraunces, a warm serif, for headlines with DM Sans, a clean sans-serif, for body copy; section transitions use soft fades rather than hard cuts

Mobile & speed optimization

This template is built mobile-first, reflecting the reality that diaspora donors often give from phones during emotional, unplanned moments. Every layout decision prioritizes small-screen readability and touch interaction.

• Images are lazy-loaded so the page remains responsive even with a heavy photo mosaic header
• Impact counters fire via IntersectionObserver, meaning animations only trigger when visible, keeping scroll performance smooth
• The sticky call-to-action bar and donation form toggle are designed for one-thumb interaction on portrait-orientation screens

How this template helps you convert

Hearth earns the donation ask by building intimacy across every scroll section before the form appears. The conversion path is deliberate and unhurried.

1. The origin story and family timeline create a personal, named connection between the donor and the recipient, so the giving decision feels relational rather than transactional.
2. The sticky "Fund a Family's Next Chapter" bar keeps the call to action present without interrupting the story, letting donors act the moment they feel ready.
3. The live donation feed and trust row provide visible social proof and financial accountability right at the point of decision, removing the final hesitation before a gift is made.

Other information about this template

Hearth is a single-page template, not a multi-page website. It is designed for campaigns and organizations that want a focused, distraction-free giving experience.

• The template is built for English-language campaigns, with United States dollar amounts and MM/DD/YYYY date formatting as defaults
• The Community Hearth theme is intentionally organic and intimate, avoiding corporate design patterns that can feel cold or detached in a refugee aid context
• The footer follows a minimal horizontal flow pattern, keeping the page closure clean and uncluttered after the donation form
• This template is well-suited for organizations running named-family sponsorship programs, where donors want to follow a specific family's resettlement journey over time

Show more