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

feat: Initialize project with core Nuxt configuration, Quasar layouts, global Tailwind CSS, and essential components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 13:12:14 +07:00
parent 1b9119e606
commit 76b64a30ae
10 changed files with 311 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -121,7 +121,7 @@ onMounted(() => {
<q-icon name="stars" size="28px" />
<span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
</div>
<h1 class="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 leading-[1.15] mb-8">
<h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
</h1>
<p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
@ -176,7 +176,7 @@ onMounted(() => {
<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 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
</h2>
<p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
@ -184,27 +184,31 @@ onMounted(() => {
</p>
</div>
<!-- Horizontal Scrollable Container -->
<!-- Grid Container (Bento Layout) -->
<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 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="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"
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)"
>
<!-- 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-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>
<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-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="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-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 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>
@ -262,7 +266,7 @@ onMounted(() => {
<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">
<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>
@ -303,8 +307,8 @@ onMounted(() => {
<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>
<h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
<p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
</div>
<NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
@ -435,7 +439,7 @@ onMounted(() => {
/* Typography Overrides */
h1, h2, h3 {
letter-spacing: -0.02em;
letter-spacing: normal;
}
/* Hover effects */