Palomar Labs

构建一个独立、像素级精确复刻的 Palomar Labs 营销落地页：仅包含固定导航栏 + 全 viewport 视频 Hero。不要添加其他区域。严格匹配此规范。不要编造额外文案、按钮、渐变、遮罩或装饰性斑块。
技术栈
React + TypeScript + Vite
Tailwind CSS
lucide-react 图标：ChevronDown、ArrowRight、Triangle
单个 App.tsx，包含 Navbar、Hero、TrustedBy
准确的资源和 URL（不要更改）
背景视频（必须使用这个准确的 CloudFront URL）：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260820_010308_b1636845-4c15-4ab6-b0c9-9a29bfb0c6e3.mp4
index.html 中的字体：
<link href="https://db.onlinewebfonts.com/c/0e6de1ec911a2e267ff136bbdd384a44?family=Helvetica+Neue+Light" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Oswald:wght@500&family=Montserrat:wght@700&family=Roboto+Slab:wght@600&family=Raleway:wght@700&display=swap" rel="stylesheet">
页面标题：Palomar - One Unified System for LLMs
颜色 token（Tailwind theme.extend.colors.brand）
dark: #2d3a2e
green: #3d5a3e
light: #f5f3ef
cream: #faf8f5
字体族（Tailwind theme.extend.fontFamily）
helvetica-neue: "Helvetica Neue Light", Helvetica, Arial, sans-serif
playfair: "Playfair Display", serif
oswald: "Oswald", sans-serif
montserrat: "Montserrat", sans-serif
roboto-slab: "Roboto Slab", serif
raleway: "Raleway", sans-serif
Body：font-family: 'Helvetica Neue Light', Helvetica, Arial, sans-serif;，启用抗锯齿。全局 * { margin:0; padding:0; box-sizing:border-box; }。html { scroll-behavior: smooth; }。根应用容器：font-helvetica-neue。Hero 区域背景：bg-brand-cream（#faf8f5）。
动画（全局 CSS，保持准确）
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up   { animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-down { animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 360ms; }
.stagger-5 { animation-delay: 480ms; }
.stagger-6 { animation-delay: 600ms; }
1）导航栏
固定在 top-0 left-0 right-0 z-50。过渡时长 duration-300。
如果 window.scrollY > 20：bg-brand-cream/90 backdrop-blur-md shadow-sm
否则：bg-transparent
内部容器：max-w-7xl mx-auto px-6 lg:px-8。栏：relative flex items-center h-16 md:h-20。
桌面端左侧链接（hidden md:flex items-center gap-8、animate-fade-down stagger-1）
全部使用：text-sm text-brand-dark tracking-wide uppercase hover:opacity-70 transition-opacity
按钮：Solutions + ChevronDown w-3.5 h-3.5、flex items-center gap-1
锚点：Plans
锚点：News
中央 logo（绝对居中）
absolute left-1/2 -translate-x-1/2 flex items-center gap-2 animate-fade-down stagger-2
Lucide Triangle：w-5 h-5 text-brand-dark fill-brand-dark
文本 Palomar：text-xl text-brand-dark tracking-tight font-helvetica-neue
桌面端 CTA（右侧）
hidden md:inline-flex items-center ml-auto px-5 py-2.5 bg-brand-dark text-white text-sm tracking-wide uppercase rounded-full hover:bg-brand-green transition-colors animate-fade-down stagger-3 标签：Try It Free
移动端汉堡菜单（md:hidden、ml-auto、z-50、w-10 h-10、aria-label="Toggle menu"）
两条 2px 横线（w-6 h-[2px] bg-brand-dark rounded），采用 transition-all duration-300 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]：
上横线位于 top-[6px]。打开时：rotate-45 translate-y-[5px]
下横线位于 top-[13px]。打开时：-rotate-45。打开时锁定 document.body.style.overflow = 'hidden'。
移动端遮罩层（md:hidden）
fixed inset-0 bg-brand-cream z-40，采用 Transition duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
打开时：opacity-100 pointer-events-auto
关闭时：opacity-0 pointer-events-none
内部纵向列：flex flex-col items-center justify-center h-full gap-8，使用相同的 500ms ease、delay-100
打开时：translate-y-0 opacity-100
关闭时：-translate-y-8 opacity-0
链接（每个均为 text-3xl text-brand-dark tracking-tight）：Solutions、Plans、News。CTA：mt-4 inline-flex items-center px-8 py-3.5 bg-brand-dark text-white text-lg tracking-wide rounded-full → Try It Free。点击任意项目都会关闭菜单。
Solutions 不使用下拉面板——桌面端是按钮，移动端是普通链接。
2）Hero
section.relative.w-full.h-screen.min-h-[700px].overflow-hidden.bg-brand-cream
视频层
div.absolute.inset-0 包裹 <video>：
src = 上述 CloudFront URL
autoPlay muted loop playsInline
class：w-full h-full object-cover object-bottom
不使用深色遮罩、不使用渐变、不使用 poster 图像
内容纵向列（位于视频上方，左对齐，不垂直居中）
relative z-10 flex flex-col items-start max-w-7xl mx-auto pt-28 md:pt-36 px-6 lg:px-8
公告胶囊
锚点，inline-flex items-center gap-2 px-4 py-2 rounded-full border border-brand-dark/15 bg-white/60 backdrop-blur-sm hover:bg-white/80 transition-colors mb-5 md:mb-6 animate-fade-up stagger-3
文本 text-sm text-brand-dark：Live for everyone today! Offering $1MM in credits.
ArrowRight w-3.5 h-3.5 text-brand-dark
主标题
h1 类：text-left text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-brand-dark leading-[1.05] tracking-tight max-w-4xl font-helvetica-neue animate-fade-up stagger-4
准确文案，仅在 sm 及以上断行：
One unified system to build,
test, ship, and observe LLMs
实现方式：第一行，接着是 <br className="hidden sm:block" />，再接一个空格，然后是 test, ship, and observe LLMs。在 <640px 时作为一个文本块自然换行。
Hero 主体中不添加副标题或主要 CTA。
3）Trusted by（位于 Hero 内，在主标题下方）
容器：w-full mt-8 md:mt-10 animate-fade-up stagger-5
标签：text-left text-xs tracking-[0.25em] uppercase text-brand-dark/50 mb-6 md:mb-8 font-helvetica-neue → Backed by
Logo 行：flex flex-wrap items-center justify-start gap-6 md:gap-12 lg:gap-16 animate-fade-up stagger-6
五个以文本呈现的字标（不是图像），text-lg md:text-xl lg:text-2xl text-brand-dark/80 whitespace-nowrap：
Meridian — font-playfair（Playfair Display 700）
STELLEX — font-oswald uppercase（Oswald 500）
Luminar — font-montserrat（Montserrat 700）
OVERLAND — font-roboto-slab uppercase（Roboto Slab 600）
Kinetic — font-raleway（Raleway 700）
响应式规则（必须匹配）
< md（768px）：汉堡菜单 + 全屏 cream 遮罩层；隐藏桌面端链接和 CTA；导航栏高度 h-16；Hero 内边距 pt-28 px-6；logo 间距 gap-6；主标题 text-3xl，之后在 sm 使用 text-4xl
md+：左侧三个链接、居中的 logo、右侧胶囊 CTA；导航栏高度 h-20；Hero 使用 pt-36；logo 间距 md:gap-12
lg+：容器 px-8；主标题 lg:text-6xl；logo 间距 lg:gap-16
Hero 始终使用 h-screen 和 min-h-[700px]
内容始终左对齐（items-start、text-left、justify-start）
视频始终使用 object-cover object-bottom，让画面底部保持在取景范围内
视觉特征
安静、编辑感、cream/forest 配色。使用纤细的 Helvetica Neue，而非粗重的 Inter/SF。居中的 triangle + Palomar 字标。全出血风景视频上的磨砂白色胶囊。混用展示字体呈现文字“logos”，不使用 SVG 品牌文件。入场效果：导航栏向下淡入（交错时间 0 / 120 / 240ms）；胶囊、主标题、backed-by 向上淡入（240 / 360 / 480 / 600ms）。
不要添加
Footer、额外区域、搜索、语言切换器、社交图标、视频控件、静音按钮、遮罩层 scrim、第二个主标题、Hero“Get started”按钮、Solutions mega-menu 内容或任何其他视频 URL。
将其实现为一个可运行的单页，在桌面端和移动端看起来完全一致。