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

feat: Add LandingHeader component with scroll-based styling, navigation links, and authentication-dependent action buttons.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 36s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 2s
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-10 15:13:30 +07:00
parent d2e78dcfbb
commit c1f1cf5e57
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -86,8 +86,8 @@ onMounted(() => {
<template v-if="!isAuthenticated"> <template v-if="!isAuthenticated">
<NuxtLink <NuxtLink
to="/auth/login" to="/auth/login"
class="text-sm font-bold px-4 py-2 transition-colors" class="btn-secondary-premium shadow-sm"
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']" :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']"
> >
{{ $t('auth.login') }} {{ $t('auth.login') }}
</NuxtLink> </NuxtLink>
@ -145,6 +145,23 @@ onMounted(() => {
box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5); 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) { @media (max-width: 768px) {
.container { .container {
padding: 0 16px; padding: 0 16px;