22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T2401,**Create a full-viewport, dark cinematic hero section for a brand called "COSMIQ." using React, Tailwind CSS, and lucide-react. No other packages. Use Vite + TypeScript.** --- ### Fonts (loaded in `index.html`) Load these three fonts via `` tags in the ``: 1. **Anton** (Google Fonts) -- used for the logo "COSMIQ." and mobile menu link labels 2. **Inter** weights 300/400/500/600 (Google Fonts) -- used for nav links, share button, and tagline 3. **Black Mustang** (OnlineWebFonts) -- used for the main headline ```html ``` Page title: `COSMIQ - What's Beyond` --- ### Layout - Full viewport: `w-full h-[100dvh] overflow-hidden bg-[#0a0a0a]` with `position: relative`. - All elements are absolutely/fixed positioned within this container using z-index layering. --- ### Z-Index Layers (bottom to top) | Z-Index | Element | |---------|---------| | 0 | Stars background | | 1 | Video | | 5 | Headline text ("WHAT'S BEYOND") | | 6 | Animated circles | | 8 | Rock image overlay | | 10 | Navigation bar | | 100 | Mobile menu (fixed, full-screen) | --- ### 1. Stars Background (z-0) - 40 tiny white dots (`div` elements) absolutely positioned across the viewport. - Sizes alternate: every 3rd dot is 2x2px, others are 1x1px. - Positions are deterministic: `left: (i * 37 + 13) % 100 %`, `top: (i * 53 + 7) % 100 %`. - Each star has a `starTwinkle` animation: fades between `opacity: 0.2` and `opacity: 0.8`, duration `2 + (i % 4)` seconds, delay `(i * 0.3) % 3` seconds, infinite, ease-in-out. --- ### 2. Background Video (z-1) - `

Cosmic

Digitwist AI Builder

Slam Dunk

Slate

Aetheris Voyage

Luxury Focus

Church Community

Vize Footer

Nike Premium Landing

futuristic eyewear

Synthesis

Portfolio About

editorial eyewear

EcoVolta

Scroll Marquee

Capabilities Overview

Orbit Engineers

Unwind Hero

Daisy Wild

Kova Testimonial