Tạo landing page hoàn chỉnh cho khóa học "Claude Code - Xây dựng ứng dụng hoàn chỉnh"
## Yêu cầu kỹ thuật
- Next.js + TypeScript + Tailwind CSS + Lucide React
- Cài thêm: npm install lucide-react framer-motion
- Thiết kế: dark theme hiện đại, màu nền tối #090A14, card #13141F, màu cam chính #DF6B33
- Responsive: 1 cột trên điện thoại, nhiều cột trên máy tính
- Hình ảnh: dùng Unsplash với URL dạng https://images.unsplash.com/photo-[ID]?w=800&q=80
Thêm `images.unsplash.com` vào `next.config.ts` (remotePatterns) để Next.js cho phép load ảnh ngoài
## Yêu cầu Animation (quan trọng)
Dùng **Framer Motion** cho tất cả animations:
- Scroll-triggered: dùng `whileInView` + `viewport={{ once: true, amount: 0.15 }}`
- Stagger children: dùng `variants` với `staggerChildren: 0.1` để card xuất hiện lần lượt
- Navbar: `initial={{ y: -80, opacity: 0 }}` → `animate={{ y: 0, opacity: 1 }}` khi load
- Hero text: `fadeInLeft` — `initial={{ x: -40, opacity: 0 }}` → `animate={{ x: 0, opacity: 1 }}`
- Hero image: `fadeInRight` — `initial={{ x: 40, opacity: 0 }}` → `animate={{ x: 0, opacity: 1 }}`
- Section cards: `fadeInUp` — `initial={{ y: 30, opacity: 0 }}` → `whileInView={{ y: 0, opacity: 1 }}`
- Stats counter: dùng `useMotionValue` + `useSpring` đếm từ 0 đến số thực khi scroll vào
- Timeline items: `fadeInLeft` với delay tăng dần 0.15s mỗi item
- Hover card: `whileHover={{ y: -6, borderColor: '#DF6B33' }}` + transition 0.3s
- Hover button: `whileHover={{ scale: 1.04 }}` + `whileTap={{ scale: 0.97 }}`
- CTA button: `animate={{ scale: [1, 1.03, 1] }}` transition repeat lặp 3s để thu hút
- Accordion: dùng `AnimatePresence` + `motion.div` height animate cho mở/đóng mượt
Tạo từng component riêng trong thư mục `components/`, sau đó lắp ghép trong `app/page.tsx`.
---
Trang gồm 10 phần theo thứ tự:
## 1. Thanh điều hướng — `components/Navbar.tsx` (sticky, luôn hiển thị trên cùng)
- Logo "Claude Code" — chữ đậm màu cam
- Menu links: Khóa học | Lộ trình | Học viên | FAQ (smooth scroll đến section tương ứng)
- Nút "Đăng Ký Ngay" — `motion.button` với `whileHover={{ scale: 1.05 }}` + shadow cam
- Menu ẩn/hiện trên điện thoại (hamburger icon xoay 90° khi mở, dùng useState)
- Dùng `useScroll` của Framer Motion: khi scrollY > 50 → nền chuyển sang `rgba(9,10,20,0.95)` + `backdrop-filter: blur(12px)`
- Cả navbar: `motion.nav` với `initial={{ y: -80, opacity: 0 }}` → `animate={{ y: 0, opacity: 1 }}`
## 2. Hero — `components/HeroSection.tsx` (phần chào đầu tiên)
Bố cục: text bên trái (60%), hình minh họa bên phải (40%) — trên mobile xếp dọc
Bên trái — `motion.div initial={{ x: -40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ duration: 0.7 }}`:
- Badge nhỏ: "🔥 Khai giảng tháng 6/2026" — nền cam nhạt, border-radius pill
- Tiêu đề lớn: "Xây dựng ứng dụng với Claude Code"
Chữ "Claude Code" dùng gradient `#DF6B33 → #FBA26A` (background-clip: text)
- Mô tả: "Khóa học 8 buổi (16 tiết) trang bị kỹ năng thực chiến — từ cài đặt đến triển khai sản phẩm hoàn chỉnh lên Vercel"
- Nút "Đăng Ký Khóa Học": `motion.button whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}`
- Nút "Xem Demo": viền xám, hover viền trắng
- Giá: ~~5.000.000đ~~ 3.500.000đ | Badge "Giảm 30%" nền đỏ
Bên phải — `motion.div initial={{ x: 40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ duration: 0.7, delay: 0.2 }}`:
- Ảnh minh họa từ Unsplash — dùng Next.js `Image` component:
`src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80"`
(ảnh lập trình viên/coding, object-fit: cover, border-radius: 16px)
- Viền phát sáng cam: `boxShadow: '0 0 40px rgba(223,107,51,0.3)'`
- Overlay gradient nhẹ ở viền ảnh
Bên dưới (full width), 3 stats dùng counter animation:
- Tạo `CounterStat` component dùng `useMotionValue` + `useSpring` + `useInView`
- data: `[{ value: 16, label: 'tiết học' }, { value: 8, label: 'buổi thực chiến' }, { value: 100, suffix: '%', label: 'Deploy thực tế' }]`
- Khi section scroll vào view → số đếm từ 0 lên số thực trong 1.5 giây
## 3. Vấn đề — `components/ProblemSection.tsx`
- Tiêu đề: "Bạn đang gặp những vấn đề nào?"
- 4 thẻ dạng grid 2 cột (desktop), 1 cột (mobile)
- Dùng `motion.div` stagger: `variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.1 } } }}`
- Mỗi thẻ: icon Lucide + tiêu đề + mô tả ngắn, `whileHover={{ y: -6, borderColor: '#DF6B33' }}`:
- ⏱ Clock icon — Viết code mất quá nhiều thời gian
- 🧩 Puzzle icon — Khó ghi nhớ cú pháp và thư viện phức tạp
- 😰 AlertTriangle icon — Sợ làm hỏng code khi chỉnh sửa
- 🔄 RefreshCw icon — Muốn tự động hóa nhưng không biết bắt đầu từ đâu
## 4. Giải pháp — `components/SolutionSection.tsx`
- Tiêu đề: "Giải Pháp Toàn Diện Cho Bạn"
- 5 tính năng dạng grid (3 cột hàng đầu, 2 cột hàng sau căn giữa)
- Stagger `staggerChildren: 0.1`, mỗi item `initial={{ scale: 0.9, opacity: 0 }}` → `whileInView={{ scale: 1, opacity: 1 }}`
- Mỗi item: icon Lucide + tiêu đề + mô tả ngắn:
- BookOpen — Hướng dẫn từng bước chi tiết (8 buổi thực chiến)
- Monitor — 16 tiết học thực hành với bài tập thực tế
- Rocket — Học từ dự án thực tế (ProjectOS)
- Video — Video ghi lại toàn bộ buổi học
- Users — Cộng đồng học viên & Group Zalo hỗ trợ sau khóa
## 5. Đối tượng — `components/AudienceSection.tsx`
- Tiêu đề: "Khóa Học Dành Cho Ai?"
- 4 thẻ grid 2x2 (desktop), 1 cột (mobile)
- Stagger fadeInUp với `staggerChildren: 0.12`
- Mỗi thẻ: icon Lucide + tiêu đề + mô tả + ảnh avatar Unsplash (64x64, rounded-full):
- 🎓 Sinh viên năm 3-4 & mới ra trường — "Lương khởi điểm 10-15 triệu/tháng"
`https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=64&q=80`
- 💼 Người đi làm muốn nâng cấp — "Fresher, IT Support, Tester"
`https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&q=80`
- 🛠 Non-tech muốn tự xây sản phẩm — "PM, Designer, Entrepreneur"
`https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=64&q=80`
- ⚡ Developer muốn làm AI-native — "Đã có nền tảng, muốn bứt phá"
`https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=64&q=80`
## 6. Chương trình — `components/CourseContent.tsx`
- Tiêu đề: "Chương Trình 8 Buổi"
- Dạng timeline dọc: vòng tròn cam số buổi bên trái, tiêu đề + mô tả bên phải
- Đường kẻ dọc nối các buổi (`border-left: 2px dashed #DF6B33`)
- Mỗi item: `motion.div` với `initial={{ x: -30, opacity: 0 }}` → `whileInView={{ x: 0, opacity: 1 }}`, delay tăng dần 0.15s:
1. Làm quen Claude Code — Cài đặt, cấu hình & luồng làm việc cơ bản
2. Prompt Engineering thực chiến
3. Thiết kế kiến trúc ứng dụng cùng AI
4. Xây dựng Backend với Firebase
5. Xây dựng Frontend — UI, kết nối Firebase, xử lý nghiệp vụ
6. Debug & Refactor cùng AI
7. Tích hợp tính năng nâng cao
8. Deploy & Hoàn thiện sản phẩm trên Vercel
## 7. Minh chứng — `components/SocialProof.tsx`
- Tiêu đề: "Sản Phẩm Học Viên"
- Card lớn giữa trang — `motion.div initial={{ scale: 0.95, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }}`:
- Ảnh screenshot dự án: Next.js `Image` với `src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&q=80"`
(ảnh dashboard/app, height 280, object-fit cover, border-radius top)
- Tên dự án: ProjectOS — Enterprise Project Management
- Link: project-management.vercel.app
- Mô tả: "Hệ thống quản lý dự án doanh nghiệp, xây dựng hoàn toàn với Claude Code trong 8 buổi học"
- Nhãn công nghệ: Firebase | Next.js | Vercel | Tailwind
- Trích dẫn nổi bật — `motion.blockquote` fadeIn:
"Lập trình viên tương lai không phải người viết code nhanh nhất.
Họ là người biết hướng dẫn AI tốt nhất."
- 2 số liệu counter animation: "100%" hoàn thành project | "8 buổi" từ zero đến production
- 3 testimonial cards nhỏ bên dưới — stagger fadeInUp:
- Mỗi card: Next.js `Image` avatar (60x60 rounded-full) + tên + đánh giá sao + quote ngắn
- Avatar 1: `https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=60&q=80`
- Avatar 2: `https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=60&q=80`
- Avatar 3: `https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&q=80`
## 8. Đăng ký — `components/CtaSection.tsx`
- Tiêu đề: "Sẵn Sàng Bắt Đầu Chưa?"
- Background: gradient nhẹ `from-[#1A0E08] to-[#090A14]`
- Form giữa trang (max-width 480px) — `motion.div fadeInUp`:
- Họ và tên (bắt buộc)
- Email (bắt buộc, kiểm tra đúng định dạng)
- Số điện thoại (không bắt buộc)
- Nút "Đăng Ký Ngay" — `motion.button` với `animate={{ scale: [1, 1.03, 1] }}` loop mỗi 3s để thu hút
- Dùng useState để kiểm tra lỗi và hiện thông báo thành công
- Nút "Liên Hệ Hỗ Trợ" (viền, icon Phone)
- Hotline: 📞 0236.3.779.779
## 9. Câu hỏi thường gặp — `components/FaqSection.tsx`
- Tiêu đề: "Câu Hỏi Thường Gặp"
- Stagger fadeInUp cho toàn bộ accordion items
- Mỗi item: dùng `AnimatePresence` + `motion.div` để animate chiều cao khi mở/đóng mượt:
`initial={{ height: 0, opacity: 0 }}` → `animate={{ height: 'auto', opacity: 1 }}` transition 0.3s ease
- Icon ChevronDown: `motion.span` xoay 180° khi mở (`rotate: open ? 180 : 0`)
- Chỉ mở 1 câu mỗi lúc (tự đóng câu đang mở khi click câu khác)
1. Tôi là người mới bắt đầu, có học được không?
→ Hoàn toàn được! Buổi 1-2 trang bị nền tảng từ đầu. Chỉ cần biết dùng máy tính cơ bản.
2. Khóa này dành cho những ai?
→ Sinh viên IT, Fresher, PM/Designer/Entrepreneur muốn tự xây sản phẩm, Developer muốn làm AI-native.
3. Tôi mất bao lâu để hoàn thành?
→ 4 tuần, 8 buổi, mỗi buổi 2 tiết. Sau khóa có sản phẩm hoàn chỉnh deploy lên Vercel.
4. Có hỗ trợ sau khi học không?
→ Group Zalo hỗ trợ 3 tháng + video bài giảng truy cập vĩnh viễn.
5. Nếu không hài lòng thì sao?
→ Hoàn 100% học phí nếu không hài lòng sau buổi đầu tiên, báo trong 24h.
6. Tôi có truy cập vĩnh viễn không?
→ Có. Video + tài liệu + source code đều tải về được, không hết hạn.
## 10. Chân trang — `components/Footer.tsx`
- Nền tối hơn phần còn lại (`#050610`)
- 4 cột (desktop) / 1 cột (mobile):
- Cột 1 — Thương hiệu: "Claude Code" + mô tả "Khóa học AI-native development tại Softech Aptech Đà Nẵng"
- Cột 2 — Liên hệ: 📍 24 Lê Thánh Tôn, Đà Nẵng | 📞 0236.3.779.779 | ✉️ info@softech.vn
- Cột 3 — Mạng xã hội: Facebook, Zalo, LinkedIn, YouTube (Lucide icons)
`motion.a whileHover={{ scale: 1.2, color: '#DF6B33' }}` cho mỗi icon
- Cột 4 — Bản tin: "Nhận tips Claude Code miễn phí" + ô nhập email + nút Đăng ký
- Dòng copyright: "© 2026 Softech Aptech Đà Nẵng. All rights reserved."
