The Law Corner — 律所官网模板
一套专业深蓝风格律所官网模板，HTML5 + CSS3 纯静态，响应式设计。由 Themedown AI 设计评审。免费用于个人和商业项目。
快速开始
bash
git clone https://github.com/tookit/ead-demo-thelawcorner-com.git
cd lead-demo-thelawcorner-com
# 直接用浏览器打开 index.html，或用本地服务器：
npx serve .
无需构建、无需 npm install，打开即用。
页面
| 页面 | 说明 |
|---|---|
| 首页 | 全屏Hero（背景图+渐变遮罩）+ 服务概览卡片 + 律师简介 + 客户评价 + CTA |
| 关于 | 律所故事 + 核心价值观（3列网格）+ 创始人律师详细介绍 |
| 业务领域 | 8大业务领域卡片列表（离婚、子女抚养、财产分割、调解等） |
| 客户评价 | 真实客户评价列表 + Google 评价徽章 |
| 分居流程 | 4种分居路径（协作、调解、谈判、诉讼）+ 步骤时间线 |
| 联系 | 联系表单 + 律所地址/电话/邮箱 + 地图嵌入 |
技术栈
- HTML5 — 语义化标签，SEO 友好
- CSS3 — CSS 自定义属性（变量）、Flexbox、Grid、媒体查询
- Google Fonts — Playfair Display（标题）+ Lora（副标题）+ Inter（正文）
- 原生 JavaScript — 移动菜单、滚动导航、FAQ 手风琴
特性
- 全响应式 — 移动优先，768px 以下单列布局
- 深蓝+金色品牌配色体系（CSS 变量管理，
:root定义 15 个设计 Token） - 全屏 Hero 带背景图 + 渐变遮罩
- 滚动感知固定导航栏（透明 → 深蓝背景 + 阴影）
- 服务卡片网格布局
- 律师简介卡片（头像 + BV 评级徽章）
- 核心价值观 3 列网格
- 业务领域图标列表
- 客户评价轮播 + Google 评价徽章
- 分居流程时间线
- 联系表单（Netlify 数据收集）
- 页脚多列链接 + 社交图标
- 平滑滚动 + 字体抗锯齿
设计规范
完整设计规范见 design.md — 包含色彩体系（navy + gold）、字体层级（Playfair Display / Lora / Inter）、组件行为、布局原则。
开源协议
MIT — 免费用于个人和商业项目。
