HERO SECTION
双 CTA 首屏Dual CTA Hero
一个实心主按钮 + 一个描边次按钮并排出现，下面跟一行极小的"降低门槛"微文案。
效果预览
准备好了吗？
14 天免费试用，不需要信用卡。
适合用在哪
所有需要转化的产品页；尤其适合同时服务"想立刻用"和"想先看看"两类用户。
容易踩的坑
- 次按钮也用实心品牌色，两个按钮抢注意力，主转化点击率被稀释。
- 两钮文案都写「了解更多」「开始」这类泛词，用户分不清两条路径的区别。
- 移动端两钮并排每个不足 44px 高或宽度过窄，应改为上下全宽堆叠。
设计提示词 · Prompt
双 CTA 首屏（Dual CTA Hero）：主按钮用实心深色或品牌渐变（高 48-52px、左右内边距 28px、字重 600、圆角 10-12px、带同色系柔光投影），次按钮用白底 + 1px 中性描边 + 同尺寸。两钮间距 12px，整体居中。按钮下方 12-16px 处加一行 12-13px 的灰色微文案，配一个锁形图标，例如"14 天免费 · 无需信用卡 · 随时取消"——用来消化用户的最后一个顾虑。
Dual CTA Hero: the primary button uses solid dark or a brand gradient (48-52px tall, 28px horizontal padding, font-weight 600, 10-12px radius, with a soft glow shadow in the same color family); the secondary button uses a white background + 1px neutral stroke + the same size. 12px gap between the two buttons, centered as a group. 12-16px below the buttons, add a line of 12-13px gray microcopy with a lock icon, e.g. "14-day free trial · No credit card required · Cancel anytime" — to dissolve the user's last hesitation.
常见搭配
同一页面里经常和「双 CTA 首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hero-dual">
<h3 class="d-h2">准备好了吗？</h3>
<p class="d-sub">14 天免费试用，不需要信用卡。</p>
<div class="d-hero-dual__btns">
<button class="d-btn d-btn--gd">开始免费试用</button>
<button class="d-btn d-btn--g">预约演示</button>
</div>
<span class="d-hero-dual__micro">🔒 随时取消 · 数据可导出</span>
</div>