Gather is a modular card-grid landing page built for environmental volunteer organizations that fundraise and recruit at the same time. It opens with a human testimonial, flows through crew profiles and impact counters, and closes with a donation form tied to real outcomes. The design uses a nature-inspired teal and gold palette to make every visit feel purposeful.
by Rocket studio
Loading preview…
Quick summary
Gather is a fundraising-optimized volunteer landing page built for watershed restoration groups. It leads with a real volunteer portrait and quote, then moves through a modular card grid of crew profiles, before-and-after photography, and live impact counters. A floating donation bar and preset giving amounts tied to tangible outcomes make it easy for visitors to give with confidence.
Who this template is for
This template is built for nonprofit environmental organizations that need to raise funds and recruit volunteers from a single page. It suits groups whose work is visible, hands-on, and driven by a community of real people.
Environmental community groups seeking both donors and new recruits
Volunteer coordinators who want to show impact before asking for a gift
What problem this template solves
Most volunteer organization pages ask for a donation before earning trust. They lead with statistics or stock landscapes instead of the people doing the work. Visitors leave without giving or signing up because they never felt connected.
Donors need a human face and a concrete outcome before they will give
Volunteer prospects need proof that the community is real and welcoming
Organizations struggle to serve both audiences on one page without losing either
What you get with this template
You get a complete, single-page layout that moves visitors from emotional connection to committed action. Every section is designed to earn trust gradually, then convert it into a donation or a volunteer sign-up.
A testimonial-led hero with a volunteer portrait and handwritten-style quote
A modular card grid with crew profiles, before-and-after creek cards, a live volunteer hours counter, and two-column story cards
A donation call-to-action section with three preset amounts linked to real outcomes, a custom amount field, and a secondary volunteer sign-up path
Theme
Nature-Inspired
Creative direction
Team & People
Color system
Teal Catalyst
Style
Card Grid (Modular)
Direction
Donation/Fundraising
Page Sections
Testimonial Card Hero
Modular Card Grid with Story Cards
Scroll-triggered Stagger Animations
Floating Donation Bar on Scroll
Preset Donation Amounts with Real Outcomes
Animated Impact Counter Section
Related questions
Can this template support both donor and volunteer audiences at once?
How does the donation section work?
What animations are included in this template?
Can I update the volunteer portraits and crew profiles?
Is this template suitable for a small volunteer group, not just large nonprofits?
Feature list
Testimonial Card Hero
The page opens with a single oversized testimonial card on a lichen-white field. It features a volunteer portrait mid-laugh, soil on their forearm, a handwritten-style quote, and small charcoal sans-serif text showing name, age, and hours logged. There is no stock photography and no landscape hero. A human face arrives first.
Modular Card Grid Layout
The body of the page is a responsive card grid where each card tells one story. Cards show crew leader profiles with projects completed, before-and-after creek bank photography, a live volunteer hours counter, and wider two-column story cards with short field narratives. The rhythm alternates faces with impact so visitors feel both the community and the consequence.
Scroll-Triggered Card Animations
Cards stagger into view on scroll with a gentle rise effect, built with GSAP ScrollTrigger. The motion feels like seedlings pushing through soil rather than a mechanical fade. Every third row introduces a wider story card that spans two columns for editorial pacing.
Floating Donation Bar
After the visitor scrolls past the third row of cards, a gentle floating bar pins to the screen with the primary call-to-action. It stays present without interrupting the reading experience, giving donors a clear path to give at any point in the scroll.
Preset Donation Amounts with Tangible Outcomes
The donation section offers three preset amounts tied to specific, real-world results. Twenty-five dollars plants twelve native saplings. Seventy-five dollars equips one weekend crew. One hundred and fifty dollars restores fifty feet of streambank. A custom amount field is also available for donors who want to give more.
Impact Counter Section
An animated counter section shows watershed statistics ticking upward in real time. The CSS counter animation runs client-side and reinforces the sense that work is happening now, not in the past.
Page sections overview
Section
Purpose
Hero testimonial card
Opens with a real volunteer face and quote to build immediate trust
Modular card grid
Alternates crew profiles, creek photography, and story cards for community proof
Impact numbers
Animated watershed counters show cumulative volunteer hours and restoration milestones
Testimonial slider
Rotating field voices deepen social proof with multiple community perspectives
Donation call-to-action
Preset amounts tied to outcomes plus a secondary volunteer sign-up path
Footer
Single-row linear layout with navigation and organizational links
Design & branding system
The visual identity follows a nature-inspired direction built around the Teal Catalyst color system. The palette feels like wet moss on a fallen log: alive, quiet, and insistently green. Typography pairs Fraunces serif display headings with DM Sans for body text and interface elements.
Deep watershed teal (#1A7A6D) anchors card borders and button states; sun-through-canopy gold (#E2B93B) activates on hover and progress indicators; river-stone charcoal (#2D3436) grounds body text; lichen white (#F0F5F1) keeps the grid airy between stories
Handwritten-style type appears in the hero testimonial quote to contrast with the clean sans-serif body copy
The editorial card layout creates visual breathing room so faces and numbers never compete for attention
Mobile & speed optimization
The template is built mobile-first because volunteers check pages on their phones at trailheads, not at desks. The layout adapts from a single-column card stack on small screens to a full editorial grid on desktop.
Static grid sections use server components to keep initial load light; the counter, slider, and floating bar run as client components only where interactivity is needed
The floating donation bar is designed to remain visible and usable on small screens without covering critical content
How this template helps you convert
The page is structured to earn the gift rather than demand it. Visitors move through a deliberate sequence that builds belonging before presenting a financial ask.
The testimonial hero creates an immediate human connection, so visitors feel they already know someone in the organization before reading a single statistic
The modular card grid delivers layered social proof through crew profiles, visual before-and-after results, and a live hours counter, building credibility row by row
The floating donation bar and preset amounts with concrete outcomes remove hesitation at the moment of decision, making it easy to give a meaningful amount quickly
Other information about this template
This template is categorized under Community and Nonprofit, with a focus on volunteer and community group use cases. It is a single-page, section-led layout optimized for donation and fundraising conversion alongside volunteer recruitment.
The template style is a card grid (modular), making it straightforward to swap crew stories, update photography, and refresh impact numbers as the organization grows
The creative direction is Team and People, meaning every design decision prioritizes human faces and field moments over abstract branding
The header concept is a Testimonial Card, which is a deliberate structural choice that puts community voice before organizational messaging
The intersection of fundraising direction and volunteer niche makes this layout suitable for annual giving campaigns, watershed stewardship drives, and community trail restoration events
