feat: onboarding

frontend/src/pages/Courses.vue

@@ -101,14 +101,41 @@
 							<CourseCard :course="course" />
 						</router-link>
 					</div>
+					<div v-else-if="user.data?.is_moderator || user.data?.is_instructor" class="grid grid-cols-3 p-5">
+						<router-link
+							:to="{
+								name: 'CourseForm',
+								params: {
+									courseName: 'new',
+								},
+							}"
+						>
+							<div class="bg-gray-50 py-32 px-5 rounded-md">
+								<div class="flex flex-col items-center text-center space-y-2">
+									<Plus
+										class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+									/>
+									<div class="font-medium">
+										{{  __("Create a Course") }}
+									</div>
+									<span class="text-gray-700 text-sm leading-4">
+										{{ __("You can add chapters and lessons to it.") }}
+									</span>
+								</div>
+							</div>
+						</router-link>
+						
+					</div>
 					<div
 						v-else
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+						class="text-center p-5 text-gray-600 mt-20 w-1/2 mx-auto space-y-2"
 					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
-							</div>
+						<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+						<div class="text-xl font-medium">
+							{{ __("No courses found") }}
+						</div>
+						<div>
+							{{ __("There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!") }}
 						</div>
 					</div>
 				</template>
@@ -127,13 +154,14 @@ import {
 	createResource,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus, Search } from 'lucide-vue-next'
+import { BookOpen, Plus, Search } from 'lucide-vue-next'
 import { ref, computed, inject, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const searchQuery = ref('')
 const currentCategory = ref(null)
+const noCoursesFound = ref(false)
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -145,7 +173,7 @@ onMounted(() => {
 const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
 	cache: ['courses', user.data?.email],
-	auto: true,
+	auto: true
 })
 
 const tabIndex = ref(0)