复古爵士酒吧体验网站

帮我创建一个名为"The Velvet Note"的复古爵士酒吧沉浸式体验网站，支持中英文双语切换（仅中文和英文，不需要其他语言）。这是一个纯前端单页应用，无后端。

## 一、技术栈

- React 19 + TypeScript + Vite 7
- react-router v7（BrowserRouter）
- Tailwind CSS 3.4 + tailwindcss-animate 插件
- GSAP 3.14（含 ScrollTrigger、Observer 插件）
- @studio-freight/lenis（平滑滚动，lerp:0.1, smoothWheel:true）
- shadcn/ui（Radix UI + class-variance-authority）
- lucide-react 图标库

## 二、色彩系统

| 名称 | 值 | 用途 |
|------|-----|------|
| 哑光黑 | #0a0a0a | 全局背景、Hero遮罩、Footer |
| 浅灰白 | #e0e0e0 | 正文文字、标题 |
| 金色 | #d4af37 | 品牌色、导航hover、标题高亮、按钮边框、SVG描边 |
| 酒红/勃艮第 | #4a0e16 | Lineup文字、卡片hover遮罩 rgba(74,14,22,0.6) |
| 羊皮纸 | #f0e6d2 | Lineup区块背景 |
| 深灰线条 | #333333 | 输入框下划线默认、语言菜单边框 |
| 暗灰 | #1a1a1a | 菜单hover背景、Footer分割线、黑胶唱片纹理 |
| CSS变量 primary | hsl(43,65%,52%) | 金色 |
| CSS变量 secondary | hsl(350,70%,18%) | 酒红色 |

## 三、字体系统

| 类别 | font-family | 权重 | 用途 |
|-----|------------|------|------|
| font-display | 'Playfair Display', serif | 400-900 含italic | 所有标题、品牌名 |
| font-body | 'Inter', sans-serif | 300-700 | 正文、导航、表单 |
| font-mono | 'Courier Prime', monospace | 400/700 | 时间标签、"Est.1957"、版权 |

## 四、国际化实现

使用 React Context（LanguageContext），不依赖 i18n 库：
- Language 类型: 'en' | 'zh'
- t(key) 支持嵌套点分 key 如 'lineup.musician1.name'

### 翻译内容
- hero.title: "The Velvet Note" ↔ "丝绒音符"
- hero.subtitle: "A journey through sound and time" ↔ "一场穿越声音与时光的私密旅程"
- nav: Lineup/Story/Reservations/Gallery ↔ 演出阵容/我们的故事/预订/画廊
- 三位音乐家: Marcus Cole萨克斯21:00 / Elena Voss声乐22:45 / James Parker低音提琴00:30
- story.title: "Our Story" ↔ "我们的故事"
- reservations.title: "Reserve Your Seat" ↔ "预订您的座位"
- gallery: "Gallery" ↔ "画廊"

## 五、胶片颗粒效果（FilmGrain）

- fixed 全屏覆盖, z-index:9999, pointer-events:none
- opacity: 0.04, mix-blend-mode: overlay
- SVG feTurbulence: type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"
- 内联 data URI 背景图

## 六、页面区块详细设计

### 6.1 导航栏
- fixed, z-[100], mix-blend-mode: difference（与背景反色混合）
- 滚动超 80px: rgba(10,10,10,0.92) + blur(12px)，否则透明
- Logo SVG: 4层同心圆（r=14/10/6/2），全部金色 #d4af37，hover rotate-180 500ms
- 旁边 "TVN" Playfair Display text-lg tracking-wide
- 导航链接: uppercase, letter-spacing:0.1em, font-size:0.8rem, #e0e0e0
- hover 下划线: ::after 从中心展开 h:1px bg:#d4af37, 0.3s ease

