feat: Implement a public course browsing page with search functionality and detailed course cards.

This commit is contained in:
supalerk-ar66 2026-02-11 15:27:22 +07:00
parent d4f84667dc
commit dd5aacea3a
2 changed files with 20 additions and 12 deletions

View file

@ -75,13 +75,13 @@ 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-6 slide-up">
<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-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
<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>
<!-- Subtitle -->
@ -232,6 +232,10 @@ const filteredCourses = computed(() => {
-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 for Containers */

View file

@ -36,13 +36,13 @@ useHead({
<!-- Left Content -->
<div class="hero-content">
<div class="mb-10 slide-up">
<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.05] mb-8 slide-up" style="animation-delay: 0.1s;">
<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>
@ -220,6 +220,10 @@ useHead({
-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 {