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:T23ba,Create a full-screen cinematic hero section with a fixed navbar for a fictional scientific research lab website called "Vertex Sci." using React, Vite, TypeScript, and Tailwind CSS. The design is dark, minimal, and uses monospace typography exclusively. No colors other than black and white at various opacities. Mobile responsive. --- ## SETUP **Tech stack:** React + Vite + TypeScript + Tailwind CSS (no additional UI libraries or icon packs needed). **Font:** JetBrains Mono from Google Fonts. Add this to `index.html` ``: ```html ``` **Page title:** `Vertex Sci.` **Global CSS reset in index.css:** ```css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'JetBrains Mono', monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` **Tailwind config** - extend fontFamily: ```js fontFamily: { mono: ['JetBrains Mono', 'monospace'], } ``` --- ## NAVBAR (Fixed, overlays hero) Create a `Navbar` component with these exact specs: - `position: fixed`, `top: 0`, full width, `z-50` - Transparent by default. On scroll > 20px, transition to `bg-black/60 backdrop-blur-md` (300ms transition) - Height: `h-16` on mobile, `h-20` on md+ - Horizontal padding: `px-6 sm:px-10 md:px-16 lg:px-20` (same as hero content) - Flexbox row: `items-center justify-between` **Left - Logo:** A custom inline SVG, 32x32, white fill, geometric angular shape. SVG path: ```html ``` **Center (desktop only, hidden below lg):** Navigation links in a flex row with `gap-8`: - "Projects", "Facilities", "Discoveries", "Team" - Each link: `text-white/70 text-xs uppercase tracking-[0.2em] font-light hover:text-white transition-colors duration-200` **Right (desktop only, hidden below lg):** Two buttons with `gap-3`: 1. "Inquire" - outline style: `px-5 py-2.5 border border-white/30 text-white text-xs uppercase tracking-[0.15em] font-light hover:border-white/60 transition-all duration-200` 2. "Join Study" - solid style: `px-5 py-2.5 bg-white text-black text-xs uppercase tracking-[0.15em] font-medium hover:bg-white/90 transition-all duration-200` **Mobile hamburger (visible below lg):** - Three horizontal lines (`w-6 h-[1.5px] bg-white`) with `gap-1.5` - On open: top line rotates +45deg and translates down 4.5px, middle line fades/scales to 0, bottom line rotates -45deg and translates up 4.5px. 300ms ease-out transitions. **Mobile menu overlay (below lg):** - Full screen fixed overlay, `z-40` - Solid black background with opacity transition (500ms) - Content: vertically stacked links with staggered entrance animations (each link delayed by `index * 60 + 150ms`) - Each link is large (`text-2xl sm:text-3xl font-light tracking-tight`) with a bottom border (`border-white/10`) and a numbered indicator on the right (`01`, `02`, `03`, `04` in `text-white/30 text-xs`) - Bottom of mobile menu: same two buttons ("Inquire" outline, "Join Study" solid) stacked full-width with `py-4`, delayed 400ms entrance - Body scroll locked when menu is open --- ## HERO SECTION A `

` that is `relative w-full h-screen overflow-hidden bg-black`. ### Layer 1: Background Video (absolute, z-auto) ```html

``` - Animation class: starts at `opacity: 0; transform: scale(1.05)`, animates to `opacity: 1; transform: scale(1)` over **1.8s** with `cubic-bezier(0.16, 1, 0.3, 1)` and `forwards` fill. ### Layer 2: Gradient Overlay (z-[5]) - `absolute inset-x-0 bottom-0 h-[60%]` - `bg-gradient-to-t from-black/80 via-black/30 to-transparent` - `pointer-events-none` ### Layer 3: Content (z-10) - `relative z-10 h-full flex flex-col justify-end` - Padding: `px-6 sm:px-10 md:px-16 lg:px-20 pb-12 md:pb-16 lg:pb-20` #### A) Label (above the two-column layout) - Text: `"Deep-Structure Lab. By Vertex Sci."` - Classes: `text-white/50 text-[10px] sm:text-xs tracking-[0.3em] uppercase font-light mb-8 md:mb-12` - Animation: simple `fadeIn` (opacity 0 to 1), **1s**, delayed **0.4s**, same cubic-bezier, forwards #### B) Two-column layout - Container: `flex flex-col lg:flex-row lg:items-end lg:justify-between gap-10 lg:gap-20` **LEFT COLUMN** (`flex-shrink-0`): 1. **Headline `

}`, ``, ``, ``, ``, all inside `
`. -Fixed background video behind everything, as the FIRST child of the root div:
(do NOT use a negative z-index; instead give Navbar, Hero, About, and Products relative z-10 so they stack above it, and never put a bg-black on the root div or the Hero section) containing: - `

Conquer the web — Unseen, Untouchable, Imperial

Protect the web — Unbreakable, Invisible, Absolute

Vertex Sci

FlowMate Carousal

Sentinel Cybersecurity

Editorial Collection CTA

Investment Gate

Imperial VPN

creative designer portfolio

Vitara

Cinematic Brand

Model Infrastructure

Retro-Futurist

Pro AI Deck

AuraMail

Lending AI Agents

ai trip planner

Veloce Cards

Wellness Devicex

AI Interface

Glassmorphism Agency Hero

Nexora Automation