# Hero

> Section đầu landing page — eyebrow + title lớn + subtitle + 2 CTA, optional visual bên phải. Self-contained, responsive.

**Archetype mapping:** C (Landing) — hero là section bắt buộc của archetype Landing.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `eyebrow` | `ReactNode` | — | Pill text nhỏ trên title (vd "Mới ra mắt") |
| `title` | `ReactNode` | required | Heading chính (text-4xl/5xl/6xl, font-display) |
| `subtitle` | `ReactNode` | — | Mô tả dưới title |
| `primaryCta` | `HeroCta` | — | CTA chính (filled button) |
| `secondaryCta` | `HeroCta` | — | CTA phụ (outlined button) |
| `visual` | `ReactNode` | — | Image/illustration/video bên phải (chuyển sang grid 2-col) |
| `align` | `'left' \| 'center'` | `'left'` | Căn text. `center` chỉ áp dụng khi không có `visual` |
| `className` | `string` | — | Override section |

### `HeroCta`

| Field | Type | Description |
|---|---|---|
| `label` | `string` | Text button |
| `href` | `string` | URL link |

## Variants

3 layout phổ biến:

1. **Centered, no visual** — text-center, CTA căn giữa. Phù hợp landing đơn giản, product launch.
2. **Left-aligned, no visual** — text-left, CTA căn trái. Phù hợp content-heavy.
3. **Side-by-side với visual** — grid 2-col md+, text trái + image phải. Phù hợp product showcase.

Override align không có effect khi có `visual` (luôn left).

## Composition

Standalone — không có sub-component. Visual slot nhận bất kỳ ReactNode (img, video, illustration component).

## States

- **Default**: title only
- **Với eyebrow**: pill primary-soft trên title
- **Với CTA**: button group dưới subtitle
- **Với visual**: grid 2-col responsive

## Usage

```tsx
import { Hero } from '@cowork/ui';

<Hero
  eyebrow="Mới ra mắt 2026"
  title={<>Trầm hương An Nhiên — <em>tinh hoa rừng Việt</em></>}
  subtitle="Trầm hương tự nhiên, thu hoạch thủ công từ Khánh Hòa và Quảng Nam. Mùi êm dịu, lưu hương cả ngày."
  primaryCta={{ label: 'Khám phá sản phẩm', href: '/products' }}
  secondaryCta={{ label: 'Xem câu chuyện', href: '/about' }}
  visual={<img src="/hero-tram-huong.jpg" alt="Nhang trầm An Nhiên" className="rounded-2xl" />}
/>
```

## Real-world example

- An Nhien landing: Hero với visual product shot, eyebrow "Mới ra mắt", CTA "Mua ngay" + "Xem video câu chuyện".
- KHI Wellness landing: Hero centered, no visual — title "Pilates Reformer — chữa lành cơ thể mỗi ngày", CTA "Đặt lớp trải nghiệm" + "Xem lịch học".
- A-Kryphan Cowork DNA landing: Hero side-by-side với mockup dashboard demo, eyebrow "AI Customer Service — 14 ngày deploy", CTA "Book demo".

## Accessibility

- Title là `<h1>` — chỉ dùng 1 Hero/page (h1 unique)
- CTA là `<a>` link native — keyboard accessible
- Focus ring rõ ràng (`focus-visible:ring-2 focus-visible:ring-primary-ring`)
- Visual nên có `alt` hoặc `role="presentation"` tùy meaning

## Responsive behavior

- Container `max-w-7xl px-4 md:px-6 py-16 md:py-24 lg:py-32`
- Title `text-4xl md:text-5xl lg:text-6xl` — responsive scale 3 cấp
- Subtitle `text-lg md:text-xl` max-width `max-w-2xl`
- Với visual: grid `md:grid-cols-2 md:items-center` — mobile stack vertical, desktop side-by-side
- CTA group `flex-wrap` — wrap xuống dòng khi mobile hẹp

## Related

- [[Pricing]] — section sau Hero trong landing flow
- [[FAQ]] — section gần cuối landing
- [[Navbar]] — đặt trên Hero để có top nav

## Source

`react/src/organisms/Hero.tsx`