Passage - Transformative Refugee Landing Page Template

Quick summary

Passage is a click-through landing page template for nonprofit immigration advocacy organizations. It uses a Hero's Journey card grid to move visitors from crisis to resolution through real family stories. The Botanical color system and warm editorial visuals build trust before a single ask is made. The primary call to action links out to a dedicated signup page.

Who this template is for

This template is built for organizations that accompany families through the full arc of the immigration process, not just one part of it. It speaks to groups that lead with humanity before asking for anything.

• Refugee resettlement nonprofits and immigration legal aid organizations
• Advocacy groups offering translation, community navigation, and school enrollment support
• Nonprofit communications teams who want donors and volunteers to feel the mission before seeing a button

What problem this template solves

Most nonprofit landing pages lead with their org chart, not the people they serve. Visitors leave before they feel anything. This template flips that structure entirely.

• It opens with arrival-day family stories, not service lists, so visitors connect immediately
• It shows the middle of the journey, legal prep, language classes, first interviews, so donors understand the depth of the work
• It withholds the call to action until visitors have already walked through three complete story arcs, making the ask feel earned rather than transactional

What you get with this template

You get a fully structured, single-page layout built around a modular card grid. Every section has a defined purpose within the Hero's Journey narrative arc.

• A cinematic team photo hero with a floating statistics strip for families served, languages covered, and years of operation
• Three card rows mapping the before, through, and after of a family's immigration journey, each row serving a distinct narrative and functional purpose
• A coral call-to-action section with three volunteer paths and a fixed bottom bar that persists after the resolution cards

Feature list

The template includes a focused set of components designed to carry emotional weight and drive action.

Hero's Journey Card Grid

The page is organized as three distinct card rows. The first row shows arrival-day snapshots. The middle row reveals services through the eyes of the person receiving them. The final row closes each family's arc with resolution moments like lease signings and graduations.

Cinematic Team Photo Header

The hero section uses a wide, warm-lit team-at-work photograph rather than posed stock imagery. The composition places lawyers, translators, and navigators mid-task, alongside the families they serve, to establish credibility and warmth from the first scroll.

Floating Statistics Strip

A stats strip overlays the hero section and displays key figures, families served, languages supported, years of operation. The numbers use counter animations on scroll to draw attention without interrupting the visual narrative.

Named Family Story Cards

Each card in the grid is anchored to a named individual or family. The before and after cards are designed to echo each other, so visitors trace a specific family's journey across the full page.

Coral Call-to-Action System

The primary "Walk With a Family" button appears in coral only after the mid-journey section. It repeats as a fixed bottom bar following the resolution cards. The two-stage placement is intentional: trust is built before the ask is visible.

Fixed Bottom Action Bar

After the resolution row, a persistent coral bar remains in view as the visitor scrolls. It links to a dedicated page where visitors choose between donating, volunteering legal hours, or offering translation skills, no form lives on this page.

Page sections overview

Design & branding system

The Botanical color system anchors every visual decision in this template. The palette feels rooted and warm, like a community garden in early summer, patient and alive.

• Parchment (#F5F0E8) dominates all card and page backgrounds so content breathes; soil brown (#3E2723) anchors headlines and navigation; fern green (#4A7C59) marks progress indicators and success story elements
• Coral (#E07A5F) is reserved exclusively for buttons and urgent callouts, appearing only where action is needed, warm as an offered hand
• Typography pairs Fraunces serif for headlines with DM Sans for body text, creating an editorial warmth that feels human rather than institutional

Mobile & speed optimization

The template is built mobile-first, reflecting how families in need most often find the page, on a phone. Donors on desktop receive the same structured experience at a wider layout.

• Card grid modules reflow cleanly for smaller screens, keeping named family stories readable at every viewport size
• Images are optimized for fast loading, and static content sections use server components to reduce unnecessary rendering work
• Scroll-reveal animations and staggered card entrances are set to medium intensity, so they enhance the narrative without slowing the experience on mobile connections

How this template helps you convert

The page earns trust before it asks for anything. By the time coral appears, visitors have already followed three families through a complete journey.

1. The Hero's Journey structure ensures visitors are emotionally invested before the call to action is visible, reducing the friction that causes early exits on traditional nonprofit pages.
2. Named family stories and concrete statistics act as social proof woven into the page's design, not isolated testimonial blocks, so credibility feels organic rather than marketed.
3. The fixed bottom bar and click-through model send visitors to a dedicated signup page where they choose their own path, donate, volunteer legal hours, or offer translation skills, matching their motivation to a specific action.

Other information about this template

This template is part of a broader Family First theme collection designed for community-focused and mission-driven organizations.

• The page is localized for a United States audience, with English copy and USD donation context in mind
• Scroll-reveal animations, stagger effects, and card hover states are included at medium intensity to support narrative pacing without overwhelming the content
• The template does not include a form on the landing page itself; the call-to-action button clicks through to a separate dedicated signup or donation page

Show more