Home
Templates
Community & Nonprofit
Mental Health Awareness Nonprofit
Catalyst - Empowering Mentalhealth Landing Page Template
Catalyst is a masonry-style mental health awareness landing page built for nonprofit advocacy organizations. It guides visitors through a Hero's Journey scroll experience, moving from stigma statistics to practical conversation tools and a lead generation form. The deep teal, mint, and sand color system creates a warm, steady atmosphere that feels safe enough to start the conversation.
by Rocket studio
Catalyst is a single-page mental health advocacy landing page template designed for nonprofits that equip communities with conversation tools and educational resources. It opens with a manifesto reveal on deep teal, moves through a masonry scroll journey from stigma to empowerment, and closes with a role-selector lead generation form on a warm sand panel.
This template is built for organizations and individuals who need to start mental health conversations in structured community settings. It works best when the goal is generating leads for workshops, programs, or downloadable resources.
Most people who want to help someone struggling with mental health do not know what to say or where to start. A generic webpage cannot hold that kind of emotional weight or guide a visitor from awareness to action.
You get a fully structured, scroll-driven landing page that earns visitor trust before it asks for anything. Every section has a defined role in moving the reader from recognition to action.
This template includes six purposefully designed features drawn directly from the source brief.




Theme
Educational Guide
Creative direction
Hero's Journey
Color system
Teal Catalyst
Style
Masonry/Pinterest
Direction
Lead Generation
Page Sections
Staggered Manifesto Hero Section
Two-phase Masonry Grid Layout
Role-selector Lead Generation Form
Three Free Resource Blocks
Secondary Download Call to Action
GSAP Scrolltrigger Animations
Who is the primary audience for this landing page template?
Can I use this template without a development background?
What does the lead generation form collect from visitors?
Does this template include the actual downloadable resources?
Is this template suitable for a school counseling program page?
The header fills the full viewport with white text on deep teal. Each line of the manifesto appears on scroll in staggered sequence, building emotional momentum before a single downward arrow pulses to invite the next step.
The masonry grid opens with scattered stigma statistics and misconception cards labeled "The Ordinary World." As the visitor scrolls, the grid tightens and reorganizes around tools, workshops, guides, and real educator and parent story cards, mirroring the journey from overwhelm to clarity.
A short form on a warm sand-colored panel asks visitors to identify their role, such as educator, employer, caregiver, or advocate, along with their organization name and email. This role-selector framing makes the ask feel personal rather than transactional.
Before the form appears, the page delivers three self-contained resources: a stigma-busting fact sheet, a conversation starter toolkit preview, and a two-minute video of a real workshop. This give-first structure earns the lead generation click.
Visitors who are not ready to fill in the contact form can choose "Download the Free Guide" instead. This secondary path keeps reluctant visitors engaged and on a productive path toward the organization's goals.
Card hover states, masonry scroll animations, and the staggered manifesto reveal are all driven by high-fidelity scroll-based animation. The motion design reinforces the emotional arc of the page without distracting from the content.
| Section | Purpose |
|---|---|
| Manifesto Hero | Opens with staggered text on deep teal to create immediate emotional connection |
| Stats Masonry Grid | Presents stigma statistics and misconceptions as scattered cards labeled "The Ordinary World" |
| Tools Masonry Grid | Shifts to workshops, guides, and real stories as the grid tightens into "The Awakening" |
| Free Resources Block | Delivers three ungated resources to build trust before the lead form appears |
| Lead Generation Form | Role-selector form on a warm sand panel converts engaged visitors into program leads |
| Footer | Horizontal flow footer pattern providing navigation and organizational contact context |
The Teal Catalyst color system is built around four specific values that create a warm, educational atmosphere without feeling clinical or childish. Typography pairs Fraunces serif for emotional headings with DM Sans for legible body text.
The template is built with a mobile-first priority because the target audience includes parents and caregivers who search for help late at night on their phones. Layout decisions favor readability on small screens throughout.
The page is structured around a give-first conversion model. Visitors receive value at every scroll depth before they encounter a single form field.
This template is a strong fit for community-facing nonprofit organizations that run workshops, distribute educational materials, or coordinate volunteer-based outreach programs. It is designed as a self-contained single-page experience.