291 lines
12 KiB
Vue
291 lines
12 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file courses.vue
|
|
* @description Page displaying all available courses in a public catalog format.
|
|
* Matches the premium dark theme of the landing page.
|
|
*/
|
|
|
|
// 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 courses
|
|
* @description Mock data for available courses. In a real app, this would be fetched from an API.
|
|
* Each course object contains: id, title, level, levelType (for badge color), price, description, rating, lessons.
|
|
*/
|
|
const courses = [
|
|
{
|
|
id: 1,
|
|
title: 'เบื้องต้นการออกแบบ UX/UI',
|
|
price: 'ฟรี',
|
|
description: 'เรียนรู้พื้นฐานการวาดโครงร่างและการใช้งานเครื่องมือออกแบบยุคใหม่',
|
|
rating: '4.8',
|
|
lessons: '12'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'รูปแบบ React ขั้นสูง',
|
|
price: 'ฟรี',
|
|
description: 'เจาะลึก HOC, Hooks และการจัดการ State ขนาดใหญ่ในแอปพลิเคชัน',
|
|
rating: '4.9',
|
|
lessons: '24'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'การตลาดดิจิทัล 101',
|
|
price: 'ฟรี',
|
|
description: 'คู่มือสมบูรณ์สำหรับการทำ SEO/SEM และการวิเคราะห์ข้อมูลผู้ใช้',
|
|
rating: '4.7',
|
|
lessons: '18'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Full-stack Node.js Developer',
|
|
price: 'ฟรี',
|
|
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
|
rating: '4.9',
|
|
lessons: '32'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Full-stack Node.js Developer',
|
|
price: 'ฟรี',
|
|
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
|
rating: '4.9',
|
|
lessons: '32'
|
|
}
|
|
]
|
|
|
|
/**
|
|
* @computed filteredCourses
|
|
* @description Filters the courses list based on the search query.
|
|
* Checks both the course title and description (case-insensitive).
|
|
*/
|
|
const filteredCourses = computed(() => {
|
|
if (!searchQuery.value) return courses
|
|
const query = searchQuery.value.toLowerCase()
|
|
return courses.filter(c =>
|
|
c.title.toLowerCase().includes(query) ||
|
|
c.description.toLowerCase().includes(query)
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Main Container: Dark Theme Base -->
|
|
<div class="relative min-h-screen text-slate-200 bg-slate-900 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 -->
|
|
<div class="mb-6 slide-up">
|
|
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
|
|
EXPLORE COURSES
|
|
</span>
|
|
</div>
|
|
<!-- Main Title -->
|
|
<h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight slide-up" 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
|
|
========================================== -->
|
|
<section class="container mx-auto max-w-6xl px-6 pb-32">
|
|
<!-- Search Bar -->
|
|
<div class="mb-20 relative max-w-2xl mx-auto slide-up" style="animation-delay: 0.3s;">
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
|
|
<span class="text-xl opacity-50">🔍</span>
|
|
</div>
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
class="w-full h-16 pl-14 pr-6 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500/50 focus:bg-white/10 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium text-lg backdrop-blur-md"
|
|
placeholder="ค้นหาบทเรียนที่คุณสนใจ..."
|
|
>
|
|
<!-- Hover Glow Effect on Input -->
|
|
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-transparent group-hover:ring-white/20 pointer-events-none transition-all" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course Grid -->
|
|
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
|
|
<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 / Placeholder Area -->
|
|
<div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-500 shadow-inner border border-white/5">
|
|
📚
|
|
</div>
|
|
</div>
|
|
<!-- Level Badge (Neutral/Warning/Success variants) -->
|
|
|
|
</div>
|
|
|
|
<!-- Card Content Body -->
|
|
<div class="p-8 flex-1 flex flex-col border-t border-white/5">
|
|
<h3 class="text-2xl font-bold text-white mb-3 leading-tight group-hover:text-blue-400 transition-colors">
|
|
{{ course.title }}
|
|
</h3>
|
|
<p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
|
|
{{ course.description }}
|
|
</p>
|
|
|
|
<!-- Meta Information (Rating, Lessons) -->
|
|
<div class="flex items-center gap-6 mb-8 text-sm font-medium text-slate-500">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-amber-400">⭐</span>
|
|
<span class="text-slate-300">{{ course.rating }}</span>
|
|
</div>
|
|
<div class="w-1 h-1 rounded-full bg-slate-700" />
|
|
<div class="flex items-center gap-2">
|
|
<span class="opacity-70">📖</span>
|
|
<span class="text-slate-300">{{ course.lessons }} บทเรียน</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Footer (Price & Action) -->
|
|
<div class="pt-6 border-t border-white/5 flex items-center justify-between mt-auto">
|
|
<span class="text-2xl font-black text-blue-400 tracking-tight">
|
|
{{ course.price }}
|
|
</span>
|
|
<NuxtLink
|
|
to="/browse/opencovery"
|
|
class="px-6 py-3 bg-white/10 hover:bg-blue-600 text-white rounded-xl text-sm font-bold transition-all border border-white/10 hover:border-blue-500/50"
|
|
>
|
|
ดูรายละเอียด
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State (No Results) -->
|
|
<div v-else class="text-center py-32 glass-premium rounded-[3rem]">
|
|
<div class="text-7xl mb-8 opacity-50 animate-bounce">🔭</div>
|
|
<h2 class="text-3xl font-black text-white mb-4">ไม่พบคอร์สที่คุณค้นหา</h2>
|
|
<p class="text-slate-400 mb-10 max-w-md mx-auto text-lg">
|
|
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการในขณะนี้
|
|
</p>
|
|
<button
|
|
class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-lg shadow-blue-600/20 hover:-translate-y-1"
|
|
@click="searchQuery = ''"
|
|
>
|
|
แสดงคอร์สทั้งหมด
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==========================================
|
|
CTA SECTION
|
|
Call to action to register
|
|
========================================== -->
|
|
<section class="py-32 relative overflow-hidden">
|
|
<!-- Gradient Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent 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-white mb-8 tracking-tight">
|
|
พร้อมจะเริ่มต้นแล้วหรือยัง?
|
|
</h2>
|
|
<p class="text-slate-400 text-xl mb-12 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>
|
|
</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;
|
|
}
|
|
|
|
/* Premium Glass Effect for Containers */
|
|
.glass-premium {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
backdrop-filter: blur(40px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Glass Card Style for Course Items */
|
|
.glass-card {
|
|
background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
</style>
|