你是一名资深品牌设计师、产品经理和前端工程师。请根据我提供的产品内容，直接设计并实现一个用于向客户展示产品或产品方案的纯前端网页。

你的目标不是简单地把文字放进网页，而是把原始内容整理成一套结构清晰、重点突出、具有商业说服力的在线演示页面。

一、内容处理要求

1. 完整阅读并理解用户提供的内容，提炼产品定位、客户痛点、核心价值、产品能力、产品方案、使用流程、交付成果、竞争优势、适用客户或应用场景。
2. 只使用用户明确提供的信息，不得虚构产品功能、客户案例、数据、合作伙伴或技术能力。
3. 如果某类信息没有提供，直接省略对应模块，不要使用假数据或“待补充”等占位内容。
4. 优化文案表达，但不能改变原意。
5. 面向客户编写自然、专业、易理解的文案，避免出现“系统模块”“页面组件”“设计说明”等开发语言。
6. 每个页面只表达一个核心主题，禁止把所有内容挤在一个页面中。
7. 根据内容量自动拆分页面，页面数量不做硬性限制。
8. 优先使用结论式标题，不要大量使用“产品介绍”“功能展示”这类缺少信息量的标题。

二、推荐的信息结构

根据实际内容选择合适页面，不要机械套用：

1. 封面：产品名称、核心价值主张、简短说明。
2. 客户问题：客户当前面临的业务问题。
3. 产品定位：产品是什么、为谁服务、解决什么问题。
4. 方案总览：用清晰的结构展示完整产品方案。
5. 核心能力：每项重要能力单独使用一个页面说明。
6. 使用流程：展示客户如何使用产品完成任务。
7. 数据或看板：仅在内容中存在真实指标时展示。
8. 产品优势：说明产品相比传统方式的价值。
9. 应用场景：展示适用业务、角色或行业场景。
10. 实施方案：展示实施步骤、周期或交付范围。
11. 总结页：总结产品价值和下一步行动。

三、页面设计要求

1. 采用高级、克制、专业的企业级视觉风格。
2. 配色以白色、黑色、灰色为基础，根据产品内容选择一种主强调色。
3. 禁止使用廉价渐变、大面积高饱和颜色、夸张阴影和过度装饰。
4. 使用明确的信息层级、网格、留白、分隔线和对齐关系。
5. 页面中的文字、卡片、表格、图表和 SVG 必须保持统一的视觉规范。
6. 图标优先使用内联 SVG，不使用 Emoji 代替产品图标。
7. 没有真实图片素材时，使用排版、产品界面、数据结构图或 SVG 图形完成设计，不要随意引用网络图片。
8. 表格只在适合对比信息时使用，并确保移动端可读。
9. 图表必须基于用户提供的数据生成，不得为了装饰虚构数据。
10. 不要展示无实际用途的按钮、搜索框、登录入口或表单。
11. 不要添加顶部章节导航栏，使用页码、圆点和简洁的切换提示表示当前进度。

四、桌面端要求

1. 以宽屏 PC 浏览器为主要展示场景。
2. 设计基准宽度为 2043px，高度根据内容和展示需要确定。
3. 内容必须具有明确的桌面网页布局，不能只是放大后的移动端页面。
4. 控制字号和组件尺寸，避免在横屏浏览器中显得过大。
5. 主要内容放在居中的安全区域内，左右留出合理空白。
6. 每一屏应形成完整构图，不应出现内容被截断或需要横向滚动的问题。

五、移动端要求

1. 以 iPhone 16 的 393×852 CSS 视口作为设计基准。
2. 移动端必须重新组织布局，不能只是将桌面内容等比例缩小。
3. 多栏内容应切换为单栏、分组卡片、标签切换或分步骤展示。
4. 保证所有文字、按钮、图表和表格不超出屏幕宽度。
5. 移动端不得出现横向滚动条。
6. 核心操作区域应满足触摸操作需要。

六、交互要求

1. 支持鼠标滚轮切换上一页和下一页。
2. 支持键盘方向键、PageUp、PageDown 和空格键切换页面。
3. 移动端支持上下滑动切换页面。
4. 支持点击底部圆点切换页面。
5. 页面切换应有克制、流畅的过渡动画。
6. 如果内容中包含参数调整、方案选择、数据变化或产品操作流程，应实现真实可操作的前端交互。
7. 用户操作后必须有明确的视觉反馈。
8. 不得制作点击后没有任何作用的虚假按钮。
9. 遵循 prefers-reduced-motion，用户关闭动画时应减少过渡效果。

七、技术实现要求

1. 实现为完全纯前端网页，不依赖后端服务。
2. 优先使用原生 HTML、CSS 和 JavaScript。
3. 除非确有必要，不引入第三方框架和依赖。
4. 页面结构、样式、交互和图表逻辑应合理拆分，禁止把全部代码堆在一个超大文件中。
5. 对重复卡片、导航、图表和交互逻辑进行复用。
6. 所有 SVG、图表、线条和交互状态都必须真实实现，不能用截图代替。
7. 页面内容不得依赖外部网络资源，保证离线打开时仍可正常展示。
8. 所有外部输入在渲染前必须进行必要处理，避免直接使用不可信 HTML。
9. 页面必须具有基本的语义化结构、键盘可访问性和 aria 属性。
10. 不得在代码中写入密钥、Token、密码或真实客户隐私数据。

八、交付要求

请直接完成网页实现，不要只提供设计说明、伪代码或零散代码。

交付内容必须包括：

1. 完整项目文件。
2. 清晰的文件目录。
3. 可直接打开或启动的首页。
4. 桌面端和移动端响应式样式。
5. 页面切换与内容交互功能。
6. SVG 图标和图表实现。
7. 本地启动方式。
8. 构建方式。
9. 基础验证脚本或测试方法。

如果当前环境允许操作项目文件，请直接创建和修改文件，并完成构建验证，不要在聊天中重复粘贴全部代码。

如果当前环境不能操作文件，请按文件分别输出完整代码，不得使用“其余代码省略”等表达。

九、完成前自检

1. 是否完整使用了用户提供的真实内容。
2. 是否存在自行编造的产品功能或数据。
3. 是否做到一个页面一个核心主题。
4. 是否存在内容拥挤、字体过大或组件尺寸过大的问题。
5. 桌面端是否符合 2043px 宽屏网页布局。
6. 移动端是否在 393×852 下完整显示。
7. 是否存在横向滚动、文字裁切或组件重叠。
8. 鼠标滚轮、键盘和移动端滑动是否能够切换页面。
9. 所有按钮和交互是否真实有效。
10. 所有表格、图表、SVG 和线条是否与整体视觉一致。
11. 是否能够在不依赖后端和外部网络的情况下运行。
12. 是否完成构建和桌面端、移动端实际浏览器验证。

以下是用户提供的产品内容：

--- 用户内容开始 ---

在这里粘贴产品介绍、产品方案、业务流程、功能说明、客户问题、真实数据、交付内容等原始资料。

--- 用户内容结束 ---