太阳能光伏制造企业官网 – 瑞士网格风 .

请根据以下 B2B 工业品牌背景与需求，为我们生成“首页 (Homepage)”的高真 MVP Demo 静态 HTML 页面。 # 1. 品牌背景与设计风格 - **项目名称：** 宇航光能 (AeroSolar Technology) - 一家专注于 N 型 TOPCon 及异质结 (HJT) 高效光伏组件的全球化 Tier 1 级别制造商。 - **目标受众：** 海外 EPC 总承包商、大型地面电站投资商、区域分销商及能源部官员。 - **视觉美学：** - 严格采用 **Swiss Style (瑞士网格风格)**，强调极致的数学美感、严谨的对齐线与秩序感。 - 界面要体现“大厂重工业”的体量感。采用清晰的粗线框（Thick Borders，如 `border-2 border-black` 或深灰）将页面划分为宏大的网格舱，带有强烈的结构工业风。 - 配色以工业科技感为主：纯白背景，搭配深邃的“科技钛灰/碳黑”作为主色，点缀 10% 极具爆发力的“极光绿 (Aero Green, 如 #10b981 或 #00ff66)”或“深邃太阳蓝”作为科技感的高亮提示。 - 字体：使用冷峻、硬朗的现代化无衬线体（如 Inter 或 Roboto Mono），多用大字重（Bold/Black）、全大写（Uppercase）的字母排列来表现硬核工业感。 # 2. 核心页面区块与 Alpine.js 交互需求 页面需包含以下自包含的模块（Component Blocks），并预留好对应的 Alpine.js 逻辑： ### Block 1: Modular Mega Header & Hero (巨型首屏与全局控制) - Layout: 顶部导航栏右侧包含一个语言切换（EN / DE / ES）。Hero 区域左侧为超大、加粗的标语（如 "POWERING NEXT-GEN ENERGY GRID."），右侧为光伏电站高空俯瞰图或组件精密微距渲染图。 - Interaction (Alpine.js): 1. 模拟**多语言切换下拉框**：点击后展示下拉菜单（通过 `x-show` 与 `x-on:click.outside` 触发展现）。 2. 首屏包含一个**「计算我的电站收益 (ROI Calculator Preview)」**的极简悬浮小窗，点击可展开基础计算交互。 ### Block 2: Live Performance Metrics (实时生产与发电数据面板) - Layout: 一组大字报式的数字矩阵（4列网格），展示“全球累计出货量 (GW)”、“年度碳减排 (Tons)”、“组件最高效率 (%)”等核心数据。 - Interaction (Alpine.js): 利用 Alpine 的 `x-init` 结合定时器，实现数字从 0 开始向上递增滚动到目标数值的动画（Counter Animation），增强数据科技感。 ### Block 3: Tech Matrix & Product Segment (产品技术矩阵对比) - Layout: 左右分栏或大网格，展示两条核心产品线：Aero-X (地面电站级) 和 Aero-R (分布式屋顶级)。 - Interaction (Alpine.js): 打造一个**「参数动态对比舱 (Spec Comparison Tool)」**。用户在产品卡片上勾选复选框（利用 `x-model` 绑定数组），下方动态浮现出一个对比横条，显示已选组件的“最大功率、工作温度、衰减率”等参数的直观对比。 ### Block 4: Global Footprint (全球供应链与服务网络) - Layout: 占据大面积版面的世界地图热点图（使用高质感 SVG 地图或极简风格插图）。 - Interaction (Alpine.js): 地图上分布数个关键锚点（如北美、欧洲、中东生产基地）。使用 Alpine.js 实现**锚点悬浮气泡 (Tooltip/Popover)** 交互，当鼠标 Hover 或 Click 某个国家锚点时，无缝弹窗显示该区域的“分公司名称、GW 级产能、售后团队联系方式”。 ### Block 5: Technical Resource Hub (白皮书与技术规格下载) - Layout: 类似于工业说明书的严谨列表，展示最新的产品 Datasheet、TÜV 认证证书、技术白皮书。 - Interaction (Alpine.js): 用户点击下载按钮时，按钮状态通过 Alpine 动态改变（显示 `Loading...` 动画，2秒后变为 `Downloaded` 成功勾选状态），模拟真实的 B2B 留资下载体验。 # 3. 交付约束 - 必须严格遵循系统提示词中的技术栈（HTML5 + Tailwind CDN + Alpine.js + Lucide Icons）。 - 所有图片请使用来自 Unsplash、符合新能源、工业制造、宏大光伏电站场景的高清图片 URL。 - 代码必须是 100% 全量输出，结构高度模块化，确保各区块的 `x-data` 相互独立，便于未来向 WordPress 积木模板迁移。