高端建筑事务所官网

建筑事务所 Meridian Architecture 的中英双语全栈官网，深色配金铜点缀，展示项目、团队和获奖，带登录、留言簿和流式 AI 聊天。

正在加载预览…

从这段提示词开始

高端建筑事务所 Meridian Architecture 的中英双语全栈官网，极简建筑美学、黑灰深色配金铜点缀，展示项目、理念、团队和获奖，后端带账号认证、联系表单、留言簿和流式 AI 聊天。

# App 9 — 建筑设计事务所全栈网站 Prompt

## 网站主题与定位

创建一个名为「Meridian Architecture」的高端建筑设计事务所官网，展示公司的项目作品、设计理念、团队成员、获奖经历，并提供联系表单和留言簿功能。整体风格为极简主义建筑美学，深色系设计（黑/深灰），配合金铜色点缀，营造高端专业的视觉印象。网站包含全栈后端（用户认证、联系表单存储、留言簿、AI 聊天助手），支持**中英文双语**（仅支持中文和英文）。

## 技术架构

- **前端框架**: React 18 + TypeScript + Vite
- **路由**: React Router（`/` 首页, `/login` 登录, `/admin` 管理后台）
- **样式方案**: Tailwind CSS + 大量内联样式（使用 style 属性）
- **动画引擎**: GSAP + ScrollTrigger（入场动画、视差滚动）
- **后端**: Express.js + tRPC（类型安全 API）
- **数据库**: MySQL + Drizzle ORM
- **认证**: OAuth（Kimi 登录）+ 本地账号密码（bcrypt 加密）
- **AI 聊天**: 集成 AI 对话助手（流式响应）
- **图标**: Lucide React
- **状态管理**: React Context (I18n)

### 数据库 Schema（Drizzle ORM + MySQL）
- **users**: id, unionId, name, email, avatar, role(user/admin), createdAt, updatedAt, lastSignInAt
- **localUsers**: id, username, displayName, email, passwordHash, role, createdAt
- **contacts**: id, name, email, subject, message, createdAt
- **guestbookEntries**: id, name, email, message, createdAt
- **chatMessages**: id, content, role, sessionId, createdAt

## 全局视觉系统

### 配色方案
- 主背景色: `#1A1A1A`（深灰黑）
- 辅助深色: `#141414`, `#111`
- 纯黑: `#000000`
- 主文字色: `#FFFFFF`
- 次要文字色: `rgba(255, 255, 255, 0.8)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- 品牌金铜色: `#C4A77D`（用于标签、高亮、按钮、链接悬停）
- 分隔线: `rgba(255, 255, 255, 0.1)`
- 选区背景: `#C4A77D`，选区文字: `#1A1A1A`
- 滚动条轨道: `#1A1A1A`，滑块: `#333`，悬停: `#555`

### 字体系统
- **标题字体**: 系统默认（`"Helvetica Neue", Helvetica, Arial, sans-serif`），通过 GSAP 以超大字号渲染
- **正文字体**: `"Helvetica Neue", Helvetica, Arial, sans-serif`（body 设置）
- **代码/标签字体**: `font-mono` 用于小标签
- body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`
- `scroll-behavior: smooth`

### 间距体系
- 内容区水平边距: `clamp(24px, 4vw, 80px)` 或 `paddingLeft`/`paddingRight`
- Section 垂直间距: 各 section 自定义（100vh hero, 其余由内容决定）
- 标签与标题间距: `mb-6` (24px)
- 段落间距: `mt-12`, `mt-24`

## Hero 区设计

- **全屏视频背景**: 100vh, absolute inset-0, objectFit: cover
- 视频: `/videos/hero-skyscraper.mp4`, autoPlay, muted, loop, playsInline
- 渐变遮罩: `linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.1) 40%, rgba(26,26,26,0.6) 100%)`
- **GSAP 入场动画**:
  - 标签「EST. 2008」: opacity 0→1, duration 0.6s, delay 0.4s, ease power2.out, 字号 10px, 字间距 0.1em, 颜色 `#C4A77D`
  - 标题「Shaping the Horizon」: opacity 0→1, y 60→0, duration 1s, delay 0.6s, ease power3.out, 字号 `clamp(48px, 8vw, 120px)`, fontWeight 300(light), 字间距 -0.03em, 大写
  - 副标题: opacity 0→1, y 30→0, duration 0.8s, delay 1.2s, 字号 18px, 颜色 rgba(255,255,255,0.8), maxWidth 480px, 行高 1.8
  - CTA 按钮: opacity 0→1, delay 1.6s, 字号 12px(xs), 字间距 0.05em, 白色边框 1px solid #fff, padding 14px 40px, hover 反色(bg white, color #1A1A1A)
- **滚动视差**: 内容区随滚动 y -150px + opacity→0, scrub: true, start 'top top', end '50% top'
- **滚动指示器**: 底部居中，1px 宽 60px 高的白色线条, 5px 白色圆点从 top 动画到 y 44, opacity→0, duration 2s, repeat -1

## 每个 Section 的详细描述

### Projects Section (`#projects`)
- 标签: 字号 10px, 字间距 0.2em, 颜色 `#C4A77D`, 大写
- 标题: 字号 `clamp(36px, 6vw, 72px)`, fontWeight 300, 行高 1, 大写
- 4个项目卡片，每个包含:
  - 编号（01-04）: 字号 11px, 字间距 0.1em, 颜色 `#C4A77D`
  - 项目图片: 宽高比 16:10, objectFit cover, hover 时 scale(1.05), transition 0.8s
  - 图片渐变遮罩: `linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)`
  - 项目名称: 字号 28px, fontWeight 300
  - 位置: 字号 12px, 颜色 `#C4A77D`
  - 描述: 字号 14px, 颜色 rgba(255,255,255,0.7)
- GSAP: 项目卡片 stagger 0.15s 入场, opacity 0→1, y 60→0, duration 0.8s, start '20% bottom'

