用途：hero-section 面向网页首屏设计，帮助跳出“居中标题＋副文案＋按钮”这一常见默认布局，提供多种首屏结构选择。
主要能力（资料列出的模式）：分栏式首屏，内容与视觉各占一侧，比例可为 60/40 或 50/50；全幅图片首屏，图片铺满视口，文字叠加并配渐变遮罩；视频首屏，以自动播放的静音视频为背景，仅叠加极简文字；产品截图首屏，用产品本身作为主视觉，强调“展示而非讲述”；编辑式首屏，仅用大号排版、无图片，衬线标题配有力文案；滚动式首屏，加入随滚动响应的动画或交互元素。
规则：每个首屏只传达一条清晰信息；最多一个 CTA；文字在任何背景上都必须可读，需测试对比度；移动端内容置于图片上方而非叠加；性能上首屏是 LCP 元素，需优化；高度桌面端 60-80vh，移动端 50-70vh。
使用方式与限制：资料未提供具体安装命令、代码示例或调用步骤，仅给出设计模式与规则说明，实际落地需自行结合前端实现。