Refuge - Compassionate Migration Landing Page Template

Quick summary

Refuge is a landing page template designed for nonprofit organizations serving recently resettled families. It opens with a full-bleed documentary photograph and unfolds like a letter to a first-time donor, naming the crisis in local terms, showing mission in photographed moments, casting a vision forward, and closing with a focused event registration form that makes the next step feel obvious and necessary.

Who this template is for

This template was built for direct service nonprofits working at the intersection of refugee resettlement, community sponsorship, and family advocacy. It suits organizations that need to communicate urgency and warmth in the same breath.

• Refugee and migration direct service providers hosting community fundraising or awareness events
• Nonprofit communications teams needing a dignified, story-led page that converts visitors to registrants or email subscribers
• Faith partners, community sponsor networks, and resettlement coordinators building public-facing outreach pages

What problem this template solves

Resettlement nonprofits often struggle to translate the weight of their work into a page that moves people to act. Generic templates flatten the story. Cluttered layouts bury the call to action. Refuge solves that.

• The narrative scroll replaces abstract mission statements with specific, local details that build genuine trust before asking anything of the reader
• The sticky registration call to action keeps the primary next step visible without interrupting the story
• The dual-path form captures both committed registrants and readers who are not ready to attend but want to stay connected

What you get with this template

Refuge delivers a complete single-column flow landing page structured around five purposeful sections. Every element is designed to serve the reader first and earn the conversion second.

• A cinematic hero with a text-rise animation, a crisis section with space for real local statistics, a mission moments section, a vision-forward narrative block, and a full event registration form
• A Desert Rose color system built on terracotta, clay white, deep henna, and saffron, paired with Fraunces serif headlines and DM Sans body text
• A sticky call to action bar, a registration form with a connection-context dropdown, and a secondary email-only capture path for readers who cannot attend

Feature list

This template is built around a small set of carefully considered features. Each one serves the page's core purpose: helping a nonprofit tell a true story and convert caring readers into present participants.

Cinematic Full-Bleed Hero

The hero opens with a full-bleed documentary photograph and no headline, just the image holding the screen. A single line of text rises from the bottom using a GSAP ScrollTrigger text-rise animation, setting the emotional tone before the reader has scrolled a single pixel.

Narrative Scroll Structure

The page unfolds in three distinct movements. The first names the crisis using specific local numbers and a first-72-hours narrative. The second shows mission through photographed real-life moments. The third casts the vision forward with named programs and an upcoming event positioned as the bridge between present reality and future possibility.

Sticky Event Registration Call to Action

A saffron-on-henna "Reserve Your Seat" button is pinned to the bottom of the viewport on scroll. It appears after the mission section and stays visible throughout the rest of the page, keeping the primary conversion action reachable at every moment without breaking the reading experience.

Dual-Path Registration Form

The registration form collects full name, email, and a single dropdown asking "How are you connected to our work?" with options including Community Sponsor, Faith Partner, New Neighbor, and Just Learning. A secondary path below the form captures email only for readers who cannot attend, ensuring no interested visitor leaves without a way to stay connected.

GSAP-Powered Animation Suite

The template uses GSAP ScrollTrigger throughout, image reveal curtains on mission moment photographs, parallax depth on the hero, and text-rise entrances on section headings. Animations are handled by client-side components, while static structural sections use server-side rendering for stability.

Desert Rose Color and Typography System

The Desert Rose palette pairs sun-warmed terracotta, soft clay white, deep henna, and quiet saffron to create a visual identity that feels lived-in and dignified. Fraunces handles all headlines with editorial weight, while DM Sans keeps body copy clean and readable at every size.

Page sections overview

Design & branding system

The Desert Rose color system was built specifically to feel warm without performing warmth. Every color choice supports dignified storytelling rather than charity-sector visual clichés.

• Terracotta (#C98A7D), clay white (#F5EDE3), deep henna (#6B3A3A), and saffron (#D4A843) form the full palette, with saffron reserved for buttons and urgency markers only
• Fraunces serif headlines carry editorial weight for section titles and the hero text rise, while DM Sans body text keeps long reading passages clean and accessible
• The warm editorial style is intentionally letter-like in its scroll rhythm, designed to feel like a personal communication rather than an institutional announcement

Mobile & speed optimization

This template was built with a mobile-first priority because the people most likely to act, caseworkers, community sponsors, and faith partners, are most often checking their phones.

• The single-column flow adapts naturally to narrow screens without layout restructuring; the sticky call to action bar is positioned for thumb-reach on mobile viewports
• GSAP animations and the interactive registration form are handled by client-side components, while all static structural sections use server components, keeping the initial load focused and the interactive layer contained
• The full-bleed hero image uses shallow depth of field to keep file weight manageable while maintaining photographic impact at all screen sizes

How this template helps you convert

Refuge earns its conversions by making the reader feel something real before it asks them to do anything. The page is built around a deliberate sequence that reduces friction at every stage.

1. The opening hero and crisis section build emotional understanding and organizational credibility before any call to action appears, so the reader arrives at the form already invested rather than cold
2. The sticky "Reserve Your Seat" bar keeps the primary conversion action visible after the mission section without interrupting the narrative scroll, meaning readers never have to search for what to do next
3. The secondary email-only path ensures that readers who connect with the story but cannot attend still have a low-friction way to stay in relationship with the organization, expanding the total conversion surface of the page

Other information about this template

Refuge is part of a broader Family First design theme, which prioritizes human connection and lived-in warmth over institutional polish. The template style is Single Column Flow, keeping the reading experience linear and unbroken from hero to form.

• The creative direction follows a Vision and Mission framework, structuring the page narrative as a letter to a donor who has never visited an intake office
• The header concept is a Full-Bleed Photo with no logo and no headline in the first beat, a deliberate choice to center the human moment before any organizational identity
• The landing page direction is Event Registration, meaning every design and copy decision is ultimately oriented toward the "Reserve Your Seat" conversion and the secondary email capture path
• This template is localized for United States-based nonprofit use, with English-language copy, USD currency context, and a form structure suited to domestic community outreach events

Show more