### Philosophy Section (`#philosophy`)
- 两列布局: 左侧标题，右侧描述
- 引言标题: 字号 `clamp(28px, 4vw, 48px)`, fontWeight 300, 行高 1.3
- 描述段落: 字号 16px, 颜色 rgba(255,255,255,0.7), 行高 1.8
- 统计数据 3 列:
  - 数字: 字号 `clamp(36px, 5vw, 60px)`, fontWeight 200
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - 数据: 148+ 项目, 32 国家, 26 奖项
- 视频: `/videos/philosophy.mp4`, 16:9 比例, 视口进入时自动播放
- GSAP 滚动入场: 数字 countUp 动画, duration 2s, ease power1.out

### Team Section (`#team`)
- 8 位团队成员网格展示
- 布局: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`, gap: 根据卡片间距
- 成员卡片:
  - AI 生成的头像图 (aspect-square)
  - 名字: 字号 16px, fontWeight 400
  - 职位: 字号 12px, 颜色 `#C4A77D`
  - 专长: 字号 11px, 颜色 rgba(255,255,255,0.5)
  - hover: 卡片边框从 transparent 变为 rgba(196,167,125,0.3), transition 0.3s
- GSAP stagger 0.08s 入场

### Awards Section (`#awards`)
- 两列: 左侧奖项列表, 右侧出版物
- 奖项: 10 条, 时间线展示
  - 年份: 字号 12px, 颜色 `#C4A77D`, 固定宽度
  - 奖项名: 字号 14px
  - 项目名: 字号 12px, 颜色 rgba(255,255,255,0.5)
  - 分隔线: `1px solid rgba(255,255,255,0.05)`
  - hover: 背景变为 `rgba(255,255,255,0.02)`
- 出版物: 6 本, 类似结构

### Contact Section (`#contact`)
- 两列布局: 左侧联系信息 + 联系表单, 右侧留言簿
- 联系表单:
  - 输入框: 无背景, 底部边框 `1px solid rgba(255,255,255,0.1)`, focus 时变为 `#C4A77D`
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - Subject 下拉: 4 个选项
  - 提交按钮: 全宽, `#C4A77D` 背景, 黑色文字, hover 变白色, padding 14px
- 留言簿表单: 类似结构, 提交到后端数据库

### Footer
- 深色背景, 上方 1px 分隔线 `rgba(255,255,255,0.1)`
- 版权信息: 字号 12px, 颜色 rgba(255,255,255,0.4)
- 返回顶部链接, 隐私政策, 使用条款

## 导航设计

- 固定顶部导航栏: `position: fixed`, z-index: 50
- 初始透明, 滚动后 `background: rgba(26,26,26,0.95)`, `backdrop-filter: blur(12px)`
- 高度: 根据内容, 水平边距 `clamp(24px, 4vw, 80px)`
- Logo: 字号 12px, 字间距 0.15em, 大写, 白色, hover 变 `#C4A77D`
- 导航链接: 字号 10px, 字间距 0.08em, 大写, 颜色 rgba(255,255,255,0.7), hover 变 `#C4A77D`
- 语言切换: 下拉选择器, 5 种语言（但双语版仅 en/zh）
- 登录/登出按钮: 细边框样式

## 中英双语切换实现方式

- 使用 React Context (`I18nProvider`) 管理语言状态
- 翻译数据直接嵌入 `i18n.tsx`，类型为 `Record<Lang, Translations>`
- `t()` 函数支持点号路径访问: `t('hero.headline')`, `t('projects.items')` 返回数组
- 支持 RTL（阿拉伯语），但双语版仅需 LTR
- 语言存储在 localStorage
- 切换时更新 `document.documentElement.dir` 和 `document.documentElement.lang`

## AI 聊天助手 (ChatWidget)

- 固定右下角浮动按钮: 56px 圆形, `#C4A77D` 背景, MessageCircle 图标
- 聊天面板: 360px 宽, 480px 高, 深色背景 `#1A1A1A`, 圆角
- 消息气泡: 
  - AI 消息: `rgba(255,255,255,0.05)` 背景
  - 用户消息: `#C4A77D` 背景, `#1A1A1A` 文字
  - 头像: 28px 圆形, AI 用 Bot 图标, 用户用 User 图标
- 输入框: 透明背景, 底部边框分隔
- 通过 tRPC mutation 发送消息到后端 AI 服务

## 图片/视频资源的 AI 生成指令

### 视频
1. **hero-skyscraper.mp4**: 现代摩天大楼的航拍视频，玻璃幕墙反射天空，缓慢上升的镜头，日落时分金色光线
2. **philosophy.mp4**: 建筑工匠手工打磨混凝土/木材表面的特写，展示材料质感和制作工艺

### 图片
1. **project-1.jpg**: 参数化外立面的未来主义摩天大楼(Aurora Tower)，迪拜天际线，日落
2. **project-2.jpg**: 木与混凝土结构的日式文化中心(Nara Cultural Center)，森林中，自然光
3. **project-3.jpg**: 地中海风格曲线住宅塔楼(Viento Residences)，白色建筑配阳台绿植
4. **project-4.jpg**: 漂浮在港口的木质展馆(Meridian Pavilion)，哥本哈根水面倒影
5. **team-1~8.jpg**: 8位专业建筑师肖像照，多元化国际团队，专业服装，中性灰色背景

## 响应式设计策略

- 标题使用 `clamp()`: `clamp(48px, 8vw, 120px)`, `clamp(36px, 6vw, 72px)`
- 内容区边距: `clamp(24px, 4vw, 80px)`
- 项目网格: `grid-cols-1 md:grid-cols-2`
- 团队网格: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
- 移动端导航: 汉堡菜单
- 聊天面板: `maxWidth: calc(100vw - 48px)`

## 特殊交互效果

### GSAP 动画系统
- Hero 入场: 多元素 stagger 动画，delay 0.4~1.6s
- 滚动视差: Hero 内容随滚动上移+淡出
- 项目卡片: 滚动进入视口时 stagger 入场
- 数字 countUp: Philosophy 统计数字从 0 递增
- 图片 hover: `scale(1.05)`, transition 0.8s

### 滚动指示器动画
- 垂直线条 + 圆点下落循环
- GSAP 无限循环: y 0→44, opacity 1→0, duration 2s, ease power1.in

## CSS 动画和过渡效果的具体参数

- 导航背景过渡: `transition-all duration-500`（滚动触发）
- 项目图片 hover: `transform: scale(1.05)`, `transition: 0.8s ease`
- 团队卡片边框: `transition: border-color 0.3s ease`
- CTA 按钮: hover 反色, `transition-all duration-400`
- 奖项行 hover 背景: `transition: background 0.2s ease`
- 聊天面板打开: 直接渲染（无过渡）
- 聊天按钮: `hover:scale-110`, `transition-all duration-300`

