· 手记 · Damien Wang

NOTE // 52

使用 React、TypeScript、Vite 和 Tailwind CSS 创建一个名为“维克托·奥迪”的创意设计工作室的单页展示页面。

Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS.

使用 lucide-react 作为图标库。

Use lucide-react for icons.

该页面整体采用白色背景，并使用了两种自定义字体：“PP Neue Montreal”（正文文本，从 Webflow CDN 加载）和“PP Mondwest”（衬线装饰字体，从本地的 /PPMondwest-Regular.woff2 文件加载）。

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.

正文默认字体是 PP Neue Montreal，同时有系统默认字体作为备用。

woff2 file).

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

The body default font is PP Neue Montreal with system fallbacks.

英雄板块（居中显示，窄列，最大宽度为 440 像素，内边距 6 像素，上边距 12 像素（在小屏幕设备上为 16 像素）

The page consists of these sections in order:

标志文字：“维克托·奥迪”用 PP 莫德韦斯特衬线字体呈现，字体大小为 32 像素（小号）、40 像素（中号）、44 像素（大号），字体加粗，颜色为 #051A24，行距紧凑，间距为 4 像素。

HERO SECTION (centered, narrow column max-w-[440px], px-6, pt-12 md:pt-16)

采用交错动画效果（延迟 0.1 秒）渐显。

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.

标语：“维克托·奥迪的创意工作室”用等宽字体（font-mono）呈现，字体大小为小号（text-xs）、小号到中号（md:text-sm），颜色为 #051A24，间距为 2 像素。

Fades in with staggered animation (delay 0.1s).

动画延迟 0.2 秒。

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.

其中“下一个浪潮”和“大胆的方式”均使用 PP 莫德韦斯特衬线字体。

Main Heading: Two lines: "Build the next wave," and "the bold way." where "next wave" and "bold way." are in PP Mondwest serif.

字体大小为 32 像素（小号）、40 像素（中号）、44 像素（大号），行距为 1.1 倍，颜色为 #0D212C，行距紧凑，无空格。

Text is text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight, whitespace-nowrap.

动画延迟 0.3 秒。

Animation delay 0.3s.

描述：在一个使用 flex-col 分隔符和间距为 6 像素的容器中包含三段文字，字体大小为小号（text-sm）、中号（md:text-base），颜色为 #051A24，行距宽松，间距为 5 像素（md：mt-6）。

Description: Three paragraphs in a flex-col gap-6 container, text-sm md:text-base, color #051A24, leading-relaxed, mt-5 md:mt-6.

动画延迟 0.4 秒。

Animation delay 0.4s.

段落 1：“我在苹果公司工作了七年，负责为超过十亿人使用的产品进行设计。

Paragraph 1: "I spent seven years at Apple crafting products used by over a billion people.

我创立了 Vortex 工作室，将同样的思考水平带给塑造未来趋势的创新者们。”

I founded Vortex Studio to bring that same level of thinking to innovators shaping what comes next."

段落 2：“工作室规模特意控制在较小的规模。

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."

段落 3：“项目每月起价 5000 美元。”

Paragraph 3: "Projects start at $5,000 per month."

在“flex-col”布局中添加“flex-row”样式，间距为 3 像素（小屏幕时为 4 像素），上边距为 5 像素（小屏幕时为 6 像素）。

Two buttons in flex-col sm:flex-row, gap-3 md:gap-4, mt-5 md:mt-6.

动画延迟时间为 0.5 秒：

Animation delay 0.5s:

