基于 HTML + SCSS + ScrollReveal 打造的英文 SaaS / 创业公司产品落地页模板。开箱即用，替换品牌素材即可上线。
面向海外市场或国际化定位的创业团队，往往卡在”官网第一屏”：找设计师出一版英文落地页动辄数千元，交期一到两周，改一个按钮颜色还要反复沟通。这套模板把 Hero 主视觉、邮件订阅、特性展示、页脚版权等创业官网的标准区块全部做完，且全站为原生英文文案，直接替换文字与品牌色即可获得一个专业级英文产品页。
模板基于原生 HTML + SCSS 构建，无任何重型框架依赖，dist 目录内已编译好最终 CSS/JS，不安装任何依赖也能直接打开运行，纯静态托管即可上线。
模板亮点
1. 完整的创业落地页信息架构
单页覆盖转化链路全部触点：Header 品牌 logo → Hero 主标题 + 邮件订阅表单（”Get early access”）→ Features 四宫格特性展示 → Newsletter 二次邮件订阅 → Footer 导航链接 / 社交入口 / 版权声明。页面结构无需重构，改文案即可上线。
2. ScrollReveal 专业级入场动画
基于 ScrollReveal 4 的滚动入场体系，标题、段落、表单依次上浮浮现；Hero 区的浏览器窗口插画与四个装饰气泡按 interval: 150ms 节奏交错缩放入场，缓动曲线统一采用 cubic-bezier(0.5, -0.01, 0, 1.005)，动画质感细腻且不喧宾夺主。
3. 全矢量 SVG 插画，零图片依赖
主视觉浏览器窗口、装饰气泡、特性图标、品牌 logo、社交图标全部为内联 SVG 手绘矢量，任意分辨率下无损显示，天然适配 Retina 屏，页面体积小、加载快，也便于直接修改配色。
4. 工程化 SCSS 架构
样式源码采用 7-1 规范组织：abstracts（变量 / 函数 / mixin / include-media 响应式方案）、base、components、layout 分层清晰；颜色以 SCSS Map 统一管理（品牌蓝 #4992F0、紫 #838DEA、青 #7CE8DD），换一套变量即可整体换肤。
5. PC 端为主的全尺寸响应式
viewport 自适应设置 + include-media 断点方案，桌面端为居中盒式（boxed）布局，窄屏自动降级为移动排版，一套模板覆盖 PC / 平板 / 手机全端展示。
6. 英文国际化文案基准
全站原生英文文案与 Google Fonts（Lato / Roboto）排版组合，适合出海产品、跨境 SaaS、独立开发者工具等需要英文官网的场景，也可作为中文产品英文版的版式起点。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML5 | – | 页面结构 |
| SCSS | – | 样式源码（已编译至 dist） |
| ScrollReveal | 4.0 | 滚动入场动画 |
| include-media | – | SCSS 响应式断点方案 |
| Google Fonts | – | Lato / Roboto 英文字体 |
项目结构
ava/
├── index.html # 入口页（英文落地页，含全部区块）
├── package.json # 可选构建脚本（SCSS 编译 / 压缩 / 本地预览）
├── dist/ # 已编译产物，直接可用
│ ├── css/style.css # 编译压缩后的样式
│ └── js/main.min.js # 动画初始化脚本
└── src/ # 工程源码（二次开发改这里）
├── js/main.js # ScrollReveal 动画配置
└── scss/
├── style.scss # 样式入口
├── abstracts/ # 变量、函数、mixin、响应式方案
├── base/ # 基础重置、排版
├── components/ # 按钮、表单样式
└── layout/ # header / hero / features / newsletter / footer 布局快速开始
纯静态模板，无需安装任何依赖（dist 内已包含编译产物）：
# 方式一：浏览器直接打开
双击 index.html 即可预览
# 方式二：本地静态服务器
python3 -m http.server 8000
# 访问 http://localhost:8000
# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 index.html 中内联 SVG logo 与各区文案 |
| 修改文案 / 链接 | index.html 内所有英文文案、href 直接修改 |
| 更换主题色 | 修改 src/scss/abstracts/_variables.scss 中的颜色 Map 后重编译，或直接改 dist/css/style.css |
| 调整动画节奏 | src/js/main.js 中 ScrollReveal 的 duration / interval 参数 |
| 增删区块 | index.html 按 <section> 标签复制或删除对应区块即可 |
适用场景
出海 SaaS 产品官网、独立开发者工具落地页、创业公司 Early Access 收集页、移动 App 官网、英文产品演示页，也可作为任何需要专业英文单页站的通用版式底稿。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~5 天起 | 半小时替换文案上线 |
| 页面还原度 | 依赖设计稿质量 | 专业版式 + 全矢量插画开箱即用 |
| 交互与动画 | 需自研入场动画 | ScrollReveal 动效体系已调优 |
| 响应式适配 | 需额外开发 | PC / 平板 / 手机全端已覆盖 |
| 维护成本 | 自行承担 | SCSS 分层架构，换肤改文案即可 |
在线预览
将项目目录（含 index.html 与 dist/）部署至 GitHub Pages、Vercel、Netlify 等任意静态托管即可在线访问。
评论0