Wellspring is a masonry-style landing page template built for clean water nonprofits operating in sub-Saharan Africa and Southeast Asia. It guides donors, corporate partners, and diaspora givers through an emotional scroll journey, from crisis data to three-phase mission to hopeful vision, before delivering them to a donation portal with full momentum and intent.
by Rocket studio
Loading preview…
Quick summary
Wellspring is a single-page, masonry-layout template designed for a clean water international nonprofit. It moves visitors from raw crisis data through a three-phase impact model into an inspiring vision of community transformation. The primary goal is a click to the donation portal. A secondary path routes corporate partners to a brief intake form.
Who this template is for
This template is built for organizations whose work goes beyond water delivery. It suits nonprofits that train communities to sustain infrastructure long after the initial build is complete.
Mid-career professionals considering their first recurring donation to a water-focused cause
Corporate social responsibility managers sourcing meaningful international impact partnerships
Diaspora communities pooling funds for clean water projects in their home villages
What problem this template solves
Most nonprofit landing pages either overwhelm visitors with statistics or offer vague emotional appeals without structure. Neither approach moves a thoughtful donor to act. Wellspring solves this by pairing hard numbers with a clear methodology and a hopeful endpoint.
Visitors arrive without context and leave before understanding what their gift actually funds
Corporate partners need a credible, structured pitch before they commit to an inquiry form
Diaspora donors want proof that their pooled funds will survive the project truck pulling away
What you get with this template
You get a fully structured, single-page layout that takes no design experience to customize. Every section is pre-built and sequenced to carry emotional and logical weight at the right moment in the scroll.
A Community Mosaic hero with scroll-triggered tile dispersal revealing the main headline
Three crisis data cards, a three-phase model section, and an expanding vision masonry grid
A sticky primary call-to-action button and a real-time project counter band before the footer
Theme
Healing Space
Creative direction
Vision & Mission
Color system
Botanical
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Community Mosaic Hero with Scroll Dispersal
Masonry Crisis Data Cards
Three-phase Mission Cards
Vision Masonry Bloom
Sticky Call to Action with Real-time Project Counter
Testimonial Slider
Related questions
Who is this landing page template designed for?
Does this template handle the donation process directly?
Can corporate social responsibility managers use this template?
How does the mosaic hero animation work?
Can the color palette and typography be customized?
Feature list
This template includes purpose-built layout components that work together as a unified scroll story for a clean water nonprofit.
Community Mosaic Hero with Scroll Dispersal
The hero opens as a tight grid of village photographs that, at viewport scale, form a single image of hands cupped under flowing water. On scroll, the tiles drift apart using CSS transforms to reveal the headline "Clean Water Is Just the Beginning" in a generous serif typeface against a soft white background.
Masonry Crisis Cards
Three stark data cards present the scale of the water crisis. Each card holds a single number and a single photograph. The cards are designed for immediate emotional impact and feed directly into the three-phase mission section that follows.
Three-Phase Mission Section
Pinned cards lay out the nonprofit's core model across three labeled phases: Drill, Filter, and Train. This section answers the crisis cards above it and gives donors a concrete understanding of where their contribution goes and how it creates lasting change.
Vision Cards Masonry Bloom
Below the mission section, the masonry grid expands into larger, warmer cards showing outcomes such as school gardens, women's cooperatives, and self-maintained village systems. Each row grows visually richer, pulling the visitor from problem through process into possibility.
Sticky Call-to-Action with Project Counter
The primary "Give Clean Water Today" button appears as a sticky element after the crisis cards and repeats inside a full-width band displaying a real-time project counter. A secondary "Partner With Us" text link sits beneath the main button for corporate inquiries.
Testimonial Slider
A social proof section rotates real testimonials from village committee members, diaspora donors, and corporate partners. The slider supports the trust-building layer needed before a visitor clicks through to the donation portal.
Page sections overview
Section
Purpose
Community Mosaic Hero
Opens with dispersing village photo grid to reveal headline
Crisis Data Cards
Shows scale of the water problem with stark numbers
Three-Phase Model
Explains Drill, Filter, Train methodology in pinned cards
Vision Masonry Bloom
Displays community outcomes in expanding, colorful cards
Testimonial Slider
Builds trust with real voices from partners and donors
Counter Call-to-Action Band
Real-time project counter drives click to donation portal
Footer
Linear single-row pattern with navigation and legal links
Design & branding system
The visual identity follows a Healing Space theme built on a Botanical color system. The palette feels like a shaded garden beside a wellhead, combining fertile soil tones, living greens, and the pale gleam of clean water.
Deep medicinal leaf green (#2D5F2D) anchors headlines and icon borders; purified water white (#F4F9F6) and sun-warmed clay (#C4956A) alternate as section backgrounds to keep the masonry grid breathing
New-growth chartreuse (#A8C256) is reserved exclusively for buttons and progress indicators so the eye always knows where to act
Typography pairs Fraunces serif for headlines with DM Sans for body text and interface elements, creating a tone that feels both trustworthy and warm
Mobile & speed optimization
The template is built desktop-first with full mobile parity. Every animation and interactive element is engineered to degrade gracefully on smaller screens.
The Community Mosaic hero collapses gracefully on mobile, maintaining the visual impact without requiring the same tile count as desktop
All scroll-linked animations use Intersection Observer so they trigger only when elements enter the viewport, avoiding unnecessary rendering overhead
Every motion effect relies on CSS transforms only, keeping the animation layer lightweight across devices
How this template helps you convert
The page is a click-through design. Its entire structure is sequenced to build enough emotional and logical confidence that a visitor clicks to the donation portal rather than closing the tab.
The crisis cards create urgency immediately after the hero, then the three-phase model resolves that urgency with a credible methodology, giving the donor a reason to trust before they are ever asked to give.
The sticky chartreuse call-to-action button remains visible throughout the scroll so a decided visitor can act at any moment without hunting for a button.
The real-time project counter in the final band provides social proof of scale, and the secondary "Partner With Us" link captures corporate inquirers who need a lower-commitment first step.
Other information about this template
This template is purpose-designed for the intersection of community nonprofit work and clean water infrastructure, where storytelling and credibility must work together.
The page is localized for English-language audiences using USD currency references and an international context spanning sub-Saharan Africa and Southeast Asia
The footer follows a linear single-row pattern, keeping the page exit clean and focused on the primary conversion goal
No donation amount is selected on this landing page; the click routes to a dedicated payment page where recurring and one-time giving options are presented separately
The "Partner With Us" secondary path routes to a brief intake form requesting company name, partnership type, and preferred region of impact
