Hero Section
The first screen of a landing page: one big headline, one supporting line, one primary button, product visual beside or below.
Pricing Table
定价表
Three plans side by side — Free, Pro, Enterprise — with the middle one enlarged and badged Most Popular.
WebMarketingContent areaComponent
大白话说明
定价表把套餐差异做成可一眼横向比较的列：每列一个价格锚点、一段功能清单（有打勾、无划掉或留空）、一个 CTA。推荐档用边框、角标、放大从视觉上「被选中」。月付/年付切换时价格数字要跟着变并标清折算。
什么时候用
有 2–4 档订阅或套餐的产品官网定价页。
什么时候不用
价格需要面谈的企业级产品放「联系销售」即可，别硬编数字；单档定价更不需要表格。
细节与变体
- 功能清单按用户关心的顺序排，不要按内部模块顺序
- 推荐档的特殊样式克制：一处角标 + 边框足矣，全列涂色太吵
- 年付价要写清「按年支付，折合每月 X」，别玩数字游戏
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- AstroWind ↗ MIT · 免费（MIT）
An Astro + Tailwind landing page and blog template with all the standard sections.
- shadcn Landing Page ↗ MIT · 免费（MIT）
A standard landing page assembled from shadcn/ui, cleanly split into sections.