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

Frontend-Learner/pages/dashboard/index.vue

@@ -126,7 +126,7 @@ const navigateToCategory = (catName: string) => {
   <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen font-inter p-4 md:p-8 transition-colors duration-300">
     <div class="max-w-[1400px] mx-auto grid grid-cols-1 xl:grid-cols-3 gap-8">
       
-      <!-- Left Column (Main Content) -->
+      <!-- คอลัมน์ซ้าย (เนื้อหาหลัก) -->
       <div class="xl:col-span-2 space-y-6">
         
         <!-- ป้ายต้อนรับ (Welcome Banner) -->
@@ -179,7 +179,7 @@ const navigateToCategory = (catName: string) => {
             </div>
         </div>
 
-        <!-- Continue Learning (เรียนต่อจากครั้งก่อน) -->
+        <!-- ส่วนเรียนต่อจากครั้งก่อน (Continue Learning) -->
         <div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
           <div class="flex items-center justify-between mb-6">
              <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('dashboard.continueLearningTitle') }}</h2>
@@ -195,7 +195,7 @@ const navigateToCategory = (catName: string) => {
              
              <div class="flex-1 w-full flex flex-col">
                 <div class="flex items-center justify-between mb-3">
-                   <!-- Category Badge -->
+                   <!-- ป้ายบอกหมวดหมู่ (Category Badge) -->
                    <div v-if="heroCourse.category">
                       <span class="bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] dark:text-blue-400 px-3 py-1 rounded-full text-[11px] font-bold tracking-wide">{{ getLocalizedText(heroCourse.category) }}</span>
                    </div>
@@ -208,7 +208,7 @@ const navigateToCategory = (catName: string) => {
                 <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2 leading-snug line-clamp-2">
                   {{ getLocalizedText(heroCourse.title) || 'Advanced UI/UX Design มาสเตอร์คลาส' }}
                 </h3>
-                <!-- Removed Lesson Title/Number as per request -->
+                <!-- ไม่แสดงเลขบทเรียนตามที่ได้รับคำขอมา (Removed Lesson Title/Number as per request) -->
                 
                 <div class="mb-6 mt-4">
                    <div class="flex justify-between text-[13px] font-bold mb-2">
@@ -245,11 +245,11 @@ const navigateToCategory = (catName: string) => {
         </div>
       </div>
       
-      <!-- Right Column (Sidebar/Profile Content) -->
+      <!-- คอลัมน์ขวา (แถบข้อมูลโปรไฟล์และคอร์สแนะนำ) -->
       <div class="xl:col-span-1 space-y-6">
-         <!-- Profile Widget -->
+         <!-- วิดเจ็ตโปรไฟล์ผู้ใช้ -->
          <div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-8 shadow-sm border border-slate-100 dark:border-slate-800 text-center flex flex-col items-center relative overflow-hidden transition-colors">
-            <!-- decorative bg -->
+            <!-- พื้นหลังตกแต่ง (decorative bg) -->
             <div class="absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-[#F8FAFC] to-white dark:from-slate-800 dark:to-slate-900"></div>
 
             <div class="relative z-10 w-24 h-24 rounded-full bg-white dark:bg-slate-800 mb-4 shadow-md flex items-center justify-center">
@@ -280,18 +280,18 @@ const navigateToCategory = (catName: string) => {
             </div>
          </div>
          
-         <!-- Recommended Courses Widget -->
+         <!-- วิดเจ็ตคอร์สแนะนำ -->
          <div v-if="recommendedCourses.length > 0" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
              <h2 class="text-[1.1rem] font-bold text-slate-900 dark:text-white mb-5 tracking-tight flex items-center justify-between">
                {{ $t('dashboard.recommendedCourses') }}
              </h2>
             <div class="flex flex-col gap-5">
                <div v-for="course in recommendedCourses.slice(0, 3)" :key="course.id" class="flex gap-4 group cursor-pointer transition-all" @click="navigateTo(`/browse/discovery?course_id=${course.id}`)">
-                  <!-- Thumbnail -->
+                  <!-- รูปหน้าปก (Thumbnail) -->
                   <div class="w-24 h-[68px] rounded-xl overflow-hidden bg-slate-100 shrink-0 relative shadow-sm">
                      <img :src="course.image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                   </div>
-                  <!-- Info -->
+                  <!-- ข้อมูลคอร์ส (Info) -->
                   <div class="flex-1 flex flex-col justify-center min-w-0">
                      <h3 class="font-bold text-[13px] text-slate-900 dark:text-white leading-snug line-clamp-2 mb-1.5 group-hover:text-[#3B6BE8] transition-colors pr-1">{{ getLocalizedText(course.title) }}</h3>
                      <div class="flex items-center justify-between mt-auto">