pangolin/design/ui_kits/website

穿山甲 VPN — 官网宣传页 UI Kit

品牌官网落地页,沿用暖大地色设计系统。含 产品 / 定价 / 下载 / 文档 / Blog 全部板块,定价结构参考 Bitwarden(分档 + 功能对比表)但配色保持 clay 暖调。

运行

打开 index.html(响应式:≤980px 单列堆叠,>980px 桌面两列/多列)。

• 顶栏:品牌标 + 锚点导航(产品/定价/下载/文档/Blog)+ 中/EN 切换 + 登录 + 立即下载;滚动时毛玻璃 + 描边。
• Hero:大标题 + 连接卡(success 态 orb + 速率 + 当前节点)+ 平台条。
• 产品:6 个功能卡(一键连接/智能分流/80+节点/无日志/Kill Switch/多端同步)。
• 定价:月/年切换(年付 -20%)+ 3 档套餐(专业版 clay 渐变高亮「最受欢迎」)+ 为何无支付按钮说明 + 渠道 chips + 功能对比表。
• 下载:5 平台卡(iOS/Android/macOS/Windows/Linux)。
• 文档:4 个文档入口(快速开始/常见问题/协议安全/隐私政策)。
• Blog:3 篇文章卡。
• CTA band + 页脚(渠道/资源/服务时间)。

文件

文件	内容
index.html	页面结构(语义化 + data-i18n 键)
website.css	全部样式,基于 ../../colors_and_type.css 令牌
site.js	i18n 字典(中/EN 全量切换,持久化)+ 月/年定价切换 + 滚动毛玻璃

关键模式

• 颜色/字体/圆角/阴影全部走设计系统语义 token;暖大地色,无蓝紫。
• 单语言显示:中/EN 通过顶栏段控整页切换(data-i18n + JS 字典),不并排。
• App 内无支付 原则延伸到官网:定价区不放支付表单,CTA 为「获取激活码」+ 外部渠道(自助发卡/Telegram/LINE/邮箱),并有显式说明。
• 连接卡 orb 复用 App 核心连接键的 success 态视觉(满白环 + 盾勾 + 计时 + 绿光晕)。
• 图标 Lucide(CDN);品牌标内联 SVG(行走穿山甲,与全系统一致)。
• 演示渠道/价格为占位,落地替换。