chamomind/elearning
7
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

8
Frontend-Learner/components/layout/AppHeader.vue
View file

@ -69,15 +69,7 @@ const searchText = ref('')
<!-- Right Actions -->
<div class="flex items-center gap-2 sm:gap-4 text-gray-500">
<!-- Search Icon -->
<q-btn flat round dense icon="search" class="hover:text-purple-600 transition-colors" />
<!-- Cart Icon -->
<q-btn flat round dense icon="shopping_cart" class="hover:text-purple-600 transition-colors" />
<!-- Notifications -->
<q-btn flat round dense icon="notifications_none" class="hover:text-purple-600 transition-colors">
<q-badge color="red" floating rounded dense v-if="false">2</q-badge>
</q-btn>
<!-- Language -->
<LanguageSwitcher />

90
Frontend-Learner/components/layout/LandingFooter.vue Normal file
View file

@ -0,0 +1,90 @@
<script setup lang="ts">
/**
* @file LandingFooter.vue
* @description Footer component for the landing page
*/
</script>
<template>
<footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
<div class="container mx-auto px-6 md:px-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12 text-center md:text-left">
<!-- Brand -->
<div>
<div class="flex items-center justify-center md:justify-start gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30">
E
</div>
<div class="flex flex-col text-left">
<span class="font-black text-lg leading-none tracking-tight text-slate-900">E-Learning</span>
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
</div>
</div>
<p class="text-slate-500 text-sm leading-relaxed mb-6">
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
</p>
<div class="flex gap-4 justify-center md:justify-start">
<a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all">
<q-icon name="facebook" size="20px" />
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-400 hover:text-white hover:border-blue-400 transition-all">
<q-icon name="flutter_dash" size="20px" /> <!-- Twitter equivalent -->
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-pink-600 hover:text-white hover:border-pink-600 transition-all">
<q-icon name="camera_alt" size="20px" /> <!-- Instagram equivalent -->
</a>
</div>
</div>
<!-- Links -->
<div>
<h4 class="font-bold text-slate-900 mb-6">คอร์สเรียน</h4>
<ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
<li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors">คอร์สทั้งหมด</NuxtLink></li>
<li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors">คอร์สแนะนำ</NuxtLink></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">โปรโมชั่น</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">สำหรับองค์กร</a></li>
</ul>
</div>
<!-- Support -->
<div>
<h4 class="font-bold text-slate-900 mb-6">ช่วยเหลือ</h4>
<ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
<li><a href="#" class="hover:text-blue-600 transition-colors">คำถามที่พบบ่อย (FAQ)</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">วิธีการใช้งาน</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">เงื่อนไขการใช้งาน</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">นโยบายความเป็นส่วนตัว</a></li>
</ul>
</div>
<!-- Contact -->
<div>
<h4 class="font-bold text-slate-900 mb-6">ติดต่อเรา</h4>
<ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
<li class="flex items-start justify-center md:justify-start gap-3">
<q-icon name="location_on" size="20px" class="flex-shrink-0 mt-0.5 text-blue-600" />
<span>123 อาคารสยามทาวเวอร์ ชั้น 15 ถนนพระราม 1 เขตปทุมวัน กรุงเทพฯ 10330</span>
</li>
<li class="flex items-center justify-center md:justify-start gap-3">
<q-icon name="phone" size="20px" class="flex-shrink-0 text-blue-600" />
<span>02-123-4567</span>
</li>
<li class="flex items-center justify-center md:justify-start gap-3">
<q-icon name="email" size="20px" class="flex-shrink-0 text-blue-600" />
<span>support@elearning.com</span>
</li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm text-slate-400">© 2024 E-Learning Platform. All rights reserved.</p>
<div class="flex gap-6 text-sm text-slate-400">
<a href="#" class="hover:text-slate-600">Privacy Policy</a>
<a href="#" class="hover:text-slate-600">Terms of Service</a>
</div>
</div>
</div>
</footer>
</template>

270
Frontend-Learner/components/layout/LandingHeader.vue
View file

@ -3,22 +3,35 @@
* @file LandingHeader.vue
* @description The main header for the public landing pages.
* Features a transparent background that becomes solid/glass upon scrolling.
* Responsive: Collapses into a drawer on mobile (md breakpoint).
*/
// Track scrolling state to adjust header styling
const isScrolled = ref(false)
const { isAuthenticated } = useAuth()
// Mobile Drawer State
const mobileMenuOpen = ref(false)
const handleScroll = () => {
isScrolled.value = window.scrollY > 20
}
// Lock body scroll when mobile menu is open
watch(mobileMenuOpen, (isOpen) => {
if (isOpen) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
})
onMounted(() => {
window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
document.body.style.overflow = '' // Cleanup
})
</script>
@ -28,139 +41,180 @@ onUnmounted(() => {
- Transitions between transparent and glass effect based on scroll.
-->
<header
class="landing-header transition-all duration-300"
class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
:class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
>
<div class="container h-full flex items-center justify-between">
<!-- Left Section: Logo & Desktop Navigation -->
<div class="flex items-center gap-8">
<!-- Logo -->
<NuxtLink to="/" class="flex items-center gap-3 group">
<div class="logo-box bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
E
</div>
<div class="flex flex-col">
<span
class="font-black text-lg leading-none tracking-tight transition-colors"
:class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
>
E-Learning
</span>
<span
class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
:class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
>
Platform
</span>
</div>
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
<!-- Left Section: Logo -->
<NuxtLink to="/" class="flex items-center gap-3 group">
<div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
E
</div>
<div class="flex flex-col">
<span
class="font-black text-lg leading-none tracking-tight transition-colors"
:class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
>
E-Learning
</span>
<span
class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
:class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
>
Platform
</span>
</div>
</NuxtLink>
<!-- Desktop Navigation (Hidden on Mobile) -->
<nav class="hidden md:flex items-center gap-8 text-sm font-bold">
<NuxtLink
to="/browse"
class="transition-colors relative group py-2"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('sidebar.onlineCourses') }}
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
<NuxtLink
to="/browse/recommended"
class="transition-colors relative group py-2"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('sidebar.recommendedCourses') }}
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</nav>
<!-- Desktop Links -->
<nav class="flex items-center gap-6 text-sm font-bold">
<NuxtLink
to="/browse"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('sidebar.onlineCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
<NuxtLink
to="/browse/recommended"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('sidebar.recommendedCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</nav>
</div>
<!-- Right Section: Action Buttons -->
<div class="flex items-center gap-4">
<!-- Desktop Action Buttons (Hidden on Mobile) -->
<div class="hidden md:flex items-center gap-4">
<template v-if="!isAuthenticated">
<!-- Login Button -->
<NuxtLink
to="/auth/login"
class="btn-secondary-premium shadow-sm"
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'bg-blue-50 border-blue-100 text-blue-600 hover:bg-blue-100 hover:border-blue-200']"
class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
>
{{ $t('auth.login') }}
</NuxtLink>
<NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
<!-- Register Button -->
<NuxtLink
to="/auth/register"
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
>
{{ $t('auth.getStarted') }}
</NuxtLink>
</template>
<template v-else>
<NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
<NuxtLink
to="/dashboard"
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
>
{{ $t('landing.goToDashboard') }}
</NuxtLink>
</template>
</div>
<!-- Mobile Menu Button (Visible on Mobile) -->
<button
class="md:hidden relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
:class="[isScrolled || mobileMenuOpen ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100']"
@click="mobileMenuOpen = !mobileMenuOpen"
>
<q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
</button>
<!-- Mobile Navigation Drawer -->
<div
class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 transition-opacity duration-300 md:hidden"
:class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
@click="mobileMenuOpen = false"
/>
<div
class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out md:hidden flex flex-col"
:class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
>
<div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
<!-- Close Button -->
<button
class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
@click="mobileMenuOpen = false"
>
<q-icon name="close" size="20px" />
</button>
<!-- Mobile Links -->
<nav class="flex flex-col gap-2 mt-8">
<NuxtLink
to="/"
class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
@click="mobileMenuOpen = false"
>
{{ $t('sidebar.overview') }}
<q-icon name="chevron_right" size="20px" class="text-slate-400" />
</NuxtLink>
<NuxtLink
to="/browse"
class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
@click="mobileMenuOpen = false"
>
{{ $t('sidebar.onlineCourses') }}
<q-icon name="chevron_right" size="20px" class="text-slate-400" />
</NuxtLink>
<NuxtLink
to="/browse/recommended"
class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
@click="mobileMenuOpen = false"
>
{{ $t('sidebar.recommendedCourses') }}
<q-icon name="chevron_right" size="20px" class="text-slate-400" />
</NuxtLink>
</nav>
<div class="mt-auto pb-8 border-t border-slate-100 pt-8">
<template v-if="!isAuthenticated">
<div class="flex flex-col gap-4">
<NuxtLink
to="/auth/login"
class="w-full py-3 rounded-xl font-bold text-center border-2 border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
@click="mobileMenuOpen = false"
>
{{ $t('auth.login') }}
</NuxtLink>
<NuxtLink
to="/auth/register"
class="w-full py-3 rounded-xl font-bold text-center text-white bg-blue-600 shadow-lg hover:bg-blue-700 transition-colors"
@click="mobileMenuOpen = false"
>
{{ $t('auth.getStarted') }}
</NuxtLink>
</div>
</template>
<template v-else>
<NuxtLink
to="/dashboard"
class="flex items-center justify-center w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/30"
@click="mobileMenuOpen = false"
>
{{ $t('landing.goToDashboard') }} <q-icon name="arrow_forward" class="ml-2" />
</NuxtLink>
</template>
</div>
</div>
</div>
</div>
</header>
</template>
<style scoped>
/* Header content */
.landing-header {
width: 100%;
z-index: 100;
transition: all 0.3s ease;
}
/* Glassmorphism Effect for Scrolled Header */
.glass-nav {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(12px);
background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
}
/* Premium Primary Button Styling */
.btn-primary-premium {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 800;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary-premium:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
}
/* Secondary Premium Button Styling */
.btn-secondary-premium {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 800;
border: 1.5px solid;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
}
.btn-secondary-premium:hover {
transform: translateY(-2px);
}
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
}
</style>