feat: Implement initial e-learning platform frontend including landing page, course discovery, dashboard, and foundational UI components with i18n.
This commit is contained in:
supalerk-ar66
parent
5b9cf72046
commit
3a9da1007b
17 changed files with 1631 additions and 1524 deletions
|
|
@ -22,15 +22,20 @@ const { user } = useAuth()
|
|||
const categoryCards = CATEGORY_CARDS
|
||||
const whyChooseUs = WHY_CHOOSE_US
|
||||
|
||||
//ระดับความยาก
|
||||
const levelModel = ref('ระดับทั้งหมด')
|
||||
const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
|
||||
|
||||
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 []
|
||||
if (!topCourses.value || topCourses.value.length === 0) return []
|
||||
for (let i = 0; i < topCourses.value.length; i += chunkSize) {
|
||||
chunks.push(topCourses.value.slice(i, i + chunkSize))
|
||||
}
|
||||
|
|
@ -42,7 +47,7 @@ const loadData = async () => {
|
|||
try {
|
||||
const [catRes, courseRes] = await Promise.all([
|
||||
fetchCategories(),
|
||||
fetchCourses({ limit: 8, forceRefresh: true })
|
||||
fetchCourses({ limit: 12, forceRefresh: true })
|
||||
])
|
||||
|
||||
if (catRes.success) categories.value = catRes.data || []
|
||||
|
|
@ -61,7 +66,7 @@ const goBrowse = (slug: string) => {
|
|||
watch(selectedCategory, async (newVal) => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params: any = { limit: 8 }
|
||||
const params: any = { limit: 12 }
|
||||
if (newVal !== 'all') {
|
||||
const category = categories.value.find(c => c.slug === newVal)
|
||||
if (category) {
|
||||
|
|
@ -87,41 +92,49 @@ onMounted(() => {
|
|||
|
||||
<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>
|
||||
<!-- Section 1: Hero Section -->
|
||||
<section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
|
||||
<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>
|
||||
<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>ยุคดิจิทัล
|
||||
|
||||
<!-- 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>
|
||||
<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;">
|
||||
แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
|
||||
จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
|
||||
ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
|
||||
เรียนได้ทุกที่ ทุกเวลา
|
||||
</p>
|
||||
|
||||
<!-- Search Bar Pill -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Buttons -->
|
||||
<div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
|
||||
<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"
|
||||
color="blue-600"
|
||||
label="ดูคอร์สเรียน"
|
||||
class="px-10 py-4 w-full sm:w-auto rounded-3xl font-semibold text-white text-lg shadow-xl shadow-blue-600/20 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"
|
||||
color="grey-8"
|
||||
class="px-10 py-4 w-full sm:w-auto btn-user rounded-3xl font-semibold text-lg hover:bg-blue-50 "
|
||||
no-caps
|
||||
to="/auth/register"
|
||||
v-if="!user"
|
||||
|
|
@ -129,53 +142,65 @@ onMounted(() => {
|
|||
</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>
|
||||
<!-- Right - Hero Image -->
|
||||
<div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
|
||||
<img
|
||||
src="https://api.builder.io/api/v1/image/assets/TEMP/11ba9b46c799fac950967377f8158fa942c1a6b8?width=1184"
|
||||
alt="Students collaborating"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
|
||||
|
||||
<!-- 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;" />
|
||||
<!-- Course Card Overlay -->
|
||||
<!-- <div class="absolute bottom-5 left-5 right-5">
|
||||
<div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-2xl bg-blue-600/20">
|
||||
<q-icon name="o_play_circle" size="25px" class="text-blue-600" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-slate-900 font-bold text-sm leading-5">
|
||||
เรียนรู้การออกแบบ UI/UX
|
||||
</span>
|
||||
<span class="text-slate-500 text-xs leading-4 mt-0.5">
|
||||
คอร์สวิดีโอ • 12 บทเรียน
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section class="pt-20 pb-12 bg-white relative">
|
||||
<!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
|
||||
<section class="pt-20 pb-14 bg-white relative flex-col">
|
||||
<div class="container mx-auto px-6 lg:px-12">
|
||||
<!-- Heading -->
|
||||
<div class="text-center mb-16 slide-up">
|
||||
<h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6">
|
||||
<h2 class="text-4xl md:text-[2.4rem] font-bold 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 class="text-slate-500 text-base font-normal md:text-xl max-w-3xl mx-auto leading-relaxed">
|
||||
เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Horizontal Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg: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"
|
||||
class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white 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 class="w-14 h-14 rounded-full bg-[#E3EBFA] flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-500">
|
||||
<q-icon :name="item.icon" size="28px" class="text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">
|
||||
<h3 class="text-[1.3rem] font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-medium">
|
||||
<p class="text-slate-500 text-lg leading-relaxed ">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -183,38 +208,39 @@ onMounted(() => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
|
||||
<!-- Section 3: เลือกเรียนตามเรื่องที่คุณสนใจ -->
|
||||
<section class="py-20 md:py-24 bg-white">
|
||||
<div class="container mx-auto px-6 lg:px-12">
|
||||
<!-- Heading -->
|
||||
<div class="mb-12 slide-up">
|
||||
<h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
|
||||
<h2 class="text-[1.4rem] text-3xl md:text-4xl font-semibold 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">
|
||||
<!-- Horizontal Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center 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"
|
||||
class="cursor-pointer bg-white rounded-3xl p-6 border border-slate-200/80 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 hover:border-[#2463eb61] transition-all duration-500 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 class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-50 group-hover:scale-110 transition-transform duration-500">
|
||||
<q-icon :name="card.icon" size="35px" 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">
|
||||
<h3 class="text-lg md:text-xl font-bold 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">
|
||||
<p class="text-slate-600 text-xs md:text-sm 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">
|
||||
<div class="gt-xs 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>
|
||||
|
|
@ -222,45 +248,65 @@ onMounted(() => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Section 4: "คอร์สออนไลน์" -->
|
||||
<section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
|
||||
<section class="py-12 md:py-24 bg-slate-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">
|
||||
<!-- Heading -->
|
||||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 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>
|
||||
<h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
||||
</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 to="/browse" class="flex items-center py-3 text-lg rounded-full font-bold ">
|
||||
<span class="text-blue-600 hover:text-blue-500 ">ดูคอร์สทั้งหมด</span>
|
||||
<q-icon name="arrow_forward" size="15px" class="text-blue-600 ml-2" />
|
||||
</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>
|
||||
<!-- Filters Row -->
|
||||
<div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
|
||||
<!-- Category Filters -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
|
||||
:class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-100 text-slate-700 hover:border-slate-300'"
|
||||
@click="selectedCategory = 'all'"
|
||||
>
|
||||
<q-icon name="o_check_circle" size="20px" class="mr-1" />
|
||||
ทั้งหมด
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-[1.5px]"
|
||||
:class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
|
||||
@click="selectedCategory = category.slug"
|
||||
>
|
||||
<q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
|
||||
{{ getLocalizedText(category.name) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Level Dropdown -->
|
||||
<!-- <div class="flex items-center gap-2 font-medium">
|
||||
<q-select
|
||||
borderless
|
||||
v-model="levelModel"
|
||||
:options="levelOptions"
|
||||
dropdown-icon="o_keyboard_arrow_down"
|
||||
class="text-lg"
|
||||
popup-content-class="rounded-lg text-lg shadow-sm text-slate-700"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="text-slate-700 text-lg">ระดับความยาก:</div>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
</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 v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] animate-pulse" />
|
||||
</div>
|
||||
|
||||
<div v-else class="relative group/carousel slide-up">
|
||||
|
|
@ -279,14 +325,63 @@ onMounted(() => {
|
|||
v-for="(chunk, pageIndex) in courseChunks"
|
||||
:key="pageIndex"
|
||||
:name="pageIndex"
|
||||
class="p-4"
|
||||
class="p-0"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||
<CourseCard
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="course in chunk"
|
||||
:key="course.id"
|
||||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||||
/>
|
||||
class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
|
||||
@click="navigateTo(`/course/${course.id}`)"
|
||||
>
|
||||
<!-- Image-->
|
||||
<div class="relative flex-shrink-0">
|
||||
<img
|
||||
v-if="course.thumbnail_url"
|
||||
:src="course.thumbnail_url"
|
||||
:alt="getLocalizedText(course.title)"
|
||||
class="w-full h-[150px] sm:h-[180px] lg:h-[200px] object-cover"
|
||||
/>
|
||||
<div v-else class="w-full h-[150px] sm:h-[180px] lg:h-[200px] bg-slate-100 flex items-center justify-center">
|
||||
<q-icon name="o_image" size="40px" class="text-slate-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
|
||||
{{ getLocalizedText(course.description) }}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<!-- Price + Button -->
|
||||
<div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
|
||||
<div class="flex flex-col">
|
||||
<span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
|
||||
{{ course.price.toLocaleString() }}.-
|
||||
</span>
|
||||
<span v-else class="text-green-600 font-bold text-xl">
|
||||
ฟรี
|
||||
</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#2463EB]/10 hover:bg-[#2463EB]/20 transition-colors">
|
||||
<q-icon name="o_remove_red_eye" size="18px" class="text-[#2463EB]" />
|
||||
<span class="text-[#2463EB] font-medium text-sm">
|
||||
รายละเอียด
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
|
@ -313,11 +408,55 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง" -->
|
||||
<section class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<div class="bg-blue-600 rounded-3xl px-8 py-20 md:px-18 text-center relative overflow-hidden">
|
||||
<div class="gradient-background">
|
||||
<div class="gradient-sphere sphere-1"></div>
|
||||
<div class="gradient-sphere sphere-2"></div>
|
||||
<div class="gradient-sphere sphere-3"></div>
|
||||
</div>
|
||||
<div class="grid-overlay"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-blue-100 text-lg mb-8 max-w-xl mx-auto">
|
||||
อัปสกิลและรับทักษะที่คุณต้องการเพื่อก้าวหน้าในระดับมืออาชีพ
|
||||
เปิดประสบการณ์การเรียนรู้รูปแบบใหม่ สมัครเลยวันนี้เพื่อเริ่มต้นเข้าสู่บทเรียน
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="px-8 py-4 bg-white font-bold rounded-3xl hover:bg-slate-50 transition-colors"
|
||||
no-caps
|
||||
size="18px"
|
||||
to="/browse"
|
||||
>
|
||||
<div class="text-blue-600">สำรวจคอร์สเรียน</div>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
outline
|
||||
rounded
|
||||
label="สมัครฟรีวันนี้"
|
||||
color="white"
|
||||
class="px-8 py-4 font-bold rounded-3xl hover:bg-white/10 transition-colors"
|
||||
no-caps
|
||||
size="18px"
|
||||
to="/auth/register"
|
||||
v-if="!user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.landing-page {
|
||||
font-family: var(--font-main);
|
||||
|
|
@ -342,15 +481,6 @@ onMounted(() => {
|
|||
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; }
|
||||
|
|
@ -360,26 +490,80 @@ onMounted(() => {
|
|||
animation: fade-in 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Typography Overrides */
|
||||
h1, h2, h3 {
|
||||
letter-spacing: normal;
|
||||
/* Hero Right Hover State */
|
||||
.hero-right:hover .relative {
|
||||
transform: translateY(-10px);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hero-right:hover .animate-float {
|
||||
animation-play-state: paused;
|
||||
.gradient-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Grid Adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.career-cards-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.gradient-sphere {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.career-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.sphere-1 {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
background: linear-gradient(40deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.164));
|
||||
top: 10%;
|
||||
left: -30%;
|
||||
animation: float-1 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.sphere-2 {
|
||||
width: 45vw;
|
||||
height: 45vw;
|
||||
background: linear-gradient(240deg, rgba(16, 33, 121, 0.245), rgba(155, 169, 239, 0.263));
|
||||
bottom: -20%;
|
||||
right: -35%;
|
||||
animation: float-2 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.sphere-3 {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
|
||||
top: 60%;
|
||||
left: 20%;
|
||||
animation: float-3 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes float-1 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(10%, 10%) scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes float-2 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(-10%, -5%) scale(1.15); }
|
||||
}
|
||||
|
||||
@keyframes float-3 {
|
||||
0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 40px 40px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue