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

feat: add LandingHeader component with dynamic scroll-triggered styling, navigation links, and authentication-based action buttons.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-06 11:56:05 +07:00
parent 108f1b73f2
commit 41089dd5ea
1 changed files with 29 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,8 +37,18 @@ onMounted(() => {
E E
</div> </div>
<div class="flex flex-col"> <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
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] leading-none mt-1">Platform</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>
</NuxtLink> </NuxtLink>
@ -46,13 +56,21 @@ onMounted(() => {
<nav class="hidden md:block"> <nav class="hidden md:block">
<ul class="flex items-center gap-8 text-sm font-bold"> <ul class="flex items-center gap-8 text-sm font-bold">
<li> <li>
<NuxtLink to="/browse" class="text-slate-400 hover:text-white transition-colors relative group"> <NuxtLink
to="/browse"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('landing.allCourses') }} {{ $t('landing.allCourses') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/> <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/browse/discovery" class="text-slate-400 hover:text-white transition-colors relative group"> <NuxtLink
to="/browse/discovery"
class="transition-colors relative group"
:class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('landing.discovery') }} {{ $t('landing.discovery') }}
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/> <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
</NuxtLink> </NuxtLink>
@ -66,7 +84,13 @@ onMounted(() => {
--> -->
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<template v-if="!isAuthenticated"> <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 px-4 py-2 transition-colors"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
>
{{ $t('auth.login') }}
</NuxtLink>
<NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20"> <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
{{ $t('auth.getStarted') }} {{ $t('auth.getStarted') }}
</NuxtLink> </NuxtLink>