feat: Implement initial landing pages, authentication flows, and course browsing functionality with i18n.
This commit is contained in:
supalerk-ar66
parent
7de5457170
commit
b60a3853cd
12 changed files with 822 additions and 606 deletions
|
|
@ -15,7 +15,7 @@ useHead({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
<div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
|
||||
<!-- Premium Background -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<!-- Animated Glows -->
|
||||
|
|
@ -26,129 +26,137 @@ useHead({
|
|||
<!-- 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">
|
||||
<div class="grid-hero items-center">
|
||||
<!-- Hero Card Container -->
|
||||
<div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 dark:border-white/10 relative overflow-hidden">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="hero-content">
|
||||
<div class="mb-10 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)]">
|
||||
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
|
||||
</span>
|
||||
</div>
|
||||
<!-- 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">
|
||||
|
||||
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
|
||||
ยกระดับทักษะ <br>
|
||||
<span class="text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
|
||||
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
|
||||
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
|
||||
</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>
|
||||
<!-- Left Content -->
|
||||
<div class="hero-content">
|
||||
<div class="mb-10 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 dark:bg-slate-900">
|
||||
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
|
||||
ยกระดับทักษะ <br>
|
||||
<span class="text-slate-900 dark:text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle text-slate-600 dark:text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
|
||||
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
|
||||
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</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-[0_50px_100px_rgba(0,0,0,0.6)] border border-white/10">
|
||||
<!-- Browser-like header -->
|
||||
<div class="preview-header border-b border-white/5 py-4 bg-white/5 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"/>
|
||||
|
||||
<!-- 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 dark:shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-slate-200 dark:border-white/10">
|
||||
<!-- Browser-like header -->
|
||||
<div class="preview-header border-b border-slate-200 dark:border-white/5 py-4 bg-slate-100 dark:bg-white/5 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 dark:bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
|
||||
</div>
|
||||
<div class="mx-auto bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">platform-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-white/[0.03] rounded-2xl border border-white/5">
|
||||
<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-white/[0.03] rounded-2xl border border-white/5">
|
||||
<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>
|
||||
|
||||
<!-- 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 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
|
||||
<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 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
|
||||
<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.3)] animate-float">
|
||||
<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)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-emerald-500/20 rounded-xl flex items-center justify-center text-emerald-400">
|
||||
<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-white font-black text-sm">รับใบประกาศนียบัตร</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
|
||||
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.3)] animate-float" style="animation-delay: -3s;">
|
||||
<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)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-400">
|
||||
<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-white font-black text-sm">เรียนได้ทุกที่</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
|
||||
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
|
||||
<section class="info-section py-40 bg-slate-900 relative transition-colors">
|
||||
<section class="info-section py-40 bg-slate-50 dark:bg-slate-900 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"/>
|
||||
|
||||
<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-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
|
||||
<h2 class="section-title text-5xl font-black mb-8 text-slate-900 dark:text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
|
||||
<p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
|
||||
เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
|
||||
</p>
|
||||
|
|
@ -162,7 +170,7 @@ useHead({
|
|||
<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>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">สื่อการเรียนระดับสูง</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">สื่อการเรียนระดับสูง</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -173,7 +181,7 @@ useHead({
|
|||
<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>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">วัดผลแบบอัจฉริยะ</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">วัดผลแบบอัจฉริยะ</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -184,7 +192,7 @@ useHead({
|
|||
<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>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">ระบบติดตามผล</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">ระบบติดตามผล</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,6 +211,9 @@ useHead({
|
|||
.hero-title {
|
||||
font-size: clamp(3.5rem, 7vw, 5.5rem);
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
:global(.dark) .hero-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -214,14 +225,28 @@ useHead({
|
|||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-premium {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.glass-tag-premium {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-tag-premium {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -238,6 +263,7 @@ useHead({
|
|||
}
|
||||
|
||||
.btn-cta-premium:hover {
|
||||
@apply bg-blue-600;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.5);
|
||||
}
|
||||
|
|
@ -246,14 +272,28 @@ useHead({
|
|||
padding: 1.5rem 3.5rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
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;
|
||||
}
|
||||
|
||||
:global(.dark) .btn-outline-glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
:global(.dark) .btn-outline-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue