Bloom - Heartfelt Afterschool Landing Page Template

Quick summary

Bloom is a single-page donation landing page designed for a nonprofit after-school arts program. It uses a modular card-grid layout to build trust through accumulated stories, not a single ask. Family quotes, child drawings, volunteer notes, and impact statistics layer together until giving feels like the only natural response.

Who this template is for

This template is built for nonprofits and community organizations that need to raise funds online through authentic storytelling rather than generic charity appeals. It suits teams with real voices, real kids, and real outcomes to share.

• After-school program directors and nonprofit coordinators building a fundraising campaign page
• Community center staff, grant-makers, and volunteer coordinators presenting program impact
• Foster care advocacy groups and youth-serving organizations seeking recurring donor support

What problem this template solves

Most nonprofit donation pages ask for money before they earn it. They lead with a button instead of a reason. Bloom solves the trust gap by making visitors feel like they already know the kids, the families, and the volunteers before a donation option ever appears.

• Donors scroll past generic charity pages because nothing feels specific or real
• Single parents and caregivers checking phones between shifts need fast, emotional clarity, not walls of text
• Programs with powerful community stories lack a structured way to present them online

What you get with this template

Bloom delivers a fully structured, ready-to-customize donation landing page. Every section is designed to do one job: move a stranger one step closer to becoming a donor.

• A polaroid-style mosaic hero with bold hand-drawn typography and the #KeepTheLampOn movement moment
• Modular testimonial card clusters in varied sizes, including grandmother quotes, volunteer time logs, teacher notes, and before-and-after report cards
• A three-step donation lightbox with preset amounts labeled by real impact, a monthly giving toggle, and an optional dedication message field

Feature list

A paragraph introducing the features: Each feature in Bloom is grounded in the brief's emotional and functional goals. Together they create a page that earns the donation click through warmth, honesty, and deliberate design.

Polaroid Mosaic Hero Section

The header opens with bold hand-drawn typography spelling #KeepTheLampOn over a corkboard-style grid of slightly tilted, polaroid-framed snapshots. A single charcoal line beneath the hashtag states the live kid count and the core ask, setting the emotional tone before the scroll begins.

Modular Testimonial Card Grid

Cards vary in size, some tall and some wide, holding one voice each. A grandmother's quote sits beside her grandchild's drawing. A volunteer's six-word story appears next to their time log. The quilt-like rhythm rewards slow scrolling and lets each story land before the next one begins.

Stat Break Cards

Between testimonial clusters, a single full-width stat card interrupts the mosaic. Bold amber numbers on a deep teal background deliver one devastating fact at a time. The effect is cumulative, building a quiet, undeniable case without ever feeling like a lecture.

Three-Step Donation Lightbox

Clicking "Keep the Lamp On" opens a focused lightbox with three steps: choose an amount (preset at $25, $50, $100, or a custom figure, each labeled with what it buys), enter payment details, and leave an optional dedication message. A monthly giving toggle offers the choice to "be a porch light, not a flashlight."

Sticky Donate Bottom Bar

After the third card row, a sticky bar appears at the bottom of the screen and follows the visitor as they scroll. It keeps the primary call to action visible without interrupting the story, creating a persistent but non-intrusive path to donate.

One-Time and Monthly Giving Toggle

The donation lightbox includes a clearly labeled toggle between one-time and monthly giving. The monthly option is framed conversationally as a sustained commitment rather than a transaction, encouraging donors to think in terms of ongoing impact.

Page sections overview

Design & branding system

The Teal Catalyst color system gives Bloom its emotional identity. Deep therapeutic teal anchors headers and section dividers, soft clay walls create a warm resting background, and amber pulses on every interactive element like a nightlight left on. The overall effect is a counselor's office redesigned by children: calming structure covered in fingerprints and sunlight.

• Colors: deep teal (#1A7A6D) for headers and dividers, soft clay (#F0E4D4) and white for alternating backgrounds, warm amber (#E8A838) for donation buttons and progress indicators, and charcoal (#2D2D2D) for body text
• Typography: Fraunces serif display for headlines and emotional pull, DM Sans for clean, readable body copy throughout
• Visual style: corkboard intimacy with slightly tilted polaroid cards, handwritten-style quote styling, and child drawing inclusions that keep the page feeling human and specific

Mobile & speed optimization

Bloom is built mobile-first because its primary audience, single parents and caregivers, checks phones between shifts. The layout stacks cleanly on small screens without losing the mosaic's emotional weight.

• Card-grid layout reflows naturally for narrow screens, keeping testimonial cards readable and tap-friendly
• Static mosaic sections use server-rendered components, while the donation lightbox and sticky bar are handled client-side for responsive interactivity
• Amber pulse animations and card stagger reveals are designed to feel smooth and deliberate rather than heavy or distracting on mobile devices

How this template helps you convert

Bloom does not lead with a donation button. It leads with thirty small truths. By the time a visitor reaches the full-width call-to-action section, they have already met the kids, the families, and the volunteers. The ask arrives after the emotional work is done.

1. The mosaic structure accumulates credibility naturally, each card adds one more specific, real voice until leaving without acting feels like a choice against people you have already come to know
2. The sticky donate bar and the labeled preset amounts reduce friction at the moment of decision, telling donors exactly what their $25, $50, or $100 will do before they ever enter a card number
3. The monthly giving toggle and the optional dedication message field give donors a way to make the gift personal and ongoing, turning a one-time visitor into a recurring supporter

Other information about this template

Bloom is a strong starting point for any community-driven fundraising campaign that relies on authentic human stories over polished corporate charity aesthetics. The template is purpose-built for the after-school program niche but adapts well to similar youth-serving organizations.

• The template style is Card Grid (Modular), making individual sections easy to reorder, add to, or remove without disrupting the overall layout
• The Healing Space theme and Testimonial Mosaic creative direction are intentional design choices that signal safety, warmth, and community rather than urgency or guilt
• The Donation and Fundraising landing-page direction is reinforced at every scroll depth, ensuring no visitor reaches the footer without a clear, emotionally grounded opportunity to give
• Footer follows a linear single-row pattern, keeping the page exit clean and uncluttered

Show more