feat: Initialize project with core Nuxt configuration, Quasar layouts, global Tailwind CSS, and essential components.

Frontend-Learner/pages/dashboard/index.vue

@@ -91,17 +91,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
 <template>
   <div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
     
-    <!-- 1. Greeting Section -->
-    <section class="bg-white pt-8 pb-10 px-4 md:px-12">
-        <div class="max-w-7xl mx-auto">
-            <h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2D] mb-4 flex items-center gap-3">
-                สวัสดี {{ currentUser?.firstName || 'User' }} <span class="text-3xl">😊</span>
-            </h1>
-            <p class="text-gray-500 text-base md:text-lg font-light max-w-3xl">
-                เข้าถึง +490 หลักสูตรออนไลน์สำหรับสมาชิกรายปี เพื่อบรรลุเป้าหมายด้านอาชีพและพัฒนาการเรียนรู้สำหรับคุณ ✨
-            </p>
-        </div>
-    </section>
+
 
     <div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
 
@@ -109,8 +99,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
         <section v-if="enrolledCourses.length > 0">
             <div class="flex justify-between items-end mb-6">
                  <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D]">เรียนต่อกับคอร์สของคุณ</h2>
-                 <NuxtLink to="/dashboard/my-courses" class="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
-                    การเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
+                 <NuxtLink to="/dashboard/my-courses" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
+                    คอร์สเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
                  </NuxtLink>
             </div>
 
@@ -120,20 +110,19 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                     <img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
                     
                     <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
-                        <div class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
+                        <div class="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
                         <h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
                         
                         <!-- Progress -->
                         <div class="w-full">
-                            <div class="flex justify-between text-gray-300 text-xs mb-2">
-                                <span>{{ heroCourse.completed_lessons }}/{{ heroCourse.total_lessons }} บทเรียน</span>
+                            <div class="flex justify-end text-gray-300 text-xs mb-2">
                                 <span>{{ heroCourse.progress }}%</span>
                             </div>
                             <div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
-                                <div class="h-full bg-purple-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
+                                <div class="h-full bg-blue-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
                             </div>
                             <div class="mt-4 flex justify-end">
