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

feat: Implement initial core features including course browsing, authentication, user dashboard, and internationalization.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-24 11:12:26 +07:00
parent 031ca5c984
commit 797e3db644
19 changed files with 401 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,37 +13,14 @@ 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 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' }
]
const 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'
}
]
const promoCategories = [
{ title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
{ title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
{ title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
{ title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
]
const categoryCards = CATEGORY_CARDS
const whyChooseUs = WHY_CHOOSE_US
const categories = ref<any[]>([])
const topCourses = ref<any[]>([])
@ -173,128 +150,73 @@ onMounted(() => {
</div>
</header>
<section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
<!-- 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-bold text-slate-900 mb-6 px-4">
เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
<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">
เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
</p>
</div>
<!-- Grid Container (Bento Layout) -->
<div class="relative">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="(card, i) in stepOneCards" :key="i"
class="group cursor-pointer rounded-3xl p-6 flex flex-col justify-between transition-all hover:-translate-y-1 shadow-lg hover:shadow-2xl overflow-hidden relative"
:class="[
card.bgClass,
i === 0 ? 'lg:row-span-2 min-h-[380px]' : 'min-h-[220px]'
]"
@click="goBrowse(card.categorySlug)"
<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"
>
<!-- 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>
<span class="text-[10px] font-bold uppercase tracking-[0.15em] opacity-80 mb-3 block" :class="card.textClass === 'text-white' ? 'text-white/80' : 'text-slate-900/60'">ก้าวแรกของ</span>
<h3 class="text-2xl font-bold leading-tight tracking-tight mb-2" :class="card.textClass">{{ card.title }}</h3>
</div>
<div class="space-y-4 relative z-10">
<p class="text-sm font-medium leading-relaxed opacity-90" :class="card.textClass">{{ card.desc }}</p>
<div class="flex justify-end">
<div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
:class="[i === 0 ? 'w-12 h-12' : '']">
<q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
</div>
</div>
</div>
<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 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" />
<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="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>
<div class="mb-12 slide-up">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
เลือกเรียนตามเรื่องที่คุณสนใจ
</h2>
</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-bold text-slate-900 leading-[1.2] md:leading-[1.2] 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">
เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
<!-- 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>
<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>
<!-- 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>
<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>
</div>
</div>
@ -302,6 +224,7 @@ onMounted(() => {
<!-- 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">