着陆页 — 经典结构
一个能有效转化的着陆页，需按顺序包含以下五个部分：
- Hero — 一句承诺 + 视觉元素 + 一个主要行动号召按钮
- 三项亮点 — 三个卡片呈现三个好处，不多不少
- 营业时间/详细信息 — 第二屏上方显示实用信息
- 地图/联系方式 — 嵌入式 iframe 或链接
- 页脚 — 精简：版权信息、社交链接
技术规则（工程部分）
- 单文件。 使用
index.html，内含<style>和<script>。无需构建步骤。 - 通过 CDN 使用 Tailwind —
<script src="https://cdn.tailwindcss.com"></script>。不要拉取 npm 包。 - 通过 Unsplash 源地址使用库存图片 —
https://source.unsplash.com/featured/?keyword。 - 移动优先。 在 375px 宽度下测试。
- 动画时长不超过 200ms。 无轮播图。无弹窗。
配色指南
- 选取一种主色和一种强调色。其余部分使用中性色。
- 对于温馨型企业（食品、酒店）：主色使用橙色/红色，中性色使用奶油色。
- 对于科技企业：主色使用蓝色/靛蓝，中性色使用石板灰。
- 切勿在纯白背景上使用纯黑文字——应将两者都调柔和。
操作流程
当被要求搭建着陆页时：
- 根据用户提示确定企业类型。
- 参照上述指南选择配色方案。
- 编写包含五个部分的
index.html文件。 - 使用真实感强的文案（不要用“Lorem ipsum”）。要针对用户提示进行具体化。
- 编写完成后，使用
bash工具执行open index.html（macOS）或xdg-open index.html（Linux）。 - 如果用户要求修改，使用编辑功能进行有针对性的修改——不要重写整个文件。