Affirm is a warm, single-page fundraising landing page built for a transgender family support organization. It opens with a breathing Community Mosaic hero, then walks visitors through alternating portrait-and-story sections before arriving at a low-friction inline donation form. The design feels like a kitchen windowsill full of living herbs: unhurried, tended, and growing toward light.
by Rocket studio
Loading preview…
Quick summary
Affirm is a heartfelt, single-page fundraising landing page for a peer support community serving trans youth and their families. A breathing photo mosaic sets the tone, zigzag story sections introduce real community voices, and a preset-amount donation form closes the loop with minimal friction. Every design choice prioritizes warmth and trust over clinical distance.
Who this template is for
This template is built for nonprofits and community organizations that lead with human connection before asking for support. It suits teams whose audience arrives emotionally activated and needs to feel seen before they act.
Transgender support organizations running peer mentor programs for families
LGBTQ+ nonprofits whose primary conversion goal is recurring or one-time donations
School counselors and community advocates looking to share a resource that feels genuinely welcoming
What problem this template solves
Parents searching at 2 a.m. do not need another clinical brochure. They need a page that exhales with them. The challenge for many support organizations is that their websites feel institutional when their community is anything but.
Generic nonprofit layouts fail to convey the warmth of a real peer support circle
High-friction donation flows lose donors before the gift is made
Pages that skip the human story cannot earn the emotional trust needed to convert a first-time visitor into a donor
What you get with this template
You get a fully structured, section-complete landing page that introduces your community through faces and stories before it ever asks for anything. Every section serves a specific emotional and practical purpose.
A viewport-filling Community Mosaic hero with a frosted headline overlay and a primary call-to-action button
Four alternating zigzag story blocks pairing portraits with first-person quotes and role descriptions
An inline donation form with preset amounts, tangible impact labels, a name field, an email field, and a secondary volunteer path
Theme
Family First
Creative direction
Team & People
Color system
Botanical
Style
Zigzag/Alternating
Direction
Donation/Fundraising
Page Sections
Breathing Community Mosaic Hero
Zigzag Alternating Story Sections
Inline Preset Donation Form
Sticky Fundraising Bar
Volunteer Interest Path
Scroll-fade and Staggered Entrance Animations
Related questions
Can I change the preset donation amounts in the form?
Do visitors need to create an account to donate?
How does the sticky donation bar behave on the page?
Is the volunteer interest form part of this template?
Can this template work for a nonprofit outside of transgender support?
A sticky donation bar that appears after the third scroll section
An Arc-style footer with logo, tagline, and navigation links
Feature list
A brief description of the key capabilities built into this template follows below.
Breathing Community Mosaic Hero
Dozens of candid portrait tiles fill the viewport in a soft-edged grid. On load, tiles breathe slightly in scale before the headline emerges over a frosted linen overlay. The collective image arrangement communicates community before a single word is read.
Zigzag Story Sections
Four alternating blocks pair a portrait image on one side with a first-person quote and a single-line role description on the other. Left-image/right-text and right-image/left-text blocks alternate in rhythm, building emotional stakes quietly from one story to the next.
Inline Preset Donation Form
The donation form lives directly on the page without redirecting visitors. Four preset amounts ($25, $50, $100, and a custom field) each carry a tangible impact label. Only a name and email are required, keeping the path to giving as short as possible.
Sticky Donation Bar
After the visitor scrolls past the third section, a persistent bottom bar carrying the primary call-to-action appears and stays visible. It reinforces the donation prompt without interrupting the storytelling experience above it.
Volunteer Interest Path
Beneath the donation form, a secondary text link labeled "Volunteer With Us" routes visitors to a lightweight interest form. This gives non-donors a clear next step and broadens community engagement beyond financial giving.
Scroll-Fade and Staggered Animations
Section content fades in on scroll and enters with staggered timing. This pacing mirrors the unhurried, conversational feel of walking into a support circle and being introduced one person at a time.
Page sections overview
Section
Purpose
Community Mosaic Hero
Opens with a breathing photo grid and frosted headline overlay
Primary Call to Action
Places the "Keep the Door Open" button beneath the hero mosaic
Zigzag Story Block 1
Introduces a parent peer mentor with portrait and first-person quote
Zigzag Story Block 2
Introduces a teen youth group facilitator with portrait and quote
Zigzag Story Block 3
Introduces a family reunited after silence with portrait and quote
Zigzag Story Block 4
Closes the story arc with a fourth community member portrait and quote
Impact Statistics
Atmospheric depth stats showing tangible community outcomes
Inline Donation Form
Preset amounts with impact labels, name, email, and volunteer link
Sticky Donation Bar
Persistent bottom bar appearing after third scroll section
Arc Footer
Logo and tagline on the left, navigation links on the right
Design & branding system
The visual identity follows a Botanical color system rooted in a Family First theme. The palette feels like a kitchen windowsill crowded with potted herbs: alive, tended, and growing toward light.
Four core colors structure the page: warm linen (#F5F0E8) dominates backgrounds, deep fern (#2D5F3A) anchors headings and the footer, soft sage (#B7C9A8) washes section dividers like watercolor bleeds, and foxglove pink (#D4789C) blooms only on action buttons and highlighted quotes
Typography pairs Fraunces serif headings with DM Sans body text, creating a voice that feels both warm and grounded
The visual style is deliberately unhurried: no harsh edges, no cold whites, no aggressive layouts
Mobile & speed optimization
This template is built with a mobile-first priority because the primary audience often arrives on a phone in a quiet, anxious moment late at night.
Images across the mosaic and story sections are lazy-loaded so the page feels responsive even on slower connections
Static layout sections use server components to reduce load on the client
The sticky donation bar is designed for thumb reach, keeping the giving path accessible without scrolling back up
How this template helps you convert
The page earns trust through storytelling before it ever places an ask. By the time a visitor reaches the donation form, they already know whose door they are holding open.
The mosaic hero and zigzag story sections introduce real faces and real outcomes first, so the donation request arrives after emotional investment has already built.
The inline preset amounts with impact labels replace abstract giving with concrete meaning, making each choice feel personal and purposeful.
The sticky donation bar and low-friction form (name, email, done) remove every barrier between a willing donor and a completed gift.
Other information about this template
This template is a strong fit for organizations that want to move away from cold, clinical web presentations and toward something that genuinely reflects their community culture.
The template is built for English-language, USA-based nonprofit audiences
The zigzag layout style and Team and People creative direction are well suited to storytelling-first fundraising campaigns
The Donation and Fundraising landing page direction makes this template a focused tool for conversion without requiring a full website rebuild
Organizations using platforms like Squarespace, Framer, or similar no-code builders will find the section structure familiar and straightforward to populate with real community content
