feat: add initial frontend pages for course browsing, recommendations, and user dashboard.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 38s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s

This commit is contained in:
supalerk-ar66 2026-02-23 17:44:02 +07:00
parent 0588ad7acd
commit 01d249c19a
14 changed files with 570 additions and 267 deletions

View file

@ -1,7 +1,7 @@
<script setup lang="ts">
/**
* @file LandingFooter.vue
* @description Footer component for the landing page
* @description Footer component for the landing page - Adjusted to Image 2 (E-Learning Platform Branding)
*/
</script>
@ -23,17 +23,6 @@
<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 -->
@ -58,40 +47,51 @@
</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" />
<!-- Contact (Bronco Hourse Data) -->
<div class="space-y-6">
<h4 class="font-bold text-slate-900 text-base">ดตอเรา</h4>
<div class="flex flex-col gap-5">
<!-- Location -->
<div class="flex flex-row items-start gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<q-icon name="location_on" size="20px" />
</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">
<div class="flex flex-col gap-1 min-w-0">
<span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
<p class="text-slate-500 text-[11px] leading-relaxed">
74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
</p>
</div>
</div>
<!-- Phone -->
<div class="flex flex-row items-center gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<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">
<a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
052-076-025
</a>
</div>
<!-- Email -->
<div class="flex flex-row items-center gap-4 flex-nowrap">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
<q-icon name="email" size="18px" />
</div>
<span>support@elearning.com</span>
</li>
</ul>
<a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
info@chamomind.com
</a>
</div>
</div>
</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.
<!-- Bottom Bar (Centered Copyright) -->
<div class="pt-8 border-t border-slate-200 text-center">
<p class="text-sm text-slate-400 font-medium tracking-wide">
Copyright © CHAMOMIND CO., LTD. 2023
</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>