Website Structure

Frontend-Learner/components/common/LandingHeader.vue

@@ -0,0 +1,131 @@
+<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()
+
+onMounted(() => {
+  // Add scroll listener to toggle 'isScrolled' class
+  window.addEventListener('scroll', () => {
+    isScrolled.value = window.scrollY > 20
+  })
+})
+</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-12">
+        <!-- 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 text-white 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>
+
+        <!-- Desktop Links -->
+        <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">
+                คอร์สทั้งหมด
+                <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">
+                ค้นพบ
+                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
+              </NuxtLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <!-- 
+        Right Section: Action Buttons (Login/Register or Dashboard) 
+      -->
+      <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">เข้าสู่ระบบ</NuxtLink>
+          <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+            เริ่มต้นใช้งาน
+          </NuxtLink>
+        </template>
+        <template v-else>
+          <NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+             เข้าสู่หน้าจัดการเรียน
+          </NuxtLink>
+        </template>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+/* Fixed header to stay on top */
+.landing-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+/* 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);
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+</style>