Kindred is a children's charity landing page template built around a Hero's Journey scroll. It uses a full-screen video hero, asymmetric masonry card layouts, and a warm Civic Service visual identity to guide school counselors, corporate giving managers, and grandparent caregivers from awareness to action, earning trust through stories and data before a single ask.
by Rocket studio
Loading preview…
Quick summary
Kindred is a single-page charity template designed for children's nonprofits. It opens with a warm-graded full-screen video, flows through staggered masonry cards that move visitors from problem to possibility, and closes with a gated Impact Report download. Every design choice, color, type, layout, serves one purpose: making it easy to believe in the work and act on that belief.
Who this template is for
This template is built for children's nonprofits, charity organizations, and mission-driven teams that need a high-trust content hub. It speaks directly to the people most likely to arrive on the page with a specific purpose in mind.
School counselors and educators looking for a trusted referral resource for struggling students
Corporate social responsibility managers evaluating a giving partner for annual campaigns
Grandparents and kinship caregivers raising children on fixed incomes who need community support
What problem this template solves
Most nonprofit landing pages ask for something before they give anything. Visitors arrive uncertain, scan a generic donation button, and leave. Kindred reverses that pattern entirely.
It leads with three full scroll-lengths of real stories, statistics, and downloadable one-pagers before presenting any gated content
It segments visitor intent through a role selector, so educators, donors, volunteers, and families each find a path built for them
It removes the gap between "I care about this" and "I know what to do next" by layering urgency with proof at every scroll depth
What you get with this template
You get a complete, ready-to-customize landing page structured around a proven emotional arc. Every section is purposeful, every component earns its place, and the visual system is consistent from the first video frame to the footer.
A full-screen video hero with a floating headline card and a marigold call-to-action button
Asymmetric masonry card sections for both the need phase and the outcomes phase, with scroll-triggered reveal animations
Theme
Civic Service
Creative direction
Hero's Journey
Color system
Cloud Canvas
Style
Masonry/Pinterest
Direction
Content/Resource
Page Sections
Full-screen Video Hero Section
Asymmetric Masonry Card Layout
Role-based Resource Bento Grid
Gated Impact Report Download
Scroll-triggered Card Animations
Civic Service Typography Pairing
Related questions
What kind of organization is this template best suited for?
Do I need a video to use this template?
Can I use this template without the gated form?
Is this template suitable for mobile visitors?
How customizable is the color and type system?
A four-path role bento section with ungated resource cards and a gated Impact Report form using a single email field and role selector
Feature list
This landing page template is built around components that work together to move a visitor from witness to participant.
Full-Screen Video Hero
A warm-graded, handheld-style video background opens the page at child height, following a morning school hallway scene. A floating glass headline card fades in over the final frame, anchoring the emotional entry point before the visitor scrolls.
Asymmetric Masonry Card Layout
Two distinct masonry sections use Pinterest-style staggered cards of varying sizes and visual weights. The first section holds statistics, photographs, and first-name stories in the need phase. The second section shifts tone toward outcomes, reading milestones, graduations, and family reunions.
Role-Based Resource Paths
A four-card bento grid presents separate, ungated resource paths for educators, donors, volunteers, and families in need. Each card links to program guides, volunteer handbooks, or school partnership toolkits without requiring an email address.
Gated Impact Report Form
A single-field email form paired with a role selector gates the 2024 Impact Report download. The form sits below three full scroll-lengths of free content, so trust is already established when the ask arrives.
Scroll-Triggered Reveal Animations
Cards animate into view as the visitor scrolls, using staggered timing to create a sense of unfolding. Hover states on masonry cards add a layer of interactivity that feels responsive without being distracting.
Civic Service Typography System
Fraunces serif headlines carry warmth and authority across section titles and story cards. DM Sans handles body text with clean readability, keeping long-form statistics and program descriptions easy to scan on any screen size.
Page sections overview
Section
Purpose
Video Hero
Sets emotional tone and delivers the headline
Reality Masonry
Shows the scale of need through statistics and stories
Outcomes Masonry
Shifts focus to transformation and results
Role Path Bento
Routes each visitor type to relevant resources
Impact Report Gate
Captures email and role in exchange for the report
Footer
Provides navigation, contact, and organizational links
Design & branding system
The visual identity follows a Civic Service theme built around the Cloud Canvas color system. The palette feels humble and earnest, like a child's drawing pinned to a refrigerator, impossible to dismiss.
Soft cumulus white (#F4F1EB) dominates spacing and card backgrounds, pencil-sketch gray (#6B7280) grounds body text, and worn schoolbook blue (#5B8FA8) carries all headers and section dividers
Hopeful marigold (#F2A93B) is reserved exclusively for every clickable moment, buttons, links, and form actions, so the eye always knows where action lives
Fraunces serif headlines and DM Sans body text create a pairing that feels trustworthy without being corporate
Mobile & speed optimization
The template is built mobile-first, reflecting the reality that school counselors often browse on phones and grandparent caregivers use tablets. Layout decisions prioritize touch-friendly targets and readable type at smaller sizes.
The video hero uses lazy-loading so the page begins rendering content before the video fully initializes
Masonry card columns reflow naturally for smaller viewports, preserving the staggered visual rhythm without horizontal overflow
Static page sections are structured as Server Components, keeping the bulk of the page fast to paint even before interactive elements load
How this template helps you convert
The conversion strategy is built into the scroll architecture itself. Visitors are never asked to give before they receive.
The Hero's Journey structure moves visitors through need, proof, and outcome before presenting any form, creating a natural readiness to act by the time the gated section appears
Ungated resource cards in the Role Path section deliver immediate value to educators and families, building credibility that transfers directly to the email gate below
The role selector on the Impact Report form signals that Kindred understands who is asking, reducing friction and increasing the sense that the download will be genuinely relevant
Other information about this template
This template is part of the Community and Nonprofit category, sitting within the Charity and Fundraising subcategory with a specific focus on children's charity organizations. A few additional details worth noting:
The page direction is Content and Resource Hub, meaning it is designed to serve as an ongoing destination for multiple visitor types rather than a one-time campaign page
The template style is Masonry and Pinterest layout, which gives the page its distinctive card-based visual rhythm and asymmetric grid structure
Localization defaults are set for English, United States Dollar (USD), and MM/DD/YYYY date format
The creative direction is Hero's Journey, a scroll architecture that intentionally escalates visitor agency from observation to participation
The header concept is a Full-Screen Video Background, which requires a short-form video asset to be supplied during customization
The color system is named Cloud Canvas, and all four palette values are specified in the design files for straightforward brand replacement
