chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Initialize project with core Nuxt configuration, Quasar layouts, global Tailwind CSS, and essential components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 13:12:14 +07:00
parent 1b9119e606
commit 76b64a30ae
10 changed files with 311 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

90
Frontend-Learner/components/layout/LandingFooter.vue Normal file
View file

@ -0,0 +1,90 @@
<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 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12 text-center md: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">
E
</div>
<div class="flex flex-col text-left">
<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>
<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" />
</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>
<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>
</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>
</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>
</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>
</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" />
<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" />
<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-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>
</div>
</div>
</div>
</footer>
</template>