Grok Imagine + Grok Build：Veldara Hero

❤️‍🔥 一键获取令人惊艳动效网站的完整提示词：

用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页，不需要滚动。

> **视频背景：**
> - 使用这个确切的视频 URL，不要替换成任何其他地址：``
> - 视频容器为 `position: absolute; inset: 0; z-index: 0`（不是负 z-index，也不是 fixed），作为根容器内的第一个子元素
> - 根容器（`relative h-screen overflow-hidden`）不能设置任何背景色（保持透明），这样视频才能透出来
> - `<video>` 元素带有：`muted`、`loop`、`playsInline`、`autoPlay`、`preload="auto"`，类名为 `absolute inset-0 w-full h-full object-cover`
> - 不要在视频上添加 `crossOrigin` 属性（它可能在某些 CDN 上阻止播放）
> - 所有内容层都必须使用大于 0 的正 z-index 值（粒子 z-[3]，导航 z-50，Hero 内容 z-[2]）
> - 关键：不要对视频使用 `z-index: -1` 或 `position: fixed`——它必须处于堆叠上下文之内，而不是背后

**漂浮粒子：**
- 渲染一个全屏 canvas（fixed，`pointer-events-none`，`z-index: 3`），带有动画漂浮粒子
- 粒子数量：`(canvas.width * canvas.height) / 12000`
- 每个粒子：随机大小 0.5-2px，白色，随机透明度 0.2-0.8，以 0.3px/帧 的速度向随机方向漂移
- 粒子在边缘环绕

**导航栏（固定，顶部，z-50）：**
- 左侧：粗体白色 Logo 文字「veldara」（移动端 text-lg，桌面端 text-xl，字间距收紧），后接移动端隐藏的导航链接（「Guides」「Journal」），text-sm text-gray-300，hover:text-white 过渡
- 右侧：三个内联 SVG 社交图标（GitHub、Discord、Twitter/X），text-gray-300，hover:text-white 过渡，每个 20x20px
- 内边距：px-4 sm:px-6 md:px-10，py-4 sm:py-5
- Logo 与链接间距：gap-4 sm:gap-8
- 社交图标间距：gap-3 sm:gap-4

**Hero 内容（居中，视口内底部对齐）：**
- 容器：relative z-[2]，全高，flex 纵向
- 版块上的渐变叠加层：`bg-gradient-to-t from-black/60 via-transparent to-transparent`
- 内容为 flex-col，items-center，justify-end，底部内边距 6rem（sm 为 7rem）
- 小标签：「Our Purpose:」，text-sm md:text-base，text-gray-400，字间距宽松，下外边距 0.75rem sm:1rem
- 主标题：「Instantly craft immersive 3D worlds on the web.」
- 字号：text-2xl sm:text-3xl md:text-5xl lg:text-6xl，font-semibold，行高紧凑，最大宽度 max-w-3xl，白色
- 「3D worlds」这两个词带有内联下划线效果：一个定位的 span，`absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm`，位于文字后方（文字本身 `position: relative` 位于其上）
- 标题下方的 CTA 组（上外边距 2rem sm:2.5rem），flex-col sm:flex-row，gap-3 sm:gap-4：
1. 终端风格安装框：`bg-[#1a1a1a]`，`border border-gray-700/50`，圆角 rounded-lg，内边距 px-6 sm:px-8，py-3.5 sm:py-4，内含一个 `>` 提示符（`text-[#2C5C88] font-mono text-sm`）和代码文字「npm i @veldara/core」（`text-xs sm:text-sm text-gray-200 font-mono`）
2. 带右箭头的「Get Started」按钮：`bg-[#2C5C88] hover:bg-[#3a7aad]`，白色文字，中等字重，圆角 rounded-lg，px-8，py-3.5 sm:py-4，text-sm，带颜色过渡

**滚动指示器：**
- 位于视口底部（pb-8），居中，一个 Lucide 的 `ChevronDown` 图标（w-6 h-6，text-gray-500），带 Tailwind 的 `animate-bounce` 类

**字体：**
- Google Fonts「Inter」（400、500、600、700 字重），通过 HTML head 中的 preconnect 加载
- Body 字体：`'Inter', sans-serif`

**全局样式：**
- `html, body`：overflow-x hidden
- Body 背景：`#010101`，颜色：白色
- 通用重置：margin 0，padding 0，box-sizing border-box

**页面结构：**
- 根容器：`relative h-screen overflow-hidden`（防止任何滚动）
- Hero 之外不再有其他版块

**配色方案：**
- 主强调色：`#2C5C88`（钢蓝色）
- 悬停强调色：`#3a7aad`
- 背景：`#010101` / `#0a0a0a`
- 卡片 / 终端背景：`#1a1a1a`
- 边框：`gray-700/50`
- 文字：白色、gray-200、gray-300、gray-400、gray-500

**技术栈：**
- React 18 配 TypeScript
- Vite
- Tailwind CSS 3
- Lucide React（用于 ChevronDown 图标）
- 不需要其他依赖