From aceeb80d9a6a50e19593118a16422024dfd48242 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Thu, 26 Feb 2026 15:53:04 +0700
Subject: [PATCH] feat: Add initial landing page with hero section, features,
 and category browsing, along with new landing layout components.

---
 .../components/layout/LandingFooter.vue       |   1 -
 .../components/layout/LandingHeader.vue       |  17 -
 Frontend-Learner/pages/browse/index.vue       | 480 +++++++-----------
 Frontend-Learner/pages/index.vue              |   8 -
 4 files changed, 176 insertions(+), 330 deletions(-)

diff --git a/Frontend-Learner/components/layout/LandingFooter.vue b/Frontend-Learner/components/layout/LandingFooter.vue
index bb800f2e..eb65fa8b 100644
--- a/Frontend-Learner/components/layout/LandingFooter.vue
+++ b/Frontend-Learner/components/layout/LandingFooter.vue
@@ -34,7 +34,6 @@
           <h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
           <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
             <li class=""><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
-            <li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors inline-block">คอร์สแนะนำ</NuxtLink></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
           </ul>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index 60fef195..944c31ea 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -91,15 +91,6 @@ onUnmounted(() => {
 
       <!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
       <div class="flex desktop-nav items-center gap-4">
-        <q-input v-model="text"  label="ค้นหาคอร์สเรียน..." rounded 
-          standout="bg-black text-white"  
-          :dark="isScrolled ? true : false"
-          
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" class="pl-3" color="grey-6"/>
-            </template>
-        </q-input>
         <template v-if="!isAuthenticated">
           <!-- Login Button -->
           <NuxtLink 
@@ -181,14 +172,6 @@ onUnmounted(() => {
               {{ $t('sidebar.onlineCourses') }}
               <q-icon name="chevron_right" size="20px" class="text-slate-400" />
             </NuxtLink>
-            <NuxtLink 
-              to="/browse/recommended" 
-              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
-              @click="mobileMenuOpen = false"
-            >
-              {{ $t('sidebar.recommendedCourses') }}
-              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
-            </NuxtLink>
           </nav>
 
           <div class="mt-auto pb-8 border-t border-slate-100 pt-8">
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index 415ee060..669fa5d5 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -1,26 +1,22 @@
 <script setup lang="ts">
 /**
- * @file courses.vue
+ * @file index.vue
  * @description Page displaying all available courses in a public catalog format.
- * Matches the premium dark theme of the landing page.
+ * Matches the requested modern layout.
  */
 
-// Define page metadata using the landing layout (dark theme default)
 definePageMeta({
   layout: 'landing'
 })
 
-// Set the HTML head title for SEO
 useHead({
   title: 'คอร์สทั้งหมด - E-Learning System'
 })
 
-// Reactive state for the search input
 const searchQuery = ref('')
 const { fetchCourses } = useCourse()
 const { fetchCategories, categories } = useCategory()
 
-// Helper to handle localized text
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -30,7 +26,6 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
 const route = useRoute()
 const router = useRouter()
 
-// State for selected category
 const selectedCategory = ref((route.query.category as string) || 'all')
 
 const selectCategory = (slug: string) => {
@@ -41,357 +36,234 @@ const selectCategory = (slug: string) => {
   }
 }
 
-// Watch route query to sync state
 watch(() => route.query.category, (newCategory) => {
   selectedCategory.value = (newCategory as string) || 'all'
 })
 
-// Specific labels mapping as requested
-const categoryLabels: Record<string, string> = {
-  all: "ทั้งหมด",
-  programming: "การเขียนโปรแกรม",
-  design: "การออกแบบ",
-  business: "ธุรกิจ"
+const getCategoryIcon = (name: any) => {
+   const text = getLocalizedText(name) || ''
+   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
+   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
+   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
+   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
+   return 'category'
 }
 
-const getCategoryLabel = (category: any) => {
-  if (categoryLabels[category.slug]) {
-    return categoryLabels[category.slug]
-  }
-  return getLocalizedText(category.name)
-}
-
-// Fetch categories on mount
 await useAsyncData('categories-list', () => fetchCategories())
 
-// Fetch courses from API (reactive to selectedCategory)
-const { data: coursesResponse, error, refresh } = await useAsyncData(
+const { data: coursesResponse, pending: isLoading, error, refresh } = await useAsyncData(
   'browse-courses-list', 
   () => {
     const params: any = {}
-    console.log('Fetching courses. Selected Category:', selectedCategory.value)
-    
     if (selectedCategory.value !== 'all') {
       const category = categories.value.find(c => c.slug === selectedCategory.value)
-      console.log('Found Category:', category)
-      
       if (category) {
         params.category_id = category.id
       }
     }
-    
-    console.log('Params being sent to fetchCourses:', params)
     return fetchCourses(params)
   }
 )
 
-// Watch for category changes and refresh data
-watch(selectedCategory, (newVal) => {
-    console.log('Selected Category Changed to:', newVal)
-    refresh()
-})
+watch(selectedCategory, () => { refresh() })
 
-// Ref for the scroll container
-const categoryScroll = ref<HTMLElement | null>(null)
+const formatPrice = (course: any) => {
+    if (course.is_free) return 'ฟรี';
+    if (!course.price) return 'ฟรี';
+    return `฿${parseFloat(course.price).toLocaleString()}`;
+}
+
+const getInstructorName = (course: any) => {
+    let user = null;
+    if (course.instructors && course.instructors.length > 0) {
+        const primary = course.instructors.find((i: any) => i.is_primary);
+        user = primary ? primary.user : course.instructors[0].user;
+    } else {
+        user = course.creator || course.instructor;
+    }
+    
+    if (user?.profile?.first_name) {
+        return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
+    }
+    if (user?.first_name) {
+        return `${user.first_name} ${user.last_name || ''}`.trim();
+    }
+    return user?.username || 'ผู้สอน';
+}
 
-// Computed property for courses list from API response
 const courses = computed(() => {
-  if (coursesResponse.value?.success) {
-    return coursesResponse.value.data
+  if (coursesResponse.value?.success && coursesResponse.value.data) {
+    return coursesResponse.value.data.map((c: any) => {
+       const cat = categories.value.find((cat: any) => cat.id === c.category_id);
+       return {
+          ...c,
+          category_name: cat ? getLocalizedText(cat.name) : '',
+          instructor_name: getInstructorName(c),
+          formatted_price: formatPrice(c),
+          rating: c.rating || '4.9',
+          reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
+       }
+    })
   }
   return []
 })
 
-/**
- * @computed filteredCourses
- * @description Filters the courses list based on the search query.
- * Checks both the course title and description (case-insensitive).
- */
 const filteredCourses = computed(() => {
   const list = courses.value || []
   if (!searchQuery.value) return list
   
   const query = searchQuery.value.toLowerCase()
-  return list.filter(c => {
+  return list.filter((c: any) => {
     const title = getLocalizedText(c.title).toLowerCase()
     const desc = getLocalizedText(c.description).toLowerCase()
     return title.includes(query) || desc.includes(query)
   })
 })
+
+const viewMode = ref<'grid' | 'list'>('grid')
 </script>
 
 <template>
-  <!-- Main Container: Dark Theme Base -->
-  <div class="relative min-h-screen text-slate-600  bg-slate-50  transition-colors">
-     
-     <!-- ==========================================
-          BACKGROUND EFFECTS
-          Ambient glows matching the index.vue theme
-     ========================================== -->
-     <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>
-
-    <!-- ==========================================
-          HERO SECTION
-          Title and subtitle area
-     ========================================== -->
-    <section class="relative pt-32 pb-20 px-6 overflow-hidden">
-      <div class="container mx-auto max-w-6xl text-center relative z-10">
-        <!-- Tagline Badge -->
-
-        <!-- Main Title -->
-        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight py-2 slide-up leading-[1.2] overflow-visible" style="animation-delay: 0.1s;">
-          คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
-        </h1>
-        <!-- Subtitle -->
-        <p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
-          เริ่มต้นอัปสกิลของคุณวันนี้ด้วยหลักสูตรคุณภาพที่ออกแบบโดยผู้เชี่ยวชาญในอุตสาหกรรม
-        </p>
-      </div>
-    </section>
-
-    <!-- ==========================================
-          SEARCH & GRID SECTION
-     ========================================== -->
-    <!-- ==========================================
-          SEARCH & GRID SECTION
-     ========================================== -->
-    <section class="container mx-auto max-w-[1440px] px-6 pb-20">
-       
-       <!-- Content Frame Container -->
-       <div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
-        
-          <!-- New Enhanced Search Section (Image 2 Style) -->
-          <div class="bg-blue-50/50 rounded-[2.5rem] p-8 md:p-10 mb-6 border border-blue-100/50">
-            <h2 class="text-2xl md:text-3xl font-black text-slate-900 mb-2">คอร์สเรียนทั้งหมด</h2>
-            <p class="text-slate-500 font-medium mb-8">พัฒนาทักษะใหม่ๆ กับผู้เชี่ยวชาญจากทั่วโลก</p>
+  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen pt-32 pb-20 px-4 md:px-8 transition-colors duration-300">
+    <div class="max-w-[1240px] mx-auto">
+        <!-- Catalog View -->
+        <div class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
             
-            <div class="flex flex-col md:flex-row gap-4">
-              <!-- Search Input -->
-              <div class="relative flex-1 group">
-                <div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
-                  <q-icon name="search" size="24px" />
-                </div>
-                <input 
-                  v-model="searchQuery"
-                  type="text" 
-                  placeholder="ค้นหาชื่อคอร์ส..."
-                  class="w-full pl-14 pr-6 py-4 bg-white border-2 border-transparent rounded-2xl text-slate-900 placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-lg font-medium shadow-sm"
-                />
-              </div>
-              
-              <!-- Search Button -->
-              <q-btn 
-                unelevated
-                color="primary"
-                class="px-4 h-16 rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
-                no-caps
-              >
-                <div class="flex items-center gap-2">
-                  <q-icon name="search" size="20px" />
-                  <span class="text-base">ค้นหา</span>
-                </div>
-              </q-btn>
-            </div>
-          </div>
-
-
-
-          <!-- Category Filter Tabs with Scroll Buttons -->
-          <div class="relative mb-8">
-            <!-- Left Scroll Button -->
-            <button 
-              class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
-              @click="categoryScroll?.scrollBy({ left: -200, behavior: 'smooth' })"
-            >
-              <q-icon name="chevron_left" size="24px" />
-            </button>
-
-            <!-- Scrollable Container -->
-            <div 
-              ref="categoryScroll"
-              class="flex items-center gap-3 overflow-x-auto pb-2 no-scrollbar px-1 scroll-smooth"
-            >
-              <button 
-                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
-                :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
-                @click="selectCategory('all')"
-              >
-                {{ categoryLabels.all }}
-              </button>
-              <button 
-                v-for="category in categories" 
-                :key="category.id"
-                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
-                :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
-                @click="selectCategory(category.slug)"
-              >
-                {{ getCategoryLabel(category) }}
-              </button>
+            <!-- ส่วนหัวและการค้นหา -->
+            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
+               <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
+                  <div class="relative w-full sm:w-[260px] flex-1">
+                     <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
+                     <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" placeholder="ค้นหาคอร์ส..." />
+                  </div>
+                  <div class="flex items-center gap-2 shrink-0">
+                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
+                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
+                  </div>
+               </div>
             </div>
 
-            <!-- Right Scroll Button -->
-             <button 
-              class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
-              @click="categoryScroll?.scrollBy({ left: 200, behavior: 'smooth' })"
-            >
-              <q-icon name="chevron_right" size="24px" />
-            </button>
-          </div>
-
-
-          <!-- Course Grid (Updated to 4 cols) -->
-          <div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            <div 
-              v-for="(course, index) in filteredCourses" 
-              :key="course.id" 
-              class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
-              :style="{ animationDelay: `${0.1 * (index + 1)}s` }"
-            >
-              <!-- Card Image -->
-              <div class="h-48 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
-                <img 
-                  v-if="course.thumbnail_url" 
-                  :src="course.thumbnail_url" 
-                  :alt="getLocalizedText(course.title)"
-                  class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-                  @error="(e) => (e.target as HTMLImageElement).style.display = 'none'" 
-                />
-                <div 
-                  v-else 
-                  class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
-                >
+            <!-- Filters Category -->
+            <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
+                <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
+                   <button 
+                     @click="selectCategory('all')"
+                     :class="selectedCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
+                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
+                     <q-icon name="check_circle_outline" size="18px" :class="selectedCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
+                   </button>
+                   
+                   <button 
+                     v-for="cat in categories" :key="cat.id"
+                     @click="selectCategory(cat.slug)"
+                     :class="selectedCategory === cat.slug ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
+                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
+                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="selectedCategory === cat.slug ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
+                     {{ getLocalizedText(cat.name) }}
+                   </button>
                 </div>
-              </div>
+            </div>
 
-              <!-- Card Content Body -->
-              <div class="p-6 flex-1 flex flex-col border-t border-slate-100 ">
-                <h3 class="text-xl font-bold text-slate-900  mb-2 leading-snug group-hover:text-blue-600  transition-colors line-clamp-2">
-                  {{ getLocalizedText(course.title) }}
-                </h3>
-                <p class="text-slate-500  text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
-                  {{ getLocalizedText(course.description) }}
-                </p>
+            <!-- Loader -->
+            <div v-if="isLoading" class="flex justify-center py-24">
+               <q-spinner size="3rem" color="primary" />
+            </div>
 
-                <!-- Card Footer -->
-                <div class="pt-4 border-t border-slate-100  flex items-center justify-between mt-auto">
-                  <span class="text-lg font-black text-blue-600  tracking-tight">
-                    {{ course.is_free ? 'ฟรี' : course.price }}
-                  </span>
-                  <NuxtLink 
-                    :to="`/course/${course.id}`" 
-                    class="px-4 py-2 bg-slate-50  hover:bg-blue-600 text-slate-600  hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200  hover:border-blue-500/50"
-                  >
-                    ดูรายละเอียด
+            <div v-else-if="filteredCourses.length > 0">
+               <!-- GRID VIEW -->
+               <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer">
+                     <!-- Thumbnail -->
+                     <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
+                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
+                           {{ course.category_name }}
+                        </div>
+                     </div>
+                     
+                     <!-- Body -->
+                     <div class="p-5 flex flex-col flex-1">
+                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
+                        
+                        <div class="flex items-center gap-2 mb-4">
+                           <span class="text-[12px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
+                        </div>
+
+                        <div class="flex items-center gap-1.5 mb-5">
+                             <q-icon name="star" class="text-amber-400" size="16px" />
+                             <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
+                             <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
+                        </div>
+                        
+                        <div class="mt-auto flex items-center justify-between">
+                            <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
+                                {{ course.formatted_price }}
+                            </div>
+                            <!-- Eye icon circle button -->
+                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
+                                <q-icon name="visibility" size="18px" />
+                            </button>
+                        </div>
+                     </div>
                   </NuxtLink>
-                </div>
-              </div>
+               </div>
+
+               <!-- LIST VIEW -->
+               <div v-else class="flex flex-col gap-5">
+                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer">
+                     <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
+                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
+                           {{ course.category_name }}
+                        </div>
+                     </div>
+                     <div class="flex flex-col flex-1 py-1">
+                        <div class="flex-1">
+                            <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
+                            <div class="flex items-center gap-2 mb-3">
+                               <span class="text-[13px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
+                            </div>
+                            <div class="flex items-center gap-1.5 mb-2">
+                                 <q-icon name="star" class="text-amber-400" size="16px" />
+                                 <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
+                                 <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 sm:mt-auto flex items-center justify-between">
+                            <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
+                                {{ course.formatted_price }}
+                            </div>
+                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
+                                <q-icon name="visibility" size="16px" /> ดูรายละเอียด
+                            </button>
+                        </div>
+                     </div>
+                  </NuxtLink>
+               </div>
             </div>
-          </div>
 
-          <!-- Empty State (No Results) -->
-          <div v-else class="text-center py-20">
-            <div class="text-6xl mb-6 opacity-50 animate-bounce">🔭</div>
-            <h2 class="text-2xl font-black text-slate-900  mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
-            <p class="text-slate-400 mb-8 max-w-md mx-auto">
-              ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการ
-            </p>
-            <button 
-              class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20" 
-              @click="searchQuery = ''"
-            >
-              แสดงคอร์สทั้งหมด
-            </button>
-          </div>
-
-       </div>
-    </section>
-
-    <!-- ==========================================
-          CTA SECTION
-          Call to action to register
-     ========================================== -->
-    <section class="py-24 relative overflow-hidden">
-       <!-- Background Decoration -->
-       <div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-50/80 pointer-events-none -z-10"/>
-       <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-400/10 blur-[120px] rounded-full -z-10 pointer-events-none"/>
-      
-      <div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
-        <h2 class="text-4xl md:text-5xl font-black text-slate-900  mb-6 tracking-tight">
-          พร้อมจะเริ่มต้นแล้วหรือยัง?
-        </h2>
-        <p class="text-slate-500 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
-          ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
-        </p>
-        <NuxtLink 
-          to="/auth/register" 
-          class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
-        >
-          <span></span>
-          <span>สมัครสมาชิกฟรี</span>
-        </NuxtLink>
-      </div>
-    </section>
+            <!-- Empty State -->
+            <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
+               <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
+               <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ searchQuery ? 'ไม่พบคอร์สที่คุณค้นหา' : 'ไม่มีคอร์สในหมวดหมู่นี้' }}</h3>
+               <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">ลองใช้คำค้นหาอื่น หรือเลือกหมวดหมู่อื่นเพื่อดูคอร์สที่เรามีให้บริการ</p>
+               <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; selectedCategory = 'all';">
+                  แสดงคอร์สทั้งหมด
+               </button>
+            </div>
+        </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-/* 
-  MATCHING INDEX.VUE STYLES
-  These styles ensure consistency with the landing page theme.
-*/
-
-/* Gradient Text Effect (Cyan to Blue) */
-.text-gradient-cyan {
-  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  display: inline-block;
-  padding: 0.5em 0.2em;
-  margin: -0.5em -0.2em;
-  vertical-align: baseline;
+/* Disable default scrollbar for filter container */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
 }
-
-/* Premium Glass Effect for Containers */
-.glass-premium {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(40px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-
-/* Glass Card Style for Course Items */
-.glass-card {
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 2rem;
-  overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-}
-
-
-
-/* Slow Pulse Animation for Background Glows */
-@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;
-}
-
-/* Slide Up Entrance Animation */
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.slide-up {
-  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-  opacity: 0;
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 </style>
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index 4a01f6c3..1b03a4ef 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -97,14 +97,6 @@ onMounted(() => {
       <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
         <!-- Left Content -->
         <div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
-          <!-- Badge -->
-          <div class="flex items-center gap-2 bg-[#E9EFFD] px-3 py-1.5 rounded-full slide-up">
-            <span class="w-2 h-2 rounded-full bg-blue-600 block" />
-            <span class="text-blue-600 font-bold text-xs uppercase tracking-wide">
-              มีคอร์สเรียนใหม่
-            </span>
-          </div>
-
           <!-- Heading -->
           <h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
             <span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>