From c1f1cf5e573c9330fbc8d437e6542e0db5afeeba Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Tue, 10 Feb 2026 15:13:30 +0700
Subject: [PATCH] feat: Add `LandingHeader` component with scroll-based
 styling, navigation links, and authentication-dependent action buttons.

---
 .../components/layout/LandingHeader.vue       | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index 60a0d275..abb1f85d 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -86,8 +86,8 @@ onMounted(() => {
         <template v-if="!isAuthenticated">
           <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']"
+            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>
@@ -145,6 +145,23 @@ onMounted(() => {
   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;