提示词
精确复刻这个 hero section。完整规格如下：
视频背景：
全屏背景视频，使用绝对定位，覆盖整个 viewport（object-cover）
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4
Autoplay、loop、muted、playsInline
不要 dark overlay，不要 gradient overlay，不要在视频上方添加 semi-transparent layer。直接播放原始视频，不得进行任何压暗处理。
排版（关键——必须全局应用）：
通过 index.html 中的 <link> 标签导入 Google Font Inter：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
在 CSS 中将 body font-family 设置为：'Inter', sans-serif
在 body 上应用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale
同时扩展 Tailwind config，设置 fontFamily: { sans: ['Inter', 'sans-serif'] }，使 Tailwind 中所有 font-sans 用法自动采用 Inter
导航栏：
包裹在页面水平内边距中：px-6 md:px-12 lg:px-16，并使用 pt-6 顶部内边距
导航栏本身使用 .liquid-glass 类，并带有 rounded-xl、px-4 py-2，以及 items-center justify-between 的 flex 布局
左侧：Logo 文字 "VEX"——text-2xl font-semibold tracking-tight
中间（移动端隐藏，md+ 显示）：链接 "Story"、"Investing"、"Building"、"Advisory"——text-sm、gap-8，hover 时过渡至 gray-300
右侧："Start a Chat" 按钮——bg-white text-black px-6 py-2 rounded-lg text-sm font-medium，hover 时变为 gray-100
Hero 内容（viewport 底部）：
容器：使用与导航栏相同的水平内边距，采用 flex column 填满剩余高度，通过 flex-1 flex flex-col justify-end 将内容推至底部，底部内边距为 pb-12 lg:pb-16
在大屏幕上：双栏 grid（lg:grid lg:grid-cols-2 lg:items-end）
左栏——主要内容：
标题："Shaping tomorrownwith vision and action."（"tomorrow" 与 "with" 之间使用 literal line break）
响应式字号：text-4xl md:text-5xl lg:text-6xl xl:text-7xl
font-normal、mb-4
内联样式：letterSpacing: '-0.04em'
逐字符入场动画：每个字符初始为 opacity: 0 和 translateX(-18px)，随后过渡至 opacity: 1 和 translateX(0)。每个字符使用按以下公式计算的 staggered delay：(lineIndex * lineLength * charDelay) + (charIndex * charDelay)，其中 charDelay = 30ms。整个动画在 200ms initial delay 后开始。每个字符的 transition 为 500ms。
空格渲染为 u00A0（non-breaking space）
副标题："We back visionaries and craft ventures that define what comes next."
text-base md:text-lg text-gray-300 mb-5
Fade-in 动画：在 800ms delay 后开始，持续 1000ms
按钮行：flex-wrap，gap-4
"Start a Chat"——bg-white text-black px-8 py-3 rounded-lg font-medium
"Explore Now"——liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium，hover 时过渡为白色背景 + 黑色文字
Fade-in 动画：在 1200ms delay 后开始，持续 1000ms
右栏——标签：
在大屏幕上与右下方对齐（flex items-end justify-start lg:justify-end）
Glass card：liquid-glass border border-white/20 px-6 py-3 rounded-xl
文字："Investing. Building. Advisory."——text-lg md:text-xl lg:text-2xl font-light
Fade-in 动画：在 1400ms delay 后开始，持续 1000ms
Liquid Glass CSS（放入全局 CSS）：
.liquid-glass {
background: rgba(0, 0, 0, 0.4);
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;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
FadeIn component：一个初始 opacity: 0 的 wrapper，在 configurable delay（ms）后通过 setTimeout + React state 过渡至 opacity: 1。Transition duration 同样可配置。使用内联 transitionDuration 样式和 Tailwind 的 transition-opacity 类。
AnimatedHeading component：按 n 将文本拆分为多行，再将每一行拆分为单独字符。每个字符都是一个 inline-block <span>，带有作用于 opacity 和 transform（translateX）的 CSS transitions。动画在 initial delay 后通过 React state 触发。
配色方案：黑色背景、白色文字、次要文字使用 gray-300、边框使用 white/20。不要紫色，不要靛蓝色。
技术栈：React + TypeScript、Tailwind CSS、Vite。不需要额外的 UI libraries。如有需要，图标使用 lucide-react（当前 hero 中未使用图标）。原文提示词（English）
Recreate this hero section exactly. Here are the complete specifications:
Video Background:
Full-screen background video, absolutely positioned, covering the entire viewport (object-cover)
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4
Autoplay, loop, muted, playsInline
NO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever.
Typography (CRITICAL - must be applied globally):
Import the Google Font Inter via a <link> tag in index.html:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
Set the body font-family in CSS to: 'Inter', sans-serif
Apply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body
Also extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically
Navbar:
Wrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding
The navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between
Left: Logo text "VEX" - text-2xl font-semibold tracking-tight
Center (hidden on mobile, visible md+): Links "Story", "Investing", "Building", "Advisory" - text-sm, gap-8, hover transitions to gray-300
Right: "Start a Chat" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100
Hero Content (Bottom of viewport):
Container: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16
On large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end)
Left Column - Main content:
Heading: "Shaping tomorrownwith vision and action." (literal line break between "tomorrow" and "with")
Responsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl
font-normal, mb-4
Inline style: letterSpacing: '-0.04em'
Character-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms.
Spaces render as u00A0 (non-breaking space)
Subheading: "We back visionaries and craft ventures that define what comes next."
text-base md:text-lg text-gray-300 mb-5
Fade-in animation: starts at 800ms delay, 1000ms duration
Buttons row: flex-wrap with gap-4
"Start a Chat" - bg-white text-black px-8 py-3 rounded-lg font-medium
"Explore Now" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text
Fade-in animation: starts at 1200ms delay, 1000ms duration
Right Column - Tag:
Aligned to bottom-right on large screens (flex items-end justify-start lg:justify-end)
Glass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl
Text: "Investing. Building. Advisory." - text-lg md:text-xl lg:text-2xl font-light
Fade-in animation: starts at 1400ms delay, 1000ms duration
Liquid Glass CSS (place in global CSS):
.liquid-glass {
background: rgba(0, 0, 0, 0.4);
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;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
FadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class.
AnimatedHeading component: Splits text by n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay.
Color scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo.
Stack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).
