Belong is a single-page landing page template built for refugee youth after-school programs. It uses a zigzag storytelling layout to introduce young participants by name, showcase their civic service work, and move visitors toward partnership. The design blends civic warmth with community-center energy, making donors, site hosts, and mentors feel expected from the first scroll.
by Rocket studio
Loading preview…
Quick summary
Belong is a lead generation landing page template for refugee youth programs. It pairs a bold manifesto header with an alternating photo-and-story layout that builds emotional stakes from personal to civic. By the time the partner form appears, visitors have already met five young people by name and seen their work firsthand.
Who this template is for
This template is built for nonprofit teams running after-school or civic service programs that serve recently resettled young people. It speaks directly to the people those programs need to reach.
Suburban congregation leaders, municipal grant officers, and corporate social responsibility leads looking for visible, specific impact
Program coordinators who want donors and site hosts to feel like collaborators rather than check-writers
Outreach staff who need a page that works at events, in grant proposals, and on mobile devices
What problem this template solves
Refugee youth programs often struggle to communicate the full scope of what young participants actually do. A PDF brochure or generic donation page cannot carry the weight of a teenager testifying at a city council meeting. Potential partners scroll past vague impact claims because nothing makes the work feel real or urgent.
Donors cannot connect with statistics alone; they need faces, names, and specific actions
Programs waste credibility by leading with need instead of demonstrating capability and civic contribution
A single form with no context asks too much too soon, and low-commitment secondary paths are missing
What you get with this template
The template delivers a fully structured, single-page layout with every section pre-designed and purposefully ordered. Nothing needs to be invented from scratch.
A manifesto hero header with enormous Fraunces serif typography on birch white, attributed to a named youth participant
Three alternating zigzag story panels pairing candid photography with first-person participant quotes
An impact statistics strip, a primary partner form with a role dropdown, a secondary PDF download call to action, and a linear single-row footer
Theme
Civic Service
Creative direction
Community Gallery
Color system
Forest Trust
Style
Zigzag/Alternating
Direction
Lead Generation
Page Sections
Manifesto Hero with Gold Pulse Arrow
Zigzag Alternating Story Panels
Impact Statistics Credibility Strip
Partner Form with Role Dropdown
Low-commitment PDF Lead Capture
Scroll-linked Reveal Animations
Related questions
Can I update the youth stories and photographs for each new cohort?
Does the partner form support more than one dropdown option?
Is this template suitable for a small program with limited photos?
Can the impact report download section be removed if we do not have a PDF ready?
Who is the primary audience this landing page is designed to reach?
Feature list
This template includes purpose-built components that work together to earn trust and prompt action before asking anything of the visitor.
Manifesto Hero Header
The opening section displays a large-format quote in Fraunces serif on a soft birch white background. No image competes with the words. A single meadow-gold animated arrow pulses downward below the fold line, drawing the scroll without distraction.
Zigzag Story Layout
Three alternating sections each pair a full-color candid photograph with the participant's own words. The layout flips left-right as you descend. Stakes build deliberately from a garden plot to a classroom to a city council meeting, mirroring the program's arc from personal service to civic voice.
Impact Statistics Strip
A horizontal credibility bar sits between the stories and the partner form. It anchors the emotional storytelling with cohort numbers and specific civic outcomes, giving grant officers and corporate leads the quantitative reference they need.
Partner Form with Role Dropdown
The primary call to action reads "Partner With Our Youth" in meadow gold. The form asks for name, organization, and a single dropdown offering three clear roles: fund a cohort, host a service site, or volunteer as a mentor. The form appears after the third story, once visitors have already met the participants.
Secondary Impact Report Path
A low-commitment secondary call to action offers a downloadable impact report in exchange for an email address only. This path captures leads who are not yet ready to commit to a partnership role but want to stay informed.
Scroll-Linked Reveal Animations
Sections animate into view as the visitor scrolls. Story panels use staggered entrance reveals, image panels respond to hover, and the gold pulse on the hero arrow is continuous. Animation intensity is set to medium, keeping the page lively without overwhelming the content.
Page sections overview
Section
Purpose
Manifesto Hero Header
Opens with a named youth quote in large typography to establish voice and tone immediately
Zigzag Story One
Introduces a garden service moment with a candid photo and first-person participant words
Zigzag Story Two
Shifts to a classroom scene, deepening the sense of academic and civic engagement
Zigzag Story Three
Escalates to a city council setting, showing the program's civic impact at a community scale
Impact Statistics Strip
Provides credibility numbers for grant officers and corporate reviewers
Partner Form Section
Presents the primary call to action with a role-selection dropdown after emotional context is built
Impact Report Download
Offers a secondary, low-commitment PDF lead capture for visitors not yet ready to partner
Footer
Displays a clean linear single-row footer with essential program links
Design & branding system
The visual identity follows a Civic Service theme built on the Forest Trust color system. Every color choice has a functional role, not just a decorative one.
Deep evergreen (#1B4332) anchors backgrounds and section headers; warm bark brown (#5C4033) grounds body text; meadow gold (#DAA520) marks every call to action and pull quote; soft birch white (#FAF3E0) opens breathing room between sections
Typography pairs Fraunces, a warm serif display face, for headlines and quotes with DM Sans, a clean humanist sans-serif, for body copy and form labels
The overall aesthetic evokes a community-center gymnasium with hand-painted mural energy: grounded, sheltering, and alive with the sense that something real is happening here
Mobile & speed optimization
The template is designed desktop-first but built with mobile-responsive behavior in mind. Donors and grant officers frequently browse on phones while at events or in meetings.
The zigzag layout reflows to a single-column stack on smaller screens, keeping each story panel readable without horizontal scrolling
Static sections use server-rendered components and images are optimized for fast loading, keeping the page responsive across devices
The partner form and impact report download are both fully functional on mobile, so no lead path is lost on a smaller screen
How this template helps you convert
Every layout decision in this template is built to reduce friction and build trust before the ask appears.
The manifesto header establishes the program's voice in the first three seconds, giving visitors a reason to keep scrolling before a single statistic or donation ask appears
The zigzag story sequence introduces participants by name and specific action, so the partner form feels like a natural next step rather than a cold request
Two distinct conversion paths, the partner form and the impact report download, capture visitors at different levels of readiness without either path competing with the other
Other information about this template
This template is part of the Community Gallery creative direction family, which prioritizes real participant stories over institutional messaging. It is well suited to programs operating in the immigrant and refugee support space, particularly those serving youth from East Africa, Southeast Asia, and Central America.
The template is localized for United States audiences, with English-language copy and no currency formatting required for the lead generation flow
The zigzag alternating style works especially well for programs with strong photographic documentation of their cohorts and service projects
Teams using this template for grant reporting cycles can adapt the impact statistics strip and impact report download section to reflect current cohort data each funding period
