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
Loading preview…
Quick summary
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.
Who this template is for
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.
School counselors and education administrators building student wellness programs
Human resources directors developing employee assistance program materials
Church leaders, caregivers, and community advocates reaching people before a crisis
What problem this template solves
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.
Visitors arrive overwhelmed and leave without taking a step toward help
Advocacy organizations lose warm leads because their pages ask before they give
Communities stay stuck in silence because no one offers a practical first move
What you get with this template
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.
A staggered manifesto hero section with a pulsing scroll cue on a deep teal viewport
A two-phase masonry grid that shifts from stigma statistics to practical tools and real stories
Three free resource blocks followed by a role-selector lead generation form on a warm sand panel
Feature list
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
Related questions
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?
Staggered Manifesto Hero Section
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.
Two-Phase Masonry Grid Layout
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.
Role-Selector Lead Generation Form
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.
Three Free Resource Blocks
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.
Secondary Download Call to Action
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.
GSAP ScrollTrigger Animations
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.
Page sections overview
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
Design & branding system
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.
Deep therapeutic teal (#0D7377) dominates section backgrounds in alternating depths; soft exhale mint (#B2DFDB) highlights pull-quotes and data callouts
Warm skin-tone sand (#F5E6CC) warms card surfaces and the lead generation panel; grounding charcoal (#2C3E50) keeps body text legible and steady
The overall visual theme follows an Educational Guide style, intentionally steady rather than urgent, holding space for difficult conversations
Mobile & speed optimization
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.
Masonry columns reflow gracefully for mobile viewports, keeping card content readable without horizontal scrolling
Server Components handle static content sections to keep the initial page load light, while images are lazy-loaded as the visitor scrolls
How this template helps you convert
The page is structured around a give-first conversion model. Visitors receive value at every scroll depth before they encounter a single form field.
The manifesto hero creates emotional recognition immediately, making visitors feel seen before any organization branding appears.
The masonry grid delivers educational content and free resources across three formats, building credibility and demonstrating the organization's practical value.
The role-selector form and secondary download path offer two commitment levels, allowing each visitor to convert at the pace they are ready for.
Other information about this template
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.
Built with Next.js using Server Components for static sections and lazy image loading for scroll-heavy masonry layouts
Typography uses Fraunces for emotional serif headings and DM Sans for clean, unhurried body text across all devices
The footer follows a horizontal flow pattern suitable for organizational contact details, social links, and secondary navigation
The template supports English (United States) localization with no currency display, keeping it appropriate for nonprofit and advocacy contexts
