elearning/Frontend-Learner/pages/browse/opencovery.vue

<script setup lang="ts">
/**
 * @file opencovery.vue
 * @description Public Course Detail Page.
 * Displays detailed information about a specific course without requiring authentication.
 */

definePageMeta({
  layout: 'landing',
  auth: false // Explicitly public
})

useHead({
  title: 'รายละเอียดคอร์ส - E-Learning System'
})

// Mock Data (Static for now, ideally would fetch based on ID)
const course = {
  title: 'เบื้องต้นการออกแบบ UX/UI',
  price: 'ฟรี',
  originalPrice: '',
  description: 'เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping) เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์',
  duration: '4.5 ชั่วโมง',
  lessons: 12,
  certificate: true,
  objectives: [
    'วิธีการวิจัยผู้ใช้ (User Research)',
    'การวาดโครงร่างและทำต้นแบบ',
    'ระบบการออกแบบ (Design Systems)',
    'การทดสอบการใช้งาน (Usability Testing)'
  ],
  syllabus: [
    {
      title: '01. บทนำ',
      lessonCount: 3,
      lessons: [
        { title: '1.1 การออกแบบ UX คืออะไร?', duration: '10:00' },
        { title: '1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)', duration: '15:30' },
        { title: '1.3 เครื่องมือที่ต้องใช้', duration: '05:00' }
      ]
    },
     {
      title: '02. การวิจัยผู้ใช้',
      lessonCount: 4,
      lessons: [
        { title: '2.1 การสัมภาษณ์ผู้ใช้', duration: '12:00' },
        { title: '2.2 การสร้าง Persona', duration: '18:00' }
      ]
    }
  ]
}
</script>

<template>
  <div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors pt-32 pb-20">
      
     <!-- Background Effects -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
      <div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
      <div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
    </div>

    <div class="container mx-auto max-w-6xl px-6">
      
      <!-- Back Button -->
      <NuxtLink to="/browse" class="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        กลับหน้ารายการคอร์ส
      </NuxtLink>

      <div class="grid grid-cols-1lg lg:grid-cols-12 gap-10">
        
        <!-- Main Content (Left Column) -->
        <div class="lg:col-span-8">
          <!-- Hero Video Placeholder -->
          <div class="relative aspect-video bg-slate-800 rounded-3xl overflow-hidden border border-white/5 shadow-2xl mb-8 group cursor-pointer">
             <div class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
                <div class="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center shadow-[0_0_30px_rgba(37,99,235,0.5)] group-hover:scale-110 transition-transform duration-300">
                  <div class="ml-1 w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent"/>
                </div>
             </div>
          </div>

          <h1 class="text-4xl font-black text-white mb-6 leading-tight">{{ course.title }}</h1>
          <p class="text-slate-400 text-lg leading-relaxed mb-10">
            {{ course.description }}
          </p>

          <!-- Learning Objectives -->
          <div class="p-8 rounded-3xl bg-white/5 border border-white/5 mb-10">
            <h3 class="font-bold text-xl text-white mb-6">สิ่งที่คุณจะได้เรียนรู้</h3>
            <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <li v-for="(obj, idx) in course.objectives" :key="idx" class="flex gap-3 text-slate-300">
                <span class="text-emerald-400 font-bold">✓</span> {{ obj }}
              </li>
            </ul>
          </div>

          <!-- Course Syllabus -->
          <div class="p-8 rounded-3xl bg-white/5 border border-white/5">
            <h3 class="font-bold text-xl text-white mb-6">เนื้อหาในคอร์ส</h3>
            <div class="space-y-4">
              <div v-for="(chapter, idx) in course.syllabus" :key="idx">
                <div class="flex justify-between items-center p-4 bg-white/5 rounded-2xl mb-2 border border-white/5">
                  <span class="font-bold text-white">{{ chapter.title }}</span>
                  <span class="text-sm text-slate-500">{{ chapter.lessonCount }} บทเรียน</span>
                </div>
                <div class="pl-4 space-y-1">
                  <div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="flex justify-between py-3 px-4 border-b border-white/5 last:border-0 text-slate-400 hover:bg-white/5 rounded-xl transition-colors">
                    <span class="text-sm">
                      <span class="mr-2 opacity-50">🎥</span> {{ lesson.title }}
                    </span>
                    <span class="text-sm opacity-60">{{ lesson.duration }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Sidebar (Right Column): Sticky CTA -->
        <div class="lg:col-span-4">
          <div class="sticky top-28 p-8 rounded-3xl bg-slate-800/80 backdrop-blur-xl border border-white/10 shadow-2xl">
            <div class="mb-8 text-center lg:text-left">
              <span class="text-lg text-slate-500 line-through mr-4">{{ course.originalPrice }}</span>
              <span class="text-5xl font-black text-white tracking-tight">{{ course.price }}</span>
            </div>

            <NuxtLink to="/auth/register" class="flex items-center justify-center w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all hover:-translate-y-1 mb-6">
              ลงทะเบียนเรียนทันที
            </NuxtLink>
            
            <div class="space-y-4 text-sm text-slate-400">
              <div class="flex justify-between py-3 border-b border-white/5">
                <span>ระยะเวลาเรียน</span>
                <span class="font-bold text-white">{{ course.duration }}</span>
              </div>
              <div class="flex justify-between py-3 border-b border-white/5">
                <span>จำนวนบทเรียน</span>
                <span class="font-bold text-white">{{ course.lessons }} บท</span>
              </div>
              <div class="flex justify-between py-3 border-b border-white/5">
                <span>ใบประกาศนียบัตร</span>
                <span class="font-bold text-white">{{ course.certificate ? 'มี' : 'ไม่มี' }}</span>
              </div>
              <div class="flex justify-between py-3 border-b border-white/5">
                <span>ระดับ</span>
                <span class="font-bold text-white">เหมาะสำหรับทุกคน</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes pulse-slow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(1.15); }
}

.animate-pulse-slow {
  animation: pulse-slow 10s linear infinite;
}
</style>