增长官网首屏 <AgencyHero />
顶部一枚荧光绿小徽章,左边两三行超大紧排黑字(可嵌彩色图标方块),左下黑色状态胶囊,右下导语加胶囊按钮,底部一排淡色名称。
Template and style descriptions are currently available in Chinese only.
- Group
- 开场 · 产品或方案第 1 页
- Component
AgencyHero·#agency-hero
Good for
- 产品官网式的开场
- 营销方案、增长提案的封面
Avoid when
- 正式汇报:用 Cover
- 要放大数字:用 NumberOpener
Content limits
| 1 | lines 2–3 行,每行 ≤ 7 字(或 12 个字母),最多 2 行带 icon |
| 2 | badge ≤ 24 字;tag ≤ 16 字 |
| 3 | lead ≤ 64 字 |
| 4 | actions 1–2 个,每个 ≤ 10 个字符 |
| 5 | names 0–6 个,只写文字;namesLabel ≤ 16 字 |
Fields
| Field | Type | |
|---|---|---|
badge · required | string | 顶部荧光绿徽章 |
lines · required | { text, icon? }[] | 大标题各行 |
tag · required | string | 左下黑色胶囊 |
lead · required | string | 右下导语 |
actions · required | string[] | 胶囊按钮文字,第一个实心 |
names | string[] | 底部名称 |
namesLabel | string | 名称上方小字 |
source | string | 事实出处 |
Example
<AgencyHero badge="开源 · MIT 协议" lines={[{ text: '让 AI 做的', icon: 'magic' }, { text: '幻灯片' }]} tag="HTML 演示引擎" lead="…" actions={['开始使用', 'GitHub']} />