### 6.2 Hero
- h-screen, 视频背景 /videos/hero.mp4, autoPlay muted loop playsInline
- 暗角遮罩: radial-gradient(circle at center, transparent 0%, #0a0a0a 120%)
- 加载遮罩: 纯黑 #0a0a0a, GSAP opacity 1→0, 2s power2.out delay 0.5
- 标题: Playfair Display, fontSize clamp(3rem,8vw,7rem), letterSpacing -0.02em, textShadow 0 4px 30px rgba(0,0,0,0.8)
  - GSAP: opacity 0→1 + y 40→0, 1.5s power3.out (在遮罩动画 '-=1' 时开始)
- 副标题: Inter 1rem, letterSpacing 0.2em, uppercase, textShadow 0 2px 15px
  - GSAP: opacity 0→1 + y 20→0, 1s power3.out ('-=0.8')
- 滚动指示: "Scroll" text-xs + 金色箭头 SVG stroke:#d4af37 strokeWidth:1.5, animate-pulse + bounce

### 6.3 Lineup 演出阵容
- 背景 #f0e6d2（羊皮纸色）
- 动态排版层 z-[100] pointer-events-none: 三行大字 clamp(2rem,8vw,6rem) Playfair Display uppercase
  - 第1行 "TONIGHT" / "今晚": 实心 #4a0e16
  - 第2行 "'S": 描边空心 -webkit-text-stroke:2px #4a0e16, color:transparent
  - 第3行 "LINEUP" / "演出": 实心 #4a0e16
  - GSAP scrub: 第1行 xPercent 0→-100, 第2行 yPercent 0→100, 第3行 xPercent 0→100
- 背景缩略图: 3列网格 grayscale opacity-30, GSAP scrub yPercent 0→20
- 音乐家卡片 z-[50], md:grid-cols-3:
  - 图片 aspect-[3/4] grayscale, hover 取消灰度 + scale-105 700ms
  - 名字 Playfair Display 2xl #4a0e16
  - 乐器 Inter sm uppercase tracking-widest
  - 时间 Courier Prime sm
  - GSAP入场: opacity 0→1 + y 60→0, 0.8s, stagger 0.15, power3.out, start 'top 80%'

### 6.4 Story 我们的故事
- 背景 #0a0a0a
- 标题金色 Playfair Display clamp(2.5rem,6vw,5rem) 居中
- 双栏 lg:flex-row: 左图 aspect-[16/10] + 底部渐变；右3段文字 text-lg
- 底部装饰线 w-12 h-[1px] #d4af37 + "Est. 1957" Courier Prime
- GSAP: 图片 x:-60→0 1.2s power3.out; 段落 y:40→0 0.8s stagger 0.2

### 6.5 Reservations 预订
- 背景 #4a0e16（酒红色）
- 模拟打字机风格输入框 .analog-input: 透明背景 + 底部 2px #333 下划线, focus 变 #d4af37
- 浮动标签 .analog-label: 金色 uppercase, focus 时 rotateX(-90deg) 翻转隐藏, 0.4s cubic-bezier(0.2,1,0.3,1)
- 4字段: 姓名/邮箱/日期/人数(1-8)
- 提交按钮: bg-#0a0a0a text-#d4af37 border-#d4af37, hover 反转, 500ms
- 打字音效: Web Audio API 20ms 衰减白噪声 gain:0.08
- GSAP: .form-element opacity+y:30→0, 0.6s stagger 0.1

### 6.6 Gallery 3D 黑胶唱片旋转画廊
- 100vh, 背景 #0a0a0a
- 6张图: The Crowd/The Bar/Vinyl/The Stage/The Keys/The Quartet
- 3D圆形布局: perspective:1000px, radius=min(w,h)*0.32
  - 360°均匀分布, GSAP.set x=sin(angle)*r, z=cos(angle)*r-r, rotateY=angle
  - 激活项: .decks__img opacity 0→1 + scale 0.5→1, 0.5s
- 交互: GSAP Observer wheel/touch, deltaY*0.002 增量旋转
- 黑胶唱片样式: border-radius:50%, repeating-radial-gradient(#1a1a1a 4px, #000 5px), border 8px #0a0a0a
- 滚动提示: 金色旋转 SVG 3s + "Scroll to browse"

### 6.7 Footer
- bg-#0a0a0a, border-t #222
- 三栏: 品牌(SVG Logo+"The Velvet Note"+营业时间) / Location(地址) / Follow(Instagram/Facebook/Twitter)
- 社交 white/50 hover 金色 300ms
- 版权 Courier Prime #e0e0e0/30

## 七、静态资源

### 图片 (/public/images/) — 10 张
- bar-interior.jpg (16:10 酒吧内部)
- musician-1/2/3.jpg (3:4 音乐家)
- gallery-1~6.jpg (圆形裁切画廊)

### 视频 (/public/videos/)
- hero.mp4 — 爵士酒吧氛围（暗调，全屏循环）

## 八、Lenis 平滑滚动
- lerp:0.1, smoothWheel:true
- lenis.on('scroll', ScrollTrigger.update)
- gsap.ticker.add 驱动 RAF
- gsap.ticker.lagSmoothing(0)

## 九、关键动效参数

| 效果 | 参数 |
|------|------|
| 加载遮罩淡出 | opacity 1→0, 2s power2.out delay 0.5 |
| Hero标题入场 | opacity+y:40→0, 1.5s power3.out ('-=1') |
| Hero副标题入场 | opacity+y:20→0, 1s power3.out ('-=0.8') |
| Lineup排版第1行 | xPercent 0→-100, scrub |
| Lineup排版第2行 | yPercent 0→100, scrub |
| Lineup排版第3行 | xPercent 0→100, scrub |
| Lineup缩略图 | yPercent 0→20, scrub |
| 音乐家卡片入场 | opacity+y:60→0, 0.8s stagger 0.15, power3.out |
| Story图片 | x:-60→0, 1.2s power3.out |
| Story文字 | y:40→0, 0.8s stagger 0.2 |
| 预订表单元素 | opacity+y:30→0, 0.6s stagger 0.1 |
| Gallery激活项 | opacity+scale 0.5→1, 0.5s |
| 导航Logo hover | rotate-180, 500ms |
| 导航下划线 | width 0→100%, 0.3s ease |
| 按钮hover | bg/text反转, 500ms |

帮我创建一个名为"The Velvet Note"的复古爵士酒吧沉浸式体验网站，支持中英文双语切换（仅中文和英文，不需要其他语言）。这是一个纯前端单页应用，无后端。

## 一、技术栈

- React 19 + TypeScript + Vite 7
- react-router v7（BrowserRouter）
- Tailwind CSS 3.4 + tailwindcss-animate 插件
- GSAP 3.14（含 ScrollTrigger、Observer 插件）
- @studio-freight/lenis（平滑滚动，lerp:0.1, smoothWheel:true）
- shadcn/ui（Radix UI + class-variance-authority）
- lucide-react 图标库

## 二、色彩系统

| 名称 | 值 | 用途 |
|------|-----|------|
| 哑光黑 | #0a0a0a | 全局背景、Hero遮罩、Footer |
| 浅灰白 | #e0e0e0 | 正文文字、标题 |
| 金色 | #d4af37 | 品牌色、导航hover、标题高亮、按钮边框、SVG描边 |
| 酒红/勃艮第 | #4a0e16 | Lineup文字、卡片hover遮罩 rgba(74,14,22,0.6) |
| 羊皮纸 | #f0e6d2 | Lineup区块背景 |
| 深灰线条 | #333333 | 输入框下划线默认、语言菜单边框 |
| 暗灰 | #1a1a1a | 菜单hover背景、Footer分割线、黑胶唱片纹理 |
| CSS变量 primary | hsl(43,65%,52%) | 金色 |
| CSS变量 secondary | hsl(350,70%,18%) | 酒红色 |

## 三、字体系统

| 类别 | font-family | 权重 | 用途 |
|-----|------------|------|------|
| font-display | 'Playfair Display', serif | 400-900 含italic | 所有标题、品牌名 |
| font-body | 'Inter', sans-serif | 300-700 | 正文、导航、表单 |
| font-mono | 'Courier Prime', monospace | 400/700 | 时间标签、"Est.1957"、版权 |

## 四、国际化实现

使用 React Context（LanguageContext），不依赖 i18n 库：
- Language 类型: 'en' | 'zh'
- t(key) 支持嵌套点分 key 如 'lineup.musician1.name'

### 翻译内容
- hero.title: "The Velvet Note" ↔ "丝绒音符"
- hero.subtitle: "A journey through sound and time" ↔ "一场穿越声音与时光的私密旅程"
- nav: Lineup/Story/Reservations/Gallery ↔ 演出阵容/我们的故事/预订/画廊
- 三位音乐家: Marcus Cole萨克斯21:00 / Elena Voss声乐22:45 / James Parker低音提琴00:30
- story.title: "Our Story" ↔ "我们的故事"
- reservations.title: "Reserve Your Seat" ↔ "预订您的座位"
- gallery: "Gallery" ↔ "画廊"

## 五、胶片颗粒效果（FilmGrain）

- fixed 全屏覆盖, z-index:9999, pointer-events:none
- opacity: 0.04, mix-blend-mode: overlay
- SVG feTurbulence: type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"
- 内联 data URI 背景图

## 六、页面区块详细设计

### 6.1 导航栏
- fixed, z-[100], mix-blend-mode: difference（与背景反色混合）
- 滚动超 80px: rgba(10,10,10,0.92) + blur(12px)，否则透明
- Logo SVG: 4层同心圆（r=14/10/6/2），全部金色 #d4af37，hover rotate-180 500ms
- 旁边 "TVN" Playfair Display text-lg tracking-wide
- 导航链接: uppercase, letter-spacing:0.1em, font-size:0.8rem, #e0e0e0
- hover 下划线: ::after 从中心展开 h:1px bg:#d4af37, 0.3s ease

### 6.2 Hero
- h-screen, 视频背景 /videos/hero.mp4, autoPlay muted loop playsInline
- 暗角遮罩: radial-gradient(circle at center, transparent 0%, #0a0a0a 120%)
- 加载遮罩: 纯黑 #0a0a0a, GSAP opacity 1→0, 2s power2.out delay 0.5
- 标题: Playfair Display, fontSize clamp(3rem,8vw,7rem), letterSpacing -0.02em, textShadow 0 4px 30px rgba(0,0,0,0.8)
  - GSAP: opacity 0→1 + y 40→0, 1.5s power3.out (在遮罩动画 '-=1' 时开始)
- 副标题: Inter 1rem, letterSpacing 0.2em, uppercase, textShadow 0 2px 15px
  - GSAP: opacity 0→1 + y 20→0, 1s power3.out ('-=0.8')
- 滚动指示: "Scroll" text-xs + 金色箭头 SVG stroke:#d4af37 strokeWidth:1.5, animate-pulse + bounce

### 6.3 Lineup 演出阵容
- 背景 #f0e6d2（羊皮纸色）
- 动态排版层 z-[100] pointer-events-none: 三行大字 clamp(2rem,8vw,6rem) Playfair Display uppercase
  - 第1行 "TONIGHT" / "今晚": 实心 #4a0e16
  - 第2行 "'S": 描边空心 -webkit-text-stroke:2px #4a0e16, color:transparent
  - 第3行 "LINEUP" / "演出": 实心 #4a0e16
  - GSAP scrub: 第1行 xPercent 0→-100, 第2行 yPercent 0→100, 第3行 xPercent 0→100
- 背景缩略图: 3列网格 grayscale opacity-30, GSAP scrub yPercent 0→20
- 音乐家卡片 z-[50], md:grid-cols-3:
  - 图片 aspect-[3/4] grayscale, hover 取消灰度 + scale-105 700ms
  - 名字 Playfair Display 2xl #4a0e16
  - 乐器 Inter sm uppercase tracking-widest
  - 时间 Courier Prime sm
  - GSAP入场: opacity 0→1 + y 60→0, 0.8s, stagger 0.15, power3.out, start 'top 80%'

### 6.4 Story 我们的故事
- 背景 #0a0a0a
- 标题金色 Playfair Display clamp(2.5rem,6vw,5rem) 居中
- 双栏 lg:flex-row: 左图 aspect-[16/10] + 底部渐变；右3段文字 text-lg
- 底部装饰线 w-12 h-[1px] #d4af37 + "Est. 1957" Courier Prime
- GSAP: 图片 x:-60→0 1.2s power3.out; 段落 y:40→0 0.8s stagger 0.2

### 6.5 Reservations 预订
- 背景 #4a0e16（酒红色）
- 模拟打字机风格输入框 .analog-input: 透明背景 + 底部 2px #333 下划线, focus 变 #d4af37
- 浮动标签 .analog-label: 金色 uppercase, focus 时 rotateX(-90deg) 翻转隐藏, 0.4s cubic-bezier(0.2,1,0.3,1)
- 5字段: 姓名/邮箱/日期/时段/人数(1-8),提交后弹出一张带确认编号的预订确认卡
- 提交按钮: bg-#0a0a0a text-#d4af37 border-#d4af37, hover 反转, 500ms
- 打字音效: Web Audio API 20ms 衰减白噪声 gain:0.08
- GSAP: .form-element opacity+y:30→0, 0.6s stagger 0.1

### 6.6 Gallery 3D 黑胶唱片旋转画廊
- 100vh, 背景 #0a0a0a
- 6张图: The Crowd/The Bar/Vinyl/The Stage/The Keys/The Quartet
- 3D圆形布局: perspective:1000px, radius=min(w,h)*0.32
  - 360°均匀分布, GSAP.set x=sin(angle)*r, z=cos(angle)*r-r, rotateY=angle
  - 激活项: .decks__img opacity 0→1 + scale 0.5→1, 0.5s
- 交互: GSAP Observer wheel/touch, deltaY*0.002 增量旋转
- 黑胶唱片样式: border-radius:50%, repeating-radial-gradient(#1a1a1a 4px, #000 5px), border 8px #0a0a0a
- 滚动提示: 金色旋转 SVG 3s + "Scroll to browse"

### 6.7 Footer
- bg-#0a0a0a, border-t #222
- 三栏: 品牌(SVG Logo+"The Velvet Note"+营业时间) / Location(地址) / Follow(Instagram/Facebook/Twitter)
- 社交 white/50 hover 金色 300ms
- 版权 Courier Prime #e0e0e0/30

## 七、静态资源

### 图片 (/public/images/) — 10 张
- bar-interior.jpg (16:10 酒吧内部)
- musician-1/2/3.jpg (3:4 音乐家)
- gallery-1~6.jpg (圆形裁切画廊)

### 视频 (/public/videos/)
- hero.mp4 — 爵士酒吧氛围（暗调，全屏循环）

## 八、Lenis 平滑滚动
- lerp:0.1, smoothWheel:true
- lenis.on('scroll', ScrollTrigger.update)
- gsap.ticker.add 驱动 RAF
- gsap.ticker.lagSmoothing(0)

## 九、关键动效参数

| 效果 | 参数 |
|------|------|
| 加载遮罩淡出 | opacity 1→0, 2s power2.out delay 0.5 |
| Hero标题入场 | opacity+y:40→0, 1.5s power3.out ('-=1') |
| Hero副标题入场 | opacity+y:20→0, 1s power3.out ('-=0.8') |
| Lineup排版第1行 | xPercent 0→-100, scrub |
| Lineup排版第2行 | yPercent 0→100, scrub |
| Lineup排版第3行 | xPercent 0→100, scrub |
| Lineup缩略图 | yPercent 0→20, scrub |
| 音乐家卡片入场 | opacity+y:60→0, 0.8s stagger 0.15, power3.out |
| Story图片 | x:-60→0, 1.2s power3.out |
| Story文字 | y:40→0, 0.8s stagger 0.2 |
| 预订表单元素 | opacity+y:30→0, 0.6s stagger 0.1 |
| Gallery激活项 | opacity+scale 0.5→1, 0.5s |
| 导航Logo hover | rotate-180, 500ms |
| 导航下划线 | width 0→100%, 0.3s ease |
| 按钮hover | bg/text反转, 500ms |