-                                <span class="text-white font-bold text-sm hover:underline">เรียนต่อ</span>
+                                <span class="text-white font-bold text-sm hover:underline">{{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                             </div>
                         </div>
                     </div>
@@ -150,11 +139,10 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                              
                              <div class="mt-auto">
                                 <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
-                                    <div class="h-full bg-purple-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
+                                    <div class="h-full bg-blue-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
                                 </div>
-                                <div class="flex justify-between items-center text-xs">
-                                    <span class="text-gray-500">{{ course.completed_lessons }}/{{ course.total_lessons }} บทเรียน</span>
-                                    <span class="text-purple-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">เรียนต่อ</span>
+                                <div class="flex justify-end items-center text-xs">
+                                    <span class="text-blue-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">{{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                                 </div>
                              </div>
                         </div>
@@ -174,7 +162,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                  <p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Content when courses exist -->
+            <div v-if="libraryCourses.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <!-- Course Cards -->
                 <CourseCard 
                   v-for="course in libraryCourses" 
@@ -191,13 +180,31 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                         flat
                         rounded
                         no-caps
-                        class="text-purple-600 hover:bg-purple-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
+                        class="text-blue-600 hover:bg-blue-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
                         to="/dashboard/my-courses"
                      >
                         ดูทั้งหมด <q-icon name="arrow_forward" size="18px" class="ml-2" />
                      </q-btn>
                 </div>
             </div>
+
+            <!-- Empty State when no courses -->
+            <div v-else class="bg-white rounded-3xl border border-dashed border-gray-200 p-12 flex flex-col items-center justify-center text-center min-h-[300px]">
+                <div class="bg-blue-50 p-6 rounded-full mb-6">
+                    <q-icon name="school" size="48px" class="text-blue-200" />
+                </div>
+                <h3 class="text-xl font-bold text-gray-800 mb-2">ยังไม่มีคอร์สเรียนในคลัง</h3>
+                <p class="text-gray-500 mb-8 max-w-md">เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ</p>
+                <q-btn
+                    unelevated
+                    rounded
+                    no-caps
+                    class="bg-blue-600 text-white px-8 py-3 font-bold hover:bg-blue-700 shadow-lg shadow-blue-500/20 transition-all hover:scale-105"
+                    to="/browse/discovery"
+                >
+                    ดูคอร์สเรียนทั้งหมด
+                </q-btn>
+            </div>
         </section>
 
 

Frontend-Learner/pages/index.vue

@@ -121,7 +121,7 @@ onMounted(() => {
             <q-icon name="stars" size="28px" />
             <span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
           </div>
-          <h1 class="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 leading-[1.15] mb-8">
+          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
             คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
           </h1>
           <p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
@@ -176,7 +176,7 @@ onMounted(() => {
     <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
       <div class="container mx-auto px-6 lg:px-12">
         <div class="text-center mb-16 slide-up">
-          <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6 px-4">
+          <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
             เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
           </h2>
           <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
@@ -184,27 +184,31 @@ onMounted(() => {
           </p>
         </div>
 
-        <!-- Horizontal Scrollable Container -->
+        <!-- Grid Container (Bento Layout) -->
         <div class="relative">
-          <div class="flex justify-center gap-6 overflow-x-auto pb-12 px-4 no-scrollbar scroll-smooth snap-x flex-wrap">
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
             <div v-for="(card, i) in stepOneCards" :key="i" 
-                 class="flex-none w-[280px] snap-start group cursor-pointer p-8 rounded-[2.5rem] aspect-[3/4.5] flex flex-col justify-between transition-all hover:-translate-y-3 shadow-xl overflow-hidden relative"
-                 :class="card.bgClass"
+                 class="group cursor-pointer rounded-3xl p-6 flex flex-col justify-between transition-all hover:-translate-y-1 shadow-lg hover:shadow-2xl overflow-hidden relative"
+                 :class="[
+                   card.bgClass,
+                   i === 0 ? 'lg:row-span-2 min-h-[380px]' : 'min-h-[220px]'
+                 ]"
                  @click="goBrowse(card.categorySlug)"
             >
               <!-- Background Accent -->
               <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
               
               <div>
-                <span class="text-xs font-black uppercase tracking-[0.2em] opacity-80 mb-3 block text-white/80">ก้าวแรกของ</span>
-                <h3 class="text-3xl font-black leading-none tracking-tight text-white mb-2" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1)">{{ card.title }}</h3>
+                <span class="text-[10px] font-bold uppercase tracking-[0.15em] opacity-80 mb-3 block" :class="card.textClass === 'text-white' ? 'text-white/80' : 'text-slate-900/60'">ก้าวแรกของ</span>
+                <h3 class="text-2xl font-bold leading-tight tracking-tight mb-2" :class="card.textClass">{{ card.title }}</h3>
               </div>
               
-              <div class="space-y-6 relative z-10">
-                <p class="text-lg font-bold leading-snug text-white/95" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1)">{{ card.desc }}</p>
+              <div class="space-y-4 relative z-10">
+                <p class="text-sm font-medium leading-relaxed opacity-90" :class="card.textClass">{{ card.desc }}</p>
                 <div class="flex justify-end">
-                  <div class="w-14 h-14 rounded-full border-2 border-white/30 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-110 backdrop-blur-md shadow-lg">
-                     <q-icon name="arrow_forward" size="28px" class="text-white" />
+                  <div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
+                       :class="[i === 0 ? 'w-12 h-12' : '']">
+                     <q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
                   </div>
                 </div>
               </div>
@@ -262,7 +266,7 @@ onMounted(() => {
               <span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
                 Premium Learning Experience
               </span>
-              <h2 class="text-4xl md:text-6xl font-black text-slate-900 leading-[1.15] md:leading-[1.12] tracking-tight mb-0 pt-1 overflow-visible">
+              <h2 class="text-4xl md:text-6xl font-bold text-slate-900 leading-[1.2] md:leading-[1.2] tracking-tight mb-0 pt-1 overflow-visible">
                 ก้าวข้ามทุกขีดจำกัด<br />
                 ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
               </h2>
@@ -303,8 +307,8 @@ onMounted(() => {
       <div class="container mx-auto px-6 lg:px-12">
         <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
           <div class="slide-up">
-            <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-4">คอร์สออนไลน์</h2>
-            <p class="text-slate-500 font-black text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
+            <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
+            <p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
           </div>
           <NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
             คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
@@ -435,7 +439,7 @@ onMounted(() => {
 
 /* Typography Overrides */
 h1, h2, h3 {
-  letter-spacing: -0.02em;
+  letter-spacing: normal;
 }
 
 /* Hover effects */