Passage is a hero-dominant landing page template built for refugee and migration social enterprises. It guides displaced families through every stage of resettlement using a scroll-driven Hero's Journey layout, ungated resource previews, multilingual toolkit downloads, and named testimonial cards. The Civic Service design system combines charcoal, slate, sky blue, and amber for a tone that feels both institutional and genuinely warm.
by Rocket studio
Loading preview…
Quick summary
Passage is a single-page template designed for resettlement-focused social enterprises. It opens with a floating testimonial card, moves the visitor through a scroll-linked milestone timeline, and closes with a downloadable multilingual toolkit. Every section earns trust before asking for anything. The result is a landing page that feels like a steady hand rather than a pitch.
Who this template is for
This template is built for organizations that support displaced people through every stage of resettlement, not just arrival. It suits teams that need to communicate both urgency and competence without relying on charity-style guilt.
Refugee resettlement nonprofits and social enterprises publishing practical guides and legal resources
Caseworkers and resettlement agencies that need a multilingual content hub to share with clients
Community organizations serving Syrian, Eritrean, Colombian, Afghan, or other displaced populations
What problem this template solves
Most resettlement pages stop at awareness. They show the scale of a crisis but leave visitors with no clear next step. Displaced individuals arrive at these pages on a phone, often at night, looking for something specific, and they leave empty-handed. Passage solves this directly.
Ungated resource previews let visitors see real value before submitting an email, removing the friction that costs trust
A scroll-driven journey structure guides both displaced families and partner organizations through the full resettlement arc
Multilingual support signals at every resource card that the content was made for them, not about them
What you get with this template
Passage is a fully structured landing page with six distinct sections, each designed to deepen trust before the next one asks anything. The layout, copy structure, and interaction patterns are all included.
A hero section built around a single oversized testimonial card floating over a cinematic charcoal field
A horizontal scroll-fill milestone timeline covering border registration, language assessment, housing match, and employment placement
Theme
Civic Service
Creative direction
Hero's Journey
Color system
Slate & Sky
Style
Hero-Dominant (90/10)
Direction
Content/Resource
Page Sections
Floating Testimonial Hero Card
Scroll-linked Milestone Timeline
Ungated Resource Card Stacks
Multilingual Toolkit Download Form
Mid-career Proof Testimonial Cards
Crisis Statistics Section
Related questions
Who is the primary audience for this landing page template?
Can the resource cards be used without requiring visitors to submit their email first?
What languages does the toolkit download form support?
Is this template suitable for a casework organization rather than a direct-service enterprise?
What makes the testimonial section different from a standard quote block?
A resource section with ungated card stacks, an email capture form, and a language-preference dropdown for English, Arabic, Spanish, Tigrinya, and French
Feature list
This template includes purposefully built features that serve both the organization and the people it supports.
Floating Testimonial Hero Card
The header is a single white card, softly shadowed against a deep charcoal field. It holds a portrait photograph, a two-sentence quote set in large serif type, and the person's first name, country of origin, and arrival year. No logo competes for attention. The card communicates credibility before the visitor reads a single word of body copy.
Scroll-Linked Milestone Timeline
A horizontal timeline fills in as the visitor scrolls, tracing real resettlement milestones from border registration to employment placement. The animation is scroll-linked and medium intensity, giving the content a sense of forward motion without overwhelming users on low-data connections.
Ungated Resource Card Stacks
Every guide, legal explainer, and multilingual resource kit shows its first page before any form appears. The preview is the proof. Visitors browse real content, then choose to download by entering an email address and selecting a language preference.
Multilingual Toolkit Download Form
The primary call to action is "Download the Resettlement Toolkit." A single email field and a language-preference dropdown covering five languages keep the form simple. The amber color is reserved exclusively for this interaction, making the ask visible without being aggressive.
Mid-Career Proof Testimonial Cards
The final section returns to the same people introduced in the hero, now shown mid-career, mid-life, and mid-sentence. Staggered card reveals let each story land separately. These cards function as evidence that the journey ends somewhere real.
Crisis Statistics Section
One short, unflinching paragraph and a single statistic rendered at enormous scale anchor the emotional truth of the page. This section does not ask for anything. It simply states what is true, earning the visitor's attention for every section that follows.
Page sections overview
Section
Purpose
Hero Testimonial Card
Opens with a named, photographed testimonial floating over the charcoal field to establish immediate human credibility
The Crisis
Presents one large-scale statistic and a single honest paragraph to anchor urgency without melodrama
The Journey Timeline
Scroll-linked horizontal timeline traces real resettlement milestones and gives displaced visitors a map of what comes next
The Toolkit
Ungated resource card stacks with previews, followed by the email form and language-preference dropdown
The Return
Mid-career testimonial proof cards showing named individuals in stable, mid-life moments
Footer
Linear single-row institutional footer, minimal and clean
Design & branding system
The Civic Service visual identity uses a four-color system that feels like the facade of a well-run public building on a clear morning: sober and trustworthy, with enough warmth to signal safety. Typography pairs Fraunces serif for pull quotes and testimonials with DM Sans for all body text and interface elements.
Charcoal (#1E2A35) frames the header and footer; slate (#3D4F5F) anchors body text and section backgrounds; sky blue (#6AAFE6) washes data callouts and icon fields
Warm signal amber (#E8A838) appears only on calls to action and pull quotes, reserving its energy for moments that ask something of the visitor
Portrait photographs use natural light and a direct gaze, reinforcing the human-first tone of the entire layout
Mobile & speed optimization
The template is built mobile-first, reflecting the reality that primary users are likely on phones with limited data connections. Interactions are kept intentional rather than decorative.
Scroll-linked timeline reveals and staggered card animations use medium intensity, keeping motion meaningful without adding unnecessary load
Server Components handle static content delivery, with minimal JavaScript reserved for interactive elements like the timeline fill and resource preview
Resource card stacks are designed for thumb navigation, and the download form uses a single email field plus one dropdown to minimize typing on small screens
How this template helps you convert
Passage converts by demonstrating value before requesting anything. Every section builds on the trust established by the one before it, so the call to action at the end feels earned rather than demanded.
Ungated resource previews show the first page of every guide before the form appears, proving the toolkit is worth downloading before the visitor commits an email address
The amber call-to-action button and the "Read More Stories" secondary path give visitors two distinct next steps, matching the intent of both first-time visitors and returning users who want deeper context
Other information about this template
Passage is designed specifically for the refugee and migration social enterprise space, where trust is the primary currency and every friction point costs a real person time they may not have.
The template supports five languages in its resource dropdown: English, Arabic, Spanish, Tigrinya, and French
A secondary call to action, "Read More Stories," links to a long-form archive, giving caseworkers and partner organizations a path to deeper content without interrupting the primary download flow
The Hero's Journey creative direction is not decorative. It mirrors the actual arc of resettlement, so displaced visitors recognize their own experience in the page structure
The footer uses Pattern 1, a linear single-row institutional layout, keeping the close of the page clean and consistent with the civic service tone
