Tạo file `index.html` cho landing page khóa học "Claude Code - Xây dựng ứng dụng hoàn chỉnh"
## Yêu cầu kỹ thuật
- HTML + Tailwind CSS (CDN) + Lucide Icons (CDN) + Google Fonts
- Animate.css (CDN): https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
- 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
## Yêu cầu Animation (quan trọng)
Dùng Animate.css kết hợp Intersection Observer API để:
- Khi phần tử cuộn vào màn hình → thêm class animate__animated + animation tương ứng
- Mỗi thẻ trong một grid → delay tăng dần (100ms, 200ms, 300ms) để tạo hiệu ứng stagger
- Navbar: fade-in từ trên xuống khi load trang
- Hero: tiêu đề animate__fadeInLeft, hình minh họa animate__fadeInRight
- Các section card: animate__fadeInUp khi scroll đến
- Số liệu stats: đếm từ 0 lên số thực (counter animation) khi scroll vào
- Nút CTA: animate__pulse lặp lại sau 3 giây đứng yên (attention seeker)
- Transition cho tất cả hover: duration 300ms, ease-in-out
- Xử lý scroll animation
---
Trang gồm 10 phần theo thứ tự:
## 1. Thanh điều hướng (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" nền cam, hover tối hơn + scale(1.05)
- Menu ẩn/hiện trên điện thoại (hamburger icon xoay 90° khi mở)
- Nền chuyển từ transparent → rgba(9,10,20,0.95) kèm backdrop-filter: blur(12px) khi cuộn xuống 50px
- Thêm class animate__fadeInDown khi trang load
## 2. Hero — 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 (data-animation="animate__fadeInLeft"):
- Badge nhỏ: "🔥 Khai giảng tháng 6/2026" — nền cam nhạt, chữ cam đậm, border-radius pill
- Tiêu đề lớn: "Xây dựng ứng dụng với Claude Code"
Chữ "Claude Code" dùng gradient màu #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" (nền cam, icon mũi tên, hover scale-105 + shadow cam)
- Nút "Xem Demo" (viền xám, icon play, hover viền trắng)
- Giá: ~~5.000.000đ~~ 3.500.000đ | Badge "Giảm 30%" nền đỏ
Bên phải (data-animation="animate__fadeInRight"):
- Ảnh minh họa từ Unsplash: https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80
(ảnh lập trình viên/coding, dùng object-fit: cover, border-radius: 16px)
- Viền phát sáng cam: box-shadow 0 0 40px rgba(223,107,51,0.3)
- Overlay gradient nhẹ ở viền ảnh
Bên dưới (full width), 3 số liệu nổi bật — dùng counter animation:
- data-target="16" → "16 tiết học"
- data-target="8" → "8 buổi thực chiến"
- data-target="100" → "100% Deploy thực tế"
## 3. Vấn đề — bạn đang gặp gì?
- 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)
- Mỗi thẻ: data-animation="animate__fadeInUp", animate__delay-Xms tăng dần
- Mỗi thẻ có icon + tiêu đề + mô tả ngắn:
- ⏱ Viết code mất quá nhiều thời gian
- 🧩 Khó ghi nhớ cú pháp và thư viện phức tạp
- 😰 Sợ làm hỏng code khi chỉnh sửa
- 🔄 Muốn tự động hóa nhưng không biết bắt đầu từ đâu
- Hover: viền thẻ chuyển sang #DF6B33 (transition 300ms) + translateY(-4px)
## 4. Giải pháp — khóa học như câu trả lời
- 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)
- Mỗi item: data-animation="animate__zoomIn", delay tăng dần 100ms
- Mỗi item: icon + tiêu đề + mô tả ngắn:
- 📖 Hướng dẫn từng bước chi tiết (8 buổi thực chiến)
- 💻 16 tiết học thực hành với bài tập thực tế
- 🚀 Học từ dự án thực tế (ProjectOS)
- 🎬 Video ghi lại toàn bộ buổi học
- 👥 Cộng đồng học viên & Group Zalo hỗ trợ sau khóa
## 5. Đối tượng — khóa học dành cho ai
- Tiêu đề: "Khóa Học Dành Cho Ai?"
- 4 thẻ grid 2x2 (desktop), 1 cột (mobile)
- Mỗi thẻ: animation="fadeInUp", delay tăng dần
- Mỗi thẻ có icon + tiêu đề + mô tả + ảnh Unsplash nhỏ 64x64 (rounded-full, object-cover):
- 🎓 Sinh viên năm 3-4 & mới ra trường — "Lương khởi điểm 10-15 triệu/tháng"
- 💼 Người đi làm muốn nâng cấp — "Fresher, IT Support, Tester"
- 🛠 Non-tech muốn tự xây sản phẩm — "PM, Designer, Entrepreneur"
- ⚡ Developer muốn làm AI-native — "Đã có nền tảng, muốn bứt phá"
## 6. Chương trình — 8 buổi học
- 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: animation="fadeInLeft", delay tăng dần 150ms
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 — sản phẩm học viên
- Tiêu đề: "Sản Phẩm Học Viên"
- Card lớn giữa trang (animation="zoomIn"):
- Ảnh screenshot dự án từ Unsplash: https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&q=80
(ảnh dashboard/app, height 280px, object-fit: cover, border-radius: 12px 12px 0 0)
- 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 (animation="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 (animation="fadeInUp", stagger delay):
- Mỗi card: ảnh avatar Unsplash (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ý
- Tiêu đề: "Sẵn Sàng Bắt Đầu Chưa?"
- Background: gradient cam nhẹ #1A0E08 → #090A14
- Form giữa trang (animation="fadeInUp", max-width 480px):
- 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" (cam, full width)
→ Thêm class animate__pulse animate__infinite animate__slow để nút nhấp nháy thu hút
- Nút "Liên Hệ Hỗ Trợ" (viền, icon điện thoại)
- Hotline: 📞 0236.3.779.779
## 9. Câu hỏi thường gặp
- Tiêu đề: "Câu Hỏi Thường Gặp"
- Accordion: click tiêu đề để mở/đóng câu trả lời với transition height 300ms ease
- Icon mũi tên xoay 180° khi mở (transform: rotate, transition 300ms)
- Mỗi accordion item: animation="fadeInUp", stagger delay
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
- 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"
+ logo/ảnh nhỏ: https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=48&q=80
- 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 (dùng Lucide icons)
→ Icon hover: scale(1.2) + màu cam (transition 200ms)
- 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."
