WebberUI

Online Course

Landing page for a course or info product, with syllabus and enrolment.

ProContentcourse8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/online-course.json?t=<install token>"

The whole page lands in app/templates/online-course/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav Bar and Course Hero

    Sticky nav bar with the Zero to One Full-Stack Development headline, two CTAs, a mock video player preview, and a bar of trust figures.

    hero
  2. 2

    Learning Outcomes

    Eight cards listing what you can genuinely build after 12 weeks, from front-end work to shipping to production.

    features
  3. 3

    Full Syllabus

    A six-chapter accordion syllabus; expand any chapter for its lessons, runtimes, and free-preview markers.

    timeline
  4. 4

    Meet the Instructor

    The lead instructor's portrait card, a floating rating badge, and four teaching credentials.

    team
  5. 5

    Student Outcomes

    Three five-star student stories, tagged with the career move each one led to and set on gradient avatars.

    testimonial
  6. 6

    Enrolment Options

    Self-paced, hands-on, and career tracks compared, with a 14-day no-questions-asked refund bar.

    pricing
  7. 7

    FAQ and Enrol Now

    Six expandable questions about enrolling, closing on a final call-to-action card.

    faq
  8. 8

    Footer

    Brand blurb, three link columns for courses, academy, and support, plus copyright and privacy links.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →