Catalyst - Playful Chemistry Landing Page Template

Quick summary

Catalyst is a sidebar companion landing page template designed for chemistry video lesson libraries. It uses a Case Study Narrative structure to walk visitors through three real learner stories, each ending with a clear breakthrough moment. A fixed sidebar tracks lesson topics as you scroll, a five-question diagnostic quiz matches learners to their starting point, and a Playful Geometric color system keeps the page calm but alive.

Who this template is for

This template is built for educators and course creators who teach chemistry through video. It works especially well when your audience includes learners at very different starting points who all need a reason to trust you before they commit.

• Chemistry tutors and independent educators building a video lesson library online
• Homeschool parents and adult learners looking for a self-paced chemistry resource
• Pre-med students and advanced high school learners preparing for standardized exams

What problem this template solves

Chemistry learners often arrive at a course page and leave immediately. The subject feels intimidating, and a plain list of video titles gives no sense of how the teaching actually feels. This template solves that by showing the learning experience before asking for a commitment.

• Abstract course listings give visitors no emotional reason to stay or scroll
• Learners at different skill levels cannot tell whether the content is right for them
• Generic call-to-action buttons like "Enroll Now" push visitors away before trust is established

What you get with this template

You get a complete single-page layout that combines storytelling, interactivity, and smart navigation in one cohesive design. Every section is built from the source brief and ready to be populated with your own lesson content and learner stories.

• A Half-Page Photo and Text split header with an animated hexagon ring accent
• Three scrollable case study blocks, each with a quote, an embedded lesson clip, and a before-and-after outcome
• A fixed sidebar table of contents that highlights the current lesson topic as the user scrolls
• A five-question interactive diagnostic quiz with drag-and-drop molecule interactions leading to a personalized lesson playlist
• A dual call-to-action path: a diagnostic entry point and a direct browse option for confident visitors

Feature list

A paragraph introduces each feature block below. These are the core capabilities built into the Catalyst template as described in the source brief.

Half-Page Split Header

The header divides into two equal halves. The left side holds a still frame from a real lesson, showing a hand mid-draw on a glass whiteboard with a half-finished Lewis structure in teal marker. The right side carries a headline and a softly pulsing animated hexagon ring that sets the tone immediately.

Fixed Scroll-Tracking Sidebar

A sidebar companion stays visible as the visitor scrolls through the case study narrative. It displays a mini table of contents of lesson topics and highlights the active section in real time. This quietly communicates the depth of the lesson library without interrupting the storytelling flow.

Case Study Narrative Scroll

The main content area follows three distinct learner stories in a before-and-after format. Each story opens with a direct quote and a score, includes an embedded lesson clip, and closes with the measurable outcome. The three profiles cover a struggling AP student, a returning adult learner, and a visual learner who was failed by traditional textbooks.

Interactive Diagnostic Quiz

The primary call to action leads to a five-question quiz that identifies gaps across five foundational chemistry topics: atomic structure, bonding, stoichiometry, equilibrium, and organic chemistry basics. Questions use geometric molecule drag-and-drop interactions instead of plain multiple choice, making the assessment feel consistent with the visual identity.

Personalized Lesson Playlist Output

After the diagnostic, the results screen delivers a custom lesson playlist based on the learner's identified gaps. The first three videos in the playlist are unlocked immediately at no cost, giving new visitors a tangible reason to start without any barrier.

Dual Call-to-Action Paths

The template offers two conversion paths in parallel. The primary path invites visitors to find their starting point through the diagnostic quiz. The secondary path lets confident visitors skip the quiz and browse the full lesson library directly. Both paths are visible so no visitor feels forced into a single flow.

Page sections overview

Design & branding system

The Soft Mist color system gives the page a calm, studious feel that is easy to spend hours inside. Bright orbital teal provides just enough contrast to keep buttons, progress indicators, and molecular diagram accents visible without feeling aggressive.

• Diffused lavender-gray (#D6D2E0) on backgrounds, chalkboard charcoal (#3B3B4F) for body text, and pale cloud white (#F4F2F7) for card surfaces
• Bright orbital teal (#3ECFB4) applied to buttons, progress rings, the teal marker in the header image, and molecular diagram accent lines
• Playful Geometric theme expressed through animated hexagon rings, geometric molecule models, and drag-and-drop molecule visuals in the quiz

Mobile & speed optimization

The Catalyst template is designed with a layout that adapts cleanly to smaller screens. The sidebar companion and the split header both reflow gracefully so the core storytelling experience is never broken on a phone or tablet.

• The fixed sidebar collapses into an accessible in-page navigation element on narrow viewports
• Embedded lesson clips and drag-and-drop quiz interactions are sized and spaced for touch use
• Card surfaces in pale cloud white maintain contrast against the lavender-gray background at all screen sizes

How this template helps you convert

Every design and content decision in Catalyst is aimed at reducing hesitation and building enough trust for a first action. The page works in layers, earning the visitor's confidence before asking for anything.

1. The case study narrative replaces abstract course descriptions with real learner outcomes, making the value of the lesson library concrete and believable before any button is clicked
2. The interactive diagnostic quiz replaces a generic sign-up form with a personalized experience, so the first touchpoint feels useful rather than transactional
3. The free unlocked playlist at the end of the quiz gives visitors an immediate reward, lowering the barrier to starting and increasing the likelihood they continue into the paid lesson library

Other information about this template

Catalyst is a single landing page template, not a multi-page site or a course platform. It is built to sit alongside an existing lesson library and act as the primary entry and orientation point for new visitors.

• The template style is Sidebar Companion, meaning the fixed navigation element is a core structural feature, not an optional add-on
• The creative direction is Case Study Narrative, so the storytelling structure is intentional and central to how the page communicates value
• The lp_direction is Quiz and Assessment, which means the diagnostic flow and the personalized playlist output are the primary conversion mechanism
• The header concept is Half-Page Photo and Text, using a real lesson still frame on the left and headline copy with the animated hexagon ring on the right
• The theme is Playful Geometric and the color system is Soft Mist, both of which define the visual tone across every section of the page

Show more