--- name: deman-workshop-generator description: Sinh landing page HTML tĩnh cho workshop Deman AI Lab theo đúng hệ thống thiết kế "blueprint tech" (nền tối, cyan/violet/gold). Dùng khi được yêu cầu tạo trang cho 1 buổi workshop/webinar mới. --- # SKILL: Deman AI Lab Workshop Landing Generator ## Việc cần làm Khi được yêu cầu tạo landing page cho 1 buổi workshop mới, LUÔN đi theo 2 bước sau, theo đúng thứ tự: BƯỚC 1 — NGAY BÂY GIỜ, đừng viết code vội. Hãy hỏi tôi lần lượt các câu dưới đây (hoặc cho tôi trả lời gộp 1 lần), và đề nghị tôi tải file slide/PDF nội dung buổi workshop lên nếu tôi có sẵn, thay vì bắt tôi gõ lại: - Chủ đề buổi workshop là gì? - Diễn giả là ai (tên, vai trò)? - Ngày giờ diễn ra (hoặc "chưa có lịch, sẽ công bố sau")? - 3 nỗi đau lớn nhất của người nghe trước khi tham dự? - 1 câu chuyện/quote cá nhân của diễn giả để mở đầu buổi? - 3 điều người nghe học được sau buổi? - Agenda theo giờ (liệt kê từng mốc)? - 5-8 nội dung module chính (mỗi module: tiêu đề, nội dung, và bạn muốn dùng kiểu khối nào trong 6 kiểu ở trên)? - 4-6 câu hỏi thường gặp (FAQ) kèm câu trả lời? BƯỚC 2 — Sau khi có đủ thông tin, viết TOÀN BỘ file HTML hoàn chỉnh trong DUY NHẤT một khối code (```html ... ```) ngay trong khung chat — không dùng canvas/artifact, không chia nhỏ ra nhiều tin nhắn, không tóm tắt hay rút gọn bất kỳ phần nào. Tuân thủ đúng hệ thống thiết kế bên dưới. ## Hệ thống thiết kế HỆ THỐNG THIẾT KẾ (bắt buộc tuân thủ đúng): PALETTE (khai báo :root): --bg:#050c1e; --bg2:#081328; --card:rgba(255,255,255,.038); --card-brd:rgba(90,150,210,.16); --ink:#e9f1fb; --muted:#93a6c4; --cyan:#37c8e8; --teal:#2ad0c0; --violet:#8a6bff; --magenta:#d24fd8; --gold:#e0a92e; --gold2:#f0c14b; --good:#35e0a1; --aqua:#39d3ea; --radius:18px; --maxw:1120px; FONT: 'Be Vietnam Pro' cho thân bài, 'Space Grotesk' cho tiêu đề (load qua Google Fonts). CẤU TRÚC (đúng thứ tự): 1. Nền cố định: gradient radial mờ (violet góc trên phải, cyan góc trên trái) + lưới kẻ blueprint mờ + 1 SVG mạng lưới điểm nối ở góc phải trên. 2. Nav sticky: logo chữ + nút CTA đăng ký nền gradient gold. 3. Hero: eyebrow (chấm gold + text uppercase) + H1 lớn (1 cụm chữ tô gradient cyan→violet, có thể xuống dòng) + subhead (có 1 cụm chữ đậm) + 2 nút CTA (gold chính, viền phụ) + 3 chip ngày/giờ/hình thức + card bên phải nền gradient nhạt liệt kê 5 phần nội dung buổi + dòng "miễn phí" màu xanh good + (tuỳ chọn) banner ngang "tiếp nối buổi trước". 4. Section "3 nỗi đau": 3 thẻ (icon + tiêu đề + mô tả, viền trên gradient gold→trong suốt) + 1 dòng kết luận in đậm có 1 cụm chữ màu cyan. 5. Section "câu chuyện": 1 quote box lớn nền gradient nhạt, có 1 cụm chữ trong quote tô màu cyan, kèm đoạn văn diễn giải bên dưới. 6. Section "bạn học được gì": 3 thẻ đánh số (hình vuông gradient cyan→violet) + tiêu đề + mô tả. 7. Section "chương trình": timeline dọc (đường kẻ gradient cyan→violet→magenta bên trái) — mỗi mốc giờ + tiêu đề + mô tả ngắn trong khung bo góc. 8. Section "nội dung chi tiết": 5–8 "module" — mỗi module có eyebrow (chấm + text) + tiêu đề + (tuỳ chọn) đoạn dẫn + ĐÚNG 1 trong 6 khối sau + (tuỳ chọn) callout viền nét đứt cyan: - so sánh: 2 cột đối lập (sai/đúng, trước/sau) — văn xuôi hoặc list - phân lớp: lưới 3-4 ô cấp bậc/kiến trúc theo tầng - điểm chạm: lưới 3-5 ô đánh số, quy trình ngắn - luồng: 3 bước theo giờ, mỗi bước có khung "Prompt" (tím nhạt) + khung "AI Action" (cyan nhạt) - case study: 2 ô, mỗi ô 1 số liệu lớn tô gradient (xanh good→cyan) + bài toán + giải pháp - lộ trình: 3 mốc theo tháng, mỗi mốc vài gạch đầu dòng, có mũi tên nối 9. Section "diễn giả": ảnh hoặc avatar chữ cái đầu (nền gradient violet→cyan) + tên + vai trò (màu cyan) + bio + các tag tròn nhỏ. 10. Section sản phẩm đề xuất (CỐ ĐỊNH — dùng nguyên văn cho mọi workshop, không đổi theo chủ đề buổi học — hỏi lại tôi nội dung chính xác nếu chưa có). 11. CTA cuối: card lớn nền gradient gold→violet nhạt, 1 câu hỏi tu từ + nút đăng ký + dòng "miễn phí, số lượng có hạn". 12. FAQ: accordion 4-6 câu, dấu "+" xoay 45° khi mở. 13. Footer: logo + mô tả buổi + các hashtag. Thêm 1 thanh CTA dính đáy màn hình, chỉ hiện trên di động (< 600px). QUY TẮC BẮT BUỘC: - Toàn bộ trang nền tối, không có khoảng trắng/sáng nào ngoài text. - Số liệu lớn và nhãn giờ dùng font mono, chữ thường dùng font chính. - Không dùng emoji làm icon chính trừ khi nội dung gốc có — ưu tiên icon SVG đơn giản hoặc số/chữ cái. - Toàn bộ trang phải responsive (breakpoint 900px và 600px), card xếp 1 cột trên mobile. - Thêm hiệu ứng "reveal khi cuộn tới" nhẹ nhàng bằng IntersectionObserver (opacity+translateY), không cần thư viện ngoài. - File HTML duy nhất, không chia nhiều file. - Không dùng Tailwind, Bootstrap, Font Awesome hay bất kỳ CDN JS/CSS framework nào ngoài Google Fonts. - CSS đặt trong