From c5c9f481e8b0b13e71b8207a891da7117db74c07 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Tue, 27 Jan 2026 09:42:01 +0700
Subject: [PATCH] feat: implement dynamic course detail page with course
 content display and enrollment functionality.

---
 Frontend-Learner/pages/course/[id].vue | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/Frontend-Learner/pages/course/[id].vue b/Frontend-Learner/pages/course/[id].vue
index 6ac9d8a0..1137df7d 100644
--- a/Frontend-Learner/pages/course/[id].vue
+++ b/Frontend-Learner/pages/course/[id].vue
@@ -92,8 +92,8 @@ useHead({
             <p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p>
           </div>
 
-          <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-700/50">
-             <h3 class="font-bold text-xl text-slate-900 dark:text-white mb-6 flex items-center gap-2">
+          <div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100">
+             <h3 class="font-bold text-xl text-slate-900 dark:text-black mb-6 flex items-center gap-2">
                 <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
                 {{ $t('course.courseContent') }}
              </h3>
@@ -121,14 +121,14 @@ useHead({
                 </div>
              </div>
              
-             <div v-else class="text-center py-8 text-slate-400">
+             <div v-else class="text-center py-8 text-slate-400 dark:text-black font-medium">
                  <p>{{ $t('course.noContent') }}</p>
              </div>
           </div>
         </div>
 
         <div class="lg:col-span-4">
-          <div class="sticky top-24 bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100 dark:border-slate-700/50">
+          <div class="sticky top-24 bg-white rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100">
             <div class="mb-8">
               <span class="text-sm text-slate-400 line-through mr-3" v-if="course.original_price">{{ course.original_price }}</span>
               <div class="flex items-center gap-2">
@@ -145,19 +145,19 @@ useHead({
                 {{ isEnrolling ? 'กำลังลงทะเบียน...' : $t('course.enrollNow') }}
             </button>
             
-            <div class="space-y-4 text-sm text-slate-600 dark:text-slate-400 pt-6 border-t border-slate-100 dark:border-slate-700">
-              <div class="flex justify-between py-2">
-                <span>{{ $t('course.certificate') }}</span>
-                <span class="font-bold text-slate-900 dark:text-white">{{ course.have_certificate ? $t('course.available') : '-' }}</span>
-              </div>
-              <div class="flex justify-between py-2">
-                <span>ระดับ</span>
-                <span class="font-bold text-slate-900 dark:text-white">ทั้งหมด</span>
-              </div>
+            <div class="space-y-4 text-sm text-slate-600 dark:text-black pt-6 border-t border-slate-100">
                <div class="flex justify-between py-2">
-                <span>การเข้าถึง</span>
-                <span class="font-bold text-slate-900 dark:text-white">ตลอดชีพ</span>
-              </div>
+                 <span>{{ $t('course.certificate') }}</span>
+                 <span class="font-bold text-slate-900 dark:text-black">{{ course.have_certificate ? $t('course.available') : '-' }}</span>
+               </div>
+               <div class="flex justify-between py-2">
+                 <span>ระดับ</span>
+                 <span class="font-bold text-slate-900 dark:text-black">ทั้งหมด</span>
+               </div>
+                <div class="flex justify-between py-2">
+                 <span>การเข้าถึง</span>
+                 <span class="font-bold text-slate-900 dark:text-black">ตลอดชีพ</span>
+               </div>
             </div>
             
           </div>