# Sprint 2 — Bricks Builder Blueprint: Hero Section

**Áp dụng cho:** Bricks > Templates > Homepage (Single Page)
**CSS Module:** hero styles sẽ tạo trong `hero.css` (Sprint 2)
**JS Modules:** `scroll-reveal.js`, `side-rail.js` (Sprint 0)

---

## Cấu trúc Element Tree

```
Section (tag: section, id: hero, class: hero)
├── [Background Image]
│   Div (class: hero-video-bg, aria-hidden: true)
│   └── Image → {acf:hero_image} hoặc upload lab-office-main.png
│
├── [Floating Shapes]
│   Div (class: hero-shapes)
│   ├── Div (class: shape shape-1)
│   ├── Div (class: shape shape-2)
│   └── Div (class: shape shape-3)
│
├── Container (class: container hero-grid)
│   ├── [Content Column]
│   │   Div (class: hero-content)
│   │   ├── [KTV Online Bar]
│   │   │   Div (class: ktv-online-bar reveal, id: ktv-online-bar)
│   │   │   └── Span "Còn 3 KTV rảnh · Phản hồi ~8 phút"
│   │   │
│   │   ├── [Badge]
│   │   │   Div (class: hero-badge reveal)
│   │   │   → "👋 Xin chào! PCTech sẵn sàng hỗ trợ bạn"
│   │   │
│   │   ├── [H1]
│   │   │   Heading (h1, class: reveal)
│   │   │   → Dynamic: {acf:hero_title}
│   │   │   Fallback: "Dịch Vụ CNTT & AI Thân Thiện, Nhanh Gọn Cho Bạn"
│   │   │
│   │   ├── [Description]
│   │   │   Text (class: hero-desc reveal)
│   │   │   → Dynamic: {acf:hero_subtitle}
│   │   │
│   │   ├── [CTA Buttons]
│   │   │   Div (class: hero-cta reveal)
│   │   │   ├── Link "Nhận Báo Giá Ngay"
│   │   │   │   class: btn btn-primary
│   │   │   │   data-modal-open: modalQuote
│   │   │   ├── Link "🌐 Sửa Từ Xa — Chỉ 50K"
│   │   │   │   class: btn btn-primary
│   │   │   │   data-modal-open: modalQuickBook
│   │   │   ├── Link "📅 Đặt 3 Bước — Nhanh"
│   │   │   │   class: btn btn-outline
│   │   │   │   data-modal-open: modalQuickBook
│   │   │   └── Link "☎ Gọi Ngay"
│   │   │       href: tel:{acf_options:company_phone}
│   │   │       class: btn btn-ghost
│   │   │
│   │   └── [Trust Pills]
│   │       Div (class: hero-trust reveal stagger)
│   │       ├── Div (class: trust-pill) → "😊 10+ Năm Kinh Nghiệm"
│   │       ├── Div (class: trust-pill) → "⭐ 5.000+ Khách Hàng"
│   │       └── Div (class: trust-pill) → "⚡ Hỗ Trợ Nhanh 24/7"
│   │
│   └── [Visual Column]
│       Div (class: hero-visual reveal-right)
│       ├── Image → {acf:hero_image} class: hero-img-main
│       ├── Div (class: hero-float-card orange) → "💾 WE SAVE YOUR DATA"
│       └── Div (class: hero-float-card blue) → "😊 Phục vụ tận tâm, thân thiện"
```

---

## ACF Fields cho Hero (group_pctech_homepage)

| Field | Key | Type |
|---|---|---|
| Hero Title | `hero_title` | Text |
| Hero Subtitle | `hero_subtitle` | Textarea |
| Hero Image | `hero_image` | Image |
| Hero CTA Text | `hero_cta_text` | Text |
| Hero CTA Link | `hero_cta_link` | URL |

---

## Checklist
- [ ] H1 dynamic từ ACF
- [ ] Hero image Ken Burns animation
- [ ] Float cards animation (CSS `float` keyframe)
- [ ] Trust pills glassmorphism trên dark bg
- [ ] 4 CTA buttons đúng action (modal/tel)
- [ ] Scroll reveal animation
- [ ] Responsive: 2-col → 1-col trên mobile
- [ ] KTV online bar (placeholder, kết nối API sau)