提示词
构建一个独立、像素级精确复刻的 Palomar Labs 营销落地页：仅包含固定导航栏 + 全 viewport 视频 Hero。不要添加其他区域。严格匹配此规范。不要编造额外文案、按钮、渐变、遮罩或装饰性斑块。
技术栈
React + TypeScript + Vite
Tailwind CSS
lucide-react 图标：ChevronDown、ArrowRight、Triangle
单个 App.tsx，包含 Navbar、Hero、TrustedBy
准确的资源和 URL（不要更改）
背景视频（必须使用这个准确的 CloudFront URL）：
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。
将其实现为一个可运行的单页，在桌面端和移动端看起来完全一致。原文提示词（English）
Build a standalone pixel-accurate recreation of the Palomar Labs marketing landing page: fixed navbar + full-viewport video hero only. No other sections. Match this spec exactly. Do not invent extra copy, buttons, gradients, overlays, or decorative blobs.
Stack
React + TypeScript + Vite
Tailwind CSS
lucide-react icons: ChevronDown, ArrowRight, Triangle
Single App.tsx with Navbar, Hero, TrustedBy
Exact assets and URLs (do not change)
Background video (must be this exact CloudFront URL):
Fonts in 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">
Page title: Palomar - One Unified System for LLMs
Color tokens (Tailwind theme.extend.colors.brand)
dark: #2d3a2e
green: #3d5a3e
light: #f5f3ef
cream: #faf8f5
Font families (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; with antialiasing. Global * { margin:0; padding:0; box-sizing:border-box; }. html { scroll-behavior: smooth; }. Root app wrapper: font-helvetica-neue. Background of the hero section: bg-brand-cream (#faf8f5).
Animations (global CSS, exact)
@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) Navbar
Fixed top-0 left-0 right-0 z-50. Transition duration-300.
If window.scrollY > 20: bg-brand-cream/90 backdrop-blur-md shadow-sm
Else: bg-transparent
Inner container: max-w-7xl mx-auto px-6 lg:px-8. Bar: relative flex items-center h-16 md:h-20.
Desktop left links (hidden md:flex items-center gap-8, animate-fade-down stagger-1)
All: text-sm text-brand-dark tracking-wide uppercase hover:opacity-70 transition-opacity
Button: Solutions + ChevronDown w-3.5 h-3.5, flex items-center gap-1
Anchor: Plans
Anchor: News
Center logo (absolute centered)
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
Text Palomar: text-xl text-brand-dark tracking-tight font-helvetica-neue
Desktop CTA (right)
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 Label: Try It Free
Mobile hamburger (md:hidden, ml-auto, z-50, w-10 h-10, aria-label="Toggle menu")
Two 2px bars (w-6 h-[2px] bg-brand-dark rounded) with transition-all duration-300 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]:
Top bar at top-[6px]. Open: rotate-45 translate-y-[5px]
Bottom bar at top-[13px]. Open: -rotate-45 When open, lock document.body.style.overflow = 'hidden'.
Mobile overlay (md:hidden)
fixed inset-0 bg-brand-cream z-40 Transition duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
Open: opacity-100 pointer-events-auto
Closed: opacity-0 pointer-events-none
Inner column: flex flex-col items-center justify-center h-full gap-8, same 500ms ease, delay-100
Open: translate-y-0 opacity-100
Closed: -translate-y-8 opacity-0
Links (each 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 Clicking any item closes the menu.
No dropdown panel for Solutions — it is a button on desktop and a simple link on mobile.
2) Hero
section.relative.w-full.h-screen.min-h-[700px].overflow-hidden.bg-brand-cream
Video layer
div.absolute.inset-0 wrapping <video>:
src = the CloudFront URL above
autoPlay muted loop playsInline
class: w-full h-full object-cover object-bottom
No dark overlay, no gradient, no poster image
Content column (sits on top of video, left-aligned, not vertically centered)
relative z-10 flex flex-col items-start max-w-7xl mx-auto pt-28 md:pt-36 px-6 lg:px-8
Announcement pill
Anchor, 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 text-sm text-brand-dark: Live for everyone today! Offering $1MM in credits.
ArrowRight w-3.5 h-3.5 text-brand-dark
Headline
h1 classes: 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
Exact copy with a line break only from sm and up:
One unified system to build,
test, ship, and observe LLMs
Implementation: first line, then <br className="hidden sm:block" />, then a space, then test, ship, and observe LLMs. On <640px it wraps naturally as one block.
No subtitle, no primary CTA in the hero body.
3) Trusted by (inside Hero, under headline)
Wrapper: w-full mt-8 md:mt-10 animate-fade-up stagger-5
Label: text-left text-xs tracking-[0.25em] uppercase text-brand-dark/50 mb-6 md:mb-8 font-helvetica-neue → Backed by
Logo row: flex flex-wrap items-center justify-start gap-6 md:gap-12 lg:gap-16 animate-fade-up stagger-6
Five wordmarks as text (not images), 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)
Responsive rules (must match)
< md (768px): hamburger + full-screen cream overlay; hide desktop links and CTA; nav height h-16; hero padding pt-28 px-6; logo gaps gap-6; headline text-3xl then sm:text-4xl
md+: three left links, centered logo, right pill CTA; nav h-20; hero pt-36; logo gaps md:gap-12
lg+: container px-8; headline lg:text-6xl; logo gaps lg:gap-16
Hero always h-screen with min-h-[700px]
Content always left-aligned (items-start, text-left, justify-start)
Video always object-cover object-bottom so the bottom of the footage stays framed
Visual character
Quiet, editorial, cream/forest. Light Helvetica Neue, not heavy Inter/SF. Centered triangle + Palomar wordmark. Frosted white pill over a full-bleed landscape video. Wordmark “logos” in mixed display fonts, not SVG brand files. Entrance: nav fades down (stagger 0 / 120 / 240ms); pill, headline, backed-by fade up (240 / 360 / 480 / 600ms).
Do not add
Footer, extra sections, search, language switcher, social icons, video controls, mute button, overlay scrim, second headline, hero “Get started” button, Solutions mega-menu content, or any other video URL.
Implement this as one working page that looks identical on desktop and mobile.视频地址
