Website Structure
This commit is contained in:
supalerk-ar66
parent
62812f2090
commit
71f0676a62
22365 changed files with 4265753 additions and 791 deletions
198
Frontend-Learner/components/common/LandingFooter.vue
Normal file
198
Frontend-Learner/components/common/LandingFooter.vue
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file LandingFooter.vue
|
||||
* @description The main footer for the public landing pages.
|
||||
* Contains site links, social media icons, and app download buttons.
|
||||
*/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="landing-footer">
|
||||
<div class="container">
|
||||
<!-- Main Footer Grid -->
|
||||
<div class="footer-grid">
|
||||
|
||||
<!-- Column 1: Brand & Social Media -->
|
||||
<div class="footer-brand">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="logo-box">E</div>
|
||||
<span class="font-bold text-xl" style="color: white;">E-Learning System</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mb-6">แพลตฟอร์มการเรียนออนไลน์สำหรับทักษแห่งอนาคต</p>
|
||||
<div class="flex gap-4 social-icons">
|
||||
<!-- Placeholder icons -->
|
||||
<a href="#" class="social-icon">f</a>
|
||||
<a href="#" class="social-icon">IG</a>
|
||||
<a href="#" class="social-icon">Y</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Services Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">บริการทั้งหมด</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">คอร์สเรียนออนไลน์</a></li>
|
||||
<li><a href="#">หลักสูตร Onsite</a></li>
|
||||
<li><a href="#">หลักสูตร Class</a></li>
|
||||
<li><a href="#">สำหรับองค์กร</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: About Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">เกี่ยวกับเรา</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">แพ็กเกจรายปี</a></li>
|
||||
<li><a href="#">เส้นทางการเรียน</a></li>
|
||||
<li><a href="#">วัดระดับทักษะ <span class="badge-beta">Beta</span></a></li>
|
||||
<li><a href="#">บทความ</a></li>
|
||||
<li><a href="#">คำถามที่พบบ่อย</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Join Us Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">ร่วมงานกับเรา</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">สมัครงาน</a></li>
|
||||
<li><a href="#">สมัครเป็น Affiliate</a></li>
|
||||
<li><a href="#">สมัครเป็นผู้สอน</a></li>
|
||||
<li><a href="#">เกี่ยวกับเรา</a></li>
|
||||
<li><a href="#">ติดต่อเรา</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 5: App Download & Contact -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">ดาวน์โหลดแอปพลิเคชัน</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button class="app-btn">
|
||||
<span>🍎</span> App Store
|
||||
</button>
|
||||
<button class="app-btn">
|
||||
<span>▶️</span> Google Play
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h4 class="font-bold mt-6 mb-4" style="color: white;">ปรึกษาการเรียน</h4>
|
||||
<button class="btn btn-success w-full">
|
||||
<span>💬</span> เพิ่มเพื่อน
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Bottom: Copyright & Legal -->
|
||||
<div class="footer-bottom">
|
||||
<p class="text-xs text-slate-400">© Copyright 2019-2026 LIKE ME X CO.,LTD All rights reserved.</p>
|
||||
<div class="flex gap-4 text-xs text-slate-400">
|
||||
<a href="#">ข้อตกลงการใช้บริการ</a>
|
||||
<span>|</span>
|
||||
<a href="#">นโยบายความเป็นส่วนตัว</a>
|
||||
<span>|</span>
|
||||
<a href="#">นโยบายการคืนเงิน</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Main Footer Structure */
|
||||
.landing-footer {
|
||||
background-color: #080b14; /* Deep Navy Background */
|
||||
padding: 60px 0 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
|
||||
margin-top: auto;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 5-Column Grid Layout */
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* First column is wider for branding */
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.badge-beta {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.app-btn {
|
||||
background: #000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Responsive Breakpoints */
|
||||
@media (max-width: 1024px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue