Landing Page Builder — CAE Pattern

Mô tả tổng quan

Skill này giúp bạn tạo một landing page chất lượng cao (theo pattern EEC của CAE Việt Nam) từ thông tin do người dùng cung cấp. Toàn bộ quy trình được thực hiện bởi Antigravity — user chỉ cần trả lời câu hỏi.

Output cuối cùng:

index.html + styles.css — landing page hoàn chỉnh, responsive, có animations
google-apps-script.js — backend nhận form data → ghi Google Sheets → gửi email thông báo
Hướng dẫn từng bước deploy lên Cloudflare Pages

Kiến trúc trang EEC (blueprint chuẩn)

1. NAV — sticky, blur khi scroll, logo + links + CTA button
2. HERO — full-screen, gradient đỏ, particles, headline + subtext + 2 buttons  
3. STATS BAR — 4 số liệu nổi bật, animate counter
4. WHY US — 6 feature cards với hover effects (3 cột)
5. INSTRUCTOR (tuỳ chọn) — YouTube Short embed + credentials
6. COURSES — 3 khóa học, card nổi bật ở giữa, price box
7. TIMELINE — lộ trình N tuần dạng grid
8. TESTIMONIALS — 3 review cards với stars
9. FAQ — accordion expand/collapse
10. CTA + FORM — gradient section, đăng ký form → Google Sheets + email
11. FOOTER — 3 cột: brand, khóa học, liên hệ

QUY TRÌNH (PHẢI THỰC HIỆN THEO THỨ TỰ)

PHASE 0: Scan & Context (LUÔN CHẠY ĐẦU TIÊN)

Trước khi hỏi bất cứ điều gì, kiểm tra môi trường và tìm context cũ:

Kiểm tra Mem0 có sẵn không:
- Thử gọi search_memory với query: "landing page preference màu font domain"
- Nếu tool KHÔNG tồn tại / báo lỗi → bỏ qua hoàn toàn, chuyển Phase 1 ngay, không thông báo lỗi với user
- Nếu tool có và tìm thấy → báo: "Em nhớ lần trước anh dùng [màu X / font Y / domain Z]. Lần này giữ nguyên hay thay đổi?"
- Nếu tool có nhưng không tìm thấy → tiến hành Phase 1 bình thường
Lưu context mới (nếu Mem0 có sẵn) — sau khi user confirm xong 7 nhóm, gọi add_memory:
```
Landing page [tên chiến dịch]: màu=[hex], font=Be Vietnam Pro, domain=[domain], email=[email], sheet=[link sheet]
```
- Nếu Mem0 không có → bỏ qua bước này, không ảnh hưởng gì đến kết quả

Nguyên tắc thiết kế: Mem0 là tính năng bổ sung (progressive enhancement), không phải dependency bắt buộc. Skill phải hoạt động hoàn toàn bình thường trên máy không có Mem0.

PHASE 1: Thu thập thông tin (Hỏi từng nhóm, chờ trả lời)

⚠️ QUAN TRỌNG: Hỏi TỪNG NHÓM một. Không hỏi tất cả một lần. Sau khi user trả lời xong một nhóm mới hỏi nhóm tiếp theo.

Nhóm A — Thương hiệu & màu sắc

Hỏi:

Để tạo landing page, em cần biết một số thông tin cơ bản trước.

**Nhóm 1: Thương hiệu**
1. Tên thương hiệu/trung tâm là gì? (VD: CAE Việt Nam, Trung tâm ABC...)
2. URL logo PNG của bạn (hoặc nói "không có" để dùng text thay thế)
3. Màu chủ đạo muốn dùng?
   - 🔴 Đỏ CAE (như trang EEC) — #8F1A1A + vàng gold #FEC46F
   - 🔵 Xanh navy chuyên nghiệp — #1A3A5C + cyan #00C9FF
   - 🟢 Xanh lá tươi — #0D6E3F + vàng #FFD700
   - ✏️ Tôi muốn nhập màu khác (cung cấp mã hex)
4. Tên miền dự kiến? (VD: uudai.tentruongtoi.com hoặc "chưa có")

Nhóm B — Nội dung Hero

Sau khi nhận Nhóm A, hỏi:

**Nhóm 2: Phần đầu trang (Hero Section)**
1. Tiêu đề chính muốn hiển thị? (VD: "Học bổng 100% Tiếng Trung Học Thuật")
2. Khẩu hiệu nhỏ phía trên tiêu đề? (VD: "Chương trình thử nghiệm — Số lượng giới hạn")
3. Đoạn mô tả ngắn (1-2 câu) bên dưới tiêu đề?
4. Text nút CTA chính? (VD: "📝 Đăng ký ngay", "🎓 Nhận học bổng")
5. Có 4 con số thống kê muốn hiển thị không? (VD: 3 lớp, 100% miễn phí, 8 tuần, 15 HS/lớp)

Nhóm C — Điểm mạnh & Khóa học

Sau khi nhận Nhóm B, hỏi:

**Nhóm 3: Điểm mạnh & Sản phẩm**
1. Liệt kê 3-6 điểm mạnh của bạn (mỗi điểm gồm: emoji icon, tiêu đề ngắn, mô tả 1-2 câu)
   VD: 🎓 Chương trình bản quyền | Mua bản quyền từ đối tác quốc tế...
   
2. Liệt kê 1-3 khóa học/gói dịch vụ (mỗi gói gồm):
   - Tên khóa
   - Badge nhỏ (VD: "Online · 8 tuần", "Offline · Hà Nội")
   - 3-4 tính năng nổi bật
   - Giá gốc (để gạch bỏ)
   - Giá ưu đãi / "MIỄN PHÍ 100%" / phần trăm giảm
   - Ghi chú (VD: "Chỉ 15 suất")
   - Khóa nào là "nổi bật nhất"?

Nhóm D — Lộ trình & Giáo viên

Sau khi nhận Nhóm C, hỏi:

**Nhóm 4: Nội dung bổ sung**
1. Có lộ trình học theo tuần không? (Nếu có, liệt kê N tuần với tên chủ đề)
2. Có giáo viên/chuyên gia muốn giới thiệu không?
   - Tên, chức danh
   - Link video YouTube (optional)
   - 3 chứng chỉ/thành tích nổi bật
3. Có 3 testimonials từ khách hàng không?
   (Tên viết tắt, tên đầy đủ, vai trò, nội dung quote)

Nhóm E — FAQ & Liên hệ

Sau khi nhận Nhóm D, hỏi:

**Nhóm 5: FAQ & Liên hệ**
1. Liệt kê 5-7 câu hỏi thường gặp và câu trả lời?
2. Thông tin liên hệ:
   - Địa chỉ văn phòng
   - Hotline/Zalo
   - Email
   - Facebook page URL
3. Bản quyền footer: "© 2025 [Tên tổ chức]"

Nhóm F — Form & Backend

Sau khi nhận Nhóm E, hỏi:

**Nhóm 6: Form đăng ký & kết nối data**
1. Form cần thu thập những trường nào?
   - [x] Họ tên (bắt buộc)
   - [x] Số điện thoại (bắt buộc)
   - [ ] Email
   - [ ] Địa chỉ / Tỉnh thành
   - [ ] Checkbox chọn khóa học
   - [ ] Textarea ghi chú
   - [ ] Trường khác?

2. Email nào sẽ nhận thông báo khi có người đăng ký?
   (VD: [email protected])

3. Tiêu đề email thông báo muốn dùng?
   (VD: "🔔 Có đăng ký mới từ Landing Page!")

4. Anh vui lòng gửi link Google Sheet mà anh muốn lưu data đăng ký vào.
   (Em sẽ tạo script theo đúng các trường form ở trên, rồi hướng dẫn anh chạy trên Sheet đó)

⚠️ Sau khi user gửi link Sheet → DỪNG LẠI và chạy PHASE 2 ngay.

Nhóm G — Deploy Cloudflare

Sau khi nhận Nhóm F, hỏi:

**Nhóm 7: Thông tin deploy (bước cuối)**
1. Cloudflare Account ID của bạn?
   (Vào dash.cloudflare.com → chọn tài khoản → xem URL: cloudflare.com/ACCOUNT_ID)
2. Cloudflare API Token?
   (Vào My Profile → API Tokens → Create Token → dùng template "Edit Cloudflare Pages")
3. Tên project Cloudflare Pages? (chữ thường, gạch ngang, VD: my-landing-2025)
4. Custom domain muốn gán? (VD: uudai.domain.com hoặc "không cần")

PHASE 1.5 — VISION 10-STAR ⭐ (BẮT BUỘC trước khi generate)

"Không thiết kế cho hàng triệu người. Hãy thiết kế để MỘT NGƯỜI có trải nghiệm kinh ngạc nhất mà họ từng thấy." — Garry Tan

Dừng lại và trả lời 4 câu hỏi này TRƯỚC khi viết 1 dòng code:

Headline có "đóng đinh" không?
- Đọc headline trong 3 giây: khách hàng có biết ngay đây là dành cho họ không?
- Nếu chưa mạnh → áp dụng công thức Copy Formula trong skill này để viết lại
Trang này có 1 điều gì đó KHÔNG THỂ QUÊN không?
- Một con số ấn tượng? Một cam kết táo bạo? Một lợi ích bất ngờ?
- VD: "Học miễn phí 100% — Chỉ 15 suất" → rõ ràng, khan hiếm, hành động ngay
Điểm yếu chết người nào landing page này có thể mắc phải?
- Form quá nhiều trường? Hero không có social proof? CTA nhạt?
- Xác định và vá ngay trong design
Nếu Steve Jobs duyệt trang này, ông ấy sẽ cắt gì?
- Loại bỏ mọi thứ không phục vụ cho mục tiêu duy nhất: đăng ký

Output: Ghi chú Vision vào response trước khi tiếp tục:

🎯 VISION 10-STAR:
- Điểm mạnh độc đáo: [..]
- Headline chốt: [..]
- 1 điều không thể quên: [..]
- Đã cắt bỏ: [..]

FOUNDER CHALLENGE RULE (Áp dụng tại Vision Gate)

"Đóng vai CEO — nhiệm vụ là thách thức sự tầm thường, không phải ghi nhận nó."

Nếu user cung cấp headline yếu (generic, không rõ đối tượng, không có lợi ích cụ thể), KHÔNG được chấp nhận ngay. Thay vào đó:

⚡ Founder Mode:
Headline "[headline của user]" còn generic. Em đề xuất 3 alternatives mạnh hơn:

[A] [Lợi ích cụ thể] — [con số/thời gian] — [đối tượng rõ]
    VD: "Học tiếng Trung học thuật miễn phí 100% — Chỉ 15 suất"

[B] [Hook câu hỏi] + [kết quả bất ngờ]
    VD: "Con bạn học tiếng Trung 8 tuần — tự tin hơn học sinh quốc tế?"

[C] [Cam kết táo bạo] + [bằng chứng]
    VD: "Không tiến bộ sau 4 buổi — hoàn tiền 100%, không hỏi lý do"

Anh chọn hướng nào, hoặc muốn em viết lại theo ý khác?

Khi nào challenge: Headline không có ít nhất 2 trong 3 yếu tố: (1) đối tượng rõ, (2) lợi ích cụ thể, (3) con số/cam kết.

PHASE 2: Tạo Google Apps Script (Backend)

Trigger: User đã gửi link Google Sheet (Nhóm F.4).

Bước 1 — Generate script tùy chỉnh:

Dựa trên template tại templates/google-apps-script.js, tạo ra đoạn script được customize theo đúng form của landing page:

Điền NOTIFICATION_EMAIL = email từ Nhóm F.2
Điền EMAIL_SUBJECT = tiêu đề từ Nhóm F.3
Điền CAMPAIGN_NAME = tên chiến dịch từ Nhóm A.1
Cập nhật hàm writeToSheet() để có đúng số cột khớp với trường form Nhóm F.1
Cập nhật hàm doPost() để parse đúng các e.parameter theo trường đã chọn

Bước 2 — Output code block để user copy:

Sau khi generate xong, hiển thị TOÀN BỘ code trong một block duy nhất như sau:

✅ Em đã tạo xong script cho Google Sheet của anh!

Đây là mã anh cần copy và dán vào Sheet:
[CODE BLOCK]

📋 HƯỚNG DẪN CHẠY TRÊN GOOGLE SHEET CỦA ANH (5 bước):

① Mở Google Sheet anh vừa gửi link → Vào menu Extensions → Apps Script
   (Hoặc click vào link Sheet đó, rồi tìm menu Extensions ở thanh trên)

② Xóa toàn bộ code mặc định trong ô soạn thảo (Ctrl+A → Delete)

③ Paste toàn bộ đoạn code em đã tạo ở trên vào (Ctrl+V)

④ Nhấn Ctrl+S để lưu → Đặt tên project là "Landing Page Handler" → OK

⑤ Deploy script:
   • Click nút "Deploy" (góc phải trên) → "New deployment"
   • Mục "Type": chọn "Web app"
   • Mục "Execute as": chọn "Me (email của anh)"
   • Mục "Who has access": chọn "Anyone"
   • Click "Deploy" → Google sẽ hỏi quyền → Click "Authorize access" → Chọn tài khoản Google
   • Copy URL dài xuất hiện (dạng: https://script.google.com/macros/s/.../exec)

📌 Sau khi có URL đó, paste vào đây để em gắn vào landing page.

Bước 3 — Chờ user xác nhận SHEETS_ENDPOINT URL trước khi tiếp tục PHASE 3.

PHASE 3: Generate Landing Page HTML

Dựa vào tất cả thông tin đã thu thập, tạo file index.html đầy đủ:

Cấu trúc file cần tạo:

Một file index.html duy nhất (CSS inline trong <style> tag, KHÔNG tách file riêng)
JavaScript form submission inline trong <script> tag
Không phụ thuộc framework, chỉ vanilla HTML/CSS/JS
Fully responsive (mobile-first)
Sử dụng Be Vietnam Pro (load từ Google Fonts CDN) — hỗ trợ đầy đủ dấu tiếng Việt, thay thế Inter/Montserrat

Thiết kế theo pattern EEC:

Color scheme từ Nhóm A.3
Tất cả sections từ blueprint
Nếu user không cung cấp instructor → bỏ section đó
Nếu không có testimonials → bỏ section đó
Nếu không có timeline → bỏ section đó

Form submission pattern (PHẢI DÙNG hidden iframe — tránh CORS):

const SHEETS_ENDPOINT = 'URL_GAS_CUA_USER'; // Điền URL từ Bước 2

const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);

// Khi submit: tạo form ẩn, POST đến GAS endpoint, target vào hidden iframe
// Không dùng fetch() — native form POST không bị CORS block

Backup localStorage:

// Luôn backup vào localStorage trước khi submit
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));

Optimistic UI + GAS Resilience (BẮT BUỘC):

// 1. Hiển thị success NGAY — không chờ GAS response
function submitForm(data) {
  // Backup localStorage trước
  backupToLocal(data);

  // Hiện success message ngay lập tức (optimistic)
  showSuccessMessage();

  // Submit GAS ngầm — không block UI
  submitToGAS(data).catch(() => {
    // GAS fail nhưng localStorage đã có → silent retry
    scheduleRetry(data);
  });
}

// 2. Retry tự động nếu GAS fail
function scheduleRetry(data, attempt = 1) {
  if (attempt > 3) return; // Bỏ sau 3 lần
  setTimeout(() => {
    submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
  }, attempt * 3000); // 3s, 6s, 9s
}

// 3. GAS timeout 10s (không để user chờ vô hạn)
async function submitToGAS(data) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 10000);
  try {
    // Dùng fetch mode no-cors (GAS không trả response body)
    await fetch(SHEETS_ENDPOINT, {
      method: 'POST', mode: 'no-cors',
      body: new URLSearchParams(data),
      signal: controller.signal
    });
  } finally {
    clearTimeout(timeout);
  }
}

Note: Mode no-cors với fetch + URLSearchParams là cách thay thế hidden iframe, không bị CORS block. Dùng một trong hai tùy context.

PHASE 3.5 — BROWSER VERIFY (Trước khi deploy)

Trigger: File index.html đã được tạo xong.

Dùng browser tool để verify trước khi báo anh xem:

Mở file trong browser (hoặc local server)
Responsive check:
- Mobile 375px: menu không vỡ, form vừa màn hình, text không bị cắt
- Desktop 1440px: không quá rộng, layout cân đối
UX check:
- CTA button visible above-the-fold không cần scroll
- Form submit: điền test data → kiểm tra console không có lỗi
- FAQ accordion mở/đóng hoạt động
- Scroll smooth, không giật
Visual check:
- Màu sắc đúng palette đã chọn
- Font load đúng (Be Vietnam Pro)
- Không còn placeholder text nào
Screenshot và báo cáo: Chụp màn hình desktop + mobile, gửi cho user xem trước

⚠️ PHẢI PASS hết checklist này trước khi chạy PHASE 3.6 Refine và PHASE 4 Deploy.

PHASE 3.6 — REFINE PASS (Đánh bóng)

Sau khi user confirm nội dung OK, thực hiện 1 lượt polish:

Micro-animations: Thêm fade-in khi scroll vào từng section (IntersectionObserver)
Hover effects: Button scale nhẹ khi hover (transform: scale(1.03))
CTA pulse: Nút đăng ký chính có subtle pulse animation để thu hút mắt
Counter animate: Các con số stats (3 lớp, 500+ HS) đếm lên khi vào viewport
Form feedback: Hiển thị loading state khi submit, success message sau khi gửi
Nav blur: Khi scroll xuống, nav có backdrop-filter: blur effect

Nguyên tắc: Mỗi animation phải có mục đích — dẫn ánh mắt đến CTA, không làm xao nhãng.

PHASE 4: Deploy lên Cloudflare Pages

Sau khi có đủ thông tin Nhóm G:

Tạo thư mục deploy:

landing-deploy/
├── public/
│   └── index.html
└── (không cần file khác)

Deploy bằng Wrangler:

PowerShell (Windows):

$env:CLOUDFLARE_ACCOUNT_ID="ID_TU_NHOM_G"
$env:CLOUDFLARE_API_TOKEN="TOKEN_TU_NHOM_G"
npx wrangler pages deploy ./landing-deploy/public --project-name "PROJECT_NAME"

Bash (Mac/Linux):

CLOUDFLARE_ACCOUNT_ID="ID" CLOUDFLARE_API_TOKEN="TOKEN" \
  npx wrangler pages deploy ./landing-deploy/public --project-name "PROJECT_NAME"

Gán Custom Domain (nếu có):

Sau khi deploy thành công, vào Cloudflare Dashboard:

Pages → [project] → Custom Domains → Add Custom Domain
Nhập domain → Cloudflare sẽ tự thêm CNAME record nếu domain đang quản lý trên CF
Nếu domain ở registrar khác: thêm CNAME record trỏ đến *.pages.dev

Thông báo hoàn thành:

✅ Landing page đã live!
🌐 URL mặc định: https://PROJECT_NAME.pages.dev
🔗 Custom domain: https://CUSTOM_DOMAIN (mất 1-5 phút propagate)

📊 Để xem data đăng ký: mở Google Sheets của bạn
📧 Email thông báo gửi đến: EMAIL_NHOM_F

Production Verify (PHẢI LÀM — Evidence-based):

Sau khi URL live, dùng browser tool chạy production checklist:

🔍 PRODUCTION VERIFY:
[ ] Mở URL live trong browser → page load < 3s
[ ] Mobile 375px: layout đúng, không bị vỡ
[ ] Điền form test: Họ tên="Test User", SĐT="0900000000"
[ ] Submit → hiện success message ngay (optimistic)
[ ] Mở Google Sheet → confirm row mới xuất hiện
[ ] Check email admin → confirm email thông báo đến
[ ] Screenshot URL live + Sheet data → gửi anh xem

⛔ TUYỆT ĐỐI KHÔNG báo "Done" trước khi production verify pass. Proof of Work bắt buộc.

CHECKLIST HOÀN THÀNH

Thu thập đủ 7 nhóm thông tin
Tạo file google-apps-script.js và hướng dẫn user deploy
User xác nhận đã có SHEETS_ENDPOINT URL
Generate index.html đầy đủ (tất cả sections)
User xem preview và confirm OK
Deploy lên Cloudflare Pages thành công
Test form: điền thông tin giả, kiểm tra data xuất hiện trong Sheet
Gán custom domain (nếu có)
Báo cáo URL live cho user

LƯU Ý QUAN TRỌNG

Không bao giờ deploy trước khi user confirm nội dung HTML — phải cho user xem preview trước
SHEETS_ENDPOINT phải được user xác nhận trước khi tạo HTML — không để placeholder trong file cuối
Form submission PHẢI dùng hidden iframe pattern — không dùng fetch() với JSON vì bị CORS
Luôn có localStorage backup — dữ liệu không bao giờ bị mất ngay cả khi GAS fail
CSS phải inline trong <style> — landing page 1 file duy nhất, dễ deploy

KHI GẶP VẤN ĐỀ

Wrangler báo lỗi auth: Kiểm tra lại Account ID và Token permissions (cần "Edit Cloudflare Pages")
GAS không nhận data: Kiểm tra "Execute as: Me" và "Who has access: Anyone" khi deploy
Form submit nhưng không có data trong Sheet: Mở Google Sheet → Extensions → Apps Script → Executions để xem log lỗi
Custom domain không hoạt động: Đợi 5-10 phút hoặc kiểm tra DNS propagation tại whatsmydns.net

DESIGN REFERENCE PROTOCOL (Khi user gửi screenshot / URL mẫu)

Khi user nói "làm như trang này", "tham khảo design này", hoặc cung cấp URL/ảnh chụp màn hình, thực hiện phân tích theo 8 chiều trước khi code:

Chiều 1 — Layout Architecture

Cấu trúc tổng thể: single column, split-screen, asymmetric, grid-based?
Thứ tự sections (hero, features, pricing, v.v.)
Content width: full-bleed, contained (max-width), mixed?
Vertical rhythm: section spacing compact / normal / generous?

Chiều 2 — Màu sắc

Màu brand chính (dominant hue)
Màu phụ / accent
Màu CTA button
Background từng section (gradient? solid? alternating?)
Dark mode hay light mode?

→ Map sang CSS variables:

--primary: #HEX;
--secondary: #HEX;
--cta: #HEX;
--bg: #HEX;

Chiều 3 — Typography

Font heading: sans-serif, serif, display, monospace?
Font body: clean sans, humanist, geometric?
Hierarchy: mức độ tương phản h1/h2/body?
Letter-spacing, line-height đặc trưng?
Hiệu ứng text đặc biệt: gradient text, outlined, rotated?

→ Map sang Google Fonts (Be Vietnam Pro ưu tiên cho tiếng Việt)

Chiều 4 — Components

Liệt kê mọi component nhìn thấy:

Nav: fixed? transparent? floating pill?
Hero: centered text, split image+text, video background?
Cards: shadow, border, rounded, hover?
Buttons: rounded, pill, ghost, gradient, icon+text?
Forms: inline, stacked, multi-step?
Badges/tags, Icons, Dividers, Footer

Chiều 5 — Spacing & Sizing

Section padding: compact / normal / generous?
Card gaps, Border radius, Shadow depth?
Max-width content area?

Chiều 6 — Visual Effects

Background patterns (dots, grid, noise, blobs)
Scroll animations (fade-in, slide-up, parallax)
Hover effects (scale, shadow, color change)
Gradient, Blur, Glassmorphism?
Decorative floating elements?

Chiều 7 — Content Density

Text-heavy vs visual-heavy?
Số lượng CTA trên trang?
Social proof density?
Whitespace: minimal, moderate, generous?

Chiều 8 — Vietnam Adaptation

Font hỗ trợ dấu tiếng Việt không?
Cần thêm VietQR/SePay không?
Trust signals phù hợp thị trường VN?
Mobile-first (70%+ người dùng VN dùng mobile)?

Build Plan Template

Sau phân tích 8 chiều, tạo bản kế hoạch:

DESIGN BUILD PLAN
==================
Layout: [mô tả]
Màu chính: [hex] | Phụ: [hex] | CTA: [hex]
Font heading: [font] | Body: [font]
Components cần: [list]
Effects đặc biệt: [list]
Sections (top→bottom):
  1. [tên section] — [mô tả]
  2. [tên section] — [mô tả]
Độ phức tạp: [Thấp/Trung/Cao]

Nguyên tắc quan trọng:

Bắt chước tinh thần, không clone pixel-perfect
Cải thiện điểm yếu của bản gốc (mobile UX kém, thiếu CTA...)
Luôn adapt cho thị trường VN (font, VietQR, trust signals)
Không copy logo/ảnh có bản quyền

COPY FORMULAS (Công thức viết nội dung)

Headlines

Công thức	Ví dụ
[Lợi ích] mà không cần [nỗi đau]	"Học tiếng Trung bài bản mà không tốn cả đống tiền"
Từ [hiện tại] đến [mong muốn] trong [thời gian]	"Từ zero đến giao tiếp tự nhiên trong 8 tuần"
Câu hỏi hook: Bạn có muốn [kết quả]?	"Bạn có muốn con tự tin nói tiếng Trung trước lớp?"

Subheadlines

Công thức	Ví dụ
[Sản phẩm] giúp [đối tượng] [lợi ích] để [mục tiêu cao hơn]	"Khóa học giúp học sinh THPT nắm vững ngữ pháp để tự tin thi HSK"
Social Proof: Cùng [số lượng]+ [đối tượng] đã [kết quả]	"Cùng 500+ học viên đã nói được tiếng Trung sau 8 tuần"

CTA Buttons

Công thức	Ví dụ
[Hành động] + [lợi ích]	"Đăng ký ngay — Miễn phí 100%"
[Giải quyết rào cản] + [kết quả]	"Thử nghiệm 2 buổi — Không ưng hoàn tiền"

Social Proof Snippets

[Số lượng]+ học viên đã tin tưởng
[Đánh giá]/5 sao từ [số lượng] phụ huynh
Học bổng duy nhất tại [thành phố]
Được [tổ chức uy tín] chứng nhận

SEPAY / VIETQR (Thanh toán online — Vietnam)

Thêm section này nếu landing page cần thu phí online:

<!-- SePay VietQR Embed -->
<section id="payment" class="payment-section">
  <div class="container">
    <h2>Hoàn tất đăng ký — Thanh toán ngay</h2>
    <p>Quét mã QR bằng app ngân hàng để thanh toán trong 30 giây</p>

    <div class="qr-wrapper">
      <img 
        src="https://my.sepay.vn/qr?bank={{BANK_ID}}&acc={{ACCOUNT_NUMBER}}&amount={{AMOUNT}}&des={{ORDER_ID}}"
        alt="VietQR Thanh toán" 
        width="256" height="256"
      />
    </div>

    <p class="order-id">Mã đơn: <strong>{{ORDER_ID}}</strong></p>
    <p class="payment-note">Thanh toán tự động xác nhận trong vòng 30 giây</p>
  </div>
</section>

Cần điền:

{{BANK_ID}} — Mã ngân hàng (VD: VCB, TCB, MB...)
{{ACCOUNT_NUMBER}} — Số tài khoản thụ hưởng
{{AMOUNT}} — Số tiền (VD: 500000)
{{ORDER_ID}} — Mã đơn hàng (auto-generate bằng JS: LP_${Date.now()})

DESIGN SYSTEM REFERENCE

→ Xem bảng màu đầy đủ và font pairings tại: references/design-data.md

Quick pick theo loại sản phẩm:

Loại	Màu chính	CTA	Font
Giáo dục / Khóa học	`#0D9488`	`#EA580C`	Be Vietnam Pro
Restaurant / F&B	`#DC2626`	`#CA8A04`	Be Vietnam Pro
Luxury / Premium	`#1C1917`	`#CA8A04`	Playfair Display
SaaS / Software	`#2563EB`	`#F97316`	Poppins
Healthcare	`#0891B2`	`#059669`	Lora
Fitness / Gym	`#DC2626`	`#16A34A`	Space Grotesk
CAE (mặc định)	`#8F1A1A`	`#FEC46F`	Be Vietnam Pro

QUALITY CHECKLIST (trước khi deliver)

Responsive

Mobile 375px: menu, form, images đúng
Tablet 768px: layout 2 cột nếu có
Desktop 1440px: không quá rộng

Performance

Không có ảnh nặng > 200KB
Google Fonts load đúng
Không có console errors

Conversion

CTA chính visible above-the-fold
CTA lặp lại ít nhất 2 lần
Social proof có trong hero section
Form không quá 5 trường

Nội dung

Không còn placeholder text
Font hỗ trợ tiếng Việt (Be Vietnam Pro)
Tất cả ảnh có alt text
Footer có địa chỉ + hotline

Backend

Form submit test thành công
Data xuất hiện trong Google Sheet
Email thông báo gửi đến admin
localStorage backup hoạt động

Technical

HTML5 valid
Meta tags đầy đủ (title, description, OG)
Favicon có (dù chỉ là emoji favicon)

Preguntar en tu IA favorita

Vista previa

Documentación