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 tác nhân AI — 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(10px) và shadow nhẹ

PHASE 4 — Deploy lên Cloudflare Pages

Trigger: User đã cung cấp thông tin Nhóm G và file index.html đã hoàn chỉnh.

Kiểm tra prerequisites (BẮT BUỘC):

☁ Cloudflare Account ID: [từ Nhóm G.1]
🔑 Cloudflare API Token (Edit Cloudflare Pages): [từ Nhóm G.2]
📦 Project name: [từ Nhóm G.3]
🌐 Custom domain (optional): [từ Nhóm G.4]

Bước 1 — Tạo Pages project:

Sử dụng Cloudflare API để upload file trực tiếp (không cần git):

# 1. Upload file index.html
curl -X POST "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJECT_NAME/upload" \
  -H "Authorization: Bearer CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: multipart/form-data" \
  -F "[email protected]"
# Lưu ý: thay ACCOUNT_ID, PROJECT_NAME, CLOUDFLARE_API_TOKEN bằng giá trị thực từ user

Bước 2 — Gán custom domain (nếu có):

# 2. Gán domain
curl -X POST "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJECT_NAME/domains" \
  -H "Authorization: Bearer CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"name": "CUSTOM_DOMAIN"}'

Bước 3 — Confirm với user:

Sau khi deploy thành công, báo cho user:

🎉 Landing page đã được deploy thành công lên Cloudflare Pages!

🔗 URL mặc định: https://PROJECT_NAME.pages.dev
🌐 Custom domain (nếu có): https://CUSTOM_DOMAIN

📋 Checklist sau deploy:
[ ] Mở URL và kiểm tra lần cuối
[ ] Test form đăng ký (kiểm tra Google Sheet có data không?)
[ ] Check email thông báo có nhận được không?

💡 Nếu có lỗi, em sẽ fix ngay!

KẾT THÚC

Sau khi hoàn tất PHASE 4, landing page đã sẵn sàng sử dụng. User có thể đăng ký, data được lưu vào Google Sheet, và email thông báo được gửi đến địa chỉ đã cấu hình.

Trình tạo Landing Page — CAE EEC Pattern