Refuge is a warm, documentary-style animal rights landing page template built for community foundations rooted in real rescue work. A full-bleed hero photo opens the page, and a masonry grid of volunteer stories follows. Resource tiles weave between the people who wrote them. A sticky toolkit call to action closes the loop with a single email field and role selector.
by Rocket studio
Loading preview…
Quick summary
Refuge is a masonry-style landing page template for animal rights community foundations. It pairs a cinematic full-bleed hero with a scrollable grid of person-and-animal story tiles. Resource downloads live inside the grid, alongside the volunteers who created them. A sticky bottom bar drives toolkit signups with an email field and a role selector.
Who this template is for
This template was built for grassroots animal welfare organizations that lead with people and stories rather than polished branding. If your community grows through trust, not ads, this layout earns that trust naturally.
Rescue volunteer networks and trap-neuter-return coordinators looking for a credible online home
Animal welfare foundations wanting to share resources with fosters, shelter partners, and donors
Small nonprofit teams who need a ready-to-use page that feels human and community-built
What problem this template solves
Most nonprofit page templates feel corporate and hollow. They lead with donation buttons before earning the visitor's attention. For a foundation built on midnight bottle-feeding shifts and backyard rabbit sanctuaries, that mismatch costs real community trust.
Visitors land on generic layouts that don't reflect the warmth or depth of the people behind the work
Resource downloads get buried in navigation menus instead of surfacing where they're most relevant
Volunteer and donor prospects scroll away before they ever feel connected to the mission
What you get with this template
You get a complete single-page layout designed for an animal rights community foundation. Every section was planned around a specific moment in the visitor's journey, from the first image to the final signup.
A full-bleed cinematic hero with lowercase caption type and golden-hour documentary framing
A masonry people grid with person-and-animal tiles, pull quotes, and individual impact stats
Woven-in resource tiles for foster handbooks, ordinance templates, and emergency vet fund guides
Theme
Community Hearth
Creative direction
Team & People
Color system
Teal Catalyst
Style
Masonry/Pinterest
Direction
Content/Resource
Page Sections
Full-bleed Documentary Hero
Masonry People-and-animal Grid
Woven Resource Tiles
Sticky Toolkit Call-to-action Bar
GSAP Scrolltrigger Tile Reveals
Community Stats Bar
Related questions
Can I customize the color palette and typography?
How does the resource download gate work?
Is this template suitable for a small volunteer-run organization?
What types of resources can I feature inside the grid tiles?
Does the sticky toolbar display correctly on mobile phones?
A community stats bar for aggregate credibility numbers
A sticky bottom call-to-action bar with an email field and role selector, triggered after the third row of tiles
Feature list
This template delivers a focused set of capabilities drawn directly from the project brief. Each feature supports the page's core purpose: let the community speak first, then earn the toolkit click.
Full-Bleed Documentary Hero
The hero section uses a wide, warmly lit candid photograph as its backdrop. The foundation name appears in lowercase wool-cream type along the bottom edge, styled like a caption in a documentary still. No hero headline competes with the image, the photo does the talking.
Masonry People-and-Animal Grid
The scrollable grid arranges volunteer story tiles in a masonry layout with varied heights and aspect ratios. Each tile pairs a portrait with a pull quote in the subject's own words and a single personal impact stat. Tiles grow denser as the visitor scrolls, building a felt sense of community size.
Woven Resource Tiles
Downloadable resource tiles appear naturally between person tiles throughout the grid. Each resource tile carries a "Download This Guide" button in spark amber. No extra navigation is needed to find the foster handbooks, local ordinance templates, or emergency vet fund guides.
Sticky Toolkit Call-to-Action Bar
A sticky bar anchors to the bottom of the viewport after the visitor has scrolled past the third tile row. It holds a single email field and a role selector covering volunteer, educator, shelter partner, and donor. The bar appears only after the visitor has spent real time with the community stories.
GSAP ScrollTrigger Tile Animations
Tiles load with staggered reveal animations driven by GSAP ScrollTrigger. Each row enters the viewport with a staged entrance rather than a flat page load. The effect reinforces the feeling that the community is always arriving, always expanding.
Community Stats Bar
A dedicated stats bar surfaces aggregate credibility numbers such as animals helped and counties reached. It sits between the grid and the sticky call-to-action zone. The numbers anchor the emotional stories in concrete, verifiable impact.
Page sections overview
Section
Purpose
Full-Bleed Hero
Opens with a cinematic volunteer photo and lowercase foundation caption
Masonry People Grid
Scrollable volunteer story tiles with portraits, quotes, and impact stats
Woven Resource Tiles
Downloadable guides surfaced naturally between people tiles
Community Stats Bar
Aggregate numbers that ground the emotional stories in real impact
Sticky Toolkit Bar
Email and role-selector signup that appears after the third tile row
Footer
Horizontal flow footer pattern for navigation and secondary links
Design & branding system
The visual identity follows a Community Hearth theme. The palette is warm, earthy, and intentionally imperfect, like a hand-knit blanket on a porch rail at dusk. Typography pairs a documentary serif with a clean, readable body face.
Color system: deep hearth teal (#1A6B5C) for headers and navigation, soft wool cream (#F5F0E8) for backgrounds, weathered barn umber (#5C3D2E) for body text, and spark amber (#E8A838) for calls to action and hover states
Typography: Fraunces (serif) for display and pull quotes to carry the documentary warmth, DM Sans for body copy to keep reading comfortable
Visual style: warm documentary and farmhouse kitchen aesthetic with candid photography, dust motes, golden-hour side light, and no posed expressions
Mobile & speed optimization
Volunteers scroll this page on phones between transport shifts. The template was built mobile-first with that reality in mind. Every layout decision serves a small screen before scaling up to desktop.
Masonry grid adapts responsively so tiles remain readable and tappable on narrow screens
Images are lazy-loaded so the page begins rendering before all photos have fully arrived
CSS smooth scroll keeps navigation transitions fluid across device sizes
How this template helps you convert
The page earns the conversion before it ever asks for one. By the time the sticky bar appears, the visitor has already read a dozen volunteer stories and downloaded a guide or two. The architecture sequences trust before action.
The masonry grid builds emotional investment story by story, so the toolkit bar feels like a natural next step rather than an interruption
Resource tiles inside the grid offer immediate value with amber "Download This Guide" buttons, creating a low-stakes first conversion that warms the visitor toward the email gate
The sticky bar's role selector signals that the foundation serves multiple types of contributors, making each visitor feel personally addressed rather than generically solicited
Other information about this template
This template is purpose-built for the animal rights nonprofit niche and the broader community foundation space. It suits organizations that blend advocacy, education, and mutual aid under one roof.
Template style: Masonry/Pinterest layout with staggered GSAP tile reveals and a modal email gate
Designed for English-language, US-context organizations using USD and US date formats, with a rural community sensibility baked into the visual tone
The footer uses a horizontal flow pattern suitable for secondary navigation links, social handles, and legal copy
The resource library is gated by a single email field plus role selector, keeping friction minimal while segmenting the audience for future outreach
