chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement initial application layouts, global navigation, and course browsing pages with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 41s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-18 16:28:29 +07:00
parent b56f604890
commit 3fa236cff5
15 changed files with 993 additions and 392 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Frontend-Learner/components/layout/AppHeader.vue
View file

@ -42,6 +42,17 @@ const searchText = ref('')
</div>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-6 ml-8 text-sm font-bold">
<NuxtLink to="/browse" class="text-slate-600 hover:text-blue-600 transition-colors">
{{ $t('sidebar.onlineCourses') }}
</NuxtLink>
<NuxtLink to="/browse/discovery" class="text-slate-600 hover:text-blue-600 transition-colors">
{{ $t('sidebar.recommendedCourses') }}
</NuxtLink>
</nav>
<q-space />
<!-- Center Search (Optional) -->

24
Frontend-Learner/components/layout/AppSidebar.vue
View file

@ -5,28 +5,10 @@
* Uses Quasar QList for structure.
*/
const { sidebarItems } = useNavItems()
const { t } = useI18n()
const navItems = sidebarItems
const navItems = computed(() => [
{
to: "/dashboard",
label: t('sidebar.overview'),
icon: "dashboard", // Using Material Icons names where possible or SVG paths
isSvg: false
},
{
to: "/browse/discovery",
label: t('sidebar.browseCourses'),
icon: "explore",
isSvg: false
},
{
to: "/dashboard/my-courses",
label: t('sidebar.myCourses'),
icon: "school",
isSvg: false
}
]);
const handleNavigate = (path: string) => {
if (import.meta.client) {
@ -55,7 +37,7 @@ const handleNavigate = (path: string) => {
</q-item-section>
<q-item-section>
<q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
<q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>

25
Frontend-Learner/components/layout/LandingHeader.vue
View file

@ -27,10 +27,8 @@ onMounted(() => {
:class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
>
<div class="container h-full flex items-center justify-between">
<!--
Left Section: Logo & Desktop Navigation
-->
<div class="flex items-center gap-12">
<!-- Left Section: Logo & Desktop Navigation -->
<div class="flex items-center gap-8">
<!-- Logo -->
<NuxtLink to="/" class="flex items-center gap-3 group">
<div class="logo-box bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
@ -53,35 +51,28 @@ onMounted(() => {
</NuxtLink>
<!-- Desktop Links -->
<nav class="hidden md:block">
<ul class="flex items-center gap-8 text-sm font-bold">
<li>
<nav class="flex items-center gap-6 text-sm font-bold">
<NuxtLink
to="/browse"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('landing.allCourses') }}
{{ $t('sidebar.onlineCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</li>
<li>
<NuxtLink
to="/browse/discovery"
to="/browse/recommended"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('landing.discovery') }}
{{ $t('sidebar.recommendedCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</li>
</ul>
</nav>
</div>
<!--
Right Section: Action Buttons (Login/Register or Dashboard)
-->
<!-- Right Section: Action Buttons -->
<div class="flex items-center gap-4">
<template v-if="!isAuthenticated">
<NuxtLink

11
Frontend-Learner/components/layout/MobileNav.vue
View file

@ -1,11 +1,6 @@
<script setup lang="ts">
const { t } = useI18n()
const navItems = computed(() => [
{ to: '/dashboard', icon: 'dashboard', label: t('sidebar.overview') },
{ to: '/browse/discovery', icon: 'explore', label: t('sidebar.browseCourses') },
{ to: '/dashboard/my-courses', icon: 'school', label: t('sidebar.myCourses') }
])
const { mobileItems } = useNavItems()
const navItems = mobileItems
const handleNavigate = (path: string) => {
if (import.meta.client) {
@ -27,7 +22,7 @@ const handleNavigate = (path: string) => {
:key="item.to"
@click="handleNavigate(item.to)"
:icon="item.icon"
:label="item.label"
:label="$t(item.labelKey)"
no-caps
class="py-2"
:class="{ 'q-tab--active text-primary': $route.path === item.to }"

13
Frontend-Learner/components/user/UserMenu.vue
View file

@ -29,12 +29,9 @@ const userInitials = computed(() => {
return f + l
})
const menuItems = computed(() => [
{ label: t('userMenu.home'), to: '/dashboard' },
{ label: t('userMenu.courseList'), to: '/browse/discovery' },
{ label: t('userMenu.myCourses'), to: '/dashboard/my-courses' },
{ label: t('userMenu.settings'), to: '/dashboard/profile' }
])
const { userMenuItems } = useNavItems()
const menuItems = userMenuItems
const handleLogout = async () => {
await logout()
@ -63,14 +60,14 @@ const handleLogout = async () => {
<q-list class="py-2">
<q-item
v-for="item in menuItems"
:key="item.label"
:key="item.labelKey"
clickable
v-close-popup
@click="navigateTo(item.to)"
class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
>
<q-item-section>
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ item.label }}</q-item-label>
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t(item.labelKey) }}</q-item-label>
</q-item-section>
</q-item>

76
Frontend-Learner/composables/useNavItems.ts Normal file
View file

@ -0,0 +1,76 @@
/**
* @file useNavItems.ts
* @description Single Source of Truth for navigation items used across the app (Sidebar, Mobile Nav, User Menu).
*/
export interface NavItem {
to: string
labelKey: string
icon: string
showOn: ('sidebar' | 'mobile' | 'userMenu')[]
roles?: string[]
}
export const useNavItems = () => {
const allNavItems: NavItem[] = [
{
to: '/dashboard',
labelKey: 'sidebar.overview',
icon: 'dashboard',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/browse',
labelKey: 'sidebar.onlineCourses',
icon: 'video_library',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/browse/discovery',
labelKey: 'sidebar.recommendedCourses',
icon: 'auto_awesome',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/browse/discovery',
labelKey: 'sidebar.browseCourses',
icon: 'explore',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/dashboard/my-courses',
labelKey: 'sidebar.myCourses',
icon: 'school',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/dashboard/announcements',
labelKey: 'sidebar.announcements',
icon: 'campaign',
showOn: ['sidebar', 'mobile', 'userMenu']
},
{
to: '/dashboard/profile',
labelKey: 'sidebar.profile',
icon: 'person',
showOn: ['sidebar'] // Already in settings for userMenu
},
{
to: '/dashboard/profile',
labelKey: 'userMenu.settings',
icon: 'settings',
showOn: ['userMenu']
}
]
const sidebarItems = computed(() => allNavItems.filter(item => item.showOn.includes('sidebar')))
const mobileItems = computed(() => allNavItems.filter(item => item.showOn.includes('mobile')))
const userMenuItems = computed(() => allNavItems.filter(item => item.showOn.includes('userMenu')))
return {
allNavItems,
sidebarItems,
mobileItems,
userMenuItems
}
}

2
Frontend-Learner/i18n/locales/en.json
View file

@ -58,6 +58,8 @@
"overview": "Home",
"myCourses": "My Courses",
"browseCourses": "Browse Courses",
"onlineCourses": "Online Courses",
"recommendedCourses": "Recommended Courses",
"announcements": "Announcements",
"profile": "My Profile"
},

2
Frontend-Learner/i18n/locales/th.json
View file

@ -58,6 +58,8 @@
"overview": "หน้าหลัก",
"myCourses": "คอร์สของฉัน",
"browseCourses": "ค้นหาคอร์ส",
"onlineCourses": "คอร์สออนไลน์",
"recommendedCourses": "คอร์สเรียนออนไลน์แนะนำ",
"announcements": "ข่าวประกาศ",
"profile": "บัญชีผู้ใช้"
},

2
Frontend-Learner/layouts/default.vue
View file

@ -15,7 +15,7 @@ const toggleLeftDrawer = () => {
</script>
<template>
<q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50 font-sans">
<q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
<!-- Header -->
<q-header
bordered

8
Frontend-Learner/layouts/landing.vue
View file

@ -20,7 +20,7 @@ onMounted(() => {
<template>
<q-layout view="lHh LpR lFf" class="bg-white text-slate-900 font-inter">
<q-layout view="lHh LpR lFf" class="bg-white text-slate-900">
<!-- Header (Transparent & Overlay) -->
@ -39,9 +39,3 @@ onMounted(() => {
</q-layout>
</template>
<style>
.font-inter {
font-family: 'Inter', sans-serif;
}
</style>

134
Frontend-Learner/pages/browse/index.vue
View file

@ -18,6 +18,7 @@ useHead({
// 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) => {
@ -26,8 +27,78 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
return text.th || text.en || ''
}
// Fetch courses from API
const { data: coursesResponse, error } = await useAsyncData('courses-list', () => fetchCourses())
const route = useRoute()
const router = useRouter()
// State for selected category
const selectedCategory = ref((route.query.category as string) || 'all')
const selectCategory = (slug: string) => {
if (slug === 'all') {
// Remove query param for 'all' or keep it? Protocol says /browse?category=all is fine.
// But usually clean URL is better. Let's keep it simple as requested: "Click programming => /browse?category=programming".
// "all" might just remove the param or be ?category=all. The prompt didn't specify 'all' behavior for URL, but fallback is fine.
// If I use 'all', the watcher sets 'all'.
router.push({ query: { category: 'all' } })
} else {
router.push({ query: { ...route.query, category: slug } })
}
}
// 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 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)
// Fetch courses from API (reactive to selectedCategory)
// Fetch courses from API (reactive to selectedCategory)
const { data: coursesResponse, 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()
})
// Ref for the scroll container
const categoryScroll = ref<HTMLElement | null>(null)
// Computed property for courses list from API response
const courses = computed(() => {
@ -75,14 +146,10 @@ const filteredCourses = computed(() => {
<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-8 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-slate-900 mb-8 tracking-normal py-10 slide-up leading-[1.6]" style="animation-delay: 0.1s;">
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
<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;">
@ -97,12 +164,12 @@ const filteredCourses = computed(() => {
<!-- ==========================================
SEARCH & GRID SECTION
========================================== -->
<section class="container mx-auto max-w-[1440px] px-6 pb-32">
<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">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-12">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-8">
<h2 class="text-2xl font-black text-slate-900 flex items-center gap-3">
<span class="w-2 h-8 bg-blue-600 rounded-full"/>
รายการคอร์สเรียน
@ -126,6 +193,49 @@ const filteredCourses = computed(() => {
</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>
<!-- 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
@ -197,7 +307,7 @@ const filteredCourses = computed(() => {
CTA SECTION
Call to action to register
========================================== -->
<section class="py-32 relative overflow-hidden">
<section class="py-20 relative overflow-hidden">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>

349
Frontend-Learner/pages/browse/recommended.vue Normal file
View file

@ -0,0 +1,349 @@
<script setup lang="ts">
/**
* @file recommended.vue
* @description Page displaying recommended courses.
* Matches the layout of the browse 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 { 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
return text.th || text.en || ''
}
// State for selected category
const selectedCategory = ref('all')
// Fetch categories on mount
await useAsyncData('categories-list', () => fetchCategories())
// Fetch courses from API (reactive to selectedCategory)
const { data: coursesResponse, error, refresh } = await useAsyncData(
'recommended-courses-list',
() => {
const params: any = {
is_recommended: true // Only fetch recommended courses
}
console.log('Fetching recommended 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()
})
// Ref for the scroll container
const categoryScroll = ref<HTMLElement | null>(null)
// Computed property for courses list from API response
const courses = computed(() => {
if (coursesResponse.value?.success) {
return coursesResponse.value.data
}
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 => {
const title = getLocalizedText(c.title).toLowerCase()
const desc = getLocalizedText(c.description).toLowerCase()
return title.includes(query) || desc.includes(query)
})
})
</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
========================================== -->
<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">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-8">
<h2 class="text-2xl font-black text-slate-900 flex items-center gap-3">
<span class="w-2 h-8 bg-blue-600 rounded-full"/>
คอร์สที่คุณห้ามพลาด
</h2>
<!-- Search Bar (Compact) -->
<div class="relative max-w-md w-full">
<div class="relative group">
<input
v-model="searchQuery"
type="text"
class="w-full pl-12 pr-6 py-3 bg-slate-100 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:bg-white focus: focus:ring-2 focus:ring-blue-500/50 transition-all font-medium"
placeholder="ค้นหาคอร์สแนะนำ..."
>
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
</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="selectedCategory = 'all'"
>
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="selectedCategory = category.slug"
>
{{ getLocalizedText(category.name) }}
</button>
</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 (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">
<!-- Recommended Badge -->
<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"
>
</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>
<!-- 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"
>
ดูรายละเอียด
</NuxtLink>
</div>
</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 = ''; selectedCategory = 'all'"
>
ล้างค่าการค้นหา
</button>
</div>
</div>
</section>
<!-- ==========================================
CTA SECTION
========================================== -->
<section class="py-20 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-slate-900 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
Adjusted to Pink/Rose theme for "Recommended" feel
*/
/* 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;
}
/* Premium Glass Effect */
.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 */
.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);
}
/* Animations */
@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;
}
@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>

668
Frontend-Learner/pages/index.vue
View file

@ -6,369 +6,461 @@
*/
definePageMeta({
layout: 'landing',
middleware: 'auth' // ใช้ auth middleware เพื่อเช็ค: ถ้า Login แล้วให้ดีดไป Dashboard
middleware: 'auth'
})
useHead({
title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
})
const { fetchCategories } = useCategory()
const { fetchCourses, getLocalizedText } = useCourse()
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="relative min-h-screen text-slate-600 bg-slate-50 transition-colors">
<!-- Premium Background -->
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
<!-- Animated Glows -->
<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 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>
<!-- Hero Section: ส่วนหัวของหน้าเว็บ แสดงข้อความต้อนรับและปุ่ม CTA -->
<section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
<div class="container relative z-10 w-full">
<!-- Hero Card Container -->
<div class="bg-white/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 relative overflow-hidden">
<!-- Decorative background inside card -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none"/>
<div class="grid-hero items-center relative z-10">
<!-- Left Content -->
<div class="hero-content">
<div class="mb-12 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)] bg-white ">
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
</span>
</div>
<h1 class="hero-title leading-[1.6] mb-8 slide-up py-8" style="animation-delay: 0.1s;">
ยกระดับทักษะ <br>
<span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
<h1 class="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 leading-[1.15] mb-8">
คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
</h1>
<h2 class="hero-subtitle text-slate-600 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
<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>
<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="text-center mb-16 slide-up">
<h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6 px-4">
เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
</h2>
<div class="hero-actions flex flex-wrap gap-6 mb-20 slide-up" style="animation-delay: 0.3s;">
<NuxtLink to="/auth/register" class="btn-cta-premium group">
สมัครเรียนฟรีวันนี้
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</NuxtLink>
<NuxtLink to="/browse" class="btn-outline-glass">
เปิดดูคอร์สทั้งหมด
</NuxtLink>
<p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
</p>
</div>
<!-- Horizontal Scrollable Container -->
<div class="relative">
<div class="flex justify-center gap-6 overflow-x-auto pb-12 px-4 no-scrollbar scroll-smooth snap-x flex-wrap">
<div v-for="(card, i) in stepOneCards" :key="i"
class="flex-none w-[280px] snap-start group cursor-pointer p-8 rounded-[2.5rem] aspect-[3/4.5] flex flex-col justify-between transition-all hover:-translate-y-3 shadow-xl overflow-hidden relative"
:class="card.bgClass"
@click="goBrowse(card.categorySlug)"
>
<!-- Background Accent -->
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
</div>
<!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
<div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
<!-- Preview Snapshot Container -->
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl border border-slate-200 ">
<!-- Browser-like header -->
<div class="preview-header border-b border-slate-200 py-4 bg-slate-100 flex items-center px-6">
<div class="dots flex gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
</div>
<div class="mx-auto bg-slate-200 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
</div>
<!-- Showcase Content -->
<div class="preview-body p-8 space-y-8">
<!-- Video Hero Preview -->
<div class="relative aspect-video bg-gradient-to-br from-blue-900/50 to-indigo-900/50 rounded-3xl overflow-hidden group/vid border border-white/5">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center shadow-2xl group-hover/vid:scale-110 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white ml-1" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="absolute bottom-4 left-6 right-6 h-1.5 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-blue-500 w-[65%]"/>
</div>
</div>
<!-- Course List Preview -->
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 ">
<div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
<div class="h-2 bg-white/5 rounded w-1/2"/>
</div>
<div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 ">
<div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
<div class="h-2 bg-white/5 rounded w-1/2"/>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Feature Highlights (Marketing focused) -->
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] animate-float">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-emerald-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="text-slate-900 font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
<div class="text-slate-500 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
</div>
</div>
<span class="text-xs font-black uppercase tracking-[0.2em] opacity-80 mb-3 block text-white/80">ก้าวแรกของ</span>
<h3 class="text-3xl font-black leading-none tracking-tight text-white mb-2" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1)">{{ card.title }}</h3>
</div>
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] animate-float" style="animation-delay: -3s;">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/30">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<div class="text-slate-900 font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
<div class="text-slate-500 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
<div class="space-y-6 relative z-10">
<p class="text-lg font-bold leading-snug text-white/95" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1)">{{ card.desc }}</p>
<div class="flex justify-end">
<div class="w-14 h-14 rounded-full border-2 border-white/30 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-110 backdrop-blur-md shadow-lg">
<q-icon name="arrow_forward" size="28px" class="text-white" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
<section class="info-section py-40 bg-slate-50 relative transition-colors">
<!-- Background detail -->
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
<!-- Section 2: "Value Proposition" - Why Online Learning here? -->
<section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
<!-- Decorative background blur -->
<div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
<div class="container relative z-10">
<div class="text-center mb-28">
<span class="text-blue-500 font-black tracking-[0.4em] text-[11px] uppercase mb-5 block">Why Choose Us</span>
<h2 class="section-title text-5xl font-black mb-8 text-slate-900 tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
<p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
<div class="container mx-auto px-6 lg:px-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<!-- Left side: Visual representation -->
<div class="relative slide-up">
<div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
<!-- Animated background shapes -->
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
<div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
<div class="relative z-20 flex flex-col items-center text-center text-white">
<div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
<q-icon name="laptop_mac" size="64px" class="text-white" />
</div>
<h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
คอร์สออนไลน์<br class="hidden md:block" />
ที่ออกแบบมาสำหรับคุณ
</h3>
<p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
</p>
</div>
</div>
<!-- Floating Stats pill -->
<div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
<q-icon name="query_builder" size="28px" />
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
<div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
</div>
</div>
</div>
</div>
<!-- Right side: Content & Benefits -->
<div class="slide-up" style="animation-delay: 0.2s;">
<div class="mb-12">
<span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
Premium Learning Experience
</span>
<h2 class="text-4xl md:text-6xl font-black text-slate-900 leading-[1.15] md:leading-[1.12] tracking-tight mb-0 pt-1 overflow-visible">
ก้าวข้ามทุกขีดจำกัด<br />
ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
</h2>
<p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<!-- Feature 1 -->
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
<div class="w-20 h-20 rounded-[1.75rem] bg-blue-600/10 text-blue-500 flex items-center justify-center mb-10 border border-blue-500/20 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div v-for="(feature, f) in learningStyles[0].features" :key="f"
class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
<q-icon name="check" size="20px" />
</div>
<span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
</div>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">สื่อการเรียนระดับสูง</h3>
<p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
</div>
<!-- Feature 2 -->
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
<div class="w-20 h-20 rounded-[1.75rem] bg-emerald-600/10 text-emerald-500 flex items-center justify-center mb-10 border border-emerald-500/20 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
<q-btn
unelevated
rounded
color="primary"
label="เริ่มต้นบทเรียนแรกของคุณ"
class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
no-caps
:to="user ? '/browse' : '/auth/login'"
/>
</div>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">วัดผลแบบอัจฉริยะ</h3>
<p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
</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-black text-slate-900 mb-4">คอร์สออนไลน์</h2>
<p class="text-slate-500 font-black 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>
<!-- Feature 3 -->
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
<div class="w-20 h-20 rounded-[1.75rem] bg-indigo-600/10 text-indigo-500 flex items-center justify-center mb-10 border border-indigo-500/20 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
<!-- 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'"
>
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>
<h3 class="text-2xl font-black mb-5 text-slate-900 ">ระบบติดตามผล</h3>
<p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
<!-- 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>
<script lang="ts">
// Supplementary static data for the sections
export default {
setup() {
const { user } = useAuth()
return { user }
},
data() {
return {
stepOneCards: [
{ title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
{ title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
{ title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
{ title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
{ title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
{ title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
{ title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
],
learningStyles: [
{
title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที',
time: 'เข้าถึงได้ตลอดชีพ',
features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
}
],
promoCategories: [
{ title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
{ title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
{ title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
{ title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
]
}
}
}
</script>
<style scoped>
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
.landing-page {
font-family: var(--font-main);
}
.hero-title {
font-size: clamp(3.5rem, 7vw, 5.5rem);
font-weight: 900;
color: #0f172a;
}
.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.4em 0.2em;
margin: -0.4em -0.2em;
vertical-align: baseline;
}
.glass-premium {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.glass-tag-premium {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.btn-cta-premium {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
padding: 1.5rem 3.5rem;
border-radius: 1.5rem;
font-weight: 900;
display: flex;
align-items: center;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 1.125rem;
}
.btn-cta-premium:hover {
@apply bg-blue-600;
transform: translateY(-5px);
box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.5);
}
.btn-outline-glass {
padding: 1.5rem 3.5rem;
border-radius: 1.5rem;
font-weight: 900;
color: #1e293b; /* Slate 800 for better visibility */
border: 2px solid #cbd5e1; /* Thicker, Slate 300 border */
background: rgba(255, 255, 255, 0.8); /* Whiting background */
transition: all 0.3s ease;
font-size: 1.125rem;
}
.btn-outline-glass:hover {
background: #ffffff;
border-color: #3b82f6; /* Blue border on hover */
color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.platform-preview-card {
width: 100%;
max-width: 620px;
border-radius: 4rem;
overflow: hidden;
}
.grid-hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 8rem;
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Animations */
@keyframes slide-up {
from { opacity: 0; transform: translateY(50px); }
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-up {
animation: slide-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
opacity: 0;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-25px); }
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-20px) rotate(5deg); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.1; transform: scale(1); }
50% { opacity: 0.15; transform: scale(1.15); }
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-pulse-slow {
animation: pulse-slow 10s linear infinite;
.animate-fade-in {
animation: fade-in 1s ease-out forwards;
}
@media (max-width: 1300px) {
.grid-hero {
gap: 4rem;
}
/* Typography Overrides */
h1, h2, h3 {
letter-spacing: -0.02em;
}
@media (max-width: 1024px) {
.grid-hero {
grid-template-columns: 1fr;
text-align: center;
gap: 5rem;
/* Hover effects */
.hero-right:hover .animate-float {
animation-play-state: paused;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-actions {
justify-content: center;
}
.program-stats {
justify-content: center;
}
.stat-divider { display: none; }
.program-stats { gap: 50px; }
.hero-visual {
padding-top: 40px;
/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
.career-cards-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.container {
padding: 0 24px;
}
.hero-title {
font-size: 3.5rem;
}
.hidden-mobile {
display: none;
}
.btn-cta-premium, .btn-outline-glass {
width: 100%;
padding: 1.25rem 2rem;
.career-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>

BIN
Frontend-Learner/public/img/elearning.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 239 KiB

0
Frontend-Learner/คู่มืออธิบาย/Error.md Normal file
View file