AI Designer Portfolio
Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. The page has a white background throughout and uses two custom fonts: "PP Neue Montreal" (body text, loaded from Webflow CDN) and "PP Mondwest" (serif accent font, loaded from a local /PPMondwest-Regular.woff2 file). The body default font is PP Neue Montreal with system fallbacks.
The page consists of these sections in order:
- HERO SECTION (centered, narrow column max-w-[440px], px-6, pt-12 md:pt-16)
Logo text: "Viktor Oddy" in PP Mondwest serif font, text-[32px] md:text-[40px] lg:text-[44px], font-semibold, color #051A24, tracking-tight, mb-4. Fades in with staggered animation (delay 0.1s).
Tagline: "The creative studio of Viktor Oddy" in monospace font (font-mono), text-xs md:text-sm, color #051A24, mb-2. Animation delay 0.2s.
Main Heading: Two lines: "Build the next wave," and "the bold way." where "next wave" and "bold way." are in PP Mondwest serif. Text is text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight, whitespace-nowrap. Animation delay 0.3s.
Description: Three paragraphs in a flex-col gap-6 container, text-sm md:text-base, color #051A24, leading-relaxed, mt-5 md:mt-6. Animation delay 0.4s.
Paragraph 1: "I spent seven years at Apple crafting products used by over a billion people. I founded Vortex Studio to bring that same level of thinking to innovators shaping what comes next."
Paragraph 2: "The studio is deliberately small. I guide the creative vision on every project, backed by a veteran design crew that moves fast without cutting corners."
Paragraph 3: "Projects start at $5,000 per month."
Two buttons in flex-col sm:flex-row, gap-3 md:gap-4, mt-5 md:mt-6. Animation delay 0.5s:
"Start a chat" (primary: bg-[#051A24], text white, rounded-full, px-7 py-3, with a complex multi-layered box-shadow including an inset highlight)
"View projects" (secondary: bg-white, text #051A24, no border, with subtle shadow)
- INFINITE MARQUEE (full width, mt-16 md:mt-20, mb-16)
Horizontally scrolling image strip. Uses 8 GIF images duplicated (total 16) in a flex row with animate-marquee CSS animation (translateX(0) to translateX(-50%), 30s linear infinite on desktop, 10s on mobile). Images are h-[280px] md:h-[500px], object-cover, mx-3, rounded-2xl, shadow-lg.
Image URLs (all from 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
- TESTIMONIAL QUOTE SECTION (py-12, px-6, max-w-2xl, centered)
A quote icon (lucide-react Quote, w-6 h-6, text-slate-900). Animation delay 0.1s.
Large quote text: 'I left Apple to build the studio I always wanted to work with' where "Apple" is in PP Mondwest serif. Text sizing: text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight. Animation delay 0.2s.
Author: "Viktor Oddy" in italic, text-sm, color #273C46. Animation delay 0.3s.
Three company logo names displayed as text: "Apple" (80px wide, 24px font), "IDEO" (83px wide, 24px font), "Polygon" (110px wide, 24px font). Font-medium, text-slate-900. Animation delay 0.4s.
Below logos: A parallax image (scrolls with a parallax effect based on viewport position, max offset 200px). The image URL is: 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 text "Chris Halaska". w-full max-w-xs rounded-2xl shadow-lg. Animation delay 0.5s. The parallax uses IntersectionObserver + scroll listener with requestAnimationFrame.
- PRICING SECTION (full width, py-12, px-6)
Two cards in a grid (grid-cols-1 md:grid-cols-2, gap-8), aligned right on desktop (md:justify-end, md:max-w-4xl). Each card has rounded-[40px], pl-10 pr-10 md:pr-24 pt-3 pb-10.
Card 1 (Dark): bg-[#051A24], inset shadow. Text color #F6FCFF / #E0EBF0. Animation delay 0.1s.
Title: "Monthly Partnership" (text-[22px], font-medium)
Description: "A dedicated creative design team. / You work directly with Viktor."
Price: "$5,000" (text-2xl, color #F6FCFF), "Monthly" below
Two buttons: "Start a chat" (primary) + "How it works" (secondary), both linking to https://halaskastudio.com/./book
Card 2 (Light): bg-white, shadow-[0_4px_16px_rgba(0,0,0,0.08)]. Animation delay 0.2s.
Title: "Custom Project" (text-[22px], font-medium)
Description: "Fixed scope, fixed timeline. / Same team, same standards."
Price: "$5,000" (text-2xl, color #0D212C), "Minimum" below
One button: "Start a chat" (tertiary variant: white bg with combined shadow)
- TESTIMONIAL CAROUSEL (full width, py-20)
Header row (md:max-w-4xl, md:ml-auto): Title "What builders say" (where "builders" is in PP Mondwest serif, same large heading size) on left. On the right: 5 filled black star icons (lucide-react Star, w-5 h-5, fill-black) + "Clutch 5/5" text.
Auto-scrolling carousel (3s interval, pauses on hover) with prev/next circular buttons (w-12 h-12 rounded-full, border border-[#0D212C]/20, lucide ChevronLeft/ChevronRight).
Cards are 427.5px wide on desktop (full width minus 48px on mobile), gap-6, with exit animation (opacity fade + scale down). Each card: 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.
Card content: SVG quote mark icon (custom path), quote text (text-base, color #0D212C, leading-relaxed), author row with circular avatar (w-12 h-12), name (font-semibold, text-sm), role/company with arrow prefix.
Testimonials array uses Pexels avatar images. The testimonials are tripled for infinite scroll effect. Transform uses cubic-bezier(0.4, 0, 0.2, 1) with 0.8s transition.
5 testimonials:
Marcus Anderson, CEO, Data.storage - "With very little guidance team delivered designs that were consistently spot on..."
alexwu, Founder, Nexgate - "Viktor led the creation of our best fundraising deck to date!..."
James Mitchell, VP Product, LaunchPad - "Working with Viktor transformed our product vision..."
Rachel Foster, Co-founder, Nexus Labs - "The design quality exceeded our expectations..."
David Zhang, Head of Design, Paradigm Labs - "Incredible work from start to finish..."
- PROJECTS SECTION (max-w-[1200px], px-6, py-12)
Vertical stack of 3 project items (gap-16 md:gap-20). Each has:
Text block offset left (ml-20 md:ml-28): Project name in PP Mondwest serif (text-2xl md:text-3xl, font-semibold, color #051A24) + description (text-sm md:text-base, color #051A24/70)
Full-width image below (rounded-2xl, shadow-lg, object-cover)
Each item independently triggers fade-in animation via IntersectionObserver.
Projects:
"evr" - "From idea to millions raised for a web3 AI product" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
"Automation Machines" - "Streamlining industrial automation processes" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif
"xPortfolio" - "Modern portfolio management platform" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif
- PARTNER SECTION (full width, py-12, px-6)
Large white container (max-w-7xl, py-48, rounded-[40px], subtle shadow). On mouse hover, GIF thumbnails (from the marquee images array) spawn at cursor position with random rotation (-10 to +10 deg), fade out over 1000ms with scale-down, spawning every 80ms minimum. Uses requestAnimationFrame-style cleanup.
Centered heading: "Partner with us" in PP Mondwest serif, text-[48px] md:text-[64px] lg:text-[80px], color #0D212C, mb-12.
CTA button: Dark pill with circular avatar image (Pexels photo 415829, w-10 h-10 rounded-full) + "Start chat with Viktor". Same primary button shadow style.
- FOOTER (full width, py-12, px-6, max-w-[1200px])
Flex row (md:flex-row). Left side: "Start a chat" primary button. Right side: ArrowUpRight icon (lucide-react), then two columns of links:
Column 1: Services, Work, About (anchor links)
Column 2: x.com, LinkedIn (external links, target _blank)
All links: text-base, color #051A24, hover:opacity-70 transition.
- COPYRIGHT BAR (max-w-[1200px], px-6, py-4)
Flex row justify-between: "Vortex Studio Limited" on left, "Austin, USA" on right. Text-sm, color #051A24.
- FIXED BOTTOM NAV (z-50, centered)
Floating pill fixed to bottom (bottom-6, centered via left-1/2 -translate-x-1/2). White bg, rounded-full, px-8 py-2, complex layered shadow. Contains: "V" letter in PP Mondwest serif (text-2xl, font-semibold, color #051A24) + "Start a chat" primary button.
ANIMATIONS:
All sections use a custom useInViewAnimation hook (IntersectionObserver with threshold 0.1, triggers once). Elements get class animate-fade-in-up when in view (otherwise opacity-0). The animation is defined in 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;
}
Each element within a section has staggered animationDelay values (0.1s, 0.2s, 0.3s, etc.).
COLOR PALETTE:
Primary dark: #051A24
Secondary dark: #0D212C
Light text on dark: #F6FCFF, #E0EBF0
Body text: #051A24
Muted text: #273C46
Background: white throughout
BUTTON SHADOWS (critical for the design feel):
Primary: 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)
Secondary: 0_0_0_0.5px_rgba(0,0,0,0.05), 0_4px_30px_rgba(0,0,0,0.08)
FONTS (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;
}
FILE STRUCTURE:
src/App.tsx - Main layout with hero, marquee, and section composition
src/components/Button.tsx - Reusable button (primary/secondary/tertiary variants)
src/components/TestimonialSection.tsx - Quote with parallax image
src/components/PricingSection.tsx - Two pricing cards
src/components/TestimonialCarousel.tsx - Auto-scrolling testimonial cards
src/components/ProjectsSection.tsx - Project showcase items
src/components/PartnerSection.tsx - Interactive mouse-trail CTA section
src/components/Footer.tsx - Footer with links
src/components/CopyrightBar.tsx - Copyright line
src/components/BottomNav.tsx - Fixed floating bottom nav
src/hooks/useInViewAnimation.ts - IntersectionObserver scroll-trigger hook
src/index.css - Font faces, marquee animation, fade-in-up animation
使用 React、TypeScript、Vite 和 Tailwind CSS 创建一个名为“维克托·奥迪”的创意设计工作室的单页展示页面。使用 lucide-react 作为图标库。该页面整体采用白色背景，并使用了两种自定义字体：“PP Neue Montreal”（正文文本，从 Webflow CDN 加载）和“PP Mondwest”（衬线装饰字体，从本地的 /PPMondwest-Regular.woff2 文件加载）。正文默认字体为 PP Neue Montreal，同时具有系统默认字体的备用选项。
该页面按以下顺序包含以下这些部分：
- 英雄板块（居中显示，窄列，最大宽度为 440 像素，内边距 6 像素，上边距 12 像素（在小屏幕上为 16 像素）
标志文字：“维克托·奥迪”用 PP 莫德韦斯特衬线字体呈现，字体大小为 32 像素（小屏幕为 40 像素，大屏幕为 44 像素），字体加粗，颜色为 #051A24，行距紧凑，间距为 4 像素。采用交错动画效果（延迟 0.1 秒）渐显。
标语：“维克托·奥迪的创意工作室”用等宽字体（font-mono）呈现，字体大小为小号至小屏幕的 4 像素，颜色为 #051A24，间距为 2 像素。动画延迟 0.2 秒。
主标题：两行文字：“打造下一个浪潮”，以及“大胆的方式”。其中“下一个浪潮”和“大胆的方式”均使用 PP 莫德韦斯特衬线字体。字体大小为 32 像素（小屏幕为 40 像素，大屏幕为 44 像素），行距为 1.1 倍，颜色为 #0D212C，行距紧凑，无空格。动画延迟 0.3 秒。
描述：在一个灵活的列布局容器中包含三段文字，字体大小为小号至小屏幕的 4 像素，颜色为 #051A24，行距宽松，间距为 5 像素（大屏幕为 6 像素）。动画延迟 0.4 秒。
段落 1：“我在苹果公司工作了七年，负责为超过十亿人设计产品。我创立了 Vortex 工作室，将同样的思考水平带给塑造未来趋势的创新者们。”
段落 2：“工作室规模特意控制在较小的规模。我在每个项目中指导创意方向，背后有经验丰富的设计团队支持，他们行动迅速但不偷工减料。”
段落 3：“项目每月起价 5000 美元。”在“flex-col”布局中添加“flex-row”样式，间距为 3 像素（小屏幕时为 4 像素），上边距为 5 像素（小屏幕时为 6 像素）。动画延迟时间为 0.5 秒：
“开始聊天”（主按钮：背景色为[#051A24]，文字颜色为白色，圆角，边框宽度为 7 像素，高度为 3 像素，带有复杂的多层盒阴影，包括内嵌高光）
“查看项目”（次按钮：背景色为白色，文字颜色为[#051A24]，无边框，带有轻微阴影）2. 無限型廣告牌（全寬，上邊距 16 像素，中等尺寸時上邊距 20 像素，下邊距 16 像素）
水平滚动的图片条。使用 8 张重复的 GIF 图片（总共 16 张），以一行排列的方式排列在弹性容器中，并应用 animate-marquee CSS 动画（从 translateX(0) 到 translateX(-50%)，在桌面端为 30 秒线性无限循环，在移动端为 10 秒）。图片的尺寸为 h-[280px]（桌面）/ md:h-[500px]（移动端），采用 object-cover 属性，间距为 mx-3，圆角为 rounded-2xl，阴影为 shadow-lg。
图片网址（均来自 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
- 客户评价区（宽度为 12 像素，高度为 6 像素，最大宽度为 2 倍横屏宽度，居中显示）
一个引用图标（lucide-react Quote，宽 6 像素，高 6 像素，文字颜色为深蓝 900）。动画延迟 0.1 秒。
大段引用文本：“我离开苹果公司是为了建立我一直想与之合作的工作室”其中“苹果”使用 PP Mondwest serif 字体。文本大小：文本 [32px]，大字体 [40px]，大字体 [44px]，行距 [1.1]，颜色 #0D212C，字距紧凑。动画延迟 0.2 秒。
作者：“维克托·奥迪”以斜体显示，字体大小为小号，颜色 #273C46。动画延迟 0.3 秒。
三个公司名称以文本形式显示：苹果（宽 80 像素，字体大小 24 像素）、IDEO（宽 83 像素，字体大小 24 像素）、Polygon（宽 110 像素，字体大小 24 像素）。字体加粗，文字颜色为深蓝 900。动画延迟 0.4 秒。
在这些标志下方：一个渐变图像（根据视口位置以渐变效果滚动，最大偏移量 200 像素）。图像的 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。替代文本“克里斯·哈拉萨卡”。宽 100%，最大宽度为小号，圆角 2xl，阴影大。动画延迟 0.5 秒。渐变使用 IntersectionObserver + 滚动监听器与 requestAnimationFrame 结合。4. 價格區塊（全寬，py-12，px-6）
在网格中排列两张卡片（grid-cols-1 md:grid-cols-2，间距为 8 像素），在桌面端居右对齐（md:justify-end，md:max-w-4xl）。每张卡片具有圆角尺寸为 40 像素，内侧边距为 10 像素，外侧边距为 10 像素（md:pr-24），顶部间距为 3 像素，底部间距为 10 像素。
卡片 1（暗色）：背景色为[#051A24]，带有内阴影效果。文字颜色为 #F6FCFF / #E0EBF0。动画延迟时间为 0.1 秒。
标题：“月度合作”（文本 - 22px，字体加粗）
描述：“一支专业的创意设计团队。/ 您可直接与维克托合作。”
价格：“5000 美元”（文本 - 2xl，颜色 #F6FCFF），下方标注“每月”
两个按钮：“开始聊天”（主按钮）+ “如何使用”（次按钮），两者均链接至 https://halaskastudio.com/./book
卡片 2（浅色）：背景为白色，阴影为 [0_4px_16px_rgba(0，0，0，0.08)]。动画延迟 0.2 秒。
标题：“定制项目”（字体大小：22 像素，字体样式：加粗）
描述：“明确的范围，确定的时间表。/ 同一团队，相同标准。”
标题：“定制项目”（字体大小：22 像素，字体样式：加粗）
描述：“明确的范围，固定的期限。/ 同一团队，相同标准。”
价格：“5000 美元”（字体大小：2xl，颜色：#0D212C），“最低价格”在下方显示
一个按钮：“开始聊天”（辅助样式：白色背景，叠加阴影）5. 客户评价轮播（全宽展示，间距 20 像素）
标题行（最大宽度为 4xl，居右对齐）：左侧为标题“建筑商怎么说”（其中“建筑商”使用 PP Mondwest serif 字体，字体大小与标题一致），右侧为 5 个填充黑色的星星图标（使用 lucide-react Star 图标，宽 5 像素，高 5 像素，填充为黑色）加上“完美 5/5”文字。
自动滚动的轮播图（间隔 3 秒，鼠标悬停时暂停）带有前后方向的圆形按钮（宽 12 像素，高 12 像素，圆形，边框为[#0D212C]/20，使用 lucide ChevronLeft/ChevronRight 图标）。
卡片在桌面模式下宽 427.5 像素（在移动端时减去 48 像素），间距 6 像素，带有退出动画（透明度渐变 + 缩小）。每个卡片：背景为白色，圆角为 32 像素（在移动端为 40 像素），阴影为 [0_4px_16px_rgba(0，0，0，0.08)]，内边距 6 像素，移动端外边距为 10 像素，内边距为 24 像素，内边距为 8 像素。
卡片内容：SVG 书签图标（自定义路径），引文文本（文本基线，颜色为 #0D212C，行距宽松），作者行带有圆形头像（宽 12 像素，高 12 像素），姓名（粗体，小号），角色/公司带有箭头前缀。
评价数组使用 Pexels 头像图片。评价被三倍显示以实现无限滚动效果。变换使用 cubic-bezier(0.4， 0， 0.2， 1) 并带有 0.8 秒的过渡时间。
5 个评价：
马库斯·安德森，Data.storage 公司首席执行官：“团队在几乎没有指导的情况下，仍成功地完成了精准的设计……”
亚历克斯·吴，Nexgate 公司创始人：“维克托主导了我们迄今为止最出色的融资演示文稿的制作……”
詹姆斯·米切尔，LaunchPad 公司产品副总裁：“与维克托合作使我们的产品愿景得以实现……”
瑞秋·福斯特，Nexus Labs 公司联合创始人：“设计质量超出了我们的预期……”
大卫·张，Paradigm Labs 公司设计主管：“从头到尾，维克托的工作都堪称出色……”6. 項目部分（最大宽度为 1200 像素，内边距为 6 像素，外边距为 12 像素）
3 个项目项组成的垂直排列（间距为 16 像素，大屏幕模式下为 20 像素）。每个项目都有：
文本块向左偏移（在小屏幕设备上偏移 20 像素，在中等屏幕设备上偏移 28 像素）：项目名称使用 PP Mondwest serif 字体（字体大小为 2xl，在中等屏幕设备上为 3xl，字体加粗，颜色为 #051A24）加上描述（字体大小为 text-sm，在中等屏幕设备上为 text-base，颜色为 #051A24/70）
下方为全宽图片（圆角为 2xl，阴影为 lg，对象居中）
每个项目通过 IntersectionObserver 独立触发淡入动画。项目：
“evr” - “从创意到为一款 Web3 人工智能产品筹集数百万资金” - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
“自动化机器” - “简化工业自动化流程” - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif
“xPortfolio” - “现代化的投资组合管理平台” - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif7. 合作伙伴部分（全宽布局，上边距 12 像素，左右边距 6 像素）
一个巨大的白色容器（最大宽度为 7 倍屏宽，内边距为 48 像素，圆角为 40 像素，带有轻微阴影）。当鼠标悬停时，从滚动图片数组中选取的 GIF 图片会以随机旋转（-10 到 +10 度）的形式出现在鼠标位置，并在 1000 毫秒内淡出并缩小，每 80 毫秒至少生成一次。使用 requestAnimationFrame 式的清理机制。
居中标题：“与我们合作”，使用 PP Mondwest 粗体字体，文本大小为 48 像素（大屏幕显示为 64 像素，大屏幕显示为 80 像素），颜色为 #0D212C，下边距为 12 像素。
行动号召按钮：深色长方形按钮，带有圆形头像图片（来自 Pexels，图片编号 415829，宽 10 像素、高 10 像素、圆形边缘），加上“与维克托开始聊天”。与主按钮的阴影样式相同。8. 页脚（全宽，上边距 12 像素，左边距 6 像素，最大宽度为 1200 像素）
弹性行（md:flex-row）。左侧：名为“开始聊天”的主按钮。右侧：向右上方的箭头图标（来自 lucide-react），然后是两列链接：
列 1：服务、工作、关于（锚链接）
列 2：x.com、LinkedIn（外部链接，目标为新窗口）
所有链接：文本基础色，颜色 #051A24，鼠标悬停效果：透明度 70%，过渡效果。
- 版權條款框（最大寬度為 1200 像素，外邊距為 6 像素，內邊距為 4 像素）
行内使用“justify-between”属性：左侧显示“Vortex Studio Limited”，右侧显示“美国奥斯汀”。字体大小为“text-sm”，颜色为“#051A24”。
- 固定底部导航栏（位置 z-50，居中）
悬浮的药丸固定在底部（底部-6，通过左-1/2 -translate-x-1/2 进行居中）。白色背景，圆形，px-8 py-2，复杂的分层阴影。包含：“V”字母的 PP 摩登韦斯特衬线字体（文本-2xl，字体加粗，颜色 #051A24）+ “开始聊天” 主要按钮。
動畫：
所有部分均使用了一个自定义的 useInViewAnimation 钩子（带有阈值 0.1 的 IntersectionObserver，仅触发一次）。当元素处于视图范围内时，会添加“animate-fade-in-up”类（否则会设置为“opacity-0”）。动画在 CSS 中定义如下：
@keyframes fadeInUp {
0% { 透明度：0；变换：垂直方向移动 30 像素； }}
100% { 透明度：1；变换：垂直位移 0 像素； }}
}
.animate-fade-in-up {
动画效果：向上淡入淡出，持续时间 0.8 秒，缓动方式为“缓出”，播放方式为“向前”；
透明度：0；}
每个部分内的元素都有不同的动画延迟值（0.1 秒、0.2 秒、0.3 秒等）。
色彩调色板：
主色调：#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)，内凹式 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 {
字体名称： 'PP Neue Montreal'；
来源： 媒体资源地址('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') 格式('opentype')；
字体加粗度： 400；
字体显示方式： 替换；}
@font-face {
字体名称： 'PP Neue Montreal'；
来源： 媒体资源地址('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') 格式('opentype')；
字体加粗度： 500；
字体显示方式： 替换；}
@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 - 可复用按钮（主要/次要/第三种变体）
src/components/TestimonialSection.tsx - 带有渐进式图像的引述
src/components/PricingSection.tsx - 两个定价卡片
src/components/TestimonialCarousel.tsx - 自动滚动的引述卡片
src/components/ProjectsSection.tsx - 项目展示项目
src/components/PartnerSection.tsx - 交互式鼠标轨迹的行动呼吁区
src/components/Footer.tsx - 页脚包含链接
src/components/CopyrightBar.tsx - 版权行
src/components/BottomNav.tsx - 固定浮动底部导航
src/hooks/useInViewAnimation.ts - 交互观察者滚动触发钩子
src/index.css - 字体样式、滚动字幕动画、渐入上移动画