CodeNest 编程平台

使用 React 和 Tailwind CSS，为名为“CodeNest”的编程教育平台创建一个高端深色主题的 hero section。设计必须响应式，并严格遵循以下规范：

1. 背景与布局：

背景：使用以下 HLS stream 实现全屏背景视频：https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8。使用 hls.js，并设置 enableWorker: false，以确保在沙盒环境中的稳定性。

叠加层：将视频设置为 60% 不透明度。添加一个从左侧（#070b0a 到 transparent）的深色 linear gradient，并添加一个自下而上的 gradient 以提高可读性。

网格系统：在屏幕的 25%、50% 和 75% 位置添加三条细竖向网格线（white/10 opacity，仅在 desktop 可见）。

中央光晕：在中上部区域放置一个大型横向 SVG ellipse glow，采用 cyan/dark green 色调，并使用 25px Gaussian blur filter。

2. Liquid Glass 卡片：

组件：创建一张 200x200px 的浮动卡片，放置在主标题上方，并使用 translate-y-[-50px] 精确向上偏移 50px。

CSS 样式（Liquid Glass）：

background: rgba(255, 255, 255, 0.01)，并设置 background-blend-mode: luminosity。

backdrop-filter: blur(4px)。

box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)。

边框效果：使用 ::before pseudo-element，设置 inset: 0、padding: 1.4px，并应用 180-degree white linear gradient。使用 -webkit-mask-composite: xor 和 mask-composite: exclude 创建清晰、高端的边框框架。

内容：'[ 2025 ]' 标签（14px）、'Taught by Industry Professionals' 标题（18px，其中 'Industry' 使用 Instrument Serif italic），以及一段小号描述文字（11px）。

3. Hero 内容与排版：

Eyebrow：'Career-Ready Curriculum'，使用 Plus Jakarta Sans、bold、11px，颜色为 #5ed29c。

主标题：'LAUNCH YOUR CODING CAREER.'，使用 Inter Extra Bold、uppercase、tracking-tight。字号从 40px（mobile）缩放至 72px（desktop）。最后的句点必须为绿色（#5ed29c）。

描述：'Master in-demand coding skills...'，使用 Inter、14px、70% white opacity，max-width 512px。

Primary CTA：'Get Started' 按钮，带 ArrowRight icon。Rounded-full，background #5ed29c，text #070b0a，uppercase、bold。

4. 全局导航：

Header：Sticky/Absolute header，配有白色极简 logo。

Desktop Menu：包含 'PROJECTS'、'BLOG'、'ABOUT'、'RESUME' 链接，使用 Inter、16px。Hover state：#5ed29c。

Mobile Menu：一个可用的 hamburger menu，可切换全屏深色叠加层。

5. 必需导入项：

字体：Inter、Plus Jakarta Sans 和 Instrument Serif (italic)。

图标：lucide-react（ArrowRight、Menu、X）。

库：用于视频流的 hls.js。