换成室内设计公司

把行业从建筑事务所换成室内设计公司，作品改成空间案例，深色金铜配色和后端结构不变。

用建站智能体改写

# App 9 — 建筑设计事务所全栈网站 Prompt

## 网站主题与定位

创建一个名为「Meridian Architecture」的高端建筑设计事务所官网，展示公司的项目作品、设计理念、团队成员、获奖经历，并提供联系表单和留言簿功能。整体风格为极简主义建筑美学，深色系设计（黑/深灰），配合金铜色点缀，营造高端专业的视觉印象。网站包含全栈后端（用户认证、联系表单存储、留言簿、AI 聊天助手），支持**中英文双语**（仅支持中文和英文）。

## 技术架构

- **前端框架**: React 18 + TypeScript + Vite
- **路由**: React Router（`/` 首页, `/login` 登录, `/admin` 管理后台）
- **样式方案**: Tailwind CSS + 大量内联样式（使用 style 属性）
- **动画引擎**: GSAP + ScrollTrigger（入场动画、视差滚动）
- **后端**: Express.js + tRPC（类型安全 API）
- **数据库**: MySQL + Drizzle ORM
- **认证**: OAuth（Kimi 登录）+ 本地账号密码（bcrypt 加密）
- **AI 聊天**: 集成 AI 对话助手（流式响应）
- **图标**: Lucide React
- **状态管理**: React Context (I18n)

### 数据库 Schema（Drizzle ORM + MySQL）
- **users**: id, unionId, name, email, avatar, role(user/admin), createdAt, updatedAt, lastSignInAt
- **localUsers**: id, username, displayName, email, passwordHash, role, createdAt
- **contacts**: id, name, email, subject, message, createdAt
- **guestbookEntries**: id, name, email, message, createdAt
- **chatMessages**: id, content, role, sessionId, createdAt

## 全局视觉系统

### 配色方案
- 主背景色: `#1A1A1A`（深灰黑）
- 辅助深色: `#141414`, `#111`
- 纯黑: `#000000`
- 主文字色: `#FFFFFF`
- 次要文字色: `rgba(255, 255, 255, 0.8)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- 品牌金铜色: `#C4A77D`（用于标签、高亮、按钮、链接悬停）
- 分隔线: `rgba(255, 255, 255, 0.1)`
- 选区背景: `#C4A77D`，选区文字: `#1A1A1A`
- 滚动条轨道: `#1A1A1A`，滑块: `#333`，悬停: `#555`

### 字体系统
- **标题字体**: 系统默认（`"Helvetica Neue", Helvetica, Arial, sans-serif`），通过 GSAP 以超大字号渲染
- **正文字体**: `"Helvetica Neue", Helvetica, Arial, sans-serif`（body 设置）
- **代码/标签字体**: `font-mono` 用于小标签
- body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`
- `scroll-behavior: smooth`

### 间距体系
- 内容区水平边距: `clamp(24px, 4vw, 80px)` 或 `paddingLeft`/`paddingRight`
- Section 垂直间距: 各 section 自定义（100vh hero, 其余由内容决定）
- 标签与标题间距: `mb-6` (24px)
- 段落间距: `mt-12`, `mt-24`

## Hero 区设计

- **全屏视频背景**: 100vh, absolute inset-0, objectFit: cover
- 视频: `/videos/hero-skyscraper.mp4`, autoPlay, muted, loop, playsInline
- 渐变遮罩: `linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.1) 40%, rgba(26,26,26,0.6) 100%)`
- **GSAP 入场动画**:
  - 标签「EST. 2008」: opacity 0→1, duration 0.6s, delay 0.4s, ease power2.out, 字号 10px, 字间距 0.1em, 颜色 `#C4A77D`
  - 标题「Shaping the Horizon」: opacity 0→1, y 60→0, duration 1s, delay 0.6s, ease power3.out, 字号 `clamp(48px, 8vw, 120px)`, fontWeight 300(light), 字间距 -0.03em, 大写
  - 副标题: opacity 0→1, y 30→0, duration 0.8s, delay 1.2s, 字号 18px, 颜色 rgba(255,255,255,0.8), maxWidth 480px, 行高 1.8
  - CTA 按钮: opacity 0→1, delay 1.6s, 字号 12px(xs), 字间距 0.05em, 白色边框 1px solid #fff, padding 14px 40px, hover 反色(bg white, color #1A1A1A)
- **滚动视差**: 内容区随滚� y -150px + opacity→0, scrub: true, start 'top top', end '50% top'
- **滚动指示器**: 底部居中，1px 宽 60px 高的白色线条, 5px 白色圆点从 top 动画到 y 44, opacity→0, duration 2s, repeat -1

## 每个 Section 的详细描述

### Projects Section (`#projects`)
- 标签: 字号 10px, 字间距 0.2em, 颜色 `#C4A77D`, 大写
- 标题: 字号 `clamp(36px, 6vw, 72px)`, fontWeight 300, 行高 1, 大写
- 4个项目卡片，每个包含:
  - 编号（01-04）: 字号 11px, 字间距 0.1em, 颜色 `#C4A77D`
  - 项目图片: 宽高比 16:10, objectFit cover, hover 时 scale(1.05), transition 0.8s
  - 图片渐变遮罩: `linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)`
  - 项目名称: 字号 28px, fontWeight 300
  - 位置: 字号 12px, 颜色 `#C4A77D`
  - 描述: 字号 14px, 颜色 rgba(255,255,255,0.7)
- GSAP: 项目卡片 stagger 0.15s 入场, opacity 0→1, y 60→0, duration 0.8s, start '20% bottom'

### Philosophy Section (`#philosophy`)
- 两列布局: 左侧标题，右侧描述
- 引言标题: 字号 `clamp(28px, 4vw, 48px)`, fontWeight 300, 行高 1.3
- 描述段落: 字号 16px, 颜色 rgba(255,255,255,0.7), 行高 1.8
- 统计数据 3 列:
  - 数字: 字号 `clamp(36px, 5vw, 60px)`, fontWeight 200
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - 数据: 148+ 项目, 32 国家, 26 奖项
- 视频: `/videos/philosophy.mp4`, 16:9 比例, 视口进入时自动播放
- GSAP 滚动入场: 数字 countUp 动画, duration 2s, ease power1.out

