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

<script setup lang="ts">
/**
 * @file LandingFooter.vue
 * @description Footer component for the landing page
 */
</script>

<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 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
        <!-- Brand -->
        <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">
              <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 max-w-xs">
            แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
          </p>
          <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-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-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 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 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 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 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 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>
        </div>
      </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-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>
  </footer>
</template>