MeteoHealth.pro

关于项目

meteohealth.pro 是 MeteoHealth 应用的营销网站，本身就是一个独立打磨的产品。它的任务：把访客转化为 App Store 安装、通过关于天气与身体状态的文章获取自然流量，并承载应用的基础设施 — 从隐私政策到 universal links。

设计："Liquid Signal"

这个网站不像典型的应用落地页。它的核心是自研设计系统"Liquid Signal"：沉稳的杂志式排版、带技术标签（APP_STATUS、TIME_CODE、PRESSURE_Δ24H）的等宽 HUD 元素，以及大量留白。

构图的中心是用 React Three Fiber 渲染的生成式"气压场"：一幅由所选城市的气象数据实时驱动的波纹图案。天气平静时，场也平静；气压波动增大时，图案随之收紧。

核心功能

活的首屏

第一屏就是真实数据：气压、湿度、风力、24 小时气压变化，以及针对气象敏感人群的风险评估。城市可以手动选择，也可以通过地理定位获取。

SEO 博客

关于气象敏感、气压与头痛、HRV 和睡眠的文章 — 用 MDX 编写，frontmatter 经 Zod 校验，带 JSON-LD 标记和覆盖所有已发布语言的 hreflang。搜索由 Pagefind 提供，完全静态，零服务器请求。

本地化

六种语言，包括阿拉伯语：每个版式都经过 RTL 验证。URL 采用 /{locale}/… 方案且前缀必选 — 与本作品集网站相同的约定。

技术亮点

• Next.js App Router + SSG：内容页面静态生成
• WebGL 场景优雅降级：低性能设备和 prefers-reduced-motion 用户会看到海报图
• 平滑滚动使用 Lenis，滚动动画使用 GSAP
• 通过 Docker（standalone）部署到自托管的 Dokploy

医疗边界

网站刻意不提供医疗建议：每篇健康文章都仅供参考、附有免责声明，用词是"可能影响"，而非"治疗"。