Catalog is a scroll-reveal landing page template built for e-commerce course and training platforms. It opens with a logo ticker and a bold headline, then leads visitors through an interactive Revenue Projection Calculator before progressively revealing course modules, a side-by-side comparison table, and a value-first email capture. The result is a page that earns trust before it asks for anything.
by Rocket studio
Catalog is a single-page, scroll-reveal landing page template designed for e-commerce training platforms. It combines a Revenue Projection Calculator, a progressive module reveal, and a twelve-dimension comparison table into one cohesive flow. The Monochrome Steel color system and Directory and Discovery theme give every section the quiet authority of a precision tool catalog.
This template is built for course creators and training platform founders who teach people how to start, launch, and grow online stores. If your students are real people with day jobs and side-hustle ambitions, this layout speaks their language.
Most course landing pages describe what is inside the course. They list modules, name the instructor, and ask for the sale. Visitors leave unconvinced because they never felt the cost of not knowing. Catalog solves that by letting visitors calculate their own numbers first.
You get a fully structured scroll-reveal landing page that moves visitors from curiosity to commitment through a sequence of interactive and visual moments. Each section is intentionally ordered to deliver value before making an ask.




Theme
Directory & Discovery
Creative direction
Calculator/Tool First
Color system
Monochrome Steel
Style
Scroll Reveal (Progressive)
Direction
Comparison/Versus
Page Sections
Interactive Revenue Projection Calculator
Scroll-reveal Progressive Layout
Twelve-dimension Comparison Table
Dual Call to Action Architecture
Logo Bar Ticker Header
Value-first Email Capture
Can I customize the calculator inputs for my specific course offer?
Does this template work for a platform that covers multiple selling channels?
How does the email capture work within this layout?
Is this template suitable for a brand-new training platform with no existing audience?
Can the sticky call to action bar label be updated for different enrollment campaigns?
This template is built around four core capabilities that work together to reduce drop-off and increase the quality of every conversion.
Visitors enter their product price, estimated monthly units, and chosen platform. The calculator instantly returns projected revenue, platform fees, shipping estimates, and net margin. Seeing real numbers from their own inputs makes the opportunity concrete before the course pitch begins.
Content sections slide up from a dark gunmetal background into chrome-white clarity as the visitor scrolls. Course modules appear in sequence, each one tied to a specific line item the calculator surfaced. The effect feels like shelves being stocked in real time.
A persistent side-by-side table builds as the visitor scrolls, contrasting learning alone against learning with the platform. It covers twelve specific dimensions including time to first sale, average platform fee mistakes, and return rate from poor listings.
The primary call to action, "See Your Store's Numbers," anchors inside the calculator and repeats as a sticky bottom bar after the tool section. A secondary call to action, "Compare All 6 Platforms," gates a downloadable fee-comparison PDF behind a single-field email capture.
The page opens with a horizontal scrolling ticker of e-commerce platform logos rendered in monochrome steel against forge black. A bold sans-serif headline fades in beneath the ticker, establishing ecosystem authority without relying on instructor celebrity.
The email capture form appears only after visitors have received a personalized revenue projection and watched the comparison table reveal a measurable knowledge gap. One field, one clear offer, no friction before value has been delivered.
| Section | Purpose |
|---|---|
| Logo ticker header | Establish platform ecosystem authority and set the headline |
| Revenue projection calculator | Give visitors personalized numbers before any course pitch |
| Progressive module reveal | Connect course content to each calculator output line item |
| Comparison table build | Contrast independent learning against guided learning across 12 dimensions |
| Sticky call to action bar | Keep the primary action visible after the calculator section |
| Email capture gate | Collect one email field in exchange for a downloadable fee-comparison PDF |
The visual identity follows a Directory and Discovery theme built on a Monochrome Steel color system. Every color has a defined role and earns its placement through function, not decoration.
The scroll-reveal layout is structured to work cleanly across screen sizes. Progressive disclosure keeps the initial page weight focused, loading content sections as the visitor reaches them rather than all at once.
The page is engineered around a clear principle: give real value before asking for anything. Every conversion moment is positioned after a value delivery, not before.
This template is part of a broader e-commerce education niche and is well-suited for platforms that cover the full journey from product sourcing to store management. It pairs naturally with course content that addresses platform selection, fulfillment strategy, and listing optimization.