diff --git a/apps/docs/public/assets/courses/add-lesson-to-section.png b/apps/docs/public/assets/courses/add-lesson-to-section.png new file mode 100644 index 000000000..32d1b89f8 Binary files /dev/null and b/apps/docs/public/assets/courses/add-lesson-to-section.png differ diff --git a/apps/docs/public/assets/courses/add-lesson.png b/apps/docs/public/assets/courses/add-lesson.png index 7cf366914..aac1fb934 100644 Binary files a/apps/docs/public/assets/courses/add-lesson.png and b/apps/docs/public/assets/courses/add-lesson.png differ diff --git a/apps/docs/public/assets/courses/content-breadcrumbs.png b/apps/docs/public/assets/courses/content-breadcrumbs.png new file mode 100644 index 000000000..ea9dbe2b8 Binary files /dev/null and b/apps/docs/public/assets/courses/content-breadcrumbs.png differ diff --git a/apps/docs/public/assets/courses/course-content.png b/apps/docs/public/assets/courses/course-content.png index f343e8eb9..8251e43ea 100644 Binary files a/apps/docs/public/assets/courses/course-content.png and b/apps/docs/public/assets/courses/course-content.png differ diff --git a/apps/docs/public/assets/courses/course-sales-page.png b/apps/docs/public/assets/courses/course-sales-page.png index f8b10ac36..c00425cdf 100644 Binary files a/apps/docs/public/assets/courses/course-sales-page.png and b/apps/docs/public/assets/courses/course-sales-page.png differ diff --git a/apps/docs/public/assets/courses/new-product.png b/apps/docs/public/assets/courses/new-product.png index 96b9928f4..98accc078 100644 Binary files a/apps/docs/public/assets/courses/new-product.png and b/apps/docs/public/assets/courses/new-product.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/add-lesson-to-section.png b/apps/docs/public/assets/courses/old-screenshots/add-lesson-to-section.png new file mode 100644 index 000000000..c3a21d6a1 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/add-lesson-to-section.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/add-lesson.png b/apps/docs/public/assets/courses/old-screenshots/add-lesson.png new file mode 100644 index 000000000..7cf366914 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/add-lesson.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/course-content.png b/apps/docs/public/assets/courses/old-screenshots/course-content.png new file mode 100644 index 000000000..f343e8eb9 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/course-content.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/course-sales-page.png b/apps/docs/public/assets/courses/old-screenshots/course-sales-page.png new file mode 100644 index 000000000..f8b10ac36 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/course-sales-page.png differ diff --git a/apps/docs/public/assets/courses/lesson-settings.png b/apps/docs/public/assets/courses/old-screenshots/lesson-settings.png similarity index 100% rename from apps/docs/public/assets/courses/lesson-settings.png rename to apps/docs/public/assets/courses/old-screenshots/lesson-settings.png diff --git a/apps/docs/public/assets/courses/old-screenshots/new-product.png b/apps/docs/public/assets/courses/old-screenshots/new-product.png new file mode 100644 index 000000000..96b9928f4 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/new-product.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/product-dashboard-2.png b/apps/docs/public/assets/courses/old-screenshots/product-dashboard-2.png new file mode 100644 index 000000000..f80137df9 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/product-dashboard-2.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/publish.png b/apps/docs/public/assets/courses/old-screenshots/publish.png new file mode 100644 index 000000000..178711455 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/publish.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/view-page.png b/apps/docs/public/assets/courses/old-screenshots/view-page.png new file mode 100644 index 000000000..e8d89dce1 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/view-page.png differ diff --git a/apps/docs/public/assets/courses/old-screenshots/visibility.png b/apps/docs/public/assets/courses/old-screenshots/visibility.png new file mode 100644 index 000000000..fa2f3a915 Binary files /dev/null and b/apps/docs/public/assets/courses/old-screenshots/visibility.png differ diff --git a/apps/docs/public/assets/courses/pricing-add-plan-card.png b/apps/docs/public/assets/courses/pricing-add-plan-card.png new file mode 100644 index 000000000..c6b106ebb Binary files /dev/null and b/apps/docs/public/assets/courses/pricing-add-plan-card.png differ diff --git a/apps/docs/public/assets/courses/pricing-plan-screen.png b/apps/docs/public/assets/courses/pricing-plan-screen.png new file mode 100644 index 000000000..886ea2c34 Binary files /dev/null and b/apps/docs/public/assets/courses/pricing-plan-screen.png differ diff --git a/apps/docs/public/assets/courses/product-dashboard.png b/apps/docs/public/assets/courses/product-dashboard.png index f80137df9..9e189a820 100644 Binary files a/apps/docs/public/assets/courses/product-dashboard.png and b/apps/docs/public/assets/courses/product-dashboard.png differ diff --git a/apps/docs/public/assets/courses/product-manage-menu.png b/apps/docs/public/assets/courses/product-manage-menu.png new file mode 100644 index 000000000..a6340c7c8 Binary files /dev/null and b/apps/docs/public/assets/courses/product-manage-menu.png differ diff --git a/apps/docs/public/assets/courses/publish.png b/apps/docs/public/assets/courses/publish.png index 178711455..7166bf661 100644 Binary files a/apps/docs/public/assets/courses/publish.png and b/apps/docs/public/assets/courses/publish.png differ diff --git a/apps/docs/public/assets/courses/sections.png b/apps/docs/public/assets/courses/sections.png new file mode 100644 index 000000000..4834a30e1 Binary files /dev/null and b/apps/docs/public/assets/courses/sections.png differ diff --git a/apps/docs/public/assets/courses/view-page.png b/apps/docs/public/assets/courses/view-page.png index e8d89dce1..922b0c5f4 100644 Binary files a/apps/docs/public/assets/courses/view-page.png and b/apps/docs/public/assets/courses/view-page.png differ diff --git a/apps/docs/public/assets/courses/visibility.png b/apps/docs/public/assets/courses/visibility.png index fa2f3a915..f4d5e1341 100644 Binary files a/apps/docs/public/assets/courses/visibility.png and b/apps/docs/public/assets/courses/visibility.png differ diff --git a/apps/docs/public/assets/products/add-section.png b/apps/docs/public/assets/products/add-section.png new file mode 100644 index 000000000..deec72c04 Binary files /dev/null and b/apps/docs/public/assets/products/add-section.png differ diff --git a/apps/docs/public/assets/products/customers-list-card.png b/apps/docs/public/assets/products/customers-list-card.png new file mode 100644 index 000000000..32ce775a6 Binary files /dev/null and b/apps/docs/public/assets/products/customers-list-card.png differ diff --git a/apps/docs/public/assets/products/customers-list.png b/apps/docs/public/assets/products/customers-list.png new file mode 100644 index 000000000..7808991d7 Binary files /dev/null and b/apps/docs/public/assets/products/customers-list.png differ diff --git a/apps/docs/public/assets/products/customers-progress.png b/apps/docs/public/assets/products/customers-progress.png new file mode 100644 index 000000000..48a9de1e5 Binary files /dev/null and b/apps/docs/public/assets/products/customers-progress.png differ diff --git a/apps/docs/public/assets/products/delete-section.png b/apps/docs/public/assets/products/delete-section.png new file mode 100644 index 000000000..f06533a4c Binary files /dev/null and b/apps/docs/public/assets/products/delete-section.png differ diff --git a/apps/docs/public/assets/products/drip-by-date.png b/apps/docs/public/assets/products/drip-by-date.png new file mode 100644 index 000000000..83c6a0df4 Binary files /dev/null and b/apps/docs/public/assets/products/drip-by-date.png differ diff --git a/apps/docs/public/assets/products/drip-by-specific-days.png b/apps/docs/public/assets/products/drip-by-specific-days.png new file mode 100644 index 000000000..75568984c Binary files /dev/null and b/apps/docs/public/assets/products/drip-by-specific-days.png differ diff --git a/apps/docs/public/assets/products/drip-notify-email.png b/apps/docs/public/assets/products/drip-notify-email.png new file mode 100644 index 000000000..0614eed91 Binary files /dev/null and b/apps/docs/public/assets/products/drip-notify-email.png differ diff --git a/apps/docs/public/assets/products/edit-section-settings.png b/apps/docs/public/assets/products/edit-section-settings.png new file mode 100644 index 000000000..0d0103960 Binary files /dev/null and b/apps/docs/public/assets/products/edit-section-settings.png differ diff --git a/apps/docs/public/assets/products/edit-section.png b/apps/docs/public/assets/products/edit-section.png new file mode 100644 index 000000000..7c54cf62d Binary files /dev/null and b/apps/docs/public/assets/products/edit-section.png differ diff --git a/apps/docs/public/assets/products/invite-customer-context-menu-invite.png b/apps/docs/public/assets/products/invite-customer-context-menu-invite.png index 1c00c6ba4..feac93efe 100644 Binary files a/apps/docs/public/assets/products/invite-customer-context-menu-invite.png and b/apps/docs/public/assets/products/invite-customer-context-menu-invite.png differ diff --git a/apps/docs/public/assets/products/invite-customer-my-content.png b/apps/docs/public/assets/products/invite-customer-my-content.png index 6e1619942..22691394e 100644 Binary files a/apps/docs/public/assets/products/invite-customer-my-content.png and b/apps/docs/public/assets/products/invite-customer-my-content.png differ diff --git a/apps/docs/public/assets/products/invite-customer-screen.png b/apps/docs/public/assets/products/invite-customer-screen.png index 97b907c6f..6be90e9c9 100644 Binary files a/apps/docs/public/assets/products/invite-customer-screen.png and b/apps/docs/public/assets/products/invite-customer-screen.png differ diff --git a/apps/docs/public/assets/products/invite-customer-success.png b/apps/docs/public/assets/products/invite-customer-success.png index 59e7fcd2d..7d2998652 100644 Binary files a/apps/docs/public/assets/products/invite-customer-success.png and b/apps/docs/public/assets/products/invite-customer-success.png differ diff --git a/apps/docs/public/assets/products/new-section-added.png b/apps/docs/public/assets/products/new-section-added.png new file mode 100644 index 000000000..76ed78b5b Binary files /dev/null and b/apps/docs/public/assets/products/new-section-added.png differ diff --git a/apps/docs/public/assets/products/new-section-screen.png b/apps/docs/public/assets/products/new-section-screen.png new file mode 100644 index 000000000..6a6e42ff8 Binary files /dev/null and b/apps/docs/public/assets/products/new-section-screen.png differ diff --git a/apps/docs/public/assets/products/add-section.jpeg b/apps/docs/public/assets/products/older/add-section.jpeg similarity index 100% rename from apps/docs/public/assets/products/add-section.jpeg rename to apps/docs/public/assets/products/older/add-section.jpeg diff --git a/apps/docs/public/assets/products/delete-section.jpeg b/apps/docs/public/assets/products/older/delete-section.jpeg similarity index 100% rename from apps/docs/public/assets/products/delete-section.jpeg rename to apps/docs/public/assets/products/older/delete-section.jpeg diff --git a/apps/docs/public/assets/products/drip-by-date.jpeg b/apps/docs/public/assets/products/older/drip-by-date.jpeg similarity index 100% rename from apps/docs/public/assets/products/drip-by-date.jpeg rename to apps/docs/public/assets/products/older/drip-by-date.jpeg diff --git a/apps/docs/public/assets/products/drip-by-specific-days.jpeg b/apps/docs/public/assets/products/older/drip-by-specific-days.jpeg similarity index 100% rename from apps/docs/public/assets/products/drip-by-specific-days.jpeg rename to apps/docs/public/assets/products/older/drip-by-specific-days.jpeg diff --git a/apps/docs/public/assets/products/drip-notify-email.jpeg b/apps/docs/public/assets/products/older/drip-notify-email.jpeg similarity index 100% rename from apps/docs/public/assets/products/drip-notify-email.jpeg rename to apps/docs/public/assets/products/older/drip-notify-email.jpeg diff --git a/apps/docs/public/assets/products/edit-section-settings.jpeg b/apps/docs/public/assets/products/older/edit-section-settings.jpeg similarity index 100% rename from apps/docs/public/assets/products/edit-section-settings.jpeg rename to apps/docs/public/assets/products/older/edit-section-settings.jpeg diff --git a/apps/docs/public/assets/products/edit-section.jpeg b/apps/docs/public/assets/products/older/edit-section.jpeg similarity index 100% rename from apps/docs/public/assets/products/edit-section.jpeg rename to apps/docs/public/assets/products/older/edit-section.jpeg diff --git a/apps/docs/public/assets/products/older/invite-customer-context-menu-invite.png b/apps/docs/public/assets/products/older/invite-customer-context-menu-invite.png new file mode 100644 index 000000000..1c00c6ba4 Binary files /dev/null and b/apps/docs/public/assets/products/older/invite-customer-context-menu-invite.png differ diff --git a/apps/docs/public/assets/products/invite-customer-context-menu.png b/apps/docs/public/assets/products/older/invite-customer-context-menu.png similarity index 100% rename from apps/docs/public/assets/products/invite-customer-context-menu.png rename to apps/docs/public/assets/products/older/invite-customer-context-menu.png diff --git a/apps/docs/public/assets/products/older/invite-customer-my-content.png b/apps/docs/public/assets/products/older/invite-customer-my-content.png new file mode 100644 index 000000000..6e1619942 Binary files /dev/null and b/apps/docs/public/assets/products/older/invite-customer-my-content.png differ diff --git a/apps/docs/public/assets/products/older/invite-customer-screen.png b/apps/docs/public/assets/products/older/invite-customer-screen.png new file mode 100644 index 000000000..97b907c6f Binary files /dev/null and b/apps/docs/public/assets/products/older/invite-customer-screen.png differ diff --git a/apps/docs/public/assets/products/older/invite-customer-success.png b/apps/docs/public/assets/products/older/invite-customer-success.png new file mode 100644 index 000000000..59e7fcd2d Binary files /dev/null and b/apps/docs/public/assets/products/older/invite-customer-success.png differ diff --git a/apps/docs/public/assets/products/new-section-added.jpeg b/apps/docs/public/assets/products/older/new-section-added.jpeg similarity index 100% rename from apps/docs/public/assets/products/new-section-added.jpeg rename to apps/docs/public/assets/products/older/new-section-added.jpeg diff --git a/apps/docs/public/assets/products/new-section-screen.jpeg b/apps/docs/public/assets/products/older/new-section-screen.jpeg similarity index 100% rename from apps/docs/public/assets/products/new-section-screen.jpeg rename to apps/docs/public/assets/products/older/new-section-screen.jpeg diff --git a/apps/docs/public/assets/products/older/sections-on-course-viewer.png b/apps/docs/public/assets/products/older/sections-on-course-viewer.png new file mode 100644 index 000000000..2a15ae676 Binary files /dev/null and b/apps/docs/public/assets/products/older/sections-on-course-viewer.png differ diff --git a/apps/docs/public/assets/products/older/sections-on-product-editor.png b/apps/docs/public/assets/products/older/sections-on-product-editor.png new file mode 100644 index 000000000..d836009f4 Binary files /dev/null and b/apps/docs/public/assets/products/older/sections-on-product-editor.png differ diff --git a/apps/docs/public/assets/products/older/sections-on-sales-page.png b/apps/docs/public/assets/products/older/sections-on-sales-page.png new file mode 100644 index 000000000..268ddd5a7 Binary files /dev/null and b/apps/docs/public/assets/products/older/sections-on-sales-page.png differ diff --git a/apps/docs/public/assets/products/sections-on-course-viewer.png b/apps/docs/public/assets/products/sections-on-course-viewer.png index 2a15ae676..3a4d1c607 100644 Binary files a/apps/docs/public/assets/products/sections-on-course-viewer.png and b/apps/docs/public/assets/products/sections-on-course-viewer.png differ diff --git a/apps/docs/public/assets/products/sections-on-product-editor.png b/apps/docs/public/assets/products/sections-on-product-editor.png index d836009f4..7a43f9c6a 100644 Binary files a/apps/docs/public/assets/products/sections-on-product-editor.png and b/apps/docs/public/assets/products/sections-on-product-editor.png differ diff --git a/apps/docs/public/assets/products/sections-on-sales-page.png b/apps/docs/public/assets/products/sections-on-sales-page.png index 268ddd5a7..b0ae6f114 100644 Binary files a/apps/docs/public/assets/products/sections-on-sales-page.png and b/apps/docs/public/assets/products/sections-on-sales-page.png differ diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts index 97e90a8d5..fdc69ddae 100644 --- a/apps/docs/src/config.ts +++ b/apps/docs/src/config.ts @@ -57,9 +57,10 @@ export const SIDEBAR: Sidebar = { { text: "Set a price", link: "en/courses/set-a-price-for-product" }, { text: "Control visibility", link: "en/courses/visibility" }, { text: "Add content", link: "en/courses/add-content" }, - { text: "Manage sections", link: "en/products/section" }, + { text: "Manage sections", link: "en/courses/section" }, { text: "Invite customers", link: "en/products/invite-customers" }, - { text: "Certificates", link: "en/products/certificates" }, + { text: "Certificates", link: "en/courses/certificates" }, + { text: "Customer reports", link: "en/products/reports" }, ], "Digital downloads": [ { text: "Introduction", link: "en/downloads/introduction" }, diff --git a/apps/docs/src/pages/en/courses/add-content.md b/apps/docs/src/pages/en/courses/add-content.md index 4c4b8b5ef..210bd94af 100644 --- a/apps/docs/src/pages/en/courses/add-content.md +++ b/apps/docs/src/pages/en/courses/add-content.md @@ -4,13 +4,19 @@ description: Add content to your course layout: ../../../layouts/MainLayout.astro --- -CourseLit uses a concept called `Lesson`. It is very similar to what we generally see in books i.e. A large piece of information divides into smaller chunks called lessons. +CourseLit uses the concept of a `Lesson`. It is very similar to what we generally see in books, i.e., a large piece of information is divided into smaller chunks called lessons. -Similarly, you can break down you course into `Lessons` and group the lessons into [Sections](/en/products/section). +Similarly, you can break down your course into `Lessons` and group the lessons into [Sections](/en/products/section). + +## Sections + +Sections are used to group lessons. + +![Sections](/assets/courses/sections.png) ## Lessons -CourseLit supports eight types of lessons, which are as follows. +A lesson is a container for the actual learning material. CourseLit supports seven types of lessons, which are as follows. 1. Text @@ -26,15 +32,15 @@ CourseLit supports eight types of lessons, which are as follows. 4. PDF - For sharing premade resources. + For sharing PDF files. The file will be embedded in the lesson. -5. Embed +5. File - For sharing external links like YouTube videos etc. + For sharing binary files like a zip file containing an assignment with the students. -6. File +6. Embed - For sharing binary files like a zip file containing an assingment with the students. + For embedding HTML or iframe based content. 7. Quiz @@ -42,23 +48,27 @@ CourseLit supports eight types of lessons, which are as follows. See the [guide to add a quiz](/en/lessons/add-quiz). -### Steps to add a new lesson +## Steps to add a new lesson + +1. From the `Products` section in the dashboard, select your product to open its dashboard. + +2. Click on the `Edit content` button to open the `Content` section. + +3. On the `Content` section, click on the `Add lesson` button to create a new lesson. -1. From the `Products` section in the dashboard, select your product to open it in the editing mode. -2. Go to the `Content` tab. + ![Add lesson to section](/assets/courses/add-lesson-to-section.png) -![Add content](/assets/courses/add-content.png) +4. On the `New Lesson` screen, `Text` lesson type is selected by default. Switch the lesson type to the one you want to use. -3. Click on the `New Lesson` button as shown above. -4. On the `New Lesson` screen, add relevant details as shown below. + Add the title and content of the lesson. Click `Save lesson`. -![Lesson settings](/assets/courses/lesson-settings.png) + ![Add lesson](/assets/courses/add-lesson.png) -> For text lesson, you will be presented with a text box and for video/audio/file lesson you will be presented with a file selector option. 5. If you want to allow free access to the the lesson despite the pricing of the product, flip the `Preview` switch on (as specified as #4 in the above screenshot). +5. Optionally, toggle the `Preview` switch to allow free access to the lesson regardless of the enrollment status of the user. -This can be used as a great way to provide a sneak peak into your course. + This can be a great way to provide a sneak peek into your course. -6. Click `Save`. +6. Click `Save lesson`. ## Stuck somewhere? diff --git a/apps/docs/src/pages/en/products/certificates.md b/apps/docs/src/pages/en/courses/certificates.md similarity index 100% rename from apps/docs/src/pages/en/products/certificates.md rename to apps/docs/src/pages/en/courses/certificates.md diff --git a/apps/docs/src/pages/en/courses/create.md b/apps/docs/src/pages/en/courses/create.md index 319f85f91..3de2be195 100644 --- a/apps/docs/src/pages/en/courses/create.md +++ b/apps/docs/src/pages/en/courses/create.md @@ -21,42 +21,75 @@ We will create a free course for your audience. You can always make it a paid on 1. Click on the `New product` button. 2. Set a title and select `Course` from the dropdown. Click continue. -![New product](/assets/courses/new-product.png) + ![New product](/assets/courses/new-product.png) 3. Once your course is created, you will get to see the following screen. -![Add content](/assets/courses/course-content.png) + ![Add content](/assets/courses/course-content.png) -4. Let's add some content in your course. Click on the `New lesson` button to create a lesson. -5. On the `New Lesson` screen, select `Text` from the `Type` dropdown since we want to create a text based lesson. +4. Let's add some content in your course. Click on the `Edit content` button to add a lesson to the first section of the course. A section is a collection of lessons. -![Add lesson](/assets/courses/add-lesson.png) +5. On the `Content` screen, click on the `Add lesson` button to create a new lesson. -6. Add the title and the main content of the text lesson. Click `Save`. + ![Add lesson to section](/assets/courses/add-lesson-to-section.png) -![Add lesson details](/assets/courses/add-lesson-details.png) + ![Add lesson to section](/assets/courses/add-lesson-to-section.png) + +6. On the `New Lesson` screen, `Text` lesson type is selected by default. Let's create a text lesson. + + Add the title and the main content of the text lesson. Click `Save lesson`. + + ![Add lesson](/assets/courses/add-lesson.png) Now that we have added some content to the course, it's time to publish. By default, any new product is in the `Draft` state. -7. Click on the `Publish` tab. +7. Go back to the product dashboard by clicking on the product's name in the breadcrumbs. + + ![Content breadcrumbs](/assets/courses/content-breadcrumbs.png) + +8. Next, we will have to add a pricing plan to the course. It is required to publish the course. +
+
+ + - **8.1.** From the `Actions` menu, select `Manage` to open the course's settings. + + ![Manage course](/assets/courses/product-manage-menu.png) + + - **8.2.** In the `Pricing` section, click on the `New Plan` card to go to the plan creation section. + + ![Add pricing plan card](/assets/courses/pricing-add-plan-card.png) + + - **8.3.** In the **New Payment Plan** screen, fill in the details of the plan and choose a pricing scheme. The four available options are: + + - **Free**: Offer a free option. + - **One-time**: Offer a one-time payment option. + - **Subscription**: Offer a monthly (or yearly) subscription plan. + - **EMI**: Offer a plan with multiple installments. + + ![Pricing plan screen](/assets/courses/pricing-plan-screen.png) + + Follow the steps as per the numbering in the screenshot to create a plan and go back to the `Manage` screen. + +9. Toggle on the `Publish` switch to make your course available to the users. -![Publish tab](/assets/courses/publish-tab.png) + ![Publish course](/assets/courses/publish.png) -8. Click on the `Publish` button to make your course available to the users. +
+
-![Publish course](/assets/courses/publish.png) + - **9.1.** Optionally, if you want to make the course listed on the `Products` page, toggle on the `Visibility` switch. -9. Voila! Your course is now live! You can checkout its sales page by clicking the three dots menu on the right and then selecting the `View page` option. + ![Make the course visible](/assets/courses/visibility.png) -![View sales page](/assets/courses/view-page.png) +10. Voila! Your course is now live! You can check out its sales page by clicking the three dots menu on the right and then selecting the `View page` option. -10. This is how your sales will look initially. It is barebones as of now. Visit our page builder guide to make it enticing. + ![View sales page](/assets/courses/view-page.png) -![Course sales page](/assets/courses/course-sales-page.png) +## Sales Page -11. To share your course with your audience, simply copy the URL and share it. When your users click on the `Buy now` button, they will be redirected to the login screen so that they can add the course into their accounts. +Every product has a sales page. You can edit it using the page builder. This is what a sales page looks like. -[Check out the guide on how to track students](/en/courses/reports) +![Sales page](/assets/courses/course-sales-page.png) ## Stuck somewhere? diff --git a/apps/docs/src/pages/en/courses/publish.md b/apps/docs/src/pages/en/courses/publish.md index 6c601be29..92286e742 100644 --- a/apps/docs/src/pages/en/courses/publish.md +++ b/apps/docs/src/pages/en/courses/publish.md @@ -8,13 +8,16 @@ When you first create your product, it is in `Draft` state. In order to make it ## Steps to publish your product -1. From the `Products` section in the dashboard, select your product to open it in the editing mode. -2. Go to the `Publish` tab. +1. From the `Products` section in the dashboard, select your product to open its dashboard. -![Publishing a product](/assets/courses/publishing.png) +2. Go to the product settings screen by clicking on the `Manage` menu item in the actions menu. + + ![Manage course](/assets/courses/product-manage-menu.png) 3. Click the publish button to toggle the publish status of your product as shown above. + ![Publishing a product](/assets/courses/publish.png) + ## Stuck somewhere? We are always here for you. Come chat with us in our Discord channel or send a tweet at @CourseLit. diff --git a/apps/docs/src/pages/en/products/section.md b/apps/docs/src/pages/en/courses/section.md similarity index 71% rename from apps/docs/src/pages/en/products/section.md rename to apps/docs/src/pages/en/courses/section.md index 967b60552..1164bc646 100644 --- a/apps/docs/src/pages/en/products/section.md +++ b/apps/docs/src/pages/en/courses/section.md @@ -8,17 +8,17 @@ A section is a logical grouping of lessons. It helps keep lessons structured and ## Look and Feel -Here’s how it looks on various parts of the platform. +Here’s how sections look in various parts of the platform. -### Sections in Product Viewer +### 1. Course Viewer ![Sections in Course Viewer](/assets/products/sections-on-course-viewer.png) -### Sections in Product's Sales Page +### 2. Product Sales Page ![Sections in Sales Page](/assets/products/sections-on-sales-page.png) -### Sections in Product Editor +### 3. Product Editor ![Sections in Product Editor](/assets/products/sections-on-product-editor.png) @@ -26,25 +26,25 @@ Here’s how it looks on various parts of the platform. 1. To add a new section, click on the `New section` button on the `Product > Content` screen. -![Add Section](/assets/products/add-section.jpeg) +![Add Section](/assets/products/add-section.png) 2. Enter the name of the section and hit `Continue`. To cancel the operation or go back, hit `Cancel` instead. -![New Section Screen](/assets/products/new-section-screen.jpeg) +![New Section Screen](/assets/products/new-section-screen.png) 3. The newly created section will become visible on the `Content` screen. You can now start adding lessons to it. -![New Section Added](/assets/products/new-section-added.jpeg) +![New Section Added](/assets/products/new-section-added.png) ## Edit Section 1. To edit a section, click on its three dots menu and select `Edit section` from the dropdown, as shown below. -![Edit Section](/assets/products/edit-section.jpeg) +![Edit Section](/assets/products/edit-section.png) 2. On the `Edit Section` screen, you can change the name of the section and the [drip settings](#drip-a-section). -![Edit Section Settings](/assets/products/edit-section-settings.jpeg) +![Edit Section Settings](/assets/products/edit-section-settings.png) ## Drip a Section @@ -56,29 +56,31 @@ If drip configuration is enabled for a section, a student won't be able to acces 1. If you want a section to be available to users on a specific date, this is the option you should opt for. -![Drip by Date](/assets/products/drip-by-date.jpeg) +![Drip by Date](/assets/products/drip-by-date.png) 2. Select the date on which this section will be dripped. 3. Click `Continue` to save it. -### Drip After a Certain Number of Days Since Enrollment +### Drip After a Certain Number of Days From Last Dripped Content -1. If you want a section to be available to users after a certain number of days have elapsed since their enrollment in the course, this is the option you should opt for. +1. If you want a section to be available to users after a certain number of days have elapsed since the last dripped content, this is the option you should opt for. -![Drip After a Certain Number of Days Have Elapsed](/assets/products/drip-by-specific-days.jpeg) +> For the first dripped section, the date of enrollment will be considered the last dripped content date. + +![Drip After a Certain Number of Days Have Elapsed](/assets/products/drip-by-specific-days.png) 2. Select the number of days. 3. Click `Continue` to save it. ### Notify Users When a Section Has Dripped -1. Click on the `Send email notification` checkbox. +1. Click on the `Email Notification` checkbox. 2. Compose your email. Learn more about the email composition interface [here](/en/email-marketing/broadcasts#compose-your-email). 3. Click `Continue` to save it. -![Drip Notification](/assets/products/drip-notify-email.jpeg) +![Drip Notification](/assets/products/drip-notify-email.png) -### Customer's experience +### Customer Experience On the course viewer, the customer will see the clock icon against the section name until it has been dripped to them. @@ -88,13 +90,13 @@ On the course viewer, the customer will see the clock icon against the section n 1. To delete a section, click on its three dots menu and select `Delete section` from the dropdown, as shown below. -![Delete Section](/assets/products/delete-section.jpeg) +![Delete Section](/assets/products/delete-section.png) -2. Click `OK` on the confirmation dialog. +2. Click `Delete` on the confirmation dialog. -> A section has to be empty, i.e., no lessons attached to it, in order for it to be deleted. +> A section must be empty (i.e., have no lessons attached to it) in order to be deleted. -## Next step +## Next Step Learn how to [sell digital downloads](/en/downloads/create). diff --git a/apps/docs/src/pages/en/courses/set-a-price-for-product.md b/apps/docs/src/pages/en/courses/set-a-price-for-product.md index 52dde595f..7c7da9726 100644 --- a/apps/docs/src/pages/en/courses/set-a-price-for-product.md +++ b/apps/docs/src/pages/en/courses/set-a-price-for-product.md @@ -1,36 +1,40 @@ --- -title: Set a price of your product -description: Set a price of your product +title: Set a price for your product +description: Set a price for your product layout: ../../../layouts/MainLayout.astro --- -CourseLit makes it easy for you to earn a living by sharing your knowledge. CourseLit offers two types of pricing strategies. +CourseLit products support the following pricing strategies. 1. Free -2. Paid +2. One-time +3. Subscription +4. EMI -## Set up a free course +## Set up a pricing plan -Free is the default pricing strategy. When you first create the course, the pricing is set to free. +> Before you set a pricing plan, make sure you have updated your payment gateway credentials in the `Settings > Payment` section; otherwise, only the `Free` option will be available. -You don't have to do anything. +A pricing plan is necessary to make a product live. Following is how you set up a pricing plan. -## Set up a paid course +1. From the `Actions` menu, select `Manage` to open the product settings. -**In order to get paid for your offerings, you first need to [setup payments](). Currently, CourseLit offers [Stripe](https://stripe.com) integration.** + ![Manage product](/assets/courses/product-manage-menu.png) -### Steps +2. In the `Pricing` section, click on the `New Plan` card to go to the plan creation section. -1. From the `Products` section in the dashboard, select your product to open it in the editing mode. -2. Go to the `Pricing` tab. + ![Add pricing plan card](/assets/courses/pricing-add-plan-card.png) -![Pricing dropdown](/assets/courses/paid-dropdown.png) +3. In the **New Payment Plan** screen, fill in the details of the plan and choose a pricing scheme. The four available options are: -3. Set the price and click `Save`. + - **Free**: Offer a free option. + - **One-time**: Offer a one-time payment option. + - **Subscription**: Offer a monthly (or yearly) subscription plan. + - **EMI**: Offer a plan with multiple installments. -![Set the price](/assets/courses/set-price.png) + ![Pricing plan screen](/assets/courses/pricing-plan-screen.png) -4. That's it! Your course is a paid one now. You can visit its sales page to see how it looks to your audience. + Follow the steps as per the numbering in the screenshot to create a plan and go back to the `Manage` screen. ## Stuck somewhere? diff --git a/apps/docs/src/pages/en/courses/visibility.md b/apps/docs/src/pages/en/courses/visibility.md index b07076b96..e38d0902e 100644 --- a/apps/docs/src/pages/en/courses/visibility.md +++ b/apps/docs/src/pages/en/courses/visibility.md @@ -4,18 +4,23 @@ description: Controlling the visibility of your product layout: ../../../layouts/MainLayout.astro --- -If you do not want your product to show up on the `/courses` route, you can do that by using the visibility toggle. By default, your products are `Unlisted` i.e. they do not appear under courses list visible on `/courses` route. +If you want your product to show up on the `Products` page, you can do that by using the visibility toggle. -Your audience will be able to access the course via a direct link only. +By default, your products are `Unlisted` i.e. they do not appear on the `Products` page. + +Your audience will always be able to access the product via a direct link, irrespective of the visibility toggle. ## Steps to make your product listed -1. From the `Products` section in the dashboard, select your product to open it in the editing mode. -2. Go to the `Publish` tab. +1. From the `Actions` menu, select `Manage` to open the product's settings. + + ![Manage product](/assets/courses/product-manage-menu.png) + +2. Go to the `Visibility` area. ![Visibility](/assets/courses/visibility.png) -3. Click the `Unlisted` button to toggle the visibility of your product as shown above. +3. Toggle the switch to make your product visible on the `Products` page. ## Stuck somewhere? diff --git a/apps/docs/src/pages/en/downloads/create.md b/apps/docs/src/pages/en/downloads/create.md index e8ab84a87..14841a56d 100644 --- a/apps/docs/src/pages/en/downloads/create.md +++ b/apps/docs/src/pages/en/downloads/create.md @@ -52,8 +52,6 @@ Now that we have added some content to the course, it's time to publish. By defa 11. To share your digital download with your audience, simply copy the URL and share it. When your users click on the `Buy now` button, they will be redirected to the login screen so that they can add the course into their accounts. -[Check out the guide on how to track stats for your digital download](/en/downloads/reports) - ## Stuck somewhere? We are always here for you. Come chat with us in our Discord channel or send a tweet at @CourseLit. diff --git a/apps/docs/src/pages/en/products/invite-customers.md b/apps/docs/src/pages/en/products/invite-customers.md index c4fff4c31..b363a08bc 100644 --- a/apps/docs/src/pages/en/products/invite-customers.md +++ b/apps/docs/src/pages/en/products/invite-customers.md @@ -11,15 +11,13 @@ You can invite customers to your published products. This comes in handy in cert ## Invite a customer -1. Go to the `Products` lobby and click on the three dots menu of the product you want to invite a customer to. +1. From the `Products` section in the dashboard, select your product to open its dashboard. - ![Invite customer menu item](/assets/products/invite-customer-context-menu.png) - -2. Click on the `Invite a customer` menu item from the three dots menu. +2. Click on the `Invite a customer` menu item in the actions menu. ![Invite customer menu item selected](/assets/products/invite-customer-context-menu-invite.png) -3. On the subsequent screen, add the email of the customer. +3. On the following screen, enter the customer's email address. ![Invite customer screen](/assets/products/invite-customer-screen.png) @@ -35,13 +33,13 @@ You can invite customers to your published products. This comes in handy in cert 7. You can invite more users by repeating the same process. -## Invited customer's experience +## The invited customer's experience The invited customer will receive an email stating they have been added to a product and can log in to access it. ![Invited customer's email](/assets/products/invite-customer-email.png) -Once logged in, they will see the products they have been added to in the `My Content` area. To access it, they can click on the `My Content` option from the `Session` button on the home page of the school. +Once logged in, they will see the products they have been added to in the `My Content` area. To access this area, they can click on the `My Content` option from the `Session` button on the school's home page. ![Invited customer's My Content area](/assets/products/invite-customer-my-content.png) diff --git a/apps/docs/src/pages/en/products/reports.md b/apps/docs/src/pages/en/products/reports.md new file mode 100644 index 000000000..d73c924bc --- /dev/null +++ b/apps/docs/src/pages/en/products/reports.md @@ -0,0 +1,29 @@ +--- +title: Customer reports +description: Customer reports +layout: ../../../layouts/MainLayout.astro +--- + +You can see the customers of a product in the `Customers` section of the product dashboard. + +## Access the customer list + +1. From the `Products` section in the dashboard, select your product to open its dashboard. + +2. Click on the `Customers` card to open the customer list. + + ![Customers list card](/assets/products/customers-list-card.png) + +3. The customer list page displays all the customers of the product. + + ![Customers list](/assets/products/customers-list.png) + +## View customer progress + +1. To view a customer's progress (applicable to courses), click on the `View` link in the `Progress` column. + + ![Customers progress](/assets/products/customers-progress.png) + +## Stuck somewhere? + +We are always here for you. Come chat with us in our Discord channel or send a tweet at @CourseLit. diff --git a/apps/docs/src/styles/index.css b/apps/docs/src/styles/index.css index b6c95a82e..841883f8c 100644 --- a/apps/docs/src/styles/index.css +++ b/apps/docs/src/styles/index.css @@ -239,11 +239,13 @@ table { tr:nth-of-type(odd) { background: var(--theme-bg-hover); } + th { background: var(--color-black); color: var(--theme-color); font-weight: bold; } + td, th { padding: 6px; @@ -279,6 +281,8 @@ blockquote { img { max-width: 100%; + border-radius: 8px; + border: 1px solid var(--theme-divider); } .flex { @@ -322,16 +326,20 @@ h2.heading { border-left-color: var(--theme-accent); color: var(--theme-accent); } + .heading-link:focus-within { color: var(--theme-text-light); border-left-color: hsla(var(--color-gray-40), 1); } + .heading-link svg { opacity: 0.6; } + .heading-link:hover svg { opacity: 0.8; } + .heading-link a { display: inline-flex; gap: 0.5em; @@ -342,6 +350,7 @@ h2.heading { .heading-link.depth-3 { padding-left: 2rem; } + .heading-link.depth-4 { padding-left: 3rem; } diff --git a/apps/web/components/public/base-layout/template/widget-by-name.tsx b/apps/web/components/public/base-layout/template/widget-by-name.tsx index 8309bf4a1..de5ced21f 100644 --- a/apps/web/components/public/base-layout/template/widget-by-name.tsx +++ b/apps/web/components/public/base-layout/template/widget-by-name.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import widgets from "@/ui-config/widgets"; import { COMPONENT_MISSING_SUFFIX } from "@/ui-config/strings"; import WidgetErrorBoundary from "@/components/public/base-layout/template/widget-error-boundary"; @@ -13,10 +13,21 @@ const WidgetByName = ({ pageData, editing = false, }: Omit, "toggleTheme" | "nextTheme">) => { - const { resolvedTheme: nextTheme, setTheme: setNextTheme } = useTheme(); + const { resolvedTheme, setTheme: setNextTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + // This is the recommended pattern from next-themes to avoid hydration mismatch. + // The effect intentionally runs once to trigger a re-render with the correct theme. + // eslint-disable-next-line react-hooks/set-state-in-effect + setMounted(true); + }, []); + + // Use undefined during SSR/hydration to match server, then switch to actual theme after mount + const nextTheme = mounted ? resolvedTheme : undefined; const toggleTheme = () => { - const themeNext = nextTheme === "dark" ? "light" : "dark"; + const themeNext = resolvedTheme === "dark" ? "light" : "dark"; setNextTheme(themeNext); }; diff --git a/packages/components-library/src/section-background-panel.tsx b/packages/components-library/src/section-background-panel.tsx index 3750187bd..84fdc016b 100644 --- a/packages/components-library/src/section-background-panel.tsx +++ b/packages/components-library/src/section-background-panel.tsx @@ -146,8 +146,7 @@ export function SectionBackgroundPanel({ value={value.backgroundColor || ""} onChange={(color) => handleColorBackgroundChange({ - backgroundColor: - color || "#ffffff", + backgroundColor: color, }) } />