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
Loading preview…
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
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
Related questions
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?
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
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
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.
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
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
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