### Team Section (`#team`)
- 8 位团队成员网格展示
- 布局: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`, gap: 根据卡片间距
- 成员卡片:
  - AI 生成的头像图 (aspect-square)
  - 名字: 字号 16px, fontWeight 400
  - 职位: 字号 12px, 颜色 `#C4A77D`
  - 专长: 字号 11px, 颜色 rgba(255,255,255,0.5)
  - hover: 卡片边框从 transparent 变为 rgba(196,167,125,0.3), transition 0.3s
- GSAP stagger 0.08s 入场

### Awards Section (`#awards`)
- 两列: 左侧奖项列表, 右侧出版物
- 奖项: 10 条, 时间线展示
  - 年份: 字号 12px, 颜色 `#C4A77D`, 固定宽度
  - 奖项名: 字号 14px
  - 项目名: 字号 12px, 颜色 rgba(255,255,255,0.5)
  - 分隔线: `1px solid rgba(255,255,255,0.05)`
  - hover: 背景变为 `rgba(255,255,255,0.02)`
- 出版物: 6 本, 类似结构

### Contact Section (`#contact`)
- 两列布局: 左侧联系信息 + 联系表单, 右侧留言簿
- 联系表单:
  - 输入框: 无背景, 底部边框 `1px solid rgba(255,255,255,0.1)`, focus 时变为 `#C4A77D`
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - Subject 下拉: 4 个选项
  - 提交按钮: 全宽, `#C4A77D` 背景, 黑色文字, hover 变白色, padding 14px
- 留言簿表单: 类似结构, 提交到后端数据库

### Footer
- 深色背景, 上方 1px 分隔线 `rgba(255,255,255,0.1)`
- 版权信息: 字号 12px, 颜色 rgba(255,255,255,0.4)
- 返回顶部链接, 隐私政策, 使用条款

## 导航设计

- 固定顶部导航栏: `position: fixed`, z-index: 50
- 初始透明, 滚动后 `background: rgba(26,26,26,0.95)`, `backdrop-filter: blur(12px)`
- 高度: ��据内容, 水平边距 `clamp(24px, 4vw, 80px)`
- Logo: 字号 12px, 字间距 0.15em, 大写, 白色, hover 变 `#C4A77D`
- 导航链接: 字号 10px, 字间距 0.08em, 大写, 颜色 rgba(255,255,255,0.7), hover 变 `#C4A77D`
- 语言切换: 下拉选择器, 5 种语言（但双语版仅 en/zh）
- 登录/登出按钮: 细边框样式

## 中英双语切换实现方式

- 使用 React Context (`I18nProvider`) 管理语言状态
- 翻译数据直接嵌入 `i18n.tsx`，类型为 `Record<Lang, Translations>`
- `t()` 函数支持点号路径访问: `t('hero.headline')`, `t('projects.items')` 返回数组
- 支持 RTL（阿拉伯语），但双语版仅需 LTR
- 语言存储在 localStorage
- 切换时更新 `document.documentElement.dir` 和 `document.documentElement.lang`

## AI 聊天助手 (ChatWidget)

- 固定右下角浮动按钮: 56px 圆形, `#C4A77D` 背景, MessageCircle 图标
- 聊天面板: 360px 宽, 480px 高, 深色背景 `#1A1A1A`, 圆角
- 消息气泡: 
  - AI 消息: `rgba(255,255,255,0.05)` 背景
  - 用户消息: `#C4A77D` 背景, `#1A1A1A` 文字
  - 头像: 28px 圆形, AI 用 Bot 图标, 用户用 User 图标
- 输入框: 透明背景, 底部边框分隔
- 通过 tRPC mutation 发送消息到后端 AI 服务

## 图片/视频资源的 AI 生成指令

### 视频
1. **hero-skyscraper.mp4**: 现代摩天大楼的航拍视频，玻璃幕墙反射天空，缓慢上升的镜头，日落时分金色光线
2. **philosophy.mp4**: 建筑工匠手工打磨混凝土/木材表面的特写，展示材料质感和制作工艺

### 图片
1. **project-1.jpg**: 参数化外立面的未来主义摩天大楼(Aurora Tower)，迪拜天际线，日落
2. **project-2.jpg**: 木与混凝土结构的日式文化中心(Nara Cultural Center)，森林中，自然光
3. **project-3.jpg**: 地中海风格曲线住宅塔楼(Viento Residences)，白色建筑配阳台绿植
4. **project-4.jpg**: 漂浮在港口的木质展馆(Meridian Pavilion)，哥本哈根水面倒影
5. **team-1~8.jpg**: 8位专业建筑师肖像照，多元化国际团队，专业服装，中性灰色背景

## 响应式设计策略

- 标题使用 `clamp()`: `clamp(48px, 8vw, 120px)`, `clamp(36px, 6vw, 72px)`
- 内容区边距: `clamp(24px, 4vw, 80px)`
- 项目网格: `grid-cols-1 md:grid-cols-2`
- 团队网格: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
- 移动端导航: 汉堡菜单
- 聊天面板: `maxWidth: calc(100vw - 48px)`

## 特殊交互效果

### GSAP 动画系统
- Hero 入场: 多元素 stagger 动画，delay 0.4~1.6s
- 滚动视差: Hero 内容随滚动上移+淡出
- 项目卡片: 滚动进入视口时 stagger 入场
- 数字 countUp: Philosophy 统计数字从 0 递增
- 图片 hover: `scale(1.05)`, transition 0.8s

### 滚动指示器动画
- 垂直线条 + 圆点下落循环
- GSAP 无限循环: y 0→44, opacity 1→0, duration 2s, ease power1.in

## CSS 动画和过渡效果的具体参数

- 导航背景过渡: `transition-all duration-500`（滚动触发）
- 项目图片 hover: `transform: scale(1.05)`, `transition: 0.8s ease`
- 团队卡片边框: `transition: border-color 0.3s ease`
- CTA 按钮: hover 反色, `transition-all duration-400`
- 奖项行 hover 背景: `transition: background 0.2s ease`
- 聊天面板打开: 直接渲染（无过渡）
- 聊天按钮: `hover:scale-110`, `transition-all duration-300`

