Belong is a masonry-layout landing page template built for immigrant workforce development organizations. It guides visitors through a Hero's Journey scroll experience, from a bold #ReadyToWork hero to dual conversion forms. With a Healing Space visual identity and two distinct conversion paths, it connects resettlement caseworkers, HR directors, and ESL coordinators with a structured immigrant talent pipeline.
by Rocket studio
Loading preview…
Quick summary
Belong is a single-page, masonry-style landing page template designed for immigrant workforce development nonprofits. It opens with a movement-style hero declaration, walks visitors through a cinematic scroll journey, and closes with two earned conversion forms. The design is warm, editorial, and built to serve multiple audiences at once: caseworkers, employers, and coordinators.
Who this template is for
This template is built for nonprofit workforce programs that help newly arrived immigrants find employment. It speaks clearly to three distinct audiences and gives each one a path forward.
Resettlement caseworkers who need a low-friction way to refer participants to a trusted program
HR directors at manufacturing plants and healthcare systems looking for a reliable, work-ready talent pipeline
ESL coordinators and community college partners seeking wrap-around workforce support
What problem this template solves
Immigrant workforce programs often struggle to communicate their value to very different audiences at once. A caseworker needs simplicity. An HR director needs proof. A funder needs confidence. Most templates force a single message when three distinct conversations need to happen on the same page.
Skilled immigrants go unrecognized because their credentials are not legible in a new country
Employers need trustworthy talent pipelines but rarely know where to look
Caseworkers face high caseloads and need referral tools that are fast and easy to use
What you get with this template
You get a fully structured, scroll-driven landing page with five content sections and a dual conversion system. Every visual and copy decision in the template is grounded in the real experience of immigrant workforce navigation.
A Hero's Journey masonry grid with eight card stages that shift from desaturated slate tones to vivid sky blues and dawn ambers as visitors scroll
Two conversion paths: a primary "Partner With Us" form and a secondary "Refer a Participant" card, each surfaced at the right scroll depth
Theme
Healing Space
Creative direction
Hero's Journey
Color system
Slate & Sky
Style
Masonry/Pinterest
Direction
Lead Generation
Page Sections
#readytowork Movement Hero
Scroll-linked Color Journey
Dual Conversion Path System
Arrival Story Card
Bilingual Pull-quote Cards
Outcome Data Cards
Related questions
Who is this template built for?
Can I use this template for a single program or a full organization?
How does the masonry grid work in this template?
What does the 'Refer a Participant' form ask for?
Does this template include social proof elements?
Pull-quote cards with participant voices in native scripts alongside English translations, plus data cards showing placement and retention outcomes
Feature list
This template delivers a connected set of purposeful features. Each one is designed to earn trust before asking for action.
#ReadyToWork Movement Hero
The header opens with a bold, oversized hashtag set against a slow-panning mosaic of real participant portraits. Each person is mid-action: adjusting a hard hat, holding a stethoscope, shaking a hand. The hashtag pulses once on load, then settles as the tagline fades in beneath it.
Scroll-Linked Color Journey
The masonry grid transitions from desaturated slate tones at the top to vivid sky blues and warm amber toward the bottom. As visitors scroll, the page literally brightens, reinforcing the emotional arc of the journey from arrival to employment.
Dual Conversion Path System
A sticky amber "Partner With Us" button appears after the third scroll section. A secondary "Refer a Participant" card surfaces mid-grid in a sky-blue outline style. Each form asks only what it needs, keeping friction low for both caseworkers and employer contacts.
Arrival Story Card
A single intimate participant card opens the scroll journey, setting an "ordinary world" frame before the masonry grid begins. It tells one person's arrival story in their own words, over a muted photo card, grounding the experience in a human moment.
Social Proof Data Cards
Interspersed throughout the masonry grid, dedicated data cards display placement rates and 90-day employer retention numbers. These outcome cards are positioned before the conversion forms so visitors see results before they are asked to act.
Pull-Quote Bilingual Cards
Participant voices appear in their native scripts alongside English translations. These pull-quote cards are sized variably within the masonry layout, giving each story room to breathe and reinforcing the multilingual reality of the communities this program serves.
Page sections overview
Section
Purpose
Hero Mosaic
Open with #ReadyToWork declaration and participant portrait grid
Arrival Story Card
Ground visitors in one participant's real arrival narrative
Journey Masonry Grid
Walk through eight program stages from assessment to first paycheck
Outcomes and Proof
Display placement rates, retention data, and pull quotes
Partner and Refer Forms
Surface dual conversion paths earned by scroll depth
Footer Arc Split
Present logo, tagline, and navigation links in split layout
Design & branding system
The template uses a Healing Space visual identity built on four deliberate colors. The palette evokes stepping outside after a long winter: stone underfoot, open sky overhead, and the first warmth of morning.
Charcoal slate (#3B4252) for text and structural elements, open-sky blue (#7EB8DA) as the primary accent, and soft cloud white (#F4F7FA) for card backgrounds and breathing space
Warm dawn amber (#E8A838) reserved exclusively for calls to action and moments of triumph within the journey
Fraunces serif display type paired with DM Sans body text creates a warm editorial tone that feels like a community bulletin board rather than a corporate brochure
Mobile & speed optimization
The template is designed desktop-first to serve caseworkers at their workstations, with full mobile responsiveness for HR directors and coordinators on the go. The layout adapts without losing the masonry card rhythm.
Lazy loading and Next.js Image optimization keep the portrait-heavy grid from slowing the scroll experience
Server Components handle static sections so the page feels fast even with high animation and interactivity levels
The sticky call-to-action button remains accessible on both desktop and mobile viewports throughout the scroll
How this template helps you convert
The conversion strategy is built on earned trust. Visitors see outcomes before they see a form. By the time a caseworker or HR director reaches either call to action, they have already moved through six participant stories and concrete data.
The "Partner With Us" sticky button appears after the third section, asking for organization name, role, population size or hiring needs, and preferred contact method. It surfaces only after the proof is already visible.
The "Refer a Participant" card appears mid-grid, styled to match the masonry layout. It asks only for the referrer's name, the participant's first name, and a phone number, keeping the bar low for a busy caseworker.
Other information about this template
This template belongs to the Community and Nonprofit category, under the Immigrant and Refugee Support subcategory. It is built specifically for the immigrant workforce development niche, where both human warmth and measurable outcomes matter equally.
The template is built on a Masonry/Pinterest layout style with high animation and scroll-linked interactivity including card reveals and horizontal scroll elements
The creative direction follows a Hero's Journey structure, a narrative arc that moves from the "ordinary world" of arrival through assessment, language coaching, credential recognition, mock interviews, job placement, and first paycheck
The header concept is a Hashtag/Movement frame, using #ReadyToWork as a movement-style declaration rather than a traditional tagline, giving the nonprofit a campaign identity built into the page itself
