提示词
使用 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。原文提示词（English）
Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:
1. Background & Layout:
Background: Implement a full-screen background video using the HLS stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js and set enableWorker: false to ensure stability in sandboxed environments.
Overlays: Set the video to 60% opacity. Add a dark linear gradient from the left (#070b0a to transparent) and a bottom-up gradient for readability.
Grid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).
Central Glow: Place a large horizontal SVG ellipse glow in the center-top area with a cyan/dark green hue, using a 25px Gaussian blur filter.
2. The Liquid Glass Card:
Component: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].
CSS Styling (Liquid Glass):
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.
backdrop-filter: blur(4px).
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
Border Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.
Content: '[ 2025 ]' tag (14px), 'Taught by Industry Professionals' headline (18px, using Instrument Serif italic for 'Industry'), and a small description (11px).
3. Hero Content & Typography:
Eyebrow: 'Career-Ready Curriculum' in Plus Jakarta Sans, bold, 11px, color #5ed29c.
Main Headline: 'LAUNCH YOUR CODING CAREER.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be green (#5ed29c).
Description: 'Master in-demand coding skills...' in Inter, 14px, 70% white opacity, max-width 512px.
Primary CTA: 'Get Started' button with an ArrowRight icon. Rounded-full, background #5ed29c, text #070b0a, uppercase, bold.
4. Global Navigation:
Header: Sticky/Absolute header with a white minimalist logo.
Desktop Menu: Links for 'PROJECTS', 'BLOG', 'ABOUT', 'RESUME' in Inter, 16px. Hover state: #5ed29c.
Mobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.
5. Required Imports:
Fonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).
Icons: lucide-react (ArrowRight, Menu, X).
Library: hls.js for video streaming.
