Home
Templates
Community & Nonprofit
Refugee & Migration Nonprofit
Refuge - Compassionate Migration Landing Page Template
Refuge is a single-column flow landing page template built for refugee and migration direct service nonprofits. It combines a cinematic full-bleed hero, a narrative scroll structure, and a focused event registration form to move community sponsors, faith partners, and donors from emotional connection to concrete action, all within one warm, dignified page.
by Rocket studio
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.
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.
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.
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.




Theme
Family First
Creative direction
Vision & Mission
Color system
Desert Rose
Style
Single Column Flow
Direction
Event Registration
Page Sections
Cinematic Full-bleed Hero with Text Rise
Three-movement Narrative Scroll
Sticky Event Registration Call to Action
Dual-path Event Registration Form
GSAP Scrolltrigger Animation Suite
Desert Rose Color and Typography Pairing
Can I update the event registration form fields?
Does the template include a secondary email capture path?
How does the sticky call to action bar behave on scroll?
Can I replace the hero photograph with my own image?
What kind of nonprofit is this template best suited for?
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.
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.
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.
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.
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.
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.
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.
| Section | Purpose |
|---|---|
| Full-Bleed Hero | Opens with a documentary photograph; a single text line rises from the bottom to establish emotional tone |
| Crisis Numbers Block | Names the local situation in specific statistics and a first-72-hours narrative |
| Mission Moments | Presents photographed real-life service moments to ground the mission in daily reality |
| Vision Forward | Introduces named future programs and positions the upcoming event as the next concrete step |
| Event Registration Form | Captures registrations via a three-field form with a connection-context dropdown |
| Secondary Email Path | Offers an email-only capture for readers who cannot attend the event |
| Sticky Call to Action Bar | Keeps the "Reserve Your Seat" button pinned to the viewport throughout the scroll |
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.
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.
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.
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.