feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/pages/index.vue

@@ -22,7 +22,7 @@ const { user } = useAuth()
 const categoryCards = CATEGORY_CARDS
 const whyChooseUs = WHY_CHOOSE_US
 
-//ระดับความยาก
+// ระดับความยาก (Level)
 const levelModel = ref('ระดับทั้งหมด')
 const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
 
@@ -95,22 +95,22 @@ onMounted(() => {
     <!-- Section 1: Hero Section -->
     <section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
       <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
-        <!-- Left Content -->
+        <!-- ด้านซ้าย: ข้อความและปุ่มกด (Left Content) -->
         <div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
-          <!-- Heading -->
+          <!-- หัวข้อหลัก (Heading) -->
           <h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
             <span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>
             <span class="text-blue-600">ด้วยการเรียนรู้ออนไลน์</span>
           </h1>
 
-          <!-- Subtitle -->
+          <!-- คำอธิบายรอง (Subtitle) -->
           <p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
             จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
             ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
             เรียนได้ทุกที่ ทุกเวลา
           </p>
 
-        <!-- Buttons -->
+        <!-- ปุ่มกดต่างๆ (Buttons) -->
           <div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
             <q-btn 
               unelevated 
@@ -134,7 +134,7 @@ onMounted(() => {
           </div>
         </div>
 
-        <!-- Right - Hero Image -->
+        <!-- ด้านขวา: รูปภาพฮีโร่ (Right - Hero Image) -->
         <div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
           <div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
             <img
@@ -144,7 +144,7 @@ onMounted(() => {
             />
             <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
 
-            <!-- Course Card Overlay -->
+            <!-- ส่วนทับซ้อนสำหรับทำโมเดลการ์ดคอร์ส (Course Card Overlay) -->
             <!-- <div class="absolute bottom-5 left-5 right-5">
               <div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
                 <div class="flex items-center gap-4">
@@ -170,7 +170,7 @@ onMounted(() => {
     <!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
     <section class="pt-20 pb-14 bg-white relative flex-col">
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- Heading -->
+        <!-- หัวข้อหลัก (Heading) -->
         <div class="text-center mb-16 slide-up">
           <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-6">
             ทำไมต้องเลือกแพลตฟอร์มของเรา?
@@ -180,7 +180,7 @@ onMounted(() => {
           </p>
         </div>
 
-        <!-- Horizontal Cards -->
+        <!-- โซนแนะนำแบบการ์ดแนวนอน (Horizontal Cards) -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           <div v-for="(item, i) in whyChooseUs" :key="i"
                class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white transition-all duration-500 group"
@@ -203,25 +203,25 @@ onMounted(() => {
     <!-- Section 3: เลือกเรียนตามเรื่องที่คุณสนใจ -->
     <section class="py-20 md:py-24 bg-white">
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- Heading -->
+        <!-- หัวข้อ (Heading) -->
         <div class="mb-12 slide-up">
           <h2 class="text-[1.4rem] text-3xl md:text-4xl font-semibold text-slate-900 px-4">
             เลือกเรียนตามเรื่องที่คุณสนใจ
           </h2>
         </div>
 
-        <!-- Horizontal Cards -->
+        <!-- โซนหมวดหมู่แบบการ์ดแนวนอน (Horizontal Cards) -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-6 px-4">
           <div v-for="(card, i) in categoryCards" :key="i"
                class="cursor-pointer bg-white rounded-3xl p-6 border border-slate-200/80 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 hover:border-[#2463eb61] transition-all duration-500 flex items-center gap-5"
                @click="goBrowse(card.slug)"
           >
-            <!-- Icon Box -->
+            <!-- กล่องไอคอน (Icon Box) -->
             <div class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-50 group-hover:scale-110 transition-transform duration-500">
               <q-icon :name="card.icon" size="35px" class="text-blue-600" />
             </div>
 
-            <!-- Content -->
+            <!-- เนื้อหาข้อความ (Content) -->
             <div class="flex-grow pr-2">
               <h3 class="text-lg md:text-xl font-bold text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
                 {{ card.title }}
@@ -231,7 +231,7 @@ onMounted(() => {
               </p>
             </div>
 
-            <!-- Arrow -->
+            <!-- ลูกศรชี้ขวา (Arrow) -->
             <div class="gt-xs flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
               <q-icon name="chevron_right" size="24px" />
             </div>
@@ -243,7 +243,7 @@ onMounted(() => {
     <!-- Section 4: "คอร์สออนไลน์" -->
     <section class="py-12 md:py-24 bg-slate-50">
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- Heading -->
+        <!-- หัวข้อหลักและลิงก์เพิ่มเติม (Heading) -->
         <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
           <div class="slide-up">
             <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
@@ -254,9 +254,9 @@ onMounted(() => {
           </NuxtLink>
         </div>
 
-        <!-- Filters Row -->
+        <!-- แถวตัวกรองคอร์ส (Filters Row) -->
         <div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
-          <!-- Category Filters -->
+          <!-- ตัวกรองหมวดหมู่คอร์ส (Category Filters) -->
           <div class="flex items-center gap-2">
             <button 
               class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
@@ -296,7 +296,7 @@ onMounted(() => {
           </div> -->
         </div>
 
-        <!-- Courses Carousel -->
+        <!-- ระบบเลื่อนสไลด์ดูคอร์ส (Courses Carousel) -->
         <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] animate-pulse" />
         </div>
@@ -326,7 +326,7 @@ onMounted(() => {
                   class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
                   @click="navigateTo(`/course/${course.id}`)"
                 >
-                  <!-- Image-->
+                  <!-- รูปภาพหน้าปกคอร์ส (Image) -->
                   <div class="relative flex-shrink-0">
                     <img
                       v-if="course.thumbnail_url"
@@ -339,23 +339,23 @@ onMounted(() => {
                     </div>
                   </div>
 
-                  <!-- Content -->
+                  <!-- เนื้อหาของคอร์ส (Content) -->
                   <div class="flex flex-col flex-1 p-6">
 
 
-                    <!-- Title -->
+                    <!-- ชื่อคอร์ส (Title) -->
                     <h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
                       {{ getLocalizedText(course.title) }}
                     </h3>
 
-                    <!-- Description -->
+                    <!-- รายละเอียดแบบย่อ (Description) -->
                     <p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
                       {{ getLocalizedText(course.description) }}
                     </p>
 
 
 
-                   <!-- Price + Button -->
+                   <!-- ส่วนแถบราคาและปุ่มกด (Price + Button) -->
                     <div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
                         <div class="flex flex-col">
                             <span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
@@ -378,7 +378,7 @@ onMounted(() => {
             </q-carousel-slide>
           </q-carousel>
 
-           <!-- Custom Carousel Navigation -->
+           <!-- ระบบนำทางสไลด์แบบกำหนดเอง (Custom Carousel Navigation) -->
             <button 
               v-if="courseChunks.length > 1"
               class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"