Gemini vs Claude：Velorah 电动房车落地页

一键获取所有令人惊艳动效网站的提示词：

构建一个 Velorah 落地页——一个面向电动房车 / 露营车品牌的高级深色主题单页网站。使用 React、TypeScript、Tailwind CSS 和 hls.js 库。页面纵向堆叠 6 个版块。整个页面背景为纯黑（hsl(0,0%,0%)）。所有标题和展示文字使用 Instrument Serif 字体（在 index.html 中通过 <link> 从 Google Fonts 加载），正文使用 Inter。

全局样式（index.css）：

在顶部引入 Google Fonts：

@import url('');

CSS 自定义属性（仅暗色，无浅色模式）：

--background: 201 100% 13%
--foreground: 0 0% 100%（白色）
--card: 0 0% 6%
--card-foreground: 0 0% 100%
--primary: 0 0% 100%
--primary-foreground: 0 0% 4%
--secondary: 0 0% 10%
--secondary-foreground: 0 0% 100%
--muted: 0 0% 10%
--muted-foreground: 240 4% 66%
--accent: 0 0% 10%
--accent-foreground: 0 0% 100%
--destructive: 0 84.2% 60.2%
--destructive-foreground: 0 0% 100%
--border: 0 0% 18%
--input: 0 0% 18%
--ring: 0 0% 100%
--radius: 0.5rem

Body 使用 font-family: var(--font-body)，映射到 Inter。

液态玻璃 CSS 类（.liquid-glass）：

background: rgba(255, 255, 255, 0.01)，配 background-blend-mode: luminosity
backdrop-filter: blur(4px) 和 -webkit-backdrop-filter: blur(4px)
border: none
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)
position: relative; overflow: hidden
::before 伪元素创建渐变边框效果：
padding: 1.4px
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)
使用 -webkit-mask 加 xor 合成和 mask-composite: exclude 来创建仅边框的效果

动画：

@keyframes fade-rise: 从 opacity:0; translateY(24px) 到 opacity:1; translateY(0)
.animate-fade-rise: animation: fade-rise 0.8s ease-out both
.animate-fade-rise-delay: 相同但延迟 0.2 秒
.animate-fade-rise-delay-2: 相同但延迟 0.4 秒

index.html：
通过 <link> 标签从 Google Fonts 加载 Instrument Serif：

<link rel="preconnect" href="" />
<link rel="preconnect" href="" crossorigin />
<link href="" rel="stylesheet" />

HLS 视频组件：
创建一个接受 src 属性的 HlsVideo 组件。使用 hls.js——如果 Hls.isSupported()，创建一个 HLS 实例，加载资源，并绑定到一个 <video> 元素。否则回退到浏览器原生对 application/vnd.apple.mpegurl 的支持。video 元素类名为：absolute inset-0 w-full h-full object-cover z-0，属性为：autoPlay loop muted playsInline。

视频 URL（使用这些精确地址）：

Hero 背景：
功能版块右侧卡片：
Big Statement 版块（HLS 流）：
CTA/Join 版块：

版块 1 —— HERO：

全屏版块（min-h-screen，relative，overflow-hidden）
背景：<video> 标签（非 HLS 组件），使用 Hero URL，配 autoPlay loop muted playsInline，类名 absolute inset-0 w-full h-full object-cover z-0
底部渐变叠加层：absolute inset-x-0 bottom-0 h-[40%] bg-gradient-to-t from-black via-black/60 to-transparent z-[1]
导航栏（relative z-10，flex items-center justify-between，px-8 py-6，max-w-7xl mx-auto）：
左侧：品牌名「Velorah」，带注册商标上标，text-foreground text-3xl tracking-tight，字体 'Instrument Serif', serif
中间：导航链接（Home、Studio、About、Journal、Reach Us）—— hidden md:flex items-center gap-10 text-sm text-white。所有链接为 text-white，配 hover:text-white/80 transition-colors
右侧：「Begin Journey」按钮，液态玻璃 rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]
Hero 内容（relative z-10 flex flex-col items-center justify-center text-center px-6 pt-[28px] pb-40）：
标题：animate-fade-rise text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2.46px] max-w-7xl font-normal，字体 'Instrument Serif', serif。文字：Where dreams rise through the silence.——「dreams」和「through the silence.」用 <em className="not-italic text-white"> 包裹
段落：animate-fade-rise-delay text-white text-base sm:text-lg max-w-2xl mt-8 leading-relaxed。文字：「We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work.」
按钮：animate-fade-rise-delay-2 liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12 transition-transform hover:scale-[1.03] cursor-pointer。文字：「Begin Journey」

版块 2 —— 标语：

flex items-center justify-center min-h-[70vh] px-6 bg-[hsl(0,0%,0%)]
标题：text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px] text-center max-w-4xl，字体 'Instrument Serif', serif。文字：「So you can feel at home,
anywhere.」

版块 3 —— 功能分栏：

