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

Frontend-Learner/pages/browse/discovery.vue

@@ -73,7 +73,7 @@ const categories = [
   "ถ่ายภาพ & วิดีโอ",
   "ภาษา",
   "Lifestyles",
-  "คอร์สฟรี",
+
 ];
 
 // Category Visibility State
@@ -114,7 +114,7 @@ const filteredCourses = computed(() => {
         style="flex-wrap: wrap; gap: 16px"
       >
         <h1 class="text-[28px] font-bold text-slate-900 dark:text-white">
-          รายการคอร์สทั้งหมด
+          {{ $t('discovery.title') }}
         </h1>
         <div class="flex gap-3" style="flex-wrap: wrap">
           <!-- Search Input -->
@@ -123,7 +123,7 @@ const filteredCourses = computed(() => {
               v-model="searchQuery"
               type="text"
               class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500"
-              placeholder="ค้นหาคอร์ส..."
+              :placeholder="$t('discovery.searchPlaceholder')"
               style="padding-left: 36px; width: 240px"
             />
           </div>
@@ -132,8 +132,8 @@ const filteredCourses = computed(() => {
             class="input-field bg-white dark:bg-slate-800"
             style="width: auto; color: #0f172a"
           >
-            <option style="color: #0f172a">เรียงตาม: ล่าสุด</option>
-            <option style="color: #0f172a">ยอดนิยม</option>
+            <option style="color: #0f172a">{{ $t('discovery.sortRecent') }}</option>
+            <option style="color: #0f172a">{{ $t('discovery.sortPopular') }}</option>
           </select>
         </div>
       </div>
@@ -149,7 +149,7 @@ const filteredCourses = computed(() => {
                 @click="isCategoryOpen = !isCategoryOpen"
               >
                 <h4 class="text-lg font-bold text-slate-900 dark:text-white">
-                  หมวดหมู่ ({{ categories.length }})
+                  {{ $t('discovery.categoryTitle') }} ({{ categories.length }})
                 </h4>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -188,7 +188,7 @@ const filteredCourses = computed(() => {
                   class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
                   @click="showAllCategories = !showAllCategories"
                 >
-                  {{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
+                  {{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-4 w-4 transition-transform duration-200"
@@ -233,12 +233,12 @@ const filteredCourses = computed(() => {
             class="empty-state"
             style="grid-column: 1 / -1"
           >
-            <h3 class="empty-state-title">ไม่พบผลการค้นหา</h3>
+            <h3 class="empty-state-title">{{ $t('discovery.emptyTitle') }}</h3>
             <p class="empty-state-description">
-              ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง
+              {{ $t('discovery.emptyDesc') }}
             </p>
             <button class="btn btn-secondary" @click="searchQuery = ''">
-              แสดงทั้งหมด
+              {{ $t('discovery.showAll') }}
             </button>
           </div>
 
@@ -252,7 +252,7 @@ const filteredCourses = computed(() => {
                 background: rgba(255, 255, 255, 0.05);
               "
             >
-              โหลดเพิ่มเติม
+              {{ $t('discovery.loadMore') }}
             </button>
           </div>
         </div>
@@ -265,7 +265,7 @@ const filteredCourses = computed(() => {
         @click="showDetail = false" 
         class="btn btn-secondary mb-6 inline-flex items-center gap-2"
       >
-        <span>←</span> กลับหน้ารายการคอร์ส
+        <span>←</span> {{ $t('discovery.backToCatalog') }}
       </button>
 
       <div v-if="isLoadingDetail" class="flex justify-center py-20">
@@ -339,7 +339,7 @@ const filteredCourses = computed(() => {
           <!-- Learning Objectives -->
           <div class="card mb-6">
             <h3 class="font-bold mb-4 text-slate-900 dark:text-white">
-              สิ่งที่คุณจะได้เรียนรู้
+              {{ $t('course.whatYouWillLearn') }}
             </h3>
             <ul
               class="grid-12"
@@ -367,7 +367,7 @@ const filteredCourses = computed(() => {
           <!-- Course Syllabus / Outline -->
           <div class="card">
             <h3 class="font-bold mb-4 text-slate-900 dark:text-white">
-              เนื้อหาในคอร์ส
+              {{ $t('course.courseContent') }}
             </h3>
             <!-- Chapter 1 -->
             <div class="mb-4">
@@ -376,10 +376,10 @@ const filteredCourses = computed(() => {
                 style="background: #f3f4f6; border: 1px solid #e5e7eb"
               >
                 <span class="font-bold text-slate-900 dark:text-slate-900"
-                  >01. บทนำ</span
+                  >01. {{ $t('course.introduction') }}</span
                 >
                 <span class="text-sm text-slate-600 dark:text-slate-400"
-                  >3 บทเรียน</span
+                  >3 {{ $t('course.lessons') }}</span
                 >
               </div>
               <div style="padding-left: 16px">
@@ -430,7 +430,7 @@ const filteredCourses = computed(() => {
               class="btn btn-primary w-full mb-4 text-white"
               style="height: 48px; font-size: 16px"
             >
-              ลงทะเบียนเรียนทันที
+              {{ $t('course.enrollNow') }}
             </NuxtLink>
 
             <div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
@@ -445,8 +445,8 @@ const filteredCourses = computed(() => {
                 class="flex justify-between py-2 border-b"
                 style="border-color: var(--neutral-100)"
               >
-                <span>ใบประกาศ</span>
-                <span class="font-bold">มี</span>
+                <span>{{ $t('course.certificate') }}</span>
+                <span class="font-bold">{{ $t('course.available') }}</span>
               </div>
             </div>
           </div>