Online course landing page
An online course landing: a hero with a marker and a lesson preview, who it's for, a week-by-week curriculum, graduate results, the author, a day-by-day week, pricing with instalments, reviews, FAQ and a countdown to the start. A light theme: indigo and a lime marker.
The page leads from the promise to enrolment: who the course is for, what happens week by week, what graduates achieved, who teaches it, the price with instalments and the time left until launch. The course in the demo is made up; the same structure works for a webinar or an intensive.
What it is made of
13 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Course header with price and progressnavbar-022
A button with the price and a reading-progress bar.
2. First screen
Course bento hero with tilting tileshero-022
A marker underline, a seats sticker, a lesson preview, facts and logos.
3. Who it's for
Who it’s for: expanding tilescourse-001
Three personas as a switch and an outcomes card.
4. Curriculum
Curriculum as a pinned scene by weekcourse-002
Weeks as an accordion, lessons, homework, a sticky summary.
5. Results
Graduate results as a horizontal lanecourse-003
Graduates “before → after” with work screenshots.
6. Author
Course author with a full-row quote and a tickerabout-008
A portrait, a marker quote, credentials and facts.
7. How it goes
A course week as a calendar lanecourse-004
A week day by day, a photo and formats.
8. Pricing
Course pricing with instalments, a spinning frame and a seats barpricing-020
Three plans, an instalments switch, seats and a discount.
9. Reviews
Reviews as two opposing tickers with videotestimonials-018
A video review, photos, profile links, cohorts.
10. FAQ
Pre-purchase FAQ with an “ask” cardfaq-017
An accordion and an “ask on Telegram” card.
11. Enrolment
Final call with flip clock and glowcta-017
A countdown to the start, seats and an email form.
12. Sticky CTA
Floating enroll button with a pricecta-018
A floating price-and-button bar: appears after the first screen, hides near pricing and the form.
13. Footer
Course footer with a giant outlined brandfooter-021
The author, links, socials and legal details with a licence.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Online course landing page” page made of?
- 13 catalog sections in order: Course header with price and progress, Course bento hero with tilting tiles, Who it’s for, Curriculum as a pinned scene by week, Graduate results as a horizontal lane, Course author with a full-row quote and a ticker, A course week as a calendar lane, Course pricing with instalments, a spinning frame and a seats bar, Reviews as two opposing tickers with video, Pre-purchase FAQ with an “ask” card, Final call with flip clock and glow, Floating enroll button with a price, Course footer with a giant outlined brand. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.