feat: Implement initial e-learning platform frontend including landing page, course discovery, dashboard, and foundational UI components with i18n.
This commit is contained in:
supalerk-ar66
parent
5b9cf72046
commit
3a9da1007b
17 changed files with 1631 additions and 1524 deletions
|
|
@ -6,30 +6,34 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
|
||||
<footer class="bg-white 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>
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<q-icon name="o_school" size="24px" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-lg leading-none tracking-tight transition-colors text-slate-900">
|
||||
EduLearn
|
||||
</span>
|
||||
<span class="text-[10px] text-slate-500 font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors">
|
||||
Platform
|
||||
</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<p class="text-slate-500 text-sm leading-relaxed max-w-xs">
|
||||
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
|
||||
</p>
|
||||
</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>
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
<li class=""><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>
|
||||
|
|
@ -39,7 +43,7 @@
|
|||
<!-- Support -->
|
||||
<div>
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500">
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
<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>
|
||||
|
|
@ -53,11 +57,9 @@
|
|||
<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>
|
||||
<q-icon name="o_location_on" size="20px" color="slate-800" />
|
||||
<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>
|
||||
<span class="font-semibold text-slate-800 text-sm leading-tight">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>
|
||||
|
|
@ -66,20 +68,16 @@
|
|||
|
||||
<!-- 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>
|
||||
<a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<q-icon name="o_phone" size="18px" color="slate-800" />
|
||||
<a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm 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>
|
||||
<a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<q-icon name="o_email" size="18px" color="slate-800" />
|
||||
<a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
info@chamomind.com
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue