Kindred - Heartfelt Childrens Landing Page Template

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

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

SectionPurpose
Video HeroSets emotional tone and delivers the headline
Reality MasonryShows the scale of need through statistics and stories
Outcomes MasonryShifts focus to transformation and results
Role Path BentoRoutes each visitor type to relevant resources
Impact Report GateCaptures email and role in exchange for the report
FooterProvides 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.

  1. 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
  2. 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
  3. 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
Kindred - Heartfelt Childrens Landing Page Template
Kindred - Heartfelt Childrens Landing Page Template
Kindred - Heartfelt Childrens Landing Page Template
Kindred - Heartfelt Childrens Landing Page Template

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?