Asme

构建一个单页 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。