换成明亮极简

把黑灰深色换成明亮极简，大面积白底配细线和金铜点缀，其余结构和后端不变。

用建站智能体改写

# App 9 — 建筑设计事务所全栈网站 Prompt

## 网站主题与定位

创建一个名为「Meridian Architecture」的高端建筑设计事务所官网，展示公司的项目作品、设计理念、团队成员、获奖经历，并提供联系表单和留言簿功能。整体风格为极简主义建筑美学，深色系设计（黑/深灰），配合金铜色点缀，营造高端专业的视觉印象。网站包含全栈后端（用户认证、联系表单存储、留言簿、AI 聊天助手），支持**中英文双语**（仅支持中文和英文）。

## 技术架构

- **前端框架**: React 18 + TypeScript + Vite
- **路由**: React Router（`/` 首页, `/login` 登录, `/admin` 管理后台）
- **样式方案**: Tailwind CSS + 大量内联样式（使用 style 属性）
- **动画引擎**: GSAP + ScrollTrigger（入场动画、视差滚动）
- **后端**: Express.js + tRPC（类型安全 API）
- **数据库**: MySQL + Drizzle ORM
- **认证**: OAuth（Kimi 登录）+ 本地账号密码（bcrypt 加密）
- **AI 聊天**: 集成 AI 对话助手（流式响应）
- **图标**: Lucide React
- **状态管理**: React Context (I18n)

### 数据库 Schema（Drizzle ORM + MySQL）
- **users**: id, unionId, name, email, avatar, role(user/admin), createdAt, updatedAt, lastSignInAt
- **localUsers**: id, username, displayName, email, passwordHash, role, createdAt
- **contacts**: id, name, email, subject, message, createdAt
- **guestbookEntries**: id, name, email, message, createdAt
- **chatMessages**: id, content, role, sessionId, createdAt

## 全局视觉系统

### 配色方案
- 主背景色: `#1A1A1A`（深灰黑）
- 辅助深色: `#141414`, `#111`
- 纯黑: `#000000`
- 主文字色: `#FFFFFF`
- 次要文字色: `rgba(255, 255, 255, 0.8)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- 品牌金铜色: `#C4A77D`（用于标签、高亮、按钮、链接悬停）
- 分隔线: `rgba(255, 255, 255, 0.1)`
- 选区背景: `#C4A77D`，选区文字: `#1A1A1A`
- 滚动条轨道: `#1A1A1A`，滑块: `#333`，悬停: `#555`

### 字体系统
- **标题字体**: 系统默认（`"Helvetica Neue", Helvetica, Arial, sans-serif`），通过 GSAP 以超大字号渲染
- **正文字体**: `"Helvetica Neue", Helvetica, Arial, sans-serif`（body 设置）
- **代码/标签字体**: `font-mono` 用于小标签
- body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`
- `scroll-behavior: smooth`

### 间距体系
- 内容区水平边距: `clamp(24px, 4vw, 80px)` 或 `paddingLeft`/`paddingRight`
- Section 垂直间距: 各 section 自定义（100vh hero, 其余由内容决定）
- 标签与标题间距: `mb-6` (24px)
- 段落间距: `mt-12`, `mt-24`

## Hero 区设计

- **全屏视频背景**: 100vh, absolute inset-0, objectFit: cover
- 视频: `/videos/hero-skyscraper.mp4`, autoPlay, muted, loop, playsInline
- 渐变遮罩: `linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.1) 40%, rgba(26,26,26,0.6) 100%)`
- **GSAP 入场动画**:
  - 标签「EST. 2008」: opacity 0→1, duration 0.6s, delay 0.4s, ease power2.out, 字号 10px, 字间距 0.1em, 颜色 `#C4A77D`
  - 标题「Shaping the Horizon」: opacity 0→1, y 60→0, duration 1s, delay 0.6s, ease power3.out, 字号 `clamp(48px, 8vw, 120px)`, fontWeight 300(light), 字间距 -0.03em, 大写
  - 副标题: opacity 0→1, y 30→0, duration 0.8s, delay 1.2s, 字号 18px, 颜色 rgba(255,255,255,0.8), maxWidth 480px, 行高 1.8
  - CTA 按钮: opacity 0→1, delay 1.6s, 字号 12px(xs), 字间距 0.05em, 白色边框 1px solid #fff, padding 14px 40px, hover 反色(bg white, color #1A1A1A)
- **滚动视差**: 内容区随滚动 y -150px + opacity→0, scrub: true, start 'top top', end '50% top'
- **滚动指示器**: 底部居中，1px 宽 60px 高的白色线条, 5px 白色圆点从 top 动画到 y 44, opacity→0, duration 2s, repeat -1

## 每个 Section 的详细描述

### Projects Section (`#projects`)
- 标签: 字号 10px, 字间距 0.2em, 颜色 `#C4A77D`, 大写
- 标题: 字号 `clamp(36px, 6vw, 72px)`, fontWeight 300, 行高 1, 大写
- 4个项目卡片，每个包含:
  - 编号（01-04）: 字号 11px, 字间距 0.1em, 颜色 `#C4A77D`
  - 项目图片: 宽高比 16:10, objectFit cover, hover 时 scale(1.05), transition 0.8s
  - 图片渐变遮罩: `linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)`
  - 项目名称: 字号 28px, fontWeight 300
  - 位置: 字号 12px, 颜色 `#C4A77D`
  - 描述: 字号 14px, 颜色 rgba(255,255,255,0.7)
- GSAP: 项目卡片 stagger 0.15s 入场, opacity 0→1, y 60→0, duration 0.8s, start '20% bottom'

### Philosophy Section (`#philosophy`)
- 两列布局: 左侧标题，右侧描述
- 引言标题: 字号 `clamp(28px, 4vw, 48px)`, fontWeight 300, 行高 1.3
- 描述段落: 字号 16px, 颜色 rgba(255,255,255,0.7), 行高 1.8
- 统计数据 3 列:
  - 数字: 字号 `clamp(36px, 5vw, 60px)`, fontWeight 200
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - 数据: 148+ 项目, 32 国家, 26 奖项
- 视频: `/videos/philosophy.mp4`, 16:9 比例, 视口进入时自动播放
- GSAP 滚动入场: 数字 countUp 动画, duration 2s, ease power1.out

