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

Frontend-Learner/pages/verify-email.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file verify-email.vue
- * @description Page for handling email verification process.
- * Displays loading state while processing token, then shows success or error message.
+ * @description หน้าสำหรับกระบวนการยืนยันอีเมล (Page for handling email verification process.
+ * แสดงสถานะกำลังโหลดระหว่างประมวลผลโทเคน จากนั้นแสดงข้อความสำเร็จหรือข้อผิดพลาด)
  */
 
 definePageMeta({
@@ -28,7 +28,7 @@ onMounted(async () => {
         return
     }
 
-    // Call verify API
+    // เรียกใช้ API เพื่อยืนยัน (Call verify API)
     const result = await verifyEmail(token)
     
     isLoading.value = false
@@ -39,7 +39,7 @@ onMounted(async () => {
         isSuccess.value = false
         if (result.code === 400) {
              errorMessage.value = t('profile.emailAlreadyVerified')
-             // If already verified, show success state with specific message
+             // หากยืนยันแล้วให้แสดงสถานะสำเร็จพร้อมด้วยข้อความเฉพาะ (If already verified, show success state with specific message)
              isSuccess.value = true 
         } else if (result.code === 401) {
             errorMessage.value = t('auth.tokenExpired')
@@ -58,7 +58,7 @@ const navigateToHome = () => {
   <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-[#0f172a]">
     <div class="auth-card max-w-md w-full space-y-8 p-8 rounded-2xl text-center">
       
-      <!-- Loading State -->
+      <!-- สถานะกำลังโหลด (Loading State) -->
       <div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
         <q-spinner-dots size="4rem" color="primary" />
         <h2 class="mt-6 text-xl font-bold text-slate-900 dark:text-white animate-pulse">
@@ -66,7 +66,7 @@ const navigateToHome = () => {
         </h2>
       </div>
 
-      <!-- Success State -->
+      <!-- สถานะสำเร็จ (Success State) -->
       <div v-else-if="isSuccess" class="flex flex-col items-center animate-bounce-in">
         <div class="w-24 h-24 rounded-full bg-green-500 flex items-center justify-center mb-10 shadow-lg shadow-green-500/20">
            <q-icon name="check" class="text-5xl text-white font-black" />
@@ -89,7 +89,7 @@ const navigateToHome = () => {
         />
       </div>
 
-      <!-- Error State -->
+      <!-- สถานะข้อผิดพลาด (Error State) -->
       <div v-else class="flex flex-col items-center animate-shake">
          <div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-6">
            <q-icon name="error" class="text-6xl text-red-500" />
@@ -126,11 +126,15 @@ const navigateToHome = () => {
 }
 
 .auth-card {
-  @apply bg-white border-slate-100 shadow-xl;
+  background-color: white;
+  border-color: #f1f5f9;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   border-width: 1px;
 }
-.dark .auth-card {
-  @apply bg-[#1e293b] border-white/5 shadow-none;
+:global(.dark) .auth-card {
+  background-color: #1e293b;
+  border-color: rgba(255, 255, 255, 0.05);
+  box-shadow: none;
 }
 
 @keyframes bounceIn {