Home
Templates
Community & Nonprofit
Education & Literacy Nonprofit
Catalyst - Inspiring Stem Landing Page Template
Catalyst is a single-column landing page template built for STEM education nonprofits running community workshops. It guides parents, school counselors, and corporate sponsors from a cinematic hero section through a scrolling origin timeline, three program offerings, student testimonials, and a registration form, moving every visitor toward one confident action: reserving a seat.
by Rocket studio
Catalyst is a focused, single-column landing page template for STEM education nonprofits. It pairs a documentary-style origin timeline with a practical event registration flow. The design uses warm industrial visuals, a chalkboard-and-cloud color system, and scroll-triggered animations to build trust before the ask ever appears.
This template is designed for youth-focused STEM organizations that run hands-on community workshops. It speaks directly to the people most likely to act on what they find.
Most nonprofit landing pages ask for something before they earn it. They lead with a form, skip the story, and leave visitors wondering whether the organization is real or worth trusting. Catalyst reverses that order.
You get a fully structured, single-column landing page designed around one goal: getting the right person to register or sponsor. Every section has a defined job.
This template includes purpose-built sections and interactive details grounded in the source brief. Each element earns its place.




Theme
Healing Space
Creative direction
Origin Story
Color system
Slate & Sky
Style
Single Column Flow
Direction
Event Registration
Page Sections
Cinematic Half-page Hero
Scroll-triggered Origin Timeline
Asymmetric Program Bento Grid
Corkboard Testimonial Display
Sticky Registration Call-to-action Bar
Dual-path Registration Form
Can I change the workshop programs shown in the template?
Is the registration form connected to any external platform?
Can corporate sponsors use this page without filling out the parent registration flow?
How does the count-up animation on the timeline work?
Does this template suit an organization that is just getting started?
The hero uses a half-page photo-and-text layout. A teenager mid-task in safety goggles anchors the left side. A right-aligned cloud-white headline carries a real student quote. A sunrise-amber button reads "Reserve a Seat for Your Student" and sets the tone from the first scroll.
The documentary-style timeline walks visitors through the organization's growth year by year. Milestone stats count up as each year scrolls into view using IntersectionObserver-triggered animations. The sequence moves from a single folding table to 300-plus alumni, building momentum toward the registration section.
Three programs are displayed in an asymmetric bento-style grid: Robotics, Coding, and Rocketry. Each card gives visitors a clear sense of what students actually do before they commit to a session preference in the form.
Student quotes appear in a handwritten-style typographic treatment, pinned at slight angles like notes on a physical corkboard. The tilt effect adds tactile warmth and reinforces the garage-workshop personality of the organization.
After the origin timeline, a sticky bar appears and stays visible as the visitor continues scrolling. It carries the primary call to action, keeping the registration path accessible without interrupting the content flow.
The registration form collects student first name, age, guardian email, and a session-preference dropdown (Robotics, Coding, Rocketry). A secondary sponsor path below the form reads "Sponsor a Student Seat, $75," giving corporate visitors and donors a clear, separate action to take.
| Section | Purpose |
|---|---|
| Hero photo header | Introduces the program with a student image, punchy quote, date, location, and primary registration button |
| Origin story timeline | Builds trust through year-by-year growth milestones and count-up statistics |
| Programs bento grid | Presents Robotics, Coding, and Rocketry as distinct, choosable tracks |
| Student testimonials | Displays corkboard-style handwritten quotes to humanize the program's impact |
| Registration form | Collects student details and session preference; offers a sponsor path below |
| Footer row | Single-row linear footer with essential links and organization information |
The visual identity follows a Healing Space theme built around a Slate and Sky color palette. The mood is warm, grounded, and quietly energizing, like the first clear hour after a rainstorm.
The template is built desktop-first, reflecting how school counselors and corporate visitors typically browse. A strong mobile fallback ensures parents searching from their phones have an equally clear path to the form.
Every structural decision in Catalyst is designed to reduce hesitation and move visitors toward one clear action.
Catalyst is part of a focused set of templates built for community-driven organizations that need to prove impact before making an ask. A few additional details worth knowing: