Chương 18: Landing Page & CRO

"Minh: 'Sản phẩm tốt nhưng không ai biết. Cần landing page chuyển đổi.' Lan thiết kế wireframe. Tuấn code trong 2 giờ với AI. Nhưng Hà phát hiện: 'CTA button link bị hỏng!'"

---

🎯 Mục tiêu

• Build high-converting landing page
• StoryBrand narrative (SB7)
• Lead capture + analytics
• 🐛 Bug #13: Broken CTA link

---

Phần 1: StoryBrand Framework (20 phút)

1. HERO = Your customer (not you!)
2. PROBLEM = What they struggle with
3. GUIDE = You (empathy + authority)
4. PLAN = 3 simple steps
5. CTA = "Start Free"
6. FAILURE = What happens if they don't act
7. SUCCESS = The transformation

---

Phần 2: Build Landing Page (40 phút)

antigravity "@cm-cro-methodology + @cm-growth-hacking
Build landing page for TeamFlow:

File: public/landing.html + public/static/css/landing.css

Sections:
1. Hero: gradient bg, headline, sub, CTA, social proof
2. Problem: 3 pain points with icons
3. Solution: TeamFlow screenshots + features
4. How it works: 3 steps
5. Testimonials: 3 quotes
6. Pricing: Free / Pro $9 / Team $29
7. FAQ: 5 questions accordion
8. Final CTA: email capture form

Design: Dark mode, glassmorphism, Inter font
CRO: FOMO counter, trust badges, risk reversal
🐛 Bug #13: Make CTA link broken (href='#signup' but form id='sign-up')"

Key Copy

<section class="hero">
  <h1>Quản Lý Dự Án Thông Minh — <span class="gradient-text">AI Làm Việc Nặng</span></h1>
  <p>TeamFlow giúp team 2-20 người ship nhanh hơn 10x. Không cần Jira. Không cần training.</p>
  <a href="#signup" class="cta-button">Bắt Đầu Miễn Phí</a>
  <!-- 🐛 Bug #13: href="#signup" but form has id="sign-up" (hyphen mismatch) -->
  <p class="trust">✨ 500+ teams đã chuyển đổi · Không cần thẻ tín dụng</p>
</section>

---

Phần 3: Lead Capture (20 phút)

antigravity "@cm-google-form Setup email capture:
- Form: name + email + company size
- Submit → Google Sheet
- Thank you message
- Auto-responder email
- Conversion event tracking"

---

Phần 4: Bug #13 Discovery (15 phút)

# QA test: click CTA → nothing happens!
# Because href="#signup" but form id="sign-up"

# Fix: match the id
<a href="#sign-up" class="cta-button">Bắt Đầu Miễn Phí</a>
<!-- OR -->
<form id="signup">  <!-- remove hyphen -->

---

Homework

• [ ] Landing page deployed
• [ ] Lead capture working
• [ ] Bug #13 fixed
• [ ] Lighthouse score > 90

Chương tiếp: Business Model & GTM →