From 743d3b8c2fdc2178b29ba105268de139351486cb Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Thu, 19 Feb 2026 13:49:44 +0700
Subject: [PATCH] feat: introduce `LandingHeader` component with
 scroll-adaptive styling and mobile navigation, and a new `LandingFooter`
 component.

---
 .../components/layout/LandingFooter.vue       | 86 ++++++++++---------
 .../components/layout/LandingHeader.vue       | 18 ++--
 2 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/Frontend-Learner/components/layout/LandingFooter.vue b/Frontend-Learner/components/layout/LandingFooter.vue
index ac3ed521..ddcefb4f 100644
--- a/Frontend-Learner/components/layout/LandingFooter.vue
+++ b/Frontend-Learner/components/layout/LandingFooter.vue
@@ -8,70 +8,76 @@
 <template>
   <footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
     <div class="container mx-auto px-6 md:px-12">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12 text-center md:text-left">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
         <!-- Brand -->
-        <div>
-          <div class="flex items-center justify-center md:justify-start gap-3 mb-6">
-            <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30">
+        <div class="space-y-6">
+          <div class="flex items-center gap-3">
+            <div class="w-12 h-12 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 shrink-0">
               E
             </div>
-            <div class="flex flex-col text-left">
+            <div class="flex flex-col">
               <span class="font-black text-lg leading-none tracking-tight text-slate-900">E-Learning</span>
               <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
             </div>
           </div>
-          <p class="text-slate-500 text-sm leading-relaxed mb-6">
+          <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
             แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
           </p>
-          <div class="flex gap-4 justify-center md:justify-start">
-            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all">
-              <q-icon name="facebook" size="20px" />
+          <div class="flex gap-3">
+            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all">
+              <q-icon name="facebook" size="18px" />
             </a>
-            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-400 hover:text-white hover:border-blue-400 transition-all">
-              <q-icon name="flutter_dash" size="20px" /> <!-- Twitter equivalent -->
+            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-sky-400 hover:text-white hover:border-sky-400 transition-all">
+              <q-icon name="flutter_dash" size="18px" />
             </a>
-            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-pink-600 hover:text-white hover:border-pink-600 transition-all">
-              <q-icon name="camera_alt" size="20px" /> <!-- Instagram equivalent -->
+            <a href="#" class="w-9 h-9 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-pink-600 hover:text-white hover:border-pink-600 transition-all">
+              <q-icon name="camera_alt" size="18px" />
             </a>
           </div>
         </div>
 
         <!-- Links -->
-        <div>
-          <h4 class="font-bold text-slate-900 mb-6">คอร์สเรียน</h4>
-          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
-            <li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors">คอร์สทั้งหมด</NuxtLink></li>
-            <li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors">คอร์สแนะนำ</NuxtLink></li>
-            <li><a href="#" class="hover:text-blue-600 transition-colors">โปรโมชั่น</a></li>
-            <li><a href="#" class="hover:text-blue-600 transition-colors">สำหรับองค์กร</a></li>
+        <div class="lg:pl-8">
+          <h4 class="font-bold text-slate-900 mb-6 text-base">คอร์สเรียน</h4>
+          <ul class="space-y-3 text-sm text-slate-500">
+            <li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
+            <li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors inline-block">คอร์สแนะนำ</NuxtLink></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
           </ul>
         </div>
 
         <!-- Support -->
         <div>
-          <h4 class="font-bold text-slate-900 mb-6">ช่วยเหลือ</h4>
-          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
-            <li><a href="#" class="hover:text-blue-600 transition-colors">คำถามที่พบบ่อย (FAQ)</a></li>
-            <li><a href="#" class="hover:text-blue-600 transition-colors">วิธีการใช้งาน</a></li>
-            <li><a href="#" class="hover:text-blue-600 transition-colors">เงื่อนไขการใช้งาน</a></li>
-            <li><a href="#" class="hover:text-blue-600 transition-colors">นโยบายความเป็นส่วนตัว</a></li>
+          <h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
+          <ul class="space-y-3 text-sm text-slate-500">
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">คำถามที่พบบ่อย (FAQ)</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">วิธีการใช้งาน</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">เงื่อนไขการใช้งาน</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">นโยบายความเป็นส่วนตัว</a></li>
           </ul>
         </div>
 
         <!-- Contact -->
         <div>
