205 lines
9.4 KiB
TypeScript
205 lines
9.4 KiB
TypeScript
import { Link } from '@tanstack/react-router'
|
|
import { useUser } from '@/hooks/use-auth'
|
|
import { useAuthModalStore } from '@/store/auth-modal-store'
|
|
|
|
const FEATURES = [
|
|
{
|
|
to: '/toeic',
|
|
icon: 'assignment',
|
|
iconBg: 'bg-blue-50',
|
|
iconColor: 'text-blue-600',
|
|
borderColor: 'border-l-blue-600',
|
|
title: 'Luyện đề TOEIC',
|
|
desc: 'Kho đề thi cập nhật theo cấu trúc mới nhất. Phân tích điểm yếu chi tiết từng Part.',
|
|
cta: 'Bắt đầu ngay',
|
|
ctaColor: 'text-blue-600',
|
|
stat: '350+ câu hỏi',
|
|
},
|
|
{
|
|
to: '/writing',
|
|
icon: 'auto_fix_high',
|
|
iconBg: 'bg-green-50',
|
|
iconColor: 'text-green-600',
|
|
borderColor: 'border-l-green-600',
|
|
title: 'AI Chấm Writing',
|
|
desc: 'Phản hồi tức thì về ngữ pháp, từ vựng, cấu trúc và bài viết mẫu từ AI.',
|
|
cta: 'Thử ngay',
|
|
ctaColor: 'text-green-600',
|
|
stat: '3 lượt / ngày',
|
|
},
|
|
{
|
|
to: '/vocab',
|
|
icon: 'menu_book',
|
|
iconBg: 'bg-amber-50',
|
|
iconColor: 'text-amber-600',
|
|
borderColor: 'border-l-amber-600',
|
|
title: 'Từ vựng thông minh',
|
|
desc: '720 từ TOEIC theo 6 chủ đề. Flashcard với hiệu ứng lật 3D.',
|
|
cta: 'Khám phá',
|
|
ctaColor: 'text-amber-600',
|
|
stat: '720 từ vựng',
|
|
},
|
|
]
|
|
|
|
export function Home() {
|
|
const user = useUser()
|
|
const openModal = useAuthModalStore((s) => s.open)
|
|
|
|
return (
|
|
<div className="px-6 py-8 max-w-6xl mx-auto page-enter">
|
|
{/* Hero */}
|
|
<section className="flex flex-col lg:flex-row gap-10 items-center mb-12">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="inline-flex items-center gap-2 bg-blue-50 text-blue-600 text-xs font-bold px-3 py-1.5 rounded-full mb-5 uppercase tracking-wider">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 14 }}>auto_awesome</span>
|
|
AI-Powered Learning
|
|
</div>
|
|
<h1 className="text-4xl lg:text-5xl font-extrabold leading-tight text-slate-800 mb-4" style={{ letterSpacing: '-0.02em' }}>
|
|
Luyện TOEIC<br />thông minh<br />
|
|
<span className="text-blue-600 italic">cùng AI</span>
|
|
</h1>
|
|
<p className="text-slate-500 text-lg leading-relaxed mb-8 max-w-md">
|
|
Cá nhân hóa lộ trình học tập để bứt phá điểm số trong thời gian ngắn nhất. AI phân tích điểm yếu và tối ưu bài tập cho bạn.
|
|
</p>
|
|
<div className="flex gap-3 flex-wrap">
|
|
<Link
|
|
to="/toeic"
|
|
className="bg-blue-600 text-white px-8 py-3.5 rounded-xl font-bold text-sm hover:bg-blue-700 transition-colors shadow-lg shadow-blue-600/20"
|
|
>
|
|
Bắt đầu ngay
|
|
</Link>
|
|
<Link
|
|
to="/writing"
|
|
className="border border-slate-200 px-8 py-3.5 rounded-xl font-bold text-sm text-slate-500 hover:bg-white hover:border-blue-600 hover:text-blue-600 transition-all"
|
|
>
|
|
Thử AI Writing
|
|
</Link>
|
|
</div>
|
|
<div className="flex gap-6 mt-8">
|
|
<div>
|
|
<div className="text-2xl font-extrabold text-blue-600">350+</div>
|
|
<div className="text-xs text-slate-400 mt-0.5">Câu hỏi TOEIC</div>
|
|
</div>
|
|
<div className="w-px bg-slate-200" />
|
|
<div>
|
|
<div className="text-2xl font-extrabold text-green-600">720</div>
|
|
<div className="text-xs text-slate-400 mt-0.5">Từ vựng</div>
|
|
</div>
|
|
<div className="w-px bg-slate-200" />
|
|
<div>
|
|
<div className="text-2xl font-extrabold text-amber-600">AI</div>
|
|
<div className="text-xs text-slate-400 mt-0.5">Writing Checker</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview card — hidden on mobile */}
|
|
<div className="hidden lg:block flex-shrink-0 w-80">
|
|
<div className="bg-white rounded-2xl p-6 shadow-xl border border-slate-100">
|
|
<div className="flex items-center justify-between mb-5">
|
|
<div>
|
|
<div className="font-bold text-base text-slate-800">Tiến độ tuần này</div>
|
|
<div className="text-xs text-slate-400 mt-0.5">Bạn đang làm rất tốt!</div>
|
|
</div>
|
|
<div className="bg-green-50 text-green-600 text-xs font-bold px-2.5 py-1 rounded-lg">+12%</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<div className="flex justify-between text-xs font-semibold mb-1.5">
|
|
<span>Reading Score</span><span className="text-blue-600">420/495</span>
|
|
</div>
|
|
<div className="h-1.5 w-full rounded-full bg-slate-100">
|
|
<div className="h-full bg-blue-600 rounded-full" style={{ width: '85%' }} />
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<div className="flex justify-between text-xs font-semibold mb-1.5">
|
|
<span>Listening Score</span><span className="text-green-600">380/495</span>
|
|
</div>
|
|
<div className="h-1.5 w-full rounded-full bg-slate-100">
|
|
<div className="h-full bg-green-600 rounded-full" style={{ width: '77%' }} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 mt-4">
|
|
<div className="bg-blue-50 rounded-xl p-3 border-l-4 border-blue-600">
|
|
<span className="material-symbols-outlined text-blue-600" style={{ fontSize: 18 }}>local_fire_department</span>
|
|
<div className="text-xl font-extrabold text-blue-600 mt-1">14</div>
|
|
<div className="text-xs text-slate-400">Ngày Streak</div>
|
|
</div>
|
|
<div className="bg-green-50 rounded-xl p-3 border-l-4 border-green-600">
|
|
<span className="material-symbols-outlined text-green-600" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>star</span>
|
|
<div className="text-xl font-extrabold text-green-600 mt-1">1,250</div>
|
|
<div className="text-xs text-slate-400">Điểm tích lũy</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 pt-4 border-t border-slate-100 flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
|
<span className="material-symbols-outlined text-slate-400" style={{ fontSize: 16 }}>psychology</span>
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
<span className="font-semibold">AI gợi ý:</span> Ôn thêm Part 5 — Ngữ pháp
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature cards */}
|
|
<section>
|
|
<h2 className="text-2xl font-extrabold text-slate-800 mb-1.5">Tính năng nổi bật</h2>
|
|
<p className="text-slate-500 mb-6">Hệ sinh thái học tập toàn diện được thiết kế để tối ưu hoá điểm số.</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{FEATURES.map((f) => (
|
|
<Link
|
|
key={f.to}
|
|
to={f.to}
|
|
className={`bg-white rounded-2xl p-6 border border-slate-200 border-l-4 ${f.borderColor} hover:-translate-y-1 hover:shadow-md transition-all duration-200`}
|
|
>
|
|
<div className={`w-12 h-12 ${f.iconBg} rounded-xl flex items-center justify-center mb-4`}>
|
|
<span className={`material-symbols-outlined ${f.iconColor}`}>{f.icon}</span>
|
|
</div>
|
|
<h3 className="font-bold text-base text-slate-800 mb-2">{f.title}</h3>
|
|
<p className="text-slate-500 text-sm leading-relaxed mb-4">{f.desc}</p>
|
|
<div className={`flex items-center gap-1.5 text-sm font-bold ${f.ctaColor}`}>
|
|
{f.cta}
|
|
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>arrow_forward</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA banner */}
|
|
<section className="mt-10">
|
|
<div className="bg-blue-600 rounded-2xl p-8 flex items-center justify-between overflow-hidden relative">
|
|
<div className="absolute right-4 top-0 bottom-0 flex items-center opacity-10">
|
|
<span className="material-symbols-outlined text-white" style={{ fontSize: 120 }}>emoji_events</span>
|
|
</div>
|
|
<div className="relative z-10">
|
|
<h3 className="text-2xl font-extrabold text-white mb-2">Sẵn sàng chinh phục 990 TOEIC?</h3>
|
|
<p className="text-blue-100 mb-5">
|
|
{user
|
|
? `Chào ${user.name}! Tiếp tục luyện thi hôm nay.`
|
|
: 'Đăng ký miễn phí để lưu tiến độ và luyện thi không giới hạn.'}
|
|
</p>
|
|
{user ? (
|
|
<Link
|
|
to="/toeic"
|
|
className="inline-block bg-white text-blue-600 px-6 py-3 rounded-xl font-bold text-sm hover:bg-blue-50 transition-colors"
|
|
>
|
|
Luyện thi ngay
|
|
</Link>
|
|
) : (
|
|
<button
|
|
onClick={() => openModal('register')}
|
|
className="bg-white text-blue-600 px-6 py-3 rounded-xl font-bold text-sm hover:bg-blue-50 transition-colors"
|
|
>
|
|
Đăng ký miễn phí
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|