Catalyst - Empowering Mentalhealth Landing Page Template

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.

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

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.

1. The manifesto hero creates emotional recognition immediately, making visitors feel seen before any organization branding appears.
2. The masonry grid delivers educational content and free resources across three formats, building credibility and demonstrating the organization's practical value.
3. 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

Show more