AI 设计师作品集

使用 React、TypeScript、Vite 和 Tailwind CSS，为名为 "Viktor Oddy" 的创意设计工作室创建一个单页落地页。使用 lucide-react 提供图标。整个页面采用白色背景，并使用两种自定义字体："PP Neue Montreal"（正文字体，从 Webflow CDN 加载）和 "PP Mondwest"（衬线装饰字体，从本地 /PPMondwest-Regular.woff2 文件加载）。正文默认字体为 PP Neue Montreal，并使用系统字体作为回退。

页面按以下顺序包含这些部分：

1. 首屏区域（居中，窄栏 max-w-[440px]、px-6、pt-12 md:pt-16）

Logo 文本："Viktor Oddy"，使用 PP Mondwest 衬线字体，text-[32px] md:text-[40px] lg:text-[44px]、font-semibold、颜色 #051A24、tracking-tight、mb-4。通过交错动画淡入（延迟 0.1s）。
标语："Viktor Oddy 的创意工作室"，使用等宽字体（font-mono），text-xs md:text-sm、颜色 #051A24、mb-2。动画延迟 0.2s。
主标题：两行："引领下一波浪潮，"和"以大胆的方式。"，其中"下一波浪潮"和"以大胆的方式。"使用 PP Mondwest 衬线字体。文本为 text-[32px] md:text-[40px] lg:text-[44px]、leading-[1.1]、颜色 #0D212C、tracking-tight、whitespace-nowrap。动画延迟 0.3s。
描述：三个段落，放在 flex-col gap-6 容器中，text-sm md:text-base、颜色 #051A24、leading-relaxed、mt-5 md:mt-6。动画延迟 0.4s。
第 1 段："我在 Apple 工作了七年，为超过十亿人打造产品。我创立 Vortex Studio，是为了把同等水平的思考带给那些正在塑造未来的创新者。"
第 2 段："工作室刻意保持小规模。每个项目的创意愿景都由我亲自把控，并由经验丰富的设计团队支持，在不偷工减料的前提下快速推进。"
第 3 段："项目起价为每月 $5,000。"
两个按钮，位于 flex-col sm:flex-row 中，gap-3 md:gap-4、mt-5 md:mt-6。动画延迟 0.5s：
"开始聊天"（主要按钮：bg-[#051A24]、白色文字、rounded-full、px-7 py-3，带有包含内嵌高光的复杂多层 box-shadow）
"查看项目"（次要按钮：bg-white、文字 #051A24、无边框，带轻微阴影）
2. 无限滚动字幕带（全宽，mt-16 md:mt-20、mb-16）

水平滚动的图片条。使用 8 张重复排列的 GIF 图片（共 16 张），放在带 animate-marquee CSS 动画的 flex 行中（translateX(0) 到 translateX(-50%)，桌面端为 30s linear infinite，移动端为 10s）。图片使用 h-[280px] md:h-[500px]、object-cover、mx-3、rounded-2xl、shadow-lg。

图片 URL（均来自 motionsites.ai）：

https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif
https://motionsites.ai/assets/hero-portfolio-cosmic-preview-BpvWJ3Nc.gif
https://motionsites.ai/assets/hero-velorah-preview-CJNTtbpd.gif
https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif
https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif
https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif
https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif
https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif
3. 客户评价引语区域（py-12、px-6、max-w-2xl、居中）

一个引语图标（lucide-react Quote、w-6 h-6、text-slate-900）。动画延迟 0.1s。
大号引语文本：'我离开 Apple，是为了打造一家我一直想与之合作的工作室'，其中 "Apple" 使用 PP Mondwest 衬线字体。文本尺寸：text-[32px] md:text-[40px] lg:text-[44px]、leading-[1.1]、颜色 #0D212C、tracking-tight。动画延迟 0.2s。
作者："Viktor Oddy"，使用斜体、text-sm、颜色 #273C46。动画延迟 0.3s。
以文本形式显示三个公司 Logo 名称："Apple"（宽 80px、字体 24px）、"IDEO"（宽 83px、字体 24px）、"Polygon"（宽 110px、字体 24px）。font-medium、text-slate-900。动画延迟 0.4s。
Logo 下方：一张视差图片（根据视口位置产生视差滚动效果，最大偏移 200px）。图片 URL 为：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143.png&w=1280&q=85。Alt 文本为 "Chris Halaska"。w-full max-w-xs rounded-2xl shadow-lg。动画延迟 0.5s。视差效果使用 IntersectionObserver + scroll listener，并结合 requestAnimationFrame。
4. 定价区域（全宽，py-12、px-6）

网格中放置两张卡片（grid-cols-1 md:grid-cols-2、gap-8），桌面端右对齐（md:justify-end、md:max-w-4xl）。每张卡片使用 rounded-[40px]、pl-10 pr-10 md:pr-24 pt-3 pb-10。

卡片 1（深色）：bg-[#051A24]、内嵌阴影。文字颜色 #F6FCFF / #E0EBF0。动画延迟 0.1s。

标题："月度合作"（text-[22px]、font-medium）
描述："专属创意设计团队。/ 你将直接与 Viktor 合作。"
价格："$5,000"（text-2xl、颜色 #F6FCFF），下方显示"每月"
两个按钮："开始聊天"（主要按钮）+ "运作方式"（次要按钮），均链接至 https://halaskastudio.com/./book
卡片 2（浅色）：bg-white、shadow-[0_4px_16px_rgba(0,0,0,0.08)]。动画延迟 0.2s。

标题："定制项目"（text-[22px]、font-medium）
描述："固定范围，固定周期。/ 同一团队，同一标准。"
价格："$5,000"（text-2xl、颜色 #0D212C），下方显示"最低"
一个按钮："开始聊天"（tertiary 变体：白色背景，带组合阴影）
5. 客户评价轮播（全宽，py-20）

标题行（md:max-w-4xl、md:ml-auto）：左侧标题为"客户怎么说"（其中"客户"使用 PP Mondwest 衬线字体，采用相同的大号标题尺寸）。右侧：5 个实心黑色星形图标（lucide-react Star、w-5 h-5、fill-black）+ "Clutch 5/5" 文本。
自动滚动轮播（间隔 3s，悬停时暂停），带有上一个/下一个圆形按钮（w-12 h-12 rounded-full、border border-[#0D212C]/20、lucide ChevronLeft/ChevronRight）。
卡片在桌面端宽 427.5px（移动端为全宽减去 48px），gap-6，带退出动画（透明度淡出 + 缩小）。每张卡片：bg-white、rounded-[32px] md:rounded-[40px]、shadow-[0_4px_16px_rgba(0,0,0,0.08)]、px-6 md:pl-10 md:pr-24 py-8。
卡片内容：SVG 引号图标（自定义 path）、引语文本（text-base、颜色 #0D212C、leading-relaxed）、作者行，包含圆形头像（w-12 h-12）、姓名（font-semibold、text-sm）以及带箭头前缀的职位/公司。
客户评价数组使用 Pexels 头像图片。客户评价内容复制三遍，以实现无限滚动效果。Transform 使用 cubic-bezier(0.4, 0, 0.2, 1)，过渡时间为 0.8s。
5 条客户评价：

Marcus Anderson，Data.storage CEO - "团队在几乎不需要指导的情况下交付了设计，而且每次都精准到位……"
alexwu，Nexgate 创始人 - "Viktor 主导制作了我们迄今为止最出色的融资演示文稿！……"
James Mitchell，LaunchPad 产品副总裁 - "与 Viktor 合作彻底改变了我们的产品愿景……"
Rachel Foster，Nexus Labs 联合创始人 - "设计质量超出了我们的预期……"
David Zhang，Paradigm Labs 设计负责人 - "从开始到结束，工作成果都令人难以置信……"
6. 项目区域（max-w-[1200px]、px-6、py-12）

垂直排列 3 个项目条目（gap-16 md:gap-20）。每个条目包含：

向左偏移的文本块（ml-20 md:ml-28）：项目名称使用 PP Mondwest 衬线字体（text-2xl md:text-3xl、font-semibold、颜色 #051A24）+ 描述（text-sm md:text-base、颜色 #051A24/70）
下方放置全宽图片（rounded-2xl、shadow-lg、object-cover）
每个条目都通过 IntersectionObserver 独立触发淡入动画。
项目：

"evr" - "将 web3 AI 产品从创意推进到融资数百万美元" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
"Automation Machines" - "简化工业自动化流程" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif
"xPortfolio" - "现代化作品集管理平台" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif
7. 合作区域（全宽，py-12、px-6）

大型白色容器（max-w-7xl、py-48、rounded-[40px]、轻微阴影）。鼠标悬停时，在光标位置生成 GIF 缩略图（来自滚动字幕带图片数组），随机旋转（-10 到 +10 deg），在 1000ms 内淡出并缩小，生成间隔最少为 80ms。使用 requestAnimationFrame 风格的清理机制。

居中标题："与我们合作"，使用 PP Mondwest 衬线字体，text-[48px] md:text-[64px] lg:text-[80px]、颜色 #0D212C、mb-12。
CTA 按钮：深色胶囊按钮，包含圆形头像图片（Pexels photo 415829、w-10 h-10 rounded-full）+ "开始与 Viktor 聊天"。使用与主要按钮相同的阴影样式。
8. 页脚（全宽，py-12、px-6、max-w-[1200px]）

Flex 行（md:flex-row）。左侧："开始聊天"主要按钮。右侧：ArrowUpRight 图标（lucide-react），然后是两列链接：

第 1 列：服务、项目、关于（锚点链接）
第 2 列：x.com、LinkedIn（外部链接，target _blank）
所有链接：text-base、颜色 #051A24、hover:opacity-70 transition。

9. 版权栏（max-w-[1200px]、px-6、py-4）

Flex 行，justify-between：左侧为 "Vortex Studio Limited"，右侧为 "Austin, USA"。text-sm、颜色 #051A24。

10. 固定底部导航（z-50、居中）

固定在底部的悬浮胶囊（bottom-6，通过 left-1/2 -translate-x-1/2 居中）。白色背景、rounded-full、px-8 py-2、复杂多层阴影。包含：使用 PP Mondwest 衬线字体的字母 "V"（text-2xl、font-semibold、颜色 #051A24）+ "开始聊天"主要按钮。

动画：

所有区域都使用自定义 useInViewAnimation hook（IntersectionObserver，threshold 0.1，仅触发一次）。元素进入视图时获得 animate-fade-in-up class（否则为 opacity-0）。动画在 CSS 中定义：


@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}
每个区域内的元素使用交错的 animationDelay 值（0.1s、0.2s、0.3s 等）。

配色：

主深色：#051A24
次深色：#0D212C
深色背景上的浅色文字：#F6FCFF、#E0EBF0
正文文字：#051A24
弱化文字：#273C46
背景：全程为白色
按钮阴影（对设计质感至关重要）：

主要按钮：0_1px_2px_0_rgba(5,26,36,0.1), 0_4px_4px_0_rgba(5,26,36,0.09), 0_9px_6px_0_rgba(5,26,36,0.05), 0_17px_7px_0_rgba(5,26,36,0.01), 0_26px_7px_0_rgba(5,26,36,0), inset_0_2px_8px_0_rgba(255,255,255,0.5)
次要按钮：0_0_0_0.5px_rgba(0,0,0,0.05), 0_4px_30px_rgba(0,0,0,0.08)
字体（CSS）：


@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'PP Mondwest';
  src: url('/PPMondwest-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
文件结构：

src/App.tsx - 包含首屏、滚动字幕带和各区域组合的主布局
src/components/Button.tsx - 可复用按钮（primary/secondary/tertiary 变体）
src/components/TestimonialSection.tsx - 带视差图片的引语区域
src/components/PricingSection.tsx - 两张定价卡片
src/components/TestimonialCarousel.tsx - 自动滚动的客户评价卡片
src/components/ProjectsSection.tsx - 项目展示条目
src/components/PartnerSection.tsx - 交互式鼠标轨迹 CTA 区域
src/components/Footer.tsx - 带链接的页脚
src/components/CopyrightBar.tsx - 版权行
src/components/BottomNav.tsx - 固定悬浮底部导航
src/hooks/useInViewAnimation.ts - 由 IntersectionObserver 触发滚动动画的 hook
src/index.css - 字体声明、滚动字幕带动画、向上淡入动画