feat: Implement core user profile, dashboard, course browsing pages, common components, and internationalization.

Frontend-Learner/components/course/CourseCard.vue

@@ -83,7 +83,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
         class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-black shadow-sm backdrop-blur-md transition-colors"
         :class="(price === 'Free' || price === 'ฟรี') ? 'bg-emerald-500 text-white shadow-emerald-500/30' : 'glass text-white'"
       >
-        {{ price }}
+        {{ (price === 'Free' || price === 'ฟรี') ? $t('course.free') : price }}
       </div>
     </div>
     
@@ -98,13 +98,13 @@ const displayDescription = computed(() => getLocalizedText(props.description))
       <!-- Rating & Lessons -->
       <div v-if="rating || lessons" class="flex items-center gap-4 text-[11px] font-bold mb-6 uppercase tracking-wider text-slate-500 dark:text-slate-400">
         <span v-if="rating" class="flex items-center gap-1"><span class="text-amber-400 text-sm">★</span> {{ rating }}</span>
-        <span v-if="lessons" class="flex items-center gap-1"><span class="text-blue-400">📚</span> {{ lessons }} บทเรียน</span>
+        <span v-if="lessons" class="flex items-center gap-1"><span class="text-blue-400">📚</span> {{ lessons }} {{ $t('course.lessonsUnit') }}</span>
       </div>
 
       <!-- Progress Bar -->
       <div v-if="progress !== undefined && !completed" class="mb-8 p-3 rounded-2xl" style="background-color: rgba(148, 163, 184, 0.1);">
         <div class="flex justify-between items-center text-[10px] font-black uppercase tracking-widest mb-1.5">
-          <span style="color: var(--text-secondary);">Progress</span>
+          <span style="color: var(--text-secondary);">{{ $t('course.progress') }}</span>
           <span class="text-blue-600">{{ progress }}%</span>
         </div>
         <div class="w-full h-1.5 bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden">
@@ -115,25 +115,25 @@ const displayDescription = computed(() => getLocalizedText(props.description))
       <!-- Completed Badge -->
       <div v-if="completed" class="mb-6">
         <span class="status-pill status-success text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2">
-          <span class="text-sm">✓</span> เรียนจบเรียบร้อย
+          <span class="text-sm">✓</span> {{ $t('course.completed') }}
         </span>
       </div>
       
       <!-- Actions -->
       <button v-if="showViewDetails" class="btn-premium-primary w-full mt-auto dark:!text-white" @click="emit('viewDetails')">
-        ดูรายละเอียด
+        {{ $t('menu.viewDetails') }}
       </button>
 
       <NuxtLink v-if="showContinue" to="/classroom/learning" class="btn-premium-primary w-full mt-auto shadow-lg shadow-blue-600/20">
-        เรียนต่อทันที
+        {{ $t('course.continueLearning') }}
       </NuxtLink>
       
       <div v-if="completed && (showCertificate || showStudyAgain)" class="flex flex-col gap-2 mt-auto">
         <NuxtLink v-if="showStudyAgain" to="/classroom/learning" class="btn-premium-primary w-full dark:!text-white">
-            ทบทวนบทเรียน
+            {{ $t('course.studyAgain') }}
         </NuxtLink>
         <button v-if="showCertificate" class="btn-premium-success w-full shadow-lg shadow-emerald-600/20" @click="emit('viewCertificate')">
-            ดาวน์โหลดประกาศนียบัตร
+            {{ $t('course.downloadCertificate') }}
         </button>
       </div>
     </div>