Advocate is a modular card-grid landing page built for human rights grassroots organizations. It leads with a full-screen video header, flows through portrait-first team and community cards, and drives visitors toward a donation or campaign page with a marigold call-to-action button and a sticky bottom bar. The design feels warm, bold, and deeply human.
by Rocket studio
Loading preview…
Quick summary
Advocate is a single-page, click-through landing page template for grassroots human rights organizations. It pairs a full-screen video header with a modular card grid that puts real people front and center. The layout guides visitors through team portraits, community member stories, and full-width family outcome quotes before landing them on a clear, emotionally resonant call to action.
Who this template is for
This template is built for organizations where the people doing the work are the story. It fits groups that lead with community trust rather than polished institutional branding.
Grassroots legal aid and community organizing collectives
Human rights nonprofits that serve undocumented families, housing-insecure residents, or youth aging out of foster care
Volunteer-driven advocacy groups that need a donation or campaign landing page without a contact form
What problem this template solves
Most nonprofit landing pages feel transactional. They ask for money before they earn it. Advocate solves this by making visitors feel they already know the people their action will support, so the call to action lands with real weight.
Generic templates bury the human element under statistics and stock imagery
Organizations serving marginalized communities need layouts that honor, not exhibit, the people they work with
Donors and volunteers need to feel the stakes before they are asked to act
What you get with this template
You get a fully structured, single-page layout designed to move emotionally invested visitors toward a donation or campaign page. Every section is purposeful and prompt-built.
A full-screen video background header with a hearthstone headline overlay and a primary call-to-action button
A modular portrait card grid that flows from staff to volunteers to community members, with quote-first layouts and tappable cards linking to deeper stories
Full-width pull quote sections on deep teal backgrounds, a second call-to-action block with a marigold-on-charcoal treatment, a sticky bottom bar that appears after the second card cluster, and a minimal horizontal-flow footer
Theme
Family First
Creative direction
Team & People
Color system
Teal Catalyst
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Full-screen Video Background Header
Quote-first Modular Portrait Cards
Full-width Family Outcome Pull Quotes
Sticky Call-to-action Bottom Bar
Scroll-triggered Staggered Card Reveals
Minimal Horizontal-flow Footer
Related questions
Does this template include a donation form?
Can I use this template without video footage?
Are the portrait cards only for staff members?
How does the sticky bottom bar work?
What type of organization is this template best suited for?
Feature list
This section describes the core built-in capabilities of the Advocate template.
Full-Screen Video Background Header
The header plays looping handheld footage, warm-graded and ambient, over which a single hearthstone headline fades in. A poster fallback holds the layout while the video loads. A floating quick-access card and the primary call-to-action button sit beneath the headline, giving visitors an immediate path forward.
Quote-First Modular Card Grid
Each portrait card leads with a single sentence in the subject's own words. The name follows, and the role label is the smallest element. Cards are tappable, linking visitors to a fuller individual story. The grid shifts progressively from staff to volunteers to community members, softening the boundary between who serves and who is served.
Full-Width Family Outcome Pull Quotes
Between card clusters, full-bleed sections on deep action teal (#0D7377) surface real outcome statements from families. A custody case won, a deportation halted, a lease renewed. These sections ground the portrait grid in tangible results and carry emotional momentum into the next call to action.
Sticky Call-to-Action Bottom Bar
After the second card cluster, a sticky bottom bar appears and follows the visitor down the rest of the page. It carries the primary call to action in marigold on charcoal, keeping the next step visible without interrupting the scroll experience.
Scroll-Triggered Card Reveals
Cards enter the viewport through staggered, scroll-triggered reveal animations. The grid never dumps all content at once. Each reveal reinforces the sense of meeting someone new, which supports the page's core emotional arc.
Minimal Horizontal-Flow Footer
The footer uses a clean horizontal layout with essential links and no distracting secondary content. It keeps the page's warm editorial energy intact through to the final pixel.
Page sections overview
Section
Purpose
Hero Video Header
Sets emotional tone, delivers headline and primary call to action
Floating Quick-Access Card
Gives visitors an immediate shortcut to key information
Staff Portrait Cards
Introduces the core team through quote-first modular cards
Family Pull Quote
Anchors staff section with a real outcome statement on deep teal
Volunteer and Community Cards
Blurs the line between organizers and the people they serve
Second Pull Quote
Reinforces impact before the campaign call to action
Campaign Call to Action
Marigold-on-charcoal block that triggers the sticky bottom bar
Sticky Bottom Bar
Persistent call to action visible after the second card cluster
Minimal Footer
Clean horizontal links, no secondary distractions
Design & branding system
The Teal Catalyst color system gives Advocate the energy of a community center mural: bold enough to be seen from the street, warm enough to walk inside. Typography reinforces this with editorial serif headlines paired with a clean, readable body typeface.
Colors: deep action teal (#0D7377) as the primary brand tone, warm hearthstone (#F4E4C1) on card backgrounds and section fills, charcoal (#2C2C2C) for body text and headlines, and marigold (#E8A838) on buttons, badges, and hover states
Typography: Fraunces serif for headlines, Manrope for body text and interface elements
Visual style: warm editorial with community mural energy, bold and intimate, no stock imagery in the brief-defined hero footage
Mobile & speed optimization
The template is built mobile-first, reflecting the reality that families and volunteers primarily reach this page on phones. Every layout decision starts at small screen and scales up.
The video header includes a poster image fallback so the layout renders correctly before the video loads
Card grids use lazy image loading to reduce initial page weight on mobile connections
Scroll-triggered animations are staggered to avoid layout jank on slower devices
How this template helps you convert
Advocate earns the click before it asks for one. The page is structured so that visitors feel emotionally invested in the people their action will support well before the primary call to action repeats.
The full-screen video header creates immediate human connection, and the first call-to-action button appears while that connection is strongest, directly beneath the headline
The modular card grid builds familiarity across multiple sections, so by the time the sticky bottom bar appears after the second cluster, declining to act feels like leaving a conversation mid-sentence
Every tappable card links to a deeper individual story, keeping highly engaged visitors on a path toward greater commitment rather than bouncing them off the page
Other information about this template
Advocate is part of a broader Family First theme family, designed specifically for organizations whose work centers on keeping families together. It is a click-through landing page, meaning there is no contact form or intake flow on this page. Its sole purpose is to move emotionally ready visitors to a dedicated donation or campaign page.
Template style: Card Grid (Modular), suited to organizations with rich human stories to tell across multiple people
Landing page direction: Click-Through, optimized for a single outbound action rather than on-page data capture
Header concept: Full-Screen Video Background, designed to use authentic handheld footage rather than polished production content
Creative direction: Team and People, structured to dissolve the hierarchy between those who serve and those who are served
The theme supports English-language copy, United States localization, and dollar currency by default
