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

feat: Implement core application UI with new headers, navigation, and initial pages.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 42s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 10:39:44 +07:00
parent 3fa236cff5
commit 1b9119e606
10 changed files with 345 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Frontend-Learner/pages/browse/index.vue
View file

@ -35,11 +35,7 @@ const selectedCategory = ref((route.query.category as string) || 'all')
const selectCategory = (slug: string) => {
if (slug === 'all') {
// Remove query param for 'all' or keep it? Protocol says /browse?category=all is fine.
// But usually clean URL is better. Let's keep it simple as requested: "Click programming => /browse?category=programming".
// "all" might just remove the param or be ?category=all. The prompt didn't specify 'all' behavior for URL, but fallback is fine.
// If I use 'all', the watcher sets 'all'.
router.push({ query: { category: 'all' } })
router.push({ query: { ...route.query, category: 'all' } })
} else {
router.push({ query: { ...route.query, category: slug } })
}
@ -55,7 +51,7 @@ const categoryLabels: Record<string, string> = {
all: "ทั้งหมด",
programming: "การเขียนโปรแกรม",
design: "การออกแบบ",
business: "เกี่ยวกับธุรกิจ"
business: "ธุรกิจ"
}
const getCategoryLabel = (category: any) => {
@ -68,8 +64,6 @@ const getCategoryLabel = (category: any) => {
// Fetch categories on mount
await useAsyncData('categories-list', () => fetchCategories())
// Fetch courses from API (reactive to selectedCategory)
// Fetch courses from API (reactive to selectedCategory)
// Fetch courses from API (reactive to selectedCategory)
const { data: coursesResponse, error, refresh } = await useAsyncData(
'browse-courses-list',
@ -307,15 +301,16 @@ const filteredCourses = computed(() => {
CTA SECTION
Call to action to register
========================================== -->
<section class="py-20 relative overflow-hidden">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
<section class="py-24 relative overflow-hidden">
<!-- Background Decoration -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-50/80 pointer-events-none -z-10"/>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-400/10 blur-[120px] rounded-full -z-10 pointer-events-none"/>
<div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-6 tracking-tight">
พร้อมจะเริ่มต้นแล้วหรือยัง?
</h2>
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
<p class="text-slate-500 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
</p>
<NuxtLink

11
Frontend-Learner/pages/browse/recommended.vue
View file

@ -270,15 +270,16 @@ const filteredCourses = computed(() => {
<!-- ==========================================
CTA SECTION
========================================== -->
<section class="py-20 relative overflow-hidden">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
<section class="py-24 relative overflow-hidden">
<!-- Background Decoration -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-50/80 pointer-events-none -z-10"/>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-400/10 blur-[120px] rounded-full -z-10 pointer-events-none"/>
<div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 mb-6 tracking-tight">
ปลดล็อกศักยภาพของคุณวันนี้
</h2>
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
<p class="text-slate-500 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
เริ่มเรียนรู้กับคอร์สที่เราแนะนำ และเติบโตไปพร้อมกับผู้เรียนนับหมื่นคน
</p>
<NuxtLink