px-6 md:px-12 max-w-7xl mx-auto py-0
网格：grid md:grid-cols-2 gap-4 rounded-2xl overflow-hidden min-h-[520px]
左侧卡片（bg-card rounded-2xl p-10 md:p-14 flex flex-col justify-between）：
顶部：小圆形图标（inline-block w-8 h-8 rounded-full border border-border mb-8），标题「100% Electric」（text-foreground text-3xl sm:text-5xl tracking-[-1px] mb-6，Instrument Serif），段落「No more fossil fuels, buzzing generators, and propane tanks. Velorah has power for days.」（text-muted-foreground text-sm sm:text-base leading-relaxed max-w-sm）
底部：功能标签数组：[{label:"Living Electric",id:"electric"},{label:"Charge Faster",id:"charge"},{label:"Sleep Well",id:"sleep"},{label:"Acoustic Comfort",id:"acoustic"},{label:"5+ Seasons",id:"seasons"}]。每个标签是一个 <button>，text-xs px-4 py-2 rounded-full border transition-colors。激活状态：bg-foreground text-primary-foreground border-foreground。未激活：border-border text-muted-foreground hover:text-foreground。使用 useState("electric") 管理当前激活标签。
进度条：w-full h-0.5 bg-border rounded-full mb-6，内部 div h-full bg-foreground rounded-full，宽度为 35%
按钮：liquid-glass rounded-full px-8 py-3 text-sm text-foreground transition-transform hover:scale-[1.03]。文字：「Explore the Velorah Flow」
右侧卡片（relative rounded-2xl overflow-hidden min-h-[400px]）：<video> 使用功能版块 URL，absolute inset-0 w-full h-full object-cover，autoPlay loop muted playsInline

版块 4 —— BIG STATEMENT：

relative flex flex-col items-center justify-center min-h-[90vh] px-6 overflow-hidden
背景：<HlsVideo> 组件，使用 Mux 的 HLS URL
内容（relative z-10 flex flex-col items-center text-center max-w-5xl）：
标签：text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-6。文字：「Intelligent Companion」
标题：text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px]，Instrument Serif。文字：「Adventure inspired.
App driven.」
段落：text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed。文字：「One app to control climate, lighting, navigation, and energy. Monitor every system in real time, automate your routines, and let Velorah learn how you live on the road.」
统计数据网格：grid grid-cols-2 sm:grid-cols-4 gap-8 sm:gap-12 mt-14。四项（OTA / 「Over-the-air updates」，360 度 / 「System visibility」，AI / 「Adaptive routines」，24/7 / 「Remote monitoring」）。每个数值为 text-foreground text-3xl sm:text-4xl font-light，Instrument Serif，标签为 text-muted-foreground text-xs sm:text-sm
按钮：liquid-glass rounded-full px-10 py-4 text-sm text-foreground mt-12 transition-transform hover:scale-[1.03]。文字：「Discover the App」

版块 5 —— CTA / JOIN：

relative min-h-[90vh] flex flex-col items-center justify-center text-center px-6 overflow-hidden
背景：<video> 使用 CTA URL，absolute inset-0 w-full h-full object-cover z-0，autoPlay loop muted playsInline
内容（relative z-10 flex flex-col items-center max-w-4xl）：
价格标签：text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-4。文字：「Starting at $99,000」
标题：text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2px]，Instrument Serif。文字：「Join the ride」
段落：text-muted-foreground text-base sm:text-lg max-w-xl mt-6 leading-relaxed。文字：「Reserve your Velorah today with a fully refundable $500 deposit. Early adopters receive priority delivery and exclusive founding-member benefits.」
两个按钮，flex flex-col sm:flex-row items-center gap-4 mt-10：
「Preorder Now」：liquid-glass rounded-full px-10 py-4 text-sm text-foreground transition-transform hover:scale-[1.03]
「Schedule a Tour」：rounded-full px-10 py-4 text-sm text-muted-foreground border border-border hover:text-foreground hover:border-foreground/30 transition-colors

版块 6 —— 页脚：

bg-[hsl(0,0%,0%)] border-t border-border px-6 md:px-12 py-16 max-w-7xl mx-auto
网格：grid grid-cols-1 md:grid-cols-3 gap-12 mb-16
第一栏：标题「Where home
meets the road.」（text-foreground text-2xl sm:text-3xl leading-tight，Instrument Serif）
第二栏：链接列表——product、app、company、community、press、preorder。每个为 text-sm text-muted-foreground hover:text-foreground transition-colors capitalize
第三栏：文字「Subscribe for the latest
Velorah updates.」（text-sm text-muted-foreground mb-4），加一个「Subscribe」按钮（liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]）
底部栏：flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-border text-xs text-muted-foreground。左侧：「Velorah」加注册商标（text-foreground text-xl tracking-tight，Instrument Serif，<sup className="text-[8px]">）。右侧：「Privacy Policy」和「Terms & Conditions」链接（hover:text-foreground transition-colors）

TAILWIND 配置：标准 shadcn/ui 的 Tailwind 配置，映射所有 HSL 颜色变量，darkMode: ["class"]，tailwindcss-animate 插件，以及 accordion 关键帧 / 动画。

依赖项：React 18、react-router-dom、Tailwind CSS、shadcn/ui 基础组件、hls.js、lucide-react、@tanstack/react-query、tailwindcss-animate。