Wellspring - Heartfelt Cleanwater Landing Page Template
Wellspring is a donation-focused landing page template built for clean water community foundations. It pairs a cinematic split hero with four zigzag story sections, a preset donation panel, and a mobile-fixed call-to-action bar. The Desert Rose color system and real-portrait creative direction give every scroll a warm, documentary feel that earns trust before it asks for a gift.
by Rocket studio
Quick summary
Wellspring is a single-page fundraising template designed for clean water nonprofits. It opens with a grandmother-and-granddaughter hero split, moves through four alternating story sections featuring real community members, and closes each narrative arc with a clear donation ask. The template is warm, grounded, and built around human connection rather than statistics alone.
Who this template is for
This template is built for mission-driven organizations that need to earn a donation through emotional honesty rather than polished marketing copy. It works especially well when the story behind the work is rich, specific, and people-centered.
- Clean water foundations and nonprofit drilling programs serving underserved communities
- Community development organizations running borehole or filtration installation projects
- Corporate social responsibility teams seeking a transparent impact presentation for grant-making partners
What problem this template solves
Most donation pages ask for money before they earn trust. They lead with numbers, not names. They show logos instead of faces. Potential donors scroll past because nothing makes the cause feel real or urgent in a personal way.
- There is no structure for telling individual stories at scale before the donation ask appears
- Mobile donors lose interest when the path from emotion to giving involves too many steps
- Foundations with genuine field impact cannot show it clearly without a layout built for portrait-and-quote storytelling
What you get with this template
Wellspring gives you a complete, single-page fundraising layout with every section pre-structured and ready to populate with your own photography and stories. Nothing is generic or interchangeable, the design assumes real faces, real names, and real villages.
- A half-page cinematic hero with a portrait slot and a terracotta headline area
- Four zigzag alternating story blocks, each holding a candid portrait, a first-person quote, and one impact stat
- A donation panel with four preset amounts tied to tangible outcomes, plus a custom entry field
- A bold impact-numbers section with three anchor statistics
- A mobile-fixed call-to-action bar that keeps the primary ask visible throughout the scroll
- A split footer with logo and tagline on the left and navigation links on the right
Feature list
A single paragraph introduces the features below. Wellspring is not a generic charity template. Every component was designed around one clear goal: move a real person from curiosity to commitment by showing them exactly where their money goes and who it reaches.
Cinematic Split Hero Section
The hero divides the viewport into two equal halves. The left side is reserved for a tight portrait photograph. The right side carries a single headline in warm terracotta and one supporting sentence above the primary call-to-action button. The layout anchors the emotional tone of the entire page from the first second.
Zigzag Portrait Story Sections
Four alternating blocks build a narrative from problem to proof. Each block pairs a candid community portrait on one side with a short first-person quote and one specific impact stat on the other. Left and right sides flip as the visitor scrolls, creating visual rhythm without repetition.
Preset Donation Panel
The donation panel presents four giving amounts, each linked to a concrete outcome: a family filter, school handwashing stations, a pump repair kit, or a full borehole sponsorship. A custom amount field is also included. The panel opens as an inline or modal interaction, keeping the visitor on the page.
Mobile-Fixed Call-to-Action Bar
On mobile devices, the primary "Give Clean Water Today" button remains visible in a fixed bar at the bottom of the screen. This means a donor who finishes a story section can act immediately without scrolling back to the top.
Impact Numbers Section
Three bold statistics sit in an earth-brown anchored block between the story sections and the footer. These numbers give data-driven donors the proof layer they need after the emotional connection has already been made.
Scroll-Reveal Animation System
Section content enters the viewport through staggered scroll reveals and a parallax effect on the hero image. Animations are medium in weight, meaning they add polish without distracting from the photographs and quotes that carry the real message.
Page sections overview
| Section | Purpose |
|---|---|
| Hero Split | Opens with portrait and headline |
| Engineer Story | Introduces the field surveyor |
| Mother Story | Shows the community problem bearer |
| Mechanic Story | Highlights local repair expertise |
| Child Story | Closes the human narrative arc |
| Donation Panel | Converts emotion into a gift |
| Impact Numbers | Anchors with three bold stats |
| Split Footer | Closes with brand and links |
Design & branding system
The Desert Rose color system is warm and grounded. It draws from sun-baked clay, dry earth, and the cold depth of water found underground. Every color has a specific role, and the palette holds together like a single coherent scene rather than a brand kit assembled from separate choices.
- Terracotta (#C2735C) is used for headlines and expressive display type, dusty blush pink (#E8B4A2) and clean white alternate as section backgrounds, and earth brown (#6B4226) carries all body text
- Deep well blue (#1B4965) is reserved for call-to-action buttons, donation panel highlights, and water imagery accents, creating a clear visual signal for every interactive element
- Typography pairs Fraunces, an expressive serif, for headlines with DM Sans for body copy, giving the page a documentary warmth that feels editorial rather than corporate
Mobile & speed optimization
The template is built mobile-first. Donors frequently give on their phones after an emotional scroll, and the layout accounts for this at every decision point, from font sizing to tap-target placement.
- The fixed bottom call-to-action bar keeps the primary donation button reachable at all times on small screens
- Scroll-reveal animations and the parallax hero effect are scoped only to sections that require client-side interactivity, while the rest of the page uses static server components to keep load behavior lean
- Portrait and quote sections reflow cleanly from two-column desktop to single-column mobile without losing the narrative rhythm
How this template helps you convert
Wellspring earns the donation before it asks for one. The page is structured as a trust-building journey, not a pitch. By the time a visitor reaches the donation panel, they have already met four real people and understood exactly what their money will do.
- The hero section creates an immediate emotional connection through a real family portrait and a single human headline, establishing why this foundation exists before any ask is made
- The four zigzag story sections build progressive trust by introducing named individuals, their first-person words, and specific impact data, moving the visitor from sympathy to conviction
- The donation panel removes friction by pre-populating four clear giving amounts with real-world outcomes, so a donor never has to guess what their contribution means in practice
Other information about this template
Wellspring is part of a broader family of community and nonprofit landing page templates designed for organizations with real field stories to tell. A few additional details worth knowing before you build with it.
- The template is built for English-language content with United States Dollar currency formatting in the donation panel
- The Sub-Saharan Africa community development context shaped every design and copy decision, but the layout adapts naturally to any region where borehole drilling or water filtration programs operate
- The "Meet More Families" secondary call-to-action path scrolls visitors deeper into the story sections before circling back to the donation ask, offering a softer conversion route for readers who are not yet ready to give
- The footer follows an Arc Browser Split pattern, placing the foundation logo and tagline on the left with navigation links on the right
- All photography slots are designed for real documentary portraits with named subjects, not stock imagery, which reinforces the foundation's core value proposition that every dollar is traceable to a face, a name, and a village




Theme
Family First
Creative direction
Team & People
Color system
Desert Rose
Style
Zigzag/Alternating
Direction
Donation/Fundraising
Page Sections
Cinematic Split Hero Section
Zigzag Portrait Story Sections
Preset Donation Panel
Mobile-fixed Call-to-action Bar
Impact Numbers Section
Scroll-reveal Animation System
Related questions
Can I change the donation preset amounts in the panel?
Does the template work with only two or three story sections instead of four?
Is the donation panel connected to a specific payment processor?
How does the mobile fixed call-to-action bar behave on larger screens?
Can this template be adapted for a nonprofit operating outside Sub-Saharan Africa?