### Team Section (`#team`)
- 8 位团队成员网格展示
- 布局: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`, gap: 根据卡片间距
- 成员卡片:
  - AI 生成的头像图 (aspect-square)
  - 名字: 字号 16px, fontWeight 400
  - 职位: 字号 12px, 颜色 `#C4A77D`
  - 专长: 字号 11px, 颜色 rgba(255,255,255,0.5)
  - hover: 卡片边框从 transparent 变为 rgba(196,167,125,0.3), transition 0.3s
- GSAP stagger 0.08s 入场

### Awards Section (`#awards`)
- 两列: 左侧奖项列表, 右侧出版物
- 奖项: 10 条, 时间线展示
  - 年份: 字号 12px, 颜色 `#C4A77D`, 固定宽度
  - 奖项名: 字号 14px
  - 项目名: 字号 12px, 颜色 rgba(255,255,255,0.5)
  - 分隔线: `1px solid rgba(255,255,255,0.05)`
  - hover: 背景变为 `rgba(255,255,255,0.02)`
- 出版物: 6 本, 类似结构

### Contact Section (`#contact`)
- 两列布局: 左侧联系信息 + 联系表单, 右侧留言簿
- 联系表单:
  - 输入框: 无背景, 底部边框 `1px solid rgba(255,255,255,0.1)`, focus 时变为 `#C4A77D`
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - Subject 下拉: 4 个选项
  - 提交按钮: 全宽, `#C4A77D` 背景, 黑色文字, hover 变白色, padding 14px
- 留言簿表单: 类似结构, 提交到后端数据库

### Footer
- 深色背景, 上方 1px 分隔线 `rgba(255,255,255,0.1)`
- 版权信息: 字号 12px, 颜色 rgba(255,255,255,0.4)
- 返回顶部链接, 隐私政策, 使用条款

## 导航设计

- 固定顶部导航栏: `position: fixed`, z-index: 50
- 初始透明, 滚动后 `background: rgba(26,26,26,0.95)`, `backdrop-filter: blur(12px)`
- 高度: 根据内容, 水平边距 `clamp(24px, 4vw, 80px)`
- Logo: 字号 12px, 字间距 0.15em, 大写, 白色, hover 变 `#C4A77D`
- 导航链接: 字号 10px, 字间距 0.08em, 大写, 颜色 rgba(255,255,255,0.7), hover 变 `#C4A77D`
- 语言切换: 下拉选择器, 5 种语言（但双语版仅 en/zh）
- 登录/登出按钮: 细边框样式

## 中英双语切换实现方式

- 使用 React Context (`I18nProvider`) 管理语言状态
- 翻译数据直接嵌入 `i18n.tsx`，类型为 `Record<Lang, Translations>`
- `t()` 函数支持点号路径访问: `t('hero.headline')`, `t('projects.items')` 返回数组
- 支持 RTL（阿拉伯语），但双语版仅需 LTR
- 语言存储在 localStorage
- 切换时更新 `document.documentElement.dir` 和 `document.documentElement.lang`

## AI 聊天助手 (ChatWidget)

- 固定右下角浮动按钮: 56px 圆形, `#C4A77D` 背景, MessageCircle 图标
- 聊天面板: 360px 宽, 480px 高, 深色背景 `#1A1A1A`, 圆角
- 消息气泡: 
  - AI 消息: `rgba(255,255,255,0.05)` 背景
  - 用户消息: `#C4A77D` 背景, `#1A1A1A` 文字
  - 头像: 28px 圆形, AI 用 Bot 图标, 用户用 User 图标
- 输入框: 透明背景, 底部边框分隔
- 通过 tRPC mutation 发送消息到后端 AI 服务

## 图片/视频资源的 AI 生成指令

### 视频
1. **hero-skyscraper.mp4**: 现代摩天大楼的航拍视频，玻璃幕墙反射天空，缓慢上升的镜头，日落时分金色光线
2. **philosophy.mp4**: 建筑工匠手工打磨混凝土/木材表面的特写，展示材料质感和制作工艺

### 图片
1. **project-1.jpg**: 参数化外立面的未来主义摩天大楼(Aurora Tower)，迪拜天际线，日落
2. **project-2.jpg**: 木与混凝土结构的日式文化中心(Nara Cultural Center)，森林中，自然光
3. **project-3.jpg**: 地中海风格曲线住宅塔楼(Viento Residences)，白色建筑配阳台绿植
4. **project-4.jpg**: 漂浮在港口的木质展馆(Meridian Pavilion)，哥本哈根水面倒影
5. **team-1~8.jpg**: 8位专业建筑师肖像照，多元化国际团队，专业服装，中性灰色背景

## 响应式设计策略

- 标题使用 `clamp()`: `clamp(48px, 8vw, 120px)`, `clamp(36px, 6vw, 72px)`
- 内容区边距: `clamp(24px, 4vw, 80px)`
- 项目网格: `grid-cols-1 md:grid-cols-2`
- 团队网格: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
- 移动端导航: 汉堡菜单
- 聊天面板: `maxWidth: calc(100vw - 48px)`

## 特殊交互效果

### GSAP 动画系统
- Hero 入场: 多元素 stagger 动画，delay 0.4~1.6s
- 滚动视差: Hero 内容随滚动上移+淡出
- 项目卡片: 滚动进入视口时 stagger 入场
- 数字 countUp: Philosophy 统计数字从 0 递增
- 图片 hover: `scale(1.05)`, transition 0.8s

### 滚动指示器动画
- 垂直线条 + 圆点下落循环
- GSAP 无限循环: y 0→44, opacity 1→0, duration 2s, ease power1.in

## CSS 动画和过渡效果的具体参数

- 导航背景过渡: `transition-all duration-500`（滚动触发）
- 项目图片 hover: `transform: scale(1.05)`, `transition: 0.8s ease`
- 团队卡片边框: `transition: border-color 0.3s ease`
- CTA 按钮: hover 反色, `transition-all duration-400`
- 奖项行 hover 背景: `transition: background 0.2s ease`
- 聊天面板打开: 直接渲染（无过渡）
- 聊天按钮: `hover:scale-110`, `transition-all duration-300`

