JULI.M 设计一个面向俄罗斯市场的电动车租赁解决方案网站。整体采用浅色商务风 + 科技蓝强调色，通过动态流程图、实时数据可视化和精心设计的微交互来体现专业感与科技感。
我根据 JULI.M 俄语网站开发思路文档，构建了一个完整的高端商务风网站，主要亮点：
设计风格
- 浅银灰底色 + 科技蓝（#0046FF）强调色，避开默认蓝紫色调
- 使用 Unbounded 作为俄文展示字体 + Onest 作为正文，完整支持西里尔字母
- 全站采用网格背景 + 噪点叠加，营造科技感
核心模块
- 导航栏：滚动时变玻璃态背景，包含「Для курьеров / Для бизнеса」双入口按钮
- Hero 区：大标题 + 三个浮动的 APP 卡片（Курьер X / Fleet X / Charge X），每张卡片展示真实界面数据，并带计数器动画
- 信任背书：Яндекс Еда、ВкусВилл、Самокат、Дептранс 等合作伙伴 Logo 跑马灯
- 系统流程图：5 节点动态流程图（Транспорт → IoT → Приложение → Сервер xDevice → ЕРНИС），点击节点查看详情，5 秒自动轮播，SVG 流线动画
- 核心优势：4 张卡片，安全 / 合规 / 效率 / 本地化
- 产品中心：6 款硬件产品（电动自行车、电动摩托车、电池、换电柜、IoT 控制器、充电柜），用 SVG 自绘的产品图，悬停微交互 + 电池进度条，支持分类筛选
- 三大 APP 展示：Tab 切换 + iPhone Mockup，每个 APP 有专属的手机界面内容
- 双入口：「Для курьеров」浅色卡 + 「Для бизнеса」深色卡形成强对比
- 资费 + 实时计算器：滑块选择数量、切换日 / 周 / 月，实时计算总价
- 合规专区：深色背景，4 项合规要点 + 莫斯科实时地图（脉冲点动画）
- FAQ：6 个高频问题折叠面板
- 联系表单：成功提交后显示绿色确认消息
- 页脚：完整链接 + 社交按钮 + 法律信息
交互动效
- 滚动触发淡入动画（IntersectionObserver）
- 数字计数器动画
- 流程图节点点击 + 自动轮播
- 产品分类筛选过渡
- APP Tab 切换的渐变过渡
- 资费计算器实时更新
- 莫斯科地图脉冲点
- 浮动 APP 卡片循环动画
- 返回顶部按钮
- 移动端汉堡菜单
所用技术:
