chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Add course discovery page, course card component, and dashboard index page.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 14:20:11 +07:00
parent 62e9c9c566
commit 6d31cc2e45
3 changed files with 149 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

35
Frontend-Learner/pages/dashboard/index.vue
View file

@ -55,7 +55,7 @@ onMounted(async () => {
<template>
<div class="page-container">
<!-- Welcome Header Section -->
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-10 md:p-14 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
<div class="welcome-section mb-8 overflow-hidden relative rounded-3xl p-8 md:p-10 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
<div>
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!</h1>
@ -70,35 +70,22 @@ onMounted(async () => {
</div>
<!-- Main Content Area -->
<div class="lg:col-span-12">
<div>
<!-- Section: Recommended Courses -->
<div class="mb-8">
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
<span class="w-1.5 h-8 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]"/>
<div class="mb-6">
<h2 class="text-xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
<span class="w-1 h-6 bg-emerald-500 rounded-full shadow-sm shadow-emerald-500/50"/>
{{ $t('menu.recommendedCourses') }}
</h2>
</div>
<!-- Recommended Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-20">
<NuxtLink v-for="(course, idx) in recommendedCourses" :key="course.id" :to="`/course/${course.id}`" class="p-0 overflow-hidden group border border-slate-200 dark:border-white/5 rounded-3xl shadow-sm dark:shadow-xl transition-all hover:-translate-y-1 block" style="background-color: var(--bg-surface);">
<div class="h-48 overflow-hidden relative rounded-t-3xl">
<img v-if="course.image" :src="course.image" :alt="course.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" >
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-slate-900/20 dark:from-[#1e293b] to-transparent"/>
</div>
<div class="p-7" style="background-color: var(--bg-surface);">
<div class="text-[10px] font-black text-slate-700 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">{{ course.category }}</div>
<h4 class="font-black text-xl mb-6 text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors line-clamp-2 h-14">{{ course.title }}</h4>
<div class="flex items-center justify-between pt-4 border-t border-slate-50 dark:border-white/5">
<span v-if="course.duration" class="text-xs font-bold text-slate-700 dark:text-slate-400 flex items-center gap-2">
<q-icon name="schedule" size="14px" />
{{ course.duration }}
</span>
<div v-else />
<span class="px-4 py-2 bg-blue-600 text-white text-xs font-bold rounded-lg hover:bg-blue-700 transition-colors shadow-md">{{ $t('menu.viewDetails') }}</span>
</div>
</div>
</NuxtLink>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-20">
<CourseCard
v-for="course in recommendedCourses"
:key="course.id"
v-bind="course"
/>
</div>
<!-- Loading State for Recommended -->