加项目世界地图

在项目区加一张世界地图，把事务所的作品按城市标点，点击看项目详情。

用建站智能体改写

# App 9 — 建筑设计事务所全栈网站 Prompt

## 网站主题与定位

创建一个名为「Meridian Architecture」的高端建筑设计事务所官网，展示公司的项目作品、设计理念、团队成员、获奖经历，并提供联系表单和留言簿功能。整体风格为极简主义建筑美学，深色系设计（黑/深灰），配合金铜色点缀，营造高端专业的视觉印象。网站包含全栈后端（用户认证、联系表单存储、留言簿、AI 聊天助手），支持**中英文双语**（仅支持中文和英文）。

## 技术架构

- **前端框架**: React 18 + TypeScript + Vite
- **路由**: React Router（`/` 首页, `/login` 登录, `/admin` 管理后台）
- **样式方案**: Tailwind CSS + 大量内联样式（使用 style 属性）
- **动画引擎**: GSAP + ScrollTrigger（入场动画、视差滚动）
- **后端**: Express.js + tRPC（类型安全 API）
- **数据库**: MySQL + Drizzle ORM
- **认证**: OAuth（Kimi 登录）+ 本地账号密码（bcrypt 加密）
- **AI 聊天**: 集成 AI 对话助手（流式响应）
- **图标**: Lucide React
- **状态管理**: React Context (I18n)

### 数据库 Schema（Drizzle ORM + MySQL）
- **users**: id, unionId, name, email, avatar, role(user/admin), createdAt, updatedAt, lastSignInAt
- **localUsers**: id, username, displayName, email, passwordHash, role, createdAt
- **contacts**: id, name, email, subject, message, createdAt
- **guestbookEntries**: id, name, email, message, createdAt
- **chatMessages**: id, content, role, sessionId, createdAt

## 全局视觉系统

### 配色方案
- 主背景色: `#1A1A1A`（深灰黑）
- 辅助深色: `#141414`, `#111`
- 纯黑: `#000000`
- 主文字色: `#FFFFFF`
- 次要文字色: `rgba(255, 255, 255, 0.8)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- 品牌金铜色: `#C4A77D`（用于标签、高亮、按钮、链接悬停）
- 分隔线: `rgba(255, 255, 255, 0.1)`
- 选区背景: `#C4A77D`，选区文字: `#1A1A1A`
- 滚动条轨道: `#1A1A1A`，滑块: `#333`，悬停: `#555`

### 字体系统
- **标题字体**: 系统默认（`"Helvetica Neue", Helvetica, Arial, sans-serif`），通过 GSAP 以超大字号渲染
- **正文字体**: `"Helvetica Neue", Helvetica, Arial, sans-serif`（body 设置）
- **代码/标签字体**: `font-mono` 用于小标签
- body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`
- `scroll-behavior: smooth`

### 间距体系
- 内容区水平边距: `clamp(24px, 4vw, 80px)` 或 `paddingLeft`/`paddingRight`
- Section 垂直间距: 各 section 自定义（100vh hero, 其余由内容决定）
- 标签与标题间距: `mb-6` (24px)
- 段落间距: `mt-12`, `mt-24`

## Hero 区设计

- **全屏视频背景**: 100vh, absolute inset-0, objectFit: cover
- 视频: `/videos/hero-skyscraper.mp4`, autoPlay, muted, loop, playsInline
- 渐变遮罩: `linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.1) 40%, rgba(26,26,26,0.6) 100%)`
- **GSAP 入场动画**:
  - 标签「EST. 2008」: opacity 0→1, duration 0.6s, delay 0.4s, ease power2.out, 字号 10px, 字间距 0.1em, 颜� `#C4A77D`
  - 标题「Shaping the Horizon」: opacity 0→1, y 60→0, duration 1s, delay 0.6s, ease power3.out, 字号 `clamp(48px, 8vw, 120px)`, fontWeight 300(light), 字间距 -0.03em, 大写
  - 副标题: opacity 0→1, y 30→0, duration 0.8s, delay 1.2s, 字号 18px, 颜色 rgba(255,255,255,0.8), maxWidth 480px, 行高 1.8
  - CTA 按钮: opacity 0→1, delay 1.6s, 字号 12px(xs), 字间距 0.05em, 白色边框 1px solid #fff, padding 14px 40px, hover 反色(bg white, color #1A1A1A)
- **滚动视差**: 内容区随滚动 y -150px + opacity→0, scrub: true, start 'top top', end '50% top'
- **滚动指示器**: 底部居中，1px 宽 60px 高的白色线条, 5px 白色圆点从 top 动画到 y 44, opacity→0, duration 2s, repeat -1

## 每个 Section 的详细描述

### Projects Section (`#projects`)
- 标签: 字号 10px, 字间距 0.2em, 颜色 `#C4A77D`, 大写
- 标题: 字号 `clamp(36px, 6vw, 72px)`, fontWeight 300, 行高 1, 大写
- 4个项目卡片，每个包含:
  - 编号（01-04）: 字号 11px, 字间距 0.1em, 颜色 `#C4A77D`
  - 项目图片: 宽高比 16:10, objectFit cover, hover 时 scale(1.05), transition 0.8s
  - 图片渐变遮罩: `linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)`
  - 项目名称: 字号 28px, fontWeight 300
  - 位置: 字号 12px, 颜色 `#C4A77D`
  - 描述: 字号 14px, 颜色 rgba(255,255,255,0.7)
- GSAP: 项目卡片 stagger 0.15s 入场, opacity 0→1, y 60→0, duration 0.8s, start '20% bottom'

### Philosophy Section (`#philosophy`)
- 两列布局: 左侧标题，右侧描述
- 引言标题: 字号 `clamp(28px, 4vw, 48px)`, fontWeight 300, 行高 1.3
- 描述段落: 字号 16px, 颜色 rgba(255,255,255,0.7), 行高 1.8
- 统计数据 3 列:
  - 数字: 字号 `clamp(36px, 5vw, 60px)`, fontWeight 200
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - 数据: 148+ 项目, 32 国家, 26 奖项
- 视频: `/videos/philosophy.mp4`, 16:9 比例, 视口进入时自动播放
- GSAP 滚动入场: 数字 countUp 动画, duration 2s, ease power1.out

