385 lines
15 KiB
Vue
385 lines
15 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file index.vue
|
|
* @description หน้า Landing Page (หน้าแรกของเว็บสำหรับ Guest)
|
|
* ใช้ Layout: 'landing' (ไม่มี Sidebar / Navbar แบบ Dashboard)
|
|
*/
|
|
definePageMeta({
|
|
layout: 'landing',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
|
|
})
|
|
|
|
import { CATEGORY_CARDS, WHY_CHOOSE_US } from '@/constants/landing'
|
|
|
|
const { fetchCategories } = useCategory()
|
|
const { fetchCourses, getLocalizedText } = useCourse()
|
|
const { user } = useAuth()
|
|
|
|
const categoryCards = CATEGORY_CARDS
|
|
const whyChooseUs = WHY_CHOOSE_US
|
|
|
|
const categories = ref<any[]>([])
|
|
const topCourses = ref<any[]>([])
|
|
const selectedCategory = ref('all')
|
|
const isLoading = ref(false)
|
|
const currentSlide = ref(0)
|
|
const courseChunks = computed(() => {
|
|
const chunkSize = 4
|
|
const chunks = []
|
|
if (!topCourses.value) return []
|
|
for (let i = 0; i < topCourses.value.length; i += chunkSize) {
|
|
chunks.push(topCourses.value.slice(i, i + chunkSize))
|
|
}
|
|
return chunks
|
|
})
|
|
|
|
const loadData = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
const [catRes, courseRes] = await Promise.all([
|
|
fetchCategories(),
|
|
fetchCourses({ limit: 8, forceRefresh: true })
|
|
])
|
|
|
|
if (catRes.success) categories.value = catRes.data || []
|
|
if (courseRes.success) topCourses.value = courseRes.data || []
|
|
} catch (err) {
|
|
console.error('Failed to load landing page data:', err)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const goBrowse = (slug: string) => {
|
|
navigateTo({ path: '/browse', query: { category: slug } })
|
|
}
|
|
|
|
watch(selectedCategory, async (newVal) => {
|
|
isLoading.value = true
|
|
try {
|
|
const params: any = { limit: 8 }
|
|
if (newVal !== 'all') {
|
|
const category = categories.value.find(c => c.slug === newVal)
|
|
if (category) {
|
|
params.category_id = category.id
|
|
}
|
|
}
|
|
const res = await fetchCourses(params)
|
|
if (res.success) {
|
|
topCourses.value = res.data || []
|
|
currentSlide.value = 0 // Reset carousel on filter change
|
|
}
|
|
} catch (err) {
|
|
console.error('Error filtering courses:', err)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="landing-page bg-white min-h-screen">
|
|
<!-- Hero Section -->
|
|
<header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
|
|
<!-- Decorative Background -->
|
|
<div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
|
|
|
|
<div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
|
|
<div class="hero-left slide-up">
|
|
<div class="flex items-center gap-3 mb-8 text-blue-600">
|
|
<q-icon name="stars" size="28px" />
|
|
<span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
|
|
คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
|
|
</h1>
|
|
<p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
|
|
แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
|
|
</p>
|
|
|
|
<!-- Search Bar Pill -->
|
|
<div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
label="ดูคอร์สเรียนทั้งหมด"
|
|
class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
|
|
no-caps
|
|
to="/browse"
|
|
/>
|
|
<q-btn
|
|
outline
|
|
rounded
|
|
color="primary"
|
|
label="สมัครสมาชิกฟรี"
|
|
class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
|
|
no-caps
|
|
to="/auth/register"
|
|
v-if="!user"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Visual Showcase -->
|
|
<div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
|
|
<div class="relative w-full max-w-xl">
|
|
<!-- Main Illustration -->
|
|
<div class="relative z-10 animate-float">
|
|
<img
|
|
src="/img/elearning.png"
|
|
alt="E-Learning Illustration"
|
|
class="w-full h-auto drop-shadow-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Decorative shapes behind the image -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
|
|
<div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
|
|
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Why Choose Us Section -->
|
|
<section class="pt-20 pb-12 bg-white relative">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<div class="text-center mb-16 slide-up">
|
|
<h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6">
|
|
ทำไมต้องเลือกแพลตฟอร์มของเรา?
|
|
</h2>
|
|
<p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
|
|
เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div v-for="(item, i) in whyChooseUs" :key="i"
|
|
class="slide-up p-10 rounded-[2.5rem] bg-slate-50/50 border border-slate-100 hover:bg-white hover:shadow-2xl hover:shadow-blue-600/5 transition-all duration-500 group"
|
|
:style="`animation-delay: ${i * 0.1}s`"
|
|
>
|
|
<div class="w-16 h-16 rounded-3xl flex items-center justify-center mb-8 transition-transform group-hover:scale-110 duration-500"
|
|
:class="item.iconBg"
|
|
>
|
|
<q-icon :name="item.icon" size="32px" :class="item.iconColor" />
|
|
</div>
|
|
<h3 class="text-2xl font-black text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">
|
|
{{ item.title }}
|
|
</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-medium">
|
|
{{ item.desc }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<div class="mb-12 slide-up">
|
|
<h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
|
|
เลือกเรียนตามเรื่องที่คุณสนใจ
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Horizontal Cards (New Layout - Image 2) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
|
<div v-for="(card, i) in categoryCards" :key="i"
|
|
class="group cursor-pointer bg-white rounded-[2rem] p-6 border border-slate-100/80 shadow-sm hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 transition-all duration-500 relative flex items-center gap-5"
|
|
@click="goBrowse(card.slug)"
|
|
>
|
|
<!-- Icon Box -->
|
|
<div class="flex-shrink-0 w-16 h-16 rounded-[1.5rem] flex items-center justify-center bg-blue-50/50 group-hover:scale-110 transition-transform duration-500"
|
|
>
|
|
<q-icon :name="card.icon" size="28px" class="text-blue-600" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-grow pr-2">
|
|
<h3 class="text-lg md:text-xl font-black text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
|
|
{{ card.title }}
|
|
</h3>
|
|
<p class="text-slate-500 text-xs md:text-sm font-medium leading-relaxed opacity-70">
|
|
{{ card.desc }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Arrow -->
|
|
<div class="flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
|
|
<q-icon name="chevron_right" size="24px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Section 4: "คอร์สออนไลน์" -->
|
|
<section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
|
|
<div class="slide-up">
|
|
<h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
|
<p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
|
|
</div>
|
|
<NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
|
|
คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Filter Tabs / Pills -->
|
|
<div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
|
|
<button
|
|
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
|
: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="selectedCategory = 'all'"
|
|
>
|
|
ทั้งหมด
|
|
</button>
|
|
<button
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
|
: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="selectedCategory = category.slug"
|
|
>
|
|
{{ getLocalizedText(category.name) }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Courses Carousel -->
|
|
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
|
<div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
|
|
</div>
|
|
|
|
<div v-else class="relative group/carousel slide-up">
|
|
<q-carousel
|
|
v-model="currentSlide"
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
swipeable
|
|
animated
|
|
control-color="primary"
|
|
padding
|
|
height="auto"
|
|
class="bg-transparent rounded-none"
|
|
>
|
|
<q-carousel-slide
|
|
v-for="(chunk, pageIndex) in courseChunks"
|
|
:key="pageIndex"
|
|
:name="pageIndex"
|
|
class="p-4"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
|
<CourseCard
|
|
v-for="course in chunk"
|
|
:key="course.id"
|
|
v-bind="{ ...course, image: course.thumbnail_url }"
|
|
/>
|
|
</div>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
|
|
<!-- Custom Carousel Navigation -->
|
|
<button
|
|
v-if="courseChunks.length > 1"
|
|
class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
|
|
@click="currentSlide = Math.max(0, currentSlide - 1)"
|
|
:disabled="currentSlide === 0"
|
|
:class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
|
|
>
|
|
<q-icon name="chevron_left" size="32px" />
|
|
</button>
|
|
<button
|
|
v-if="courseChunks.length > 1"
|
|
class="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
|
|
@click="currentSlide = Math.min(courseChunks.length - 1, currentSlide + 1)"
|
|
:disabled="currentSlide === courseChunks.length - 1"
|
|
:class="{ 'opacity-50 cursor-not-allowed': currentSlide === courseChunks.length - 1 }"
|
|
>
|
|
<q-icon name="chevron_right" size="32px" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped>
|
|
.landing-page {
|
|
font-family: var(--font-main);
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(40px); }
|
|
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;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0); }
|
|
50% { transform: translateY(-20px) rotate(5deg); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 1s ease-out forwards;
|
|
}
|
|
|
|
/* Typography Overrides */
|
|
h1, h2, h3 {
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
/* Hover effects */
|
|
.hero-right:hover .animate-float {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* Responsive Grid Adjustments */
|
|
@media (max-width: 1200px) {
|
|
.career-cards-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.career-cards-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|