feat: Implement initial landing pages, authentication flows, and course browsing functionality with i18n.

This commit is contained in:
supalerk-ar66 2026-02-02 11:11:25 +07:00
parent 7de5457170
commit b60a3853cd
12 changed files with 822 additions and 606 deletions

View file

@ -37,7 +37,7 @@ onMounted(() => {
E
</div>
<div class="flex flex-col">
<span class="font-black text-lg leading-none tracking-tight text-white group-hover:text-blue-400 transition-colors">E-Learning</span>
<span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">E-Learning</span>
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] leading-none mt-1">Platform</span>
</div>
</NuxtLink>
@ -46,13 +46,13 @@ onMounted(() => {
<nav class="hidden md:block">
<ul class="flex items-center gap-8 text-sm font-bold">
<li>
<NuxtLink to="/browse" class="text-slate-400 hover:text-white transition-colors relative group">
<NuxtLink to="/browse" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white transition-colors relative group">
{{ $t('landing.allCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
</li>
<li>
<NuxtLink to="/browse/discovery" class="text-slate-400 hover:text-white transition-colors relative group">
<NuxtLink to="/browse/discovery" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white transition-colors relative group">
{{ $t('landing.discovery') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink>
@ -66,7 +66,7 @@ onMounted(() => {
-->
<div class="flex items-center gap-4">
<template v-if="!isAuthenticated">
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-300 hover:text-white px-4 py-2 transition-colors">{{ $t('auth.login') }}</NuxtLink>
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white px-6 py-2.5 rounded-xl border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5 transition-all">{{ $t('auth.login') }}</NuxtLink>
<NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
{{ $t('auth.getStarted') }}
</NuxtLink>
@ -91,8 +91,13 @@ onMounted(() => {
/* Glassmorphism Effect for Scrolled Header */
.glass-nav {
background: rgba(15, 23, 42, 0.8);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
:global(.dark) .glass-nav {
background: rgba(15, 23, 42, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}