Advocate is a card grid landing page built for international human rights organizations. It guides visitors through active casework, network connections, and documented victories before inviting them to register for a convening event. The warm Community Hearth visual system and a Hero's Journey scroll flow make serious work feel human, urgent, and worth joining.
by Rocket studio
Loading preview…
Quick summary
Advocate is a single-page, modular card grid template for human rights international NGOs. It opens with a powerful testimony card, walks visitors through active cases and network profiles, celebrates documented victories, and closes with an event registration form. Every section is designed to move a professional visitor from witness to participant by the time the form appears.
Who this template is for
This template is built for organizations doing serious international advocacy work. It speaks directly to the professionals who act on what they read.
Pro bono attorneys and human rights clinic directors looking for active cases to join
Diaspora community leaders and philanthropic program officers evaluating where to invest their networks or grant funding
University human rights programs placing student researchers and observers in the field
What problem this template solves
Human rights organizations often struggle to communicate the scale and urgency of their work without losing the human detail that moves people to act. A generic nonprofit page does not earn the trust of a skeptical grant officer or a busy attorney in ten seconds.
Visitors have no clear path from learning about the work to committing to participate
Case documentation, network profiles, and victory records live in separate places with no narrative thread connecting them
Event registration forms appear too early, before the visitor feels invested enough to sign up
What you get with this template
This template delivers a complete single-page layout that carries the visitor through a deliberate emotional and informational arc. Every section is purpose-built and ready to populate with your organization's real content.
A testimony hero card, a modular case grid, network and partner profiles, a victories mosaic, and a full event registration section
A floating amber call-to-action button that appears after the third card row, anchored again in the final section
A secondary document download path that captures an email address for visitors not yet ready to register
Theme
Community Hearth
Creative direction
Hero's Journey
Color system
Soft Mist
Style
Card Grid (Modular)
Direction
Event Registration
Page Sections
Testimonial Hero Card with Archival Photography
Modular Case Card Grid
Network and Partner Cluster Layout
Victories Mosaic Section
Dual Conversion Path System
Scroll-linked Animation and Floating Button
Related questions
Who is this landing page template designed for?
What conversion actions does this template support?
Can I update the case cards and victory records myself?
What information does the registration form collect?
Can this template be used outside of a convening campaign?
Feature list
A brief overview of what makes this template effective for human rights advocacy work follows below.
Testimonial Hero Card
The page opens with a close-cropped, grainy black-and-white photograph of weathered hands holding a handwritten letter. A single sentence of testimony sits over the image in a large serif typeface, followed by a name, a country, and a year. No logo competes. The card breathes in generous whitespace on a fog-gray field.
Modular Case Card Grid
Active cases appear as individual cards, each showing a country, a face, and a two-line summary that ends mid-sentence to invite a click. Cards enter the viewport with staggered scroll-linked reveals, building a sense of accumulating urgency as the visitor scrolls deeper.
Network and Partner Clusters
Midway through the scroll, advocate profiles and partner organization cards reorganize into collaborative clusters. These sections show how individual cases connect into systemic campaigns, introducing mentor figures and institutional partners who give the work credibility.
Victories Mosaic Section
The final card rows shift tone entirely. Cards here document policy changes, freed detainees, and landmark rulings. The grid transforms visually from scattered fragments into an organized mosaic, reflecting the journey from crisis to outcome.
Dual Conversion Paths
The primary call to action reads "Join the Convening" and drives event registration through a form collecting full name, organizational affiliation, role, and preferred session track. A secondary path offers "Read the Full Briefing" as a document download requiring only an email address, nurturing visitors who need more time.
Scroll-Linked Animation System
Card entries are staggered and scroll-triggered. A marquee ticker runs across the page at a designated point. The floating amber button appears after the third card row and stays anchored in the registration section, keeping the primary action visible without being intrusive.
Page sections overview
Section
Purpose
Testimony Hero Card
Opens with named, dated witness testimony to establish emotional grounding
Active Cases Grid
Presents country-level case cards with truncated summaries to prompt clicks
The Network
Introduces advocate profiles and partner organization clusters
Victories Mosaic
Showcases policy wins, freed detainees, and landmark rulings
Join the Convening
Hosts the event registration form and document download call to action
Footer
Provides horizontal navigation flow and organizational links
Design & branding system
The visual identity follows a Community Hearth theme built around a Soft Mist color palette. Every color decision is intentional: backgrounds recede, borders frame quietly, and amber appears only where the eye needs to land.
Fog gray (#E8E4E1) backgrounds, white card surfaces with hearthstone taupe (#A89F91) borders, and candlelight amber (#D4A96A) reserved strictly for buttons, pull quotes, and event dates
Fraunces serif typeface for all headings, DM Sans for body text, creating a warm contrast between gravitas and readability
Black-and-white archival photography treatment on the hero card, with color reintroduced gradually as the scroll moves toward action
Mobile & speed optimization
The template is designed desktop-first, reflecting that primary users are professionals working at desks. Full mobile responsiveness is built in so the layout adapts cleanly across screen sizes.
Scroll-linked reveals and staggered card animations are handled by Client Components, keeping static content rendered server-side for faster initial loads
The registration form and document download capture run as interactive Client Components, isolated from the static sections to avoid unnecessary re-renders
How this template helps you convert
The page architecture is built around a single insight: visitors commit when they already feel part of the work. Every scroll section earns the next click before asking for anything.
The Hero's Journey scroll structure moves visitors emotionally from passive witness through active network member to celebrating shared victories, so the registration form feels like a natural next step rather than an interruption.
The floating "Join the Convening" button appears only after three full card rows, giving the visitor enough context to act with confidence rather than bounce from a cold ask.
The secondary "Read the Full Briefing" download path keeps reluctant visitors in the funnel by offering a lower-commitment entry point that still captures contact information.
Other information about this template
This template is a strong fit for organizations preparing for an annual convening, a funding cycle pitch, or a campaign launch that needs a single authoritative page to send to high-value contacts.
The card grid layout is modular, meaning individual case cards, advocate profiles, and victory records can be updated independently without redesigning the page
The Vercel Horizontal Flow footer pattern provides clean navigation and organizational link structure at the bottom of the page
Typography, color tokens, and spacing are organized to make future rebranding straightforward for in-house design teams
The page is built in English with USD grant amounts and international datelines in mind, making it ready for a global professional audience
