Grok Imagine + Grok Build：Veldara Hero

❤️‍🔥 Access Full prompt for stunning animated websites in one click: 

Create a full-viewport hero section for a product called "Veldara" using React, Tailwind CSS, and Lucide React icons. The page should be a single-screen landing with no scrolling.

> **Video Background:**
> - Use this exact video URL, do NOT replace it with any other URL: ``
> - The video wrapper is `position: absolute; inset: 0; z-index: 0` (NOT negative z-index, NOT fixed) placed as the first child inside the root container
> - The root container (`relative h-screen overflow-hidden`) must have NO background-color set (transparent) so the video shows through
> - The `<video>` element has: `muted`, `loop`, `playsInline`, `autoPlay`, `preload="auto"`, class `absolute inset-0 w-full h-full object-cover`
> - Do NOT add `crossOrigin` attribute on the video (it can block playback on some CDNs)
> - All content layers must use positive z-index values above 0 (particles z-[3], nav z-50, hero content z-[2])
> - CRITICAL: Do NOT use `z-index: -1` or `position: fixed` for the video -- it must be inside the stacking context, not behind it

**Floating Particles:**
- Render a full-screen canvas (fixed, `pointer-events-none`, `z-index: 3`) with animated floating particles
- Particle count: `(canvas.width * canvas.height) / 12000`
- Each particle: random size 0.5-2px, white with random opacity 0.2-0.8, drifting at velocity 0.3px/frame in random directions
- Particles wrap around edges

**Navigation Bar (fixed, top, z-50):**
- Left side: Bold white logo text "veldara" (text-lg on mobile, text-xl on desktop, tracking-tight), followed by hidden-on-mobile nav links ("Guides", "Journal") in text-sm text-gray-300 with hover:text-white transitions
- Right side: Three inline SVG social icons (GitHub, Discord, Twitter/X) in text-gray-300 with hover:text-white transitions, each 20x20px
- Padding: px-4 sm:px-6 md:px-10, py-4 sm:py-5
- Gap between logo and links: gap-4 sm:gap-8
- Gap between social icons: gap-3 sm:gap-4

**Hero Content (centered, bottom-aligned within viewport):**
- Container: relative z-[2], full height, flex column
- A gradient overlay on the section: `bg-gradient-to-t from-black/60 via-transparent to-transparent`
- Content is flex-col, items-center, justify-end, with padding-bottom 6rem (sm: 7rem)
- Small label: "Our Purpose:" in text-sm md:text-base, text-gray-400, tracking-wide, margin-bottom 0.75rem sm:1rem
- Main heading: "Instantly craft immersive 3D worlds on the web."
- Font sizes: text-2xl sm:text-3xl md:text-5xl lg:text-6xl, font-semibold, leading-tight, max-w-3xl, text-white
- The words "3D worlds" have an inline underline effect: a positioned span with `absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm` behind the text (text is `position: relative` above it)
- CTA group below heading (margin-top 2rem sm:2.5rem), flex-col sm:flex-row, gap-3 sm:gap-4:
1. Terminal-style install box: `bg-[#1a1a1a]`, `border border-gray-700/50`, rounded-lg, px-6 sm:px-8, py-3.5 sm:py-4, containing a `>` prompt character in `text-[#2C5C88] font-mono text-sm` and code text "npm i @veldara/core" in `text-xs sm:text-sm text-gray-200 font-mono`
2. "Get Started" button with right arrow: `bg-[#2C5C88] hover:bg-[#3a7aad]`, text-white, font-medium, rounded-lg, px-8, py-3.5 sm:py-4, text-sm, with transition-colors

**Scroll Indicator:**
- At the bottom of the viewport (pb-8), centered, a Lucide `ChevronDown` icon (w-6 h-6, text-gray-500) with Tailwind's `animate-bounce` class

**Font:**
- Google Fonts "Inter" (weights 400, 500, 600, 700), loaded via preconnect in the HTML head
- Body font-family: `'Inter', sans-serif`

**Global Styles:**
- `html, body`: overflow-x hidden
- Body background: `#010101`, color: white
- Universal reset: margin 0, padding 0, box-sizing border-box

**Page Structure:**
- Root container: `relative h-screen overflow-hidden` (prevents any scrolling)
- No additional sections beyond the hero

**Color Palette:**
- Primary accent: `#2C5C88` (steel blue)
- Hover accent: `#3a7aad`
- Background: `#010101` / `#0a0a0a`
- Card/terminal bg: `#1a1a1a`
- Border: `gray-700/50`
- Text: white, gray-200, gray-300, gray-400, gray-500

**Tech Stack:**
- React 18 with TypeScript
- Vite
- Tailwind CSS 3
- Lucide React (for ChevronDown icon)
- No other dependencies needed