Gather - Compassionate Fundraising Landing Page Template

Quick summary

Gather is a single-column fundraising landing page template designed around human stories. It pairs a watercolor-style illustration with a low-friction three-step form, live campaign progress bars, and trust-building team photography. The Slate and Sky color system keeps the experience calm and open. Whether someone is starting a campaign or considering a donation, every scroll feels personal.

Who this template is for

This template is built for people who need to raise money quickly and for the communities that rally around them. It is equally useful for organizations running ongoing charitable campaigns.

• Individuals or advocates launching a personal fundraiser for medical bills, disaster recovery, or family hardship
• Nonprofit organizers and community groups coordinating cause-based funding drives
• Platform builders creating a charity or fundraising product that needs an emotionally resonant first impression

What problem this template solves

Most fundraising pages feel transactional. They ask for a dollar goal before they ask for a story. People in crisis often freeze at that barrier and abandon the process entirely.

• Visitors arrive in a vulnerable state and need a frictionless, emotionally safe entry point
• Potential donors need trust signals, real faces, and visible proof that campaigns actually succeed
• Platform owners need a page that converts both fundraiser creators and donors without feeling cold or corporate

What you get with this template

You get a fully structured, single-column landing page with every section pre-built and ready to customize. The layout moves visitors through an intentional emotional arc from arrival to action.

• A hero section with a custom watercolor-style illustration, a headline that opens the conversation, and a primary call-to-action button
• A three-step progressive form modal that collects story context and contact details before asking for any financial information
• Live campaign cards with animated progress bars, a testimonial grid, a donor portrait wall with a live counter, and a mid-conversation team photography section

Feature list

A quick paragraph on what makes this template functionally distinct: every component was chosen to reduce friction for emotionally vulnerable visitors while building layered trust for skeptical donors.

Three-Step Progressive Form Modal

The primary conversion path opens a modal with three gentle steps. Visitors choose who the fundraiser is for, write one sentence about what happened, then provide a name and email. No dollar goal and no bank details are required upfront.

Animated Campaign Progress Bars

Three live campaign cards display animated progress bars that fill on scroll reveal. They answer the silent question every new visitor asks: does this actually work for real people?

Persistent Bottom Call-to-Action Bar

After the second scroll, a fixed bottom bar keeps the "Start a Fundraiser" button in view. Visitors can act at any moment without scrolling back to the top.

Live Donor Counter

A circular portrait wall sits above a counter that ticks upward in real time. This section converts passive browsers into believers by making the donor community visible and active.

Watercolor Hero Illustration

The header features a hand-drawn scene of diverse figures reaching toward each other, rendered in soft watercolor-style lines. It communicates warmth and humanity before a single word is read.

Team Photography Grid

Engineers and support staff are shown mid-conversation, not posed. This section puts real faces behind the platform and answers the trust question that donors and fundraisers both carry silently.

Page sections overview

Design & branding system

The visual identity follows a Healing Space theme. Every color and typographic choice was made to feel like a calm, safe environment where a difficult conversation can begin.

• Color system uses deep slate (#3B4856) for text, soft cloud gray (#E8ECF1) for backgrounds, sky-wash blue (#7BAFDE) on buttons and progress indicators, and dawn rose (#D4A0A0) for testimonial highlights and emotional accents
• Typography pairs Fraunces serif headlines with DM Sans body text, creating a warm contrast between editorial feeling and readable clarity
• The hand-drawn illustration style is intentionally imperfect, signaling human presence over polished software

Mobile & speed optimization

Crisis moments happen on phones. This template is built mobile-first, with a layout that flows naturally on small screens from the very first section.

• Single-column flow eliminates horizontal complexity and keeps the reading path linear on any screen size
• Scroll-reveal animations, counter tick-up, and progress bar fills use client-side rendering only where interactivity is required, keeping static sections light
• The persistent call-to-action bar is designed to stay accessible and unobtrusive on mobile viewports throughout the scroll

How this template helps you convert

The page is structured as an emotional journey, not a product tour. Every section moves a visitor one step closer to action.

1. The hero illustration and headline create an immediate sense of safety, lowering emotional resistance before any ask is made
2. Live campaign cards and the donor counter provide visible social proof that real people trust and use the platform
3. The three-step form removes the biggest barrier to starting a fundraiser by asking for a story before it asks for money

Other information about this template

This template sits at the intersection of community-driven design and practical conversion architecture. It was built for the online fundraising platform niche within the broader charity and fundraising space.

• Template style is Single Column Flow, keeping the narrative focused and distraction-free from top to bottom
• The secondary call-to-action, "See How It Works," links to a sixty-second animated walkthrough for visitors who are not yet ready to start a fundraiser
• Localization is set for English, United States Dollar currency, and United States date formatting
• Animation intensity is set to medium: scroll reveals, counter animations, and progress bar fills are present but never distracting
• The footer follows Pattern 1, a linear single-row layout, keeping the bottom of the page clean and uncluttered

Show more