Shelter is a hero-dominant donation landing page built for child welfare direct service providers. It uses a warm Desert Rose color system, a full-viewport Community Mosaic header, and a scroll-through gallery of program evidence to move visitors emotionally and practically toward giving. Every donation tier maps to a specific child-sized outcome, making the ask clear and earned.
by Rocket studio
Loading preview…
Quick summary
Shelter is a single-page fundraising template designed for child welfare organizations. It opens with a mosaic tile-grid hero, walks visitors through crisis data, program evidence, and real transformation stories, then delivers a full-width giving panel with outcome-mapped donation tiers. The emotional arc is deliberate: tension, relief, and genuine hope.
Who this template is for
This template is built for organizations doing direct child welfare work. It speaks the language of people who understand what a removal order means at midnight and what a reunification plan costs in human time.
County child protective services departments seeking emergency placement partners
Child welfare nonprofits and direct service providers running therapeutic and reunification programs
Family court support teams and foster care networks looking to attract individual donors and volunteers
What problem this template solves
Most nonprofit landing pages ask for money before they earn the ask. They present numbers without context and stories without proof. Shelter solves this by building emotional credibility first, section by section, so donors arrive at the giving panel already convinced the work is real.
Visitors leave before converting because the emotional case is never fully made
Donation forms feel generic and disconnected from actual program outcomes
Organizations serving complex populations have no design system that matches the gravity of their work
What you get with this template
You get a complete, ready-to-customize donation landing page built around a five-section narrative structure. Every design choice, from typography to color, reinforces the Healing Space theme the work demands.
A full-viewport Community Mosaic hero with a staggered tile-reveal animation and a centered headline
A five-section page flow covering crisis context, program gallery, transformation testimonials, and a giving panel
A Desert Rose color system, Fraunces serif headlines, and DM Sans body type configured throughout
Theme
Healing Space
Creative direction
Community Gallery
Color system
Desert Rose
Style
Hero-Dominant (90/10)
Direction
Donation/Fundraising
Page Sections
Community Mosaic Hero with Tile Reveal
Outcome-mapped Donation Tiers
Dual Conversion Path Design
Scroll-driven Five-section Narrative
Scroll Reveal and Parallax Interactions
Related questions
Who is this landing page template designed for?
Can I adjust the donation amounts and outcome descriptions?
Does the template include a volunteer sign-up path?
How does the mosaic hero section work?
Is this template suitable for a county child protective services partner page?
Feature list
Community Mosaic Hero with Tile-Stagger Animation
The hero fills the entire viewport with a grid of warm-toned, dignity-preserving photographs. Each tile fades in with a soft warmth bloom in a staggered sequence. When the full mosaic resolves, a single headline appears at center: "Every child deserves one person who is irrationally crazy about them."
Outcome-Mapped Donation Panel
The giving panel presents three pre-set donation amounts tied to tangible outcomes. $45 covers one emergency overnight placement kit, $120 funds a month of therapeutic play sessions, and $500 sponsors a full family reunification support plan. A custom amount field and a monthly recurring toggle round out the giving form.
Dual Conversion Paths
A floating "Hold a Child's Place" button appears after the second scroll section and stays accessible throughout. At the final section it anchors into the full giving panel. A secondary "Give Your Time Instead" path links to a volunteer intake form that collects availability, skills, and county.
Scroll-Driven Emotional Narrative
Each section is designed as a distinct room with its own emotional temperature. The Crisis Room uses stark statistics on a muted background alongside a caseworker quote. The Program Gallery presents service photos with handwritten-style captions. The Transformation section frames anonymized, aged-up testimonials in the child's own voice.
Scroll Reveal and Parallax Interactions
IntersectionObserver-driven scroll reveals activate section content as the visitor enters each room. Parallax layers add depth to background elements. The donation panel responds to amount selection and the monthly toggle with smooth visual feedback.
Page sections overview
Section
Purpose
Community Mosaic Hero
Tile-grid reveal with centered headline establishes emotional entry point
Crisis Room
Stark statistics and caseworker quote frame the urgency of the work
Program Gallery
Photo wall with handwritten-style captions shows what each service does
Transformation Stories
Framed testimonials in anonymized child voice deliver proof of impact
Giving Panel
Full-width donation form with outcome tiers, custom amount, and volunteer path
Footer
Horizontal flow pattern closes the page with navigation and organizational context
Design & branding system
The Desert Rose palette is built around the feeling of a desert evening cooling down. Warmth still radiates from the earth while the sky softens. Every color choice reinforces safety, honesty, and human weight.
Terracotta (#C2785C) anchors headlines and call-to-action buttons; adobe clay (#E8C4B0) washes section backgrounds; dusk-sky mauve (#8E5572) marks pull-quotes and impact statistics
Mesquite brown (#3B2322) grounds body text for strong readability; linen white (#FAF5F0) opens generous margins that let content breathe
Fraunces serif handles all display headlines for warmth and authority; DM Sans handles body copy for clarity and ease
Mobile & speed optimization
The template is designed desktop-first with full mobile support. The mosaic tile layout and section-room structure adapt to smaller screens without losing emotional impact.
Staggered image loading prevents the mosaic hero from blocking the initial render on mobile connections
IntersectionObserver triggers scroll reveals only when sections enter the viewport, keeping the experience smooth across devices
The donation panel and volunteer toggle are touch-friendly and sized for comfortable mobile interaction
How this template helps you convert
Every structural and design decision in Shelter is oriented toward a single outcome: moving a visitor from curiosity to genuine, motivated giving.
The five-section narrative builds emotional credibility before the ask appears, so the giving panel feels earned rather than imposed.
Outcome-mapped donation tiers remove the donor's biggest hesitation by showing exactly what each dollar does for a real child.
The dual conversion path captures both financial donors and volunteers, widening the net without diluting the primary ask.
Other information about this template
Shelter is built for organizations that serve a population deserving of real design care. The template reflects the weight and warmth of that responsibility.
The template is categorized under Community and Nonprofit, specifically the Child Welfare Direct Service Provider niche
The Community Gallery creative direction and Community Mosaic header concept are matched to the Donation and Fundraising landing-page direction
Photography guidance emphasizes real-moment images with no identifiable faces, preserving the dignity of the children and families the organization serves
The Healing Space theme and Desert Rose color system were chosen specifically for this intersection of emotional weight and donor conversion
