elearning/Frontend-Learner/components/layout/LandingHeader.vue

<script setup lang="ts">
/**
 * @file LandingHeader.vue
 * @description The main header for the public landing pages.
 * Features a transparent background that becomes solid/glass upon scrolling.
 */

// Track scrolling state to adjust header styling
const isScrolled = ref(false)
const { isAuthenticated } = useAuth()

const handleScroll = () => {
  isScrolled.value = window.scrollY > 20
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <!-- 
    Header Container 
    - Transitions between transparent and glass effect based on scroll.
  -->
  <header 
    class="landing-header 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>
        </NuxtLink>

        <!-- 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">
        <template v-if="!isAuthenticated">
          <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']"
          >
            {{ $t('auth.login') }}
          </NuxtLink>
          <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
            {{ $t('auth.getStarted') }}
          </NuxtLink>
        </template>
        <template v-else>
          <NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
             {{ $t('landing.goToDashboard') }}
          </NuxtLink>
        </template>
      </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);
  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>