Advocate is a masonry-style disability advocacy landing page built for grassroots organizations that show up in person for the people institutions overlook. A testimonial card hero, candid team tiles, anonymized case outcomes, and impact statistics build human trust before a single click is asked. The page directs visitors to an intake questionnaire through a warm, clear call to action.
by Rocket studio
Loading preview…
Quick summary
Advocate is a single-page disability advocacy landing page designed around social proof first and action second. A stacked testimonial card opens the page, a masonry grid of team photos and outcome tiles builds credibility through the scroll, and a persistent gold call-to-action button guides visitors toward an intake questionnaire when they are ready.
Who this template is for
This template is built for grassroots disability advocacy organizations that do the hands-on work: attending hearings, drafting accommodation letters, and sitting beside families when institutions stop listening.
Nonprofit advocacy teams serving parents, veterans, and workers navigating disability-related disputes
Organizations that rely on human trust and demonstrated outcomes rather than polished corporate branding
Caseworker networks and referral partners looking for a credible, clearly scoped advocacy resource to share
What problem this template solves
Many advocacy organizations struggle to communicate their real-world value online. A generic nonprofit page fails the visitor who arrives scared and skeptical, unsure whether anyone will actually understand their situation.
Visitors need to feel believed before they will share personal details or initiate contact
Outcome-driven design is hard to build from scratch without a structure that balances proof, warmth, and clear next steps
Mobile visitors, often calling from waiting rooms or in moments of crisis, need fast orientation and a single obvious path forward
What you get with this template
This template gives you a complete, ready-to-customize landing page structure built around the emotional journey of a first-time advocacy client. Every section earns the visitor's trust before asking for anything.
A testimonial card hero with a stacked card effect, pull quote, client photo, and anonymized case identifier
A full masonry grid section combining candid team photography tiles, anonymized client outcome tiles, and large gold statistics tiles
Theme
Civic Service
Creative direction
Team & People
Color system
Cloud Canvas
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Stacked Testimonial Card Hero
Masonry Team and Outcome Grid
Persistent Floating Call-to-action Button
Secondary Evaluator Text Link
Scroll-triggered Masonry Animations
Full-width Impact Numbers Band
Related questions
Does this landing page include a contact form?
Can I update the testimonials, team photos, and statistics with my own content?
Who is this template designed to reach?
What service areas does the page structure cover?
Is this template suitable for a small or volunteer-run organization?
A services overview section, an impact numbers band, and a repeating call-to-action section with a floating persistent button
Feature list
A paragraph introduces the feature set: each component below reflects a specific structural and design decision from the source brief, built to serve a disability advocacy audience.
Stacked Testimonial Card Hero
The header opens with one oversized testimonial card set against a cloud-white canvas. A second card peeks behind it, suggesting a stack of client stories. The pull quote uses Fraunces display type, and a circular client photo with a first name and case descriptor grounds it in real experience.
Masonry Team and Outcome Grid
Lead advocates appear in large portrait tiles showing candid workplace moments: mid-call with notes visible, walking into a courthouse, reviewing documents beside a client whose face is turned away for privacy. Smaller square tiles carry anonymized case outcomes with case durations. Gold statistic tiles break the rhythm with measurable impact figures.
Persistent Floating Call-to-Action Button
The primary call-to-action button, labeled "Tell Us What Happened," appears first beneath the hero and returns as a floating button after the third scroll fold. It leads to a guided intake questionnaire on a separate page, keeping this landing page free of forms.
Secondary Evaluator Link
A text link reading "Not sure if we can help? Check our case types" sits beside the primary call to action. It catches visitors who are still assessing whether the organization handles their specific situation, reducing drop-off from uncertainty.
Scroll-Triggered Masonry Animations
The masonry grid loads with staggered scroll-triggered tile reveals, parallax card depth on the hero, and a hover effect that transitions team photos from grayscale to full color. The floating call-to-action button fades in after the third scroll fold.
Impact Numbers Band
A full-width section displays key outcome statistics in large gold type. These figures, for example "214 accommodations secured in 2024," anchor the human stories in measurable proof and reinforce organizational credibility at a glance.
Page sections overview
Section
Purpose
Testimonial Card Hero
Opens with client voice and stacked card social proof
Team Masonry Grid
Shows real advocates and anonymized client outcomes
Services Overview
Covers education, housing, employment, and benefits scope
Impact Numbers Band
Displays key outcome statistics in large gold type
Secondary Call to Action
Repeats intake prompt with floating persistent button
Footer
Single-row linear footer with navigation and contact links
Design & branding system
The visual identity follows a Civic Service theme. The palette and typography work together to feel like a well-lit community office: organized, legible, and quietly authoritative rather than corporate or clinical.
Colors: cloud canvas white (#F4F1EB) for backgrounds, deep slate (#4A4A4A) for body text, muted civic blue (#6B89A8) for card borders and section dividers, and warm affirmation gold (#D4A843) reserved for calls to action and pull-quote borders
Typography: DM Sans for body text and interface labels, Fraunces for pull quotes and display headlines
Visual style: soft card shadows, no stock hero illustrations, candid photography only, newspaper-grid structure meets community office warmth
Mobile & speed optimization
This template is built mobile-first, reflecting the reality that many disability advocacy clients reach out from phones in waiting rooms, hospital corridors, or courthouse lobbies.
The masonry grid reflows gracefully for smaller screens, keeping tiles readable and the call-to-action button always reachable
Scroll-triggered animations use Client Components while static content sections use Server Components, keeping the initial load lightweight
The floating call-to-action button remains accessible throughout the scroll on all screen sizes
How this template helps you convert
Conversion here means earning a click to the intake questionnaire. The page is structured to build trust through layered proof before it ever surfaces a request for action.
The testimonial card hero leads with a client voice, not a headline pitch, so visitors feel recognized before they read another word
The masonry grid stacks human faces, outcome data, and impact statistics in a rhythm that accumulates credibility scroll by scroll
The persistent floating call-to-action button stays within reach throughout the page, so the moment a visitor is ready to act, the path is immediate and clear
Other information about this template
This template is a strong fit for disability rights organizations, Independent Living Centers, and benefits navigation programs that operate in the United States. It is also well-suited for housing advocacy groups, Individualized Education Program (IEP) support organizations, and Veterans Service Organizations that want a people-first web presence.
The template style is Masonry/Pinterest, making it distinctive among typical nonprofit page layouts
The page type is a click-through landing page: no contact form lives here, keeping the page focused and the intake process handled on a dedicated questionnaire page
The Cloud Canvas color system and Civic Service theme can be adapted to match an existing brand by updating color tokens and swapping typography