-          <h4 class="font-bold text-slate-900 mb-6">ติดต่อเรา</h4>
-          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
-            <li class="flex items-start justify-center md:justify-start gap-3">
-              <q-icon name="location_on" size="20px" class="flex-shrink-0 mt-0.5 text-blue-600" />
-              <span>123 อาคารสยามทาวเวอร์ ชั้น 15 ถนนพระราม 1 เขตปทุมวัน กรุงเทพฯ 10330</span>
+          <h4 class="font-bold text-slate-900 mb-6 text-base">ติดต่อเรา</h4>
+          <ul class="space-y-4 text-sm text-slate-500">
+            <li class="flex items-start gap-3">
+              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 mt-[-2px]">
+                 <q-icon name="location_on" size="18px" />
+              </div>
+              <span class="leading-relaxed">123 อาคารสยามทาวเวอร์ ชั้น 15 เขตปทุมวัน กรุงเทพฯ 10330</span>
             </li>
-            <li class="flex items-center justify-center md:justify-start gap-3">
-              <q-icon name="phone" size="20px" class="flex-shrink-0 text-blue-600" />
+            <li class="flex items-center gap-3">
+              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600">
+                 <q-icon name="phone" size="18px" />
+              </div>
               <span>02-123-4567</span>
             </li>
-            <li class="flex items-center justify-center md:justify-start gap-3">
-              <q-icon name="email" size="20px" class="flex-shrink-0 text-blue-600" />
+            <li class="flex items-center gap-3">
+              <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0 text-blue-600">
+                 <q-icon name="email" size="18px" />
+              </div>
               <span>support@elearning.com</span>
             </li>
           </ul>
@@ -79,10 +85,12 @@
       </div>
 
       <div class="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
-        <p class="text-sm text-slate-400">© 2024 E-Learning Platform. All rights reserved.</p>
-        <div class="flex gap-6 text-sm text-slate-400">
-          <a href="#" class="hover:text-slate-600">Privacy Policy</a>
-          <a href="#" class="hover:text-slate-600">Terms of Service</a>
+        <p class="text-sm text-slate-500 text-center md:text-left">
+          © {{ new Date().getFullYear() }} E-Learning Platform. All rights reserved.
+        </p>
+        <div class="flex gap-6 text-sm font-medium text-slate-500">
+          <a href="#" class="hover:text-blue-600 transition-colors">Privacy Policy</a>
+          <a href="#" class="hover:text-blue-600 transition-colors">Terms of Service</a>
         </div>
       </div>
     </div>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index e76c1223..cb4efe7d 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -119,22 +119,27 @@ onUnmounted(() => {
 
       <!-- Mobile Menu Button (Visible on Mobile) -->
       <button 
-        class="md:hidden mobile-toggle relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
-        :class="[isScrolled || mobileMenuOpen ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100']"
+        class="md:hidden mobile-toggle ml-auto relative z-[120] w-10 h-10 flex items-center justify-center rounded-full transition-colors"
+        :class="[isScrolled ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100', mobileMenuOpen ? 'text-slate-900 z-[120]' : '']"
         @click="mobileMenuOpen = !mobileMenuOpen"
       >
         <q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
       </button>
 
-      <!-- Mobile Navigation Drawer -->
+    </div>
+  </header>
+
+  <!-- Mobile Navigation Drawer (Teleported to body to avoid z-index/clipping issues with Header) -->
+  <Teleport to="body">
+    <div v-if="mobileMenuOpen">
       <div 
-        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 transition-opacity duration-300 md:hidden"
+        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[2000] transition-opacity duration-300 md:hidden"
         :class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
         @click="mobileMenuOpen = false"
       />
       
       <div 
-        class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out md:hidden flex flex-col"
+        class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-[2001] transform transition-transform duration-300 ease-out md:hidden flex flex-col"
         :class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
       >
         <div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
@@ -205,9 +210,8 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-
     </div>
-  </header>
+  </Teleport>
 </template>
 
 <style scoped>