Passage - Trusted Resettlement Landing Page Template

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
• 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

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.

1. 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
2. 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

Show more