### Team Section (`#team`)
- 8 位团队成员网格展示
- 布局: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`, gap: 根据卡片间距
- 成员卡片:
  - AI 生成的头像图 (aspect-square)
  - 名字: 字号 16px, fontWeight 400
  - 职位: 字号 12px, 颜色 `#C4A77D`
  - 专长: 字号 11px, 颜色 rgba(255,255,255,0.5)
  - hover: 卡片边框从 transparent 变为 rgba(196,167,125,0.3), transition 0.3s
- GSAP stagger 0.08s 入场

### Awards Section (`#awards`)
- 两列: 左侧奖项列表, 右侧出版物
- 奖项: 10 条, 时间线展示
  - 年份: 字号 12px, 颜色 `#C4A77D`, 固定宽度
  - 奖项名: 字号 14px
  - 项目名: 字号 12px, 颜色 rgba(255,255,255,0.5)
  - 分隔线: `1px solid rgba(255,255,255,0.05)`
  - hover: 背景变为 `rgba(255,255,255,0.02)`
- 出版物: 6 本, 类似结构

### Contact Section (`#contact`)
- 两列布局: 左侧联系信息 + 联系表单, 右侧留言簿
- 联系表单:
  - 输入框: 无背景, 底部边框 `1px solid rgba(255,255,255,0.1)`, focus 时变为 `#C4A77D`
  - 标签: 字号 10px, 字间距 0.1em, 大写, 颜色 rgba(255,255,255,0.5)
  - Subject 下拉: 4 个选项
  - 提交按钮: 全宽, `#C4A77D` 背景, 黑色文字, hover 变白色, padding 14px
- 留言簿表单: 类似结构, 提交到后端数据库

### Footer
- 深色背景, 上方 1px 分隔线 `rgba(255,255,255,0.1)`
- 版权信息: 字号 12px, 颜色 rgba(255,255,255,0.4)
- 返回顶部链接, 隐私政策, 使用条款

## 导航设计

- 固定顶部导航栏: `position: fixed`, z-index: 50
- 初始透明, 滚动后 `background: rgba(26,26,26,0.95)`, `backdrop-filter: blur(12px)`
- 高度: 根据内容, 水平边距 `clamp(24px, 4vw, 80px)`
- Logo: 字号 12px, 字间距 0.15em, 大写, 白色, hover 变 `#C4A77D`
- 导航链接: 字号 10px, 字间距 0.08em, 大写, 颜色 rgba(255,255,255,0.7), hover 变 `#C4A77D`
- 语言切换: 下拉选择器, 5 种语言（但双语版仅 en/zh）
- 登录/登出按钮: 细边框样式

## 中英双语切换实现方式

- 使用 React Context (`I18nProvider`) 管理语言状态
- 翻译数据直接嵌入 `i18n.tsx`，类型为 `Record<Lang, Translations>`
- `t()` 函数支持点号路径访问: `t('hero.headline')`, `t('projects.items')` 返回数组
- 支持 RTL（阿拉伯语），但双语版仅需 LTR
- 语言存储在 localStorage
- 切换时更新 `document.documentElement.dir` 和 `document.documentElement.lang`

## AI 聊天助手 (ChatWidget)

- 固定右下角浮动按钮: 56px 圆形, `#C4A77D` 背景, MessageCircle 图标
- 聊天面板: 360px 宽, 480px 高, 深色背景 `#1A1A1A`, 圆角
- 消息气泡: 
  - AI 消息: `rgba(255,255,255,0.05)` 背景
  - 用户消息: `#C4A77D` 背景, `#1A1A1A` 文字
  - 头像: 28px 圆形, AI 用 Bot 图标, 用户用 User 图标
- 输入框: 透明背景, 底部边框分隔
- 通过 tRPC mutation 发送消息到后端 AI 服务

## 图片/视频资源的 AI 生成指令

### 视频
1. **hero-skyscraper.mp4**: 现代摩天大楼的航拍视频，玻璃幕墙反射天空，缓慢上升的镜头，日落时分金色光线
2. **philosophy.mp4**: 建筑工匠手工打磨混凝土/木材表面的特写，展示材料质感和制作工艺

### 图片
1. **project-1.jpg**: 参数化外立面的未来主义摩天大楼(Aurora Tower)，迪拜天际线，日落
2. **project-2.jpg**: 木与混凝土结构的日式文化中心(Nara Cultural Center)，森林中，自然光
3. **project-3.jpg**: 地中海风格曲线住宅塔楼(Viento Residences)，白色建筑配阳台绿植
4. **project-4.jpg**: 漂浮在港口的木质展馆(Meridian Pavilion)，哥本哈根水面倒影
5. **team-1~8.jpg**: 8位专业建筑师肖像照，多元化国际团队，专业服装，中性灰色背景

## 响应式设计策略

- 标题使用 `clamp()`: `clamp(48px, 8vw, 120px)`, `clamp(36px, 6vw, 72px)`
- 内容区边距: `clamp(24px, 4vw, 80px)`
- 项目网格: `grid-cols-1 md:grid-cols-2`
- 团队网格: `grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
- 移动端导航: 汉堡菜单
- 聊天面板: `maxWidth: calc(100vw - 48px)`

## 特殊交互效果

### GSAP 动画系统
- Hero 入场: 多元素 stagger 动画，delay 0.4~1.6s
- 滚动视差: Hero 内容随滚动上移+淡出
- 项目卡片: 滚动进入视口时 stagger 入场
- 数字 countUp: Philosophy 统计数字从 0 递增
- 图片 hover: `scale(1.05)`, transition 0.8s

### 滚动指示器动画
- 垂直线条 + 圆点下落循环
- GSAP 无限循环: y 0→44, opacity 1→0, duration 2s, ease power1.in

## CSS 动画和过渡效果的具体参数

- 导航背景过渡: `transition-all duration-500`（滚动触发）
- 项目图片 hover: `transform: scale(1.05)`, `transition: 0.8s ease`
- 团队卡片边框: `transition: border-color 0.3s ease`
- CTA 按钮: hover 反色, `transition-all duration-400`
- 奖项行 hover 背景: `transition: background 0.2s ease`
- 聊天面板打开: 直接渲染（无过渡）
- 聊天按钮: `hover:scale-110`, `transition-all duration-300`