“开始聊天”（主按钮：背景色为[#051A24]，文字颜色为白色，圆角，边框宽度为 7 像素，高度为 3 像素，带有复杂的多层盒阴影，包括内嵌高光）

"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)

“查看项目”（次按钮：背景色为白色，文字颜色为[#051A24]，无边框，带有轻微阴影）2.

"View projects" (secondary: bg-white, text #051A24, no border, with subtle shadow)

無限型標誌（全寬，上邊距 16 像素，中等尺寸為 20 像素，下邊距 16 像素）

INFINITE MARQUEE (full width, mt-16 md:mt-20, mb-16)

水平滚动的图片条。

Horizontally scrolling image strip.

使用 8 张重复的 GIF 图片（总共 16 张），以一行排列的方式排列在弹性容器中，并应用 animate-marquee CSS 动画（从 translateX(0) 到 translateX(-50%)，在桌面端为 30 秒线性无限循环，在移动端为 10 秒）。

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).

图片的尺寸为 h-[280px]（桌面）/ md:h-[500px]（移动端），采用 object-cover 属性，间距为 mx-3，圆角为 rounded-2xl，阴影为 shadow-lg。

Images are h-[280px] md:h-[500px], object-cover, mx-3, rounded-2xl, shadow-lg.

图片网址（均来自 motionsites.ai）：

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

客户评价区（宽度为 12 像素，高度为 6 像素，最大宽度为 2 倍横屏宽度，居中显示）
TESTIMONIAL QUOTE SECTION (py-12, px-6, max-w-2xl, centered)

一个引用图标（lucide-react Quote，宽 6 像素，高 6 像素，文字颜色为深蓝 900）。

A quote icon (lucide-react Quote, w-6 h-6, text-slate-900).

动画延迟 0.1 秒。

Animation delay 0.1s.

大段引用文本：“我离开苹果公司是为了建立我一直想与之合作的工作室”其中“苹果”使用 PP Mondwest serif 字体。

Large quote text: 'I left Apple to build the studio I always wanted to work with' where "Apple" is in PP Mondwest serif.

文本大小：文本 [32px]，大屏幕 [40px]，大屏幕 [44px]，行距 [1.1]，颜色 #0D212C，字距紧凑。

Text sizing: text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight.

动画延迟 0.2 秒。

Animation delay 0.2s.

作者：“维克托·奥迪”以斜体显示，字体大小为小号，颜色 #273C46。

Author: "Viktor Oddy" in italic, text-sm, color #273C46.

动画延迟 0.3 秒。

Animation delay 0.3s.

三个公司名称以文本形式显示：苹果（宽 80 像素，字体大小 24 像素）、IDEO（宽 83 像素，字体大小 24 像素）、Polygon（宽 110 像素，字体大小 24 像素）。

Three company logo names displayed as text: "Apple" (80px wide, 24px font), "IDEO" (83px wide, 24px font), "Polygon" (110px wide, 24px font).

字体加粗，文字颜色为深蓝 900。

Font-medium, text-slate-900.

动画延迟 0.4 秒。

Animation delay 0.4s.

在这些标志下方：一个渐变图像（根据视口位置以渐变效果滚动，最大偏移量 200 像素）。

Below logos: A parallax image (scrolls with a parallax effect based on viewport position, max offset 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。

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".

宽 100%，最大宽度为小号，圆角 2xl，阴影大。

w-full max-w-xs rounded-2xl shadow-lg.

动画延迟 0.5 秒。

Animation delay 0.5s.

渐变使用 IntersectionObserver + 滚动监听器与 requestAnimationFrame 结合。

The parallax uses IntersectionObserver + scroll listener with requestAnimationFrame.

價格區塊（全寬，py-12，px-6）
PRICING SECTION (full width, py-12, px-6)

在一个网格中排列两张卡片（grid-cols-1 md:grid-cols-2，间距为 8 像素），在桌面端居右对齐（md:justify-end，md:max-w-4xl）。

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).

每张卡片都具有圆角尺寸为 40 像素，内侧边距为 10 像素，外侧边距为 10 像素（md:pr-24），顶部间距为 3 像素，底部间距为 10 像素。

Each card has rounded-[40px], pl-10 pr-10 md:pr-24 pt-3 pb-10.

卡片 1（暗色）：背景色为[#051A24]，带有内阴影效果。

Card 1 (Dark): bg-[#051A24], inset shadow.

文字颜色为 #F6FCFF / #E0EBF0。

Text color #F6FCFF / #E0EBF0.

动画延迟时间为 0.1 秒。

Animation delay 0.1s.

标题：“月度合作”（字体 - 22px，字体加粗）

Title: "Monthly Partnership" (text-[22px], font-medium)

描述：“一支专业的创意设计团队。

Description: "A dedicated creative design team.

/ 您可直接与维克托合作。”

/ You work directly with Viktor."

价格：“5000 美元”（字体 - 2xl，颜色 #F6FCFF），下方标注“每月”

Price: "$5,000" (text-2xl, color #F6FCFF), "Monthly" below

两个按钮：“开始聊天”（主按钮）+ “如何使用”（次按钮），两者均链接至 https://halaskastudio.com/./book

Two buttons: "Start a chat" (primary) + "How it works" (secondary), both linking to https://halaskastudio.com/./book

卡片 2（浅色）：背景为白色，阴影为 [0_4px_16px_rgba(0，0，0，0.08)]。

Card 2 (Light): bg-white, shadow-[0_4px_16px_rgba(0,0,0,0.08)].

动画延迟 0.2 秒。

Animation delay 0.2s.

标题：“定制项目”（字体大小：22 像素，字体样式：加粗）

Title: "Custom Project" (text-[22px], font-medium)

描述：“明确的范围，确定的时间表。

Description: "Fixed scope, fixed timeline.

/ 同一团队，相同标准。”

/ Same team, same standards."

价格：“5000 美元”（字体大小：2xl，颜色：#0D212C），“最低价格”在下方显示

Price: "$5,000" (text-2xl, color #0D212C), "Minimum" below

一个按钮：“开始聊天”（辅助样式：白色背景，叠加阴影）5. 客户评价轮播（全宽展示，间距 20 像素）

One button: "Start a chat" (tertiary variant: white bg with combined shadow)

标题行（最大宽度为 4xl，居右对齐）：左侧为标题“建筑商怎么说”（其中“建筑商”使用 PP Mondwest serif 字体，字体大小与标题一致），右侧为 5 个填充黑色星星图标（lucide-react 星图标，宽 5 像素，高 5 像素，填充黑色）加上“完美 5/5”文字。

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.

自动滚动的轮播图（间隔 3 秒，鼠标悬停时暂停）带有前后方向的圆形按钮（宽 12 像素，高 12 像素，圆形，边框边距为 [#0D212C]/20，lucide ChevronLeft/ChevronRight）。

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).

卡片在桌面模式下宽 427.5 像素（在移动端减去 48 像素），间距 6 像素，带有退出动画（透明度渐变 + 缩小）。

Cards are 427.5px wide on desktop (full width minus 48px on mobile), gap-6, with exit animation (opacity fade + scale down).

每个卡片：背景白色，圆角 [32px]（在移动端为 [40px]），阴影 [0_4px_16px_rgba(0，0，0，0.08)]，内边距 6 像素，移动端外边距 10 像素，内边距 24 像素，内边距 8 像素。

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.

卡片内容：SVG 引用符号图标（自定义路径），引用文本（文本基线，颜色 #0D212C，行距宽松），作者行带有圆形头像（宽 12 像素，高 12 像素），姓名（粗体，小号），角色/公司带有箭头前缀。

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.

评价数组使用 Pexels 头像图片。

Testimonials array uses Pexels avatar images.

评价三倍显示以实现无限滚动效果。

The testimonials are tripled for infinite scroll effect.

变换使用 cubic-bezier(0.4， 0， 0.2， 1) 并有 0.8 秒的过渡时间。

Transform uses cubic-bezier(0.4, 0, 0.2, 1) with 0.8s transition.

5 个评价：

5 testimonials:

马库斯·安德森，Data.storage 公司首席执行官：“团队在几乎没有指导的情况下，仍成功地完成了精准的设计……”

Marcus Anderson, CEO, Data.

亚历克斯·吴，Nexgate 公司创始人：“维克托主导了我们迄今为止最出色的融资演示文稿的制作……”

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!..."

詹姆斯·米切尔，LaunchPad 公司产品副总裁：“与维克托合作使我们的产品愿景得以实现……”

James Mitchell, VP Product, LaunchPad - "Working with Viktor transformed our product vision..."

瑞秋·福斯特，Nexus Labs 公司联合创始人：“设计质量超出了我们的预期……”

Rachel Foster, Co-founder, Nexus Labs - "The design quality exceeded our expectations..."

大卫·张，Paradigm Labs 公司设计主管：“从始至终，维克托的工作都极为出色……”

David Zhang, Head of Design, Paradigm Labs - "Incredible work from start to finish..."

項目部分（最大宽度为 1200 像素，内边距为 6 像素，外边距为 12 像素）
PROJECTS SECTION (max-w-[1200px], px-6, py-12)

3 个项目项组成的垂直排列（间距为 16 像素，大屏幕模式下为 20 像素）。

Vertical stack of 3 project items (gap-16 md:gap-20).

每个项目都有：

Each has:

文本块向左偏移（在小屏幕上偏移 20 像素，在大屏幕上偏移 28 像素）：项目名称使用 PP Mondwest 粗体字体（字体大小为 2xl，在大屏幕上为 3xl，字体加粗，颜色为 #051A24）加上描述（字体大小为 text-sm，在大屏幕上为 text-base，颜色为 #051A24/70）

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)

下方为全宽图片（圆角为 2xl，阴影为 lg，图像覆盖）

Full-width image below (rounded-2xl, shadow-lg, object-cover)

每个项目通过 IntersectionObserver 独立触发淡入动画。

Each item independently triggers fade-in animation via IntersectionObserver.

项目：

Projects:

“evr” - “从创意到为一款 Web3 人工智能产品筹集数百万资金” - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif

"evr" - "From idea to millions raised for a web3 AI product" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif

“自动化机器” - “简化工业自动化流程” - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif

"Automation Machines" - "Streamlining industrial automation processes" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif

“xPortfolio” - “现代化的投资组合管理平台” - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif7.

"xPortfolio" - "Modern portfolio management platform" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif

合作伙伴部分（全宽布局，上边距 12 像素，左右边距 6 像素）
PARTNER SECTION (full width, py-12, px-6)

一个巨大的白色容器（最大宽度为 7 倍屏宽，内边距为 48 像素，圆角为 40 像素，带有轻微阴影）。

Large white container (max-w-7xl, py-48, rounded-[40px], subtle shadow).

当鼠标悬停时，从滚动图片数组中选取的 GIF 图片会以随机旋转（-10 到 +10 度）的形式出现在鼠标位置，并在 1000 毫秒内淡出并缩小大小，每 80 毫秒至少生成一次。

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.

使用了类似于 requestAnimationFrame 的清理方式。

Uses requestAnimationFrame-style cleanup.

居中标题：“与我们合作”，使用 PP Mondwest 粗体字体，文本大小为 48 像素（大屏幕显示为 64 像素，大屏幕显示为 80 像素），颜色为 #0D212C，下边距 12 像素。

Centered heading: "Partner with us" in PP Mondwest serif, text-[48px] md:text-[64px] lg:text-[80px], color #0D212C, mb-12.

行动号召按钮：深色长方形按钮，带有圆形头像图片（来自 Pexels，图片编号 415829，宽 10 像素、高 10 像素、圆形边缘），加上“与维克托开始聊天”。

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.

页脚（全宽，上边距 12 像素，左边距 6 像素，最大宽度为 1200 像素）
FOOTER (full width, py-12, px-6, max-w-[1200px])

弹性行（md:flex-row）。

Flex row (md:flex-row).

左侧：名为“开始聊天”的主按钮。

Left side: "Start a chat" primary button.

右侧：向右上方的箭头图标（来自 lucide-react），然后是两列链接：

Right side: ArrowUpRight icon (lucide-react), then two columns of links:

列 1：服务、工作、关于（锚链接）

Column 1: Services, Work, About (anchor links)

列 2：x.com、LinkedIn（外部链接，目标为新窗口）

Column 2: x.com, LinkedIn (external links, target _blank)

所有链接：文本基础色，颜色 #051A24，鼠标悬停效果：透明度 70%，过渡效果。

All links: text-base, color #051A24, hover:opacity-70 transition.

版權條款框（最大寬度為 1200 像素，外邊距為 6 像素，內邊距為 4 像素）
COPYRIGHT BAR (max-w-[1200px], px-6, py-4)

行内使用“justify-between”属性：左侧显示“Vortex Studio Limited”，右侧显示“美国奥斯汀”。

Flex row justify-between: "Vortex Studio Limited" on left, "Austin, USA" on right.

字体大小为“text-sm”，颜色为“#051A24”。

Text-sm, color #051A24.

固定底部导航栏（位置 z-50，居中）
FIXED BOTTOM NAV (z-50, centered)

悬浮的药丸固定在底部（底部-6，通过左-1/2 -translate-x-1/2 进行居中）。

Floating pill fixed to bottom (bottom-6, centered via left-1/2 -translate-x-1/2).

白色背景，圆形，px-8 py-2，复杂的分层阴影。

White bg, rounded-full, px-8 py-2, complex layered shadow.

包含：“V”字母的 PP 摩登韦斯特衬线字体（文本-2xl，字体加粗，颜色 #051A24）+ “开始聊天” 主要按钮。

Contains: "V" letter in PP Mondwest serif (text-2xl, font-semibold, color #051A24) + "Start a chat" primary button.

動畫：

ANIMATIONS:

所有部分均使用了一个自定义的 useInViewAnimation 钩子（带有阈值 0.1 的 IntersectionObserver，仅触发一次）。

All sections use a custom useInViewAnimation hook (IntersectionObserver with threshold 0.1, triggers once).

当元素处于视图范围内时，会添加“animate-fade-in-up”类（否则会设置为“opacity-0”）。

Elements get class animate-fade-in-up when in view (otherwise opacity-0).

动画在 CSS 中定义如下：

The animation is defined in CSS:

@keyframes fadeInUp {

0% { 透明度：0；

0% { opacity: 0;

变换：垂直方向移动 30 像素；

transform: translateY(30px);

100% { 透明度：1；

100% { opacity: 1;

变换：垂直位移 0 像素；

transform: translateY(0);

.animate-fade-in-up {

动画效果：向上淡入淡出，持续时间 0.8 秒，缓动方式为“缓出”，播放方式为“向前”；

animate-fade-in-up {

animation: fadeInUp 0.8s ease-out forwards;

透明度：0；

opacity: 0;

每个部分内的元素都有不同的动画延迟值（0.1 秒、0.2 秒、0.3 秒等）。

Each element within a section has staggered animationDelay values (0.1s, 0.2s, 0.3s, etc.).

色彩调色板：

COLOR PALETTE:

主色调：#051A24

Primary dark: #051A24

次色调：#0D212C

Secondary dark: #0D212C

深色背景下的浅色文字：#F6FCFF、#E0EBF0

Light text on dark: #F6FCFF, #E0EBF0

正文文字：#051A24

Body text: #051A24

低调文字：#273C46

Muted text: #273C46

背景：全为白色

Background: white throughout

按钮阴影（对于设计感至关重要）：

BUTTON SHADOWS (critical for the design feel):

主色调：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)

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)

次色调：0_0_0_0.5px_rgba(0，0，0，0.05)，0_4px_30px_rgba(0，0，0，0.08)

Secondary: 0_0_0_0.5px_rgba(0,0,0,0.05), 0_4px_30px_rgba(0,0,0,0.08)

字体（CSS）：

FONTS (CSS):

@font-face {

font-family: 'PP Neue Montreal';

@font-face {

src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');

font-weight: 400;

font-display: swap;

}

字体名称： 'PP Neue Montreal'；

@font-face {

font-family: 'PP Neue Montreal';

来源：媒体资源地址('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') 格式('opentype')；

src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');

字体加粗度： 400；

font-weight: 500;

字体显示方式：替换；

font-display: swap;

}

@font-face {

font-family: 'PP Mondwest';

字体名称： 'PP Neue Montreal'；

src: url('/PPMondwest-Regular.

来源：媒体资源地址('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') 格式('opentype')；

woff2') format('woff2');

字体加粗度： 500；

font-weight: 400;

字体显示方式：替换；

font-display: swap;

}

@font-face {

    font-family: 'PP Mondwest';

FILE STRUCTURE:

src/App.tsx - Main layout with hero, marquee, and section composition

src/components/Button.

src: url('/PPMondwest-Regular.woff2') format('woff2');

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.

font-weight: 400;

tsx - Auto-scrolling testimonial cards

src/components/ProjectsSection.tsx - Project showcase items

src/components/PartnerSection.

font-display: swap;

tsx - Interactive mouse-trail CTA section

src/components/Footer.

}}

tsx - Footer with links

src/components/CopyrightBar.

文件结构：

tsx - Copyright line

src/components/BottomNav.

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 - 字体样式、滚动字幕动画、渐入上移动画

tsx - Fixed floating bottom nav

src/hooks/useInViewAnimation.ts - IntersectionObserver scroll-trigger hook

src/index.css - Font faces, marquee animation, fade-in-up animation