律师事务所官网模板 | Astro + GSAP 高动效落地页，开箱即用

基于 Astro 5 + Tailwind CSS 4 + GSAP 打造的律师事务所官网模板。开箱即用，替换品牌素材即可上线。

一家律所的官网，是委托人在见到你之前对你的第一印象。这套模板把滚动动效、双端导航、FAQ 手风琴、客户信任组件等耗时工程全部做完，你只需替换品牌素材与文案，半天内即可获得一个专业体面的律所官网。

模板亮点

1. 8 大区块，开箱即用

Navbar（双端导航）、Hero（全屏首屏）、Features（服务特色）、Mission（为什么选择我们）、Testimonials（客户评价）、CTA Banner（行动横幅）、FAQ（常见问题手风琴）、Footer 一应俱全，页面结构无需重构。

2. 专业级 GSAP 动效系统

• ScrollTrigger 滚动触发动画：区块随滚动进入视窗时依次入场
• 首屏时间轴编排：标题模糊滑入 → 副标题 → 按钮回弹落位，层层递进
• 背景视差：CTA 横幅背景随滚动联动（scrub），营造画面纵深
• stagger 交错编排：服务卡片、评价卡、FAQ 列表按节奏依次入场
• 差异化动效：左右对开式入场、标题字距收缩、评价卡旋转落位 + 头像依次弹出，拒绝千篇一律的”统一上滑”
• 工程级保障：data-animate 防闪烁机制、JS 失败自动兜底显示、prefers-reduced-motion 无障碍适配

3. 法律行业场景组件

• 服务卡片：民事 / 刑事 / 劳动法律三栏展示位，hover 阴影过渡
• 客户评价卡：头像 + 身份 + 评价语，强化委托信任
• FAQ 手风琴：daisyUI collapse 原生交互，零 JS 依赖即可展开收起
• CTA 转化横幅：深色背景 + 高亮按钮强对比，承接转化

4. 完整响应式适配

• 桌面端完整导航、移动端汉堡侧滑菜单双套方案
• 卡片三栏 / 单栏自适应，首屏全屏视觉双端一致

5. 文案数据分离，改文案零门槛

服务、评价、FAQ 文案独立存放于 src/Data 目录，修改 js 文件即改即生效，不碰布局与代码逻辑。

6. 轻量高性能

Astro 默认零客户端 JS、纯静态输出，动效脚本按需加载；构建产物小、首屏快、天然对 SEO 友好。

技术栈

技术	版本	用途
Astro	5	静态站点框架
Tailwind CSS	4	原子化样式
daisyUI	5	组件类（FAQ 手风琴等）
GSAP + ScrollTrigger	3.13	滚动动效 / 时间轴 / 视差

项目结构

legal-staff/
├── public/                  # 品牌素材（logo、favicon）
├── src/
│   ├── assets/img/          # 首屏背景图
│   ├── components/
│   │   ├── home/            # 首页区块
│   │   │   ├── header.astro        # Hero 首屏（时间轴入场）
│   │   │   ├── features.astro      # 服务特色（卡片交错入场）
│   │   │   ├── featureCard.astro   # 服务卡片
│   │   │   ├── mission.astro       # 为什么选择我们（对开入场）
│   │   │   ├── testimonials.astro  # 客户评价（旋转落位 + 头像弹出）
│   │   │   ├── homeBanner.astro    # CTA 横幅（背景视差）
│   │   │   └── FAQ.astro           # 常见问题手风琴
│   │   ├── navbar/Navbar.astro     # 双端导航
│   │   └── footer/footer.astro     # 页脚
│   ├── Data/                # 文案数据（features / testimonials / faqs）
│   ├── layouts/Layout.astro # 页面骨架
│   ├── pages/index.astro    # 页面组装
│   └── styles/global.css    # 全局样式 + 动画初始态
└── package.json

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview

Node.js >= 18.17.1。

二次开发指南

需求	操作
更换品牌	替换 public 中的 logo 与 src/assets/img 的图片
修改文案	直接编辑 src/Data 下的 js 文件，即改即生效
更换主题色	全局替换 #0B2545 主色（hover 态 #1D3A75 一并替换）
增删区块	在 src/pages/index.astro 中按需增删组件
调整动画节奏	各组件 <script> 内 duration / stagger / 位移参数

适用场景

律师事务所官网、法律咨询公司、知识产权代理、移民 / 财务 / 税务咨询等专业服务机构，也可作为高动效官网模板用于任何品牌形象站。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天上线
动画品质	需反复调优	专业动效编排开箱即用
移动端适配	需额外开发	双端导航与卡片布局已完成
中文本地化	自行处理	全站中文文案完成
维护成本	自行承担	文案数据分离，改 js 即迭代

在线预览

npm run build 后将 dist 目录部署至 Vercel / Netlify 等任意静态托管即可。

http://case.fedshare.cn/legal-staff