用途:在构建营销页面、落地页、首页、关于页、定价页或推广内容时,提供基于 Tailwind CSS 的页面组件模式参考。
主要能力:覆盖 Hero 区(居中、图文分栏、应用截图、背景图、手机模型、图片拼贴等变体及响应式标题、CTA 按钮对、渐变遮罩)、功能展示区(图标网格、交替行、Bento 网格、清单、截图标注)、定价区(双档、三档、月付/年付切换、对比表、单一定价及推荐档强调)、社会证明(评价卡与网格、Logo 云、星级、数据统计、案例卡)、内容区(博客卡、FAQ 手风琴、联系分栏、订阅内联、内容加侧栏)、页头导航(简单页头、弹出菜单、移动端菜单、吸顶、公告条)、页脚(居中、多栏、含订阅、社交图标、深色)以及视觉模式(渐变文字、渐变光斑、点阵/网格背景、分区斜角与波浪、深色区块变体、常用工具类)。
使用方式:资料中给出各模块的 HTML 结构与 Tailwind 类名示例,可直接作为模板参考。部分交互组件依赖 Headless UI(如 Popover、Dialog、Disclosure、Switch)。资料还提到可通过 frontend-components MCP 服务器获取营销组件,如 list_components(framework: "hyperui", category: "marketing") 浏览组件,或 search_components(query: "hero") 跨库搜索,涉及 HyperUI、DaisyUI、FlyonUI 组件库。
适用场景:SaaS 落地页、产品发布、代理/服务、移动应用、活动会议等页面,资料给出对应的分区顺序建议与统一容器、分区间距约定。
限制:资料未提供安装命令、版本要求、兼容性、收费、性能或可访问性具体说明,这些信息暂未提供。