提示词
构建一个单页 hero section，包含全屏循环 background video、liquid glass UI 元素和深色电影感美学。使用 React、TypeScript、Tailwind CSS 和 Lucide React icons。具体规格如下：
Background Video：
全屏静音自动播放视频，覆盖整个 viewport，使用 object-cover 绝对定位
视频源 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4
视频向下偏移 17%（translate-y-[17%]），使视频顶部区域被裁切——精彩内容位于画面下部
视频通过自定义 JavaScript 淡入淡出系统无缝循环（不使用 CSS transitions）：加载/循环开始时执行基于 requestAnimationFrame、时长 500ms 的淡入；视频结束前剩余 0.55 秒时执行 500ms 淡出。fadingOutRef boolean 可防止重复的 timeUpdate events 再次触发淡出。触发 ended 时，将 opacity 设为 0，然后在 100ms 后将视频重置为 currentTime = 0，播放并重新淡入。每次开始新的淡入淡出时，都取消正在运行的 animation frame，以防动画相互冲突。淡入淡出从当前 opacity 继续，而不是突然跳变。
外层容器为 min-h-screen bg-black，并设置 overflow-hidden
Font：
通过 CSS @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap') 导入 Google Font "Instrument Serif"（regular 和 italic）
标题通过 inline style 应用 fontFamily: "'Instrument Serif', serif"
Liquid Glass CSS（.liquid-glass class）：
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 pseudo-element 创建玻璃边框效果：
position: absolute; inset: 0; border-radius: inherit; 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%)
使用 Mask 技巧仅渲染边框：-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude
pointer-events: none
Layout（全部位于一个全屏 flex column 内）：
Navigation bar（relative z-20，padding pl-6 pr-6 py-6）：
内层容器：rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto
左侧：Logo 区域，包含 Globe icon（size 24）和白色文本“Asme”，使用 font-semibold text-lg，gap-2
Logo 旁边（gap-8）：三个 nav links（“功能”、“价格”、“关于”）——在移动端隐藏，从 md: 开始显示——样式为 text-white/80 hover:text-white transition-colors text-sm font-medium
右侧（gap-4）：“注册”为纯白色文本按钮，“登录”为 liquid-glass rounded-full px-6 py-2 按钮
Hero content area（relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]）：
标题：“为好奇者而生”——text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap，使用 Instrument Serif font
标题下方是一个 max-w-xl w-full space-y-4 容器：
Email input bar：liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3。内部包含：透明的 email input（placeholder：“输入你的邮箱”，text-white placeholder:text-white/40 text-base）以及白色圆形提交按钮（bg-white rounded-full p-3 text-black），按钮内含 ArrowRight icon（size 20）
Subtitle text：text-white text-sm leading-relaxed px-4——“及时获取最新新闻和洞察。立即订阅我们的 newsletter，不错过任何精彩更新。”
Manifesto button：居中，liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors
Social icons footer（relative z-10 flex justify-center gap-4 pb-12）：
三个圆形 icon buttons，每个均使用 liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all
Icons：来自 lucide-react 的 Instagram、Twitter、Globe（均为 size 20）
每个按钮都有 aria-label
Tech stack：Vite + React 18 + TypeScript、Tailwind CSS 3，所有 icons 均使用 lucide-react。使用无扩展的默认 Tailwind config。不使用其他 UI libraries。原文提示词（English）
Build a single-page hero section with a full-screen looping background video, liquid glass UI elements, and a dark cinematic aesthetic. Use React, TypeScript, Tailwind CSS, and Lucide React icons. Here are the exact specifications:
Background Video:
Full-screen muted autoplaying video covering the entire viewport, positioned absolutely with object-cover
Video source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4
The video is shifted down by 17% (translate-y-[17%]) so the top portion of the video is cropped -- the interesting content is in the lower portion of the frame
The video loops seamlessly with a custom JavaScript fade system (no CSS transitions): 500ms requestAnimationFrame-based fade-in on load/loop start, 500ms fade-out when 0.55 seconds remain before the video ends. A fadingOutRef boolean prevents re-triggering the fade-out from repeated timeUpdate events. On ended, opacity is set to 0, then after 100ms the video resets to currentTime = 0, plays, and fades back in. Each new fade cancels any running animation frame to prevent competing animations. Fades resume from the current opacity rather than snapping.
The outer container is min-h-screen bg-black with overflow-hidden
Font:
Import Google Font "Instrument Serif" (both regular and italic) via CSS @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')
The heading uses fontFamily: "'Instrument Serif', serif" applied via inline style
Liquid Glass CSS (.liquid-glass class):
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity
backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px)
border: none
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)
position: relative; overflow: hidden
A ::before pseudo-element creates the glass border effect:
position: absolute; inset: 0; border-radius: inherit; 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%)
Mask trick for border-only rendering: -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude
pointer-events: none
Layout (all inside one full-screen flex column):
Navigation bar (relative z-20, padding pl-6 pr-6 py-6):
Inner container: rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto
Left side: Logo area with a Globe icon (size 24) and text "Asme" in white, font-semibold text-lg, with gap-2
Next to the logo (with gap-8): three nav links ("Features", "Pricing", "About") -- hidden on mobile, shown on md: -- styled text-white/80 hover:text-white transition-colors text-sm font-medium
Right side (gap-4): "Sign Up" as plain white text button, "Login" as a liquid-glass rounded-full px-6 py-2 button
Hero content area (relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]):
Heading: "Built for the curious" -- text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap with Instrument Serif font
Below the heading, a max-w-xl w-full space-y-4 container:
Email input bar: liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3. Inside: a transparent email input (placeholder: "Enter your email", text-white placeholder:text-white/40 text-base) and a white circular submit button (bg-white rounded-full p-3 text-black) containing an ArrowRight icon (size 20)
Subtitle text: text-white text-sm leading-relaxed px-4 -- "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
Manifesto button: centered, liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors
Social icons footer (relative z-10 flex justify-center gap-4 pb-12):
Three circular icon buttons, each liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all
Icons: Instagram, Twitter, Globe (all size 20) from lucide-react
Each has an aria-label
Tech stack: Vite + React 18 + TypeScript, Tailwind CSS 3, lucide-react for all icons. Default Tailwind config with no extensions. No other UI libraries.
