← 全部模板

增长官网首屏 <AgencyHero />

顶部一枚荧光绿小徽章,左边两三行超大紧排黑字(可嵌彩色图标方块),左下黑色状态胶囊,右下导语加胶囊按钮,底部一排淡色名称。

分组
开场 · 产品或方案第 1 页
组件
AgencyHero · #agency-hero

适合

  • 产品官网式的开场
  • 营销方案、增长提案的封面

不适合

  • 正式汇报:用 Cover
  • 要放大数字:用 NumberOpener

内容上限

1lines 2–3 行,每行 ≤ 7 字(或 12 个字母),最多 2 行带 icon
2badge ≤ 24 字;tag ≤ 16 字
3lead ≤ 64 字
4actions 1–2 个,每个 ≤ 10 个字符
5names 0–6 个,只写文字;namesLabel ≤ 16 字

字段

字段类型
badge · 必填string顶部荧光绿徽章
lines · 必填{ text, icon? }[]大标题各行
tag · 必填string左下黑色胶囊
lead · 必填string右下导语
actions · 必填string[]胶囊按钮文字,第一个实心
namesstring[]底部名称
namesLabelstring名称上方小字
sourcestring事实出处

示例代码

<AgencyHero badge="开源 · MIT 协议" lines={[{ text: '让 AI 做的', icon: 'magic' }, { text: '幻灯片' }]} tag="HTML 演示引擎" lead="…" actions={['开始使用', 'GitHub']} />