`: IGLOO. Global CSS (index.css); body has Inter, `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `overflow-x: hidden`. ## 2. ASSETS (exact URLs) Page background (shared, spans both sections): `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260723_224514_a4f5778c-5a68-4e60-b9f8-74aeec2ef48b.png&w=1920&q=85` Overlay image (iceberg cutout, sits in front of background but behind ALL UI, spans both sections, pointer-events-none): `https://soft-zoom-63098134.figma.site/_assets/v11/7e3b4feb333e9a78d12d5afc7d48730615390ec2.png` Left-side thumbnails (top to bottom, 4 images): 1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094505_c14a7566-ec38-46cf-b298-b641815acbdc.png&w=1280&q=85` 2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094527_33af18d8-e52c-49a6-8b9b-4706b0c0a85a.png&w=1280&q=85` 3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094546_3f85bc04-8e66-4d82-aa27-fcf40742a384.png&w=1280&q=85` 4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094606_79a7fc4d-cf64-48bc-a2d3-52dd5ad6ffe3.png&w=1280&q=85` "With A View" cards (3 cards, in order, with titles): 1. "Cliffside Retreat" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101354_a5a857b7-b9ce-4e3f-9cc1-27424c9e4c8d.png&w=1280&q=85` 2. "Island Escape" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101420_1c0cbb04-a7b5-41f1-9d21-fcf3976f6be6.png&w=1280&q=85` 3. "Coastal Haven" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101434_83163d4d-1639-4812-8753-e679652939ff.png&w=1280&q=85` ## 3. PAGE STRUCTURE Root `<div style="background-color:#D6D7DD">` containing: (a) a MobileMenu overlay component, and (b) a `relative overflow-hidden` wrapper that spans BOTH full-screen sections and holds two absolutely-positioned full-bleed images: - Background `<img>`: `absolute inset-0 w-full h-full object-cover`, dynamic `objectPosition: center {focalY}%` and `transform: scale({scrollScale})` with `transformOrigin: top center` (see animation #2). - Overlay `<img>`: identical positioning/animation, plus `z-[10] pointer-events-none`. ### SECTION 1 — Hero (`relative w-full h-screen overflow-hidden`) 1. **Giant "IGLOO" headline**: absolutely centered container `inset-0 flex items-start justify-center pt-[13vh] pointer-events-none z-[2]`. Text rendered with a per-letter animation component (see animation #1). Classes: `text-[36vw] md:text-[35vw] leading-[0.85] text-white/80 tracking-[0.01em] select-none`, font: Dimensions W03 300R → Anton fallback. It sits BEHIND the iceberg overlay (z-2 < z-10) so the iceberg visually cuts through the wordmark. 2. **Fixed navbar** (`fixed top-0 z-[40] flex items-center justify-between px-5 md:px-8 py-4 md:py-5`): - Left (desktop only, `hidden md:flex gap-10`): links PORTFOLIO, ABOUT, LAB — `text-xs font-semibold tracking-widest uppercase text-neutral-700 hover:text-neutral-900 transition-colors`, href="#". - Left (mobile only): hamburger Menu icon (lucide, size 22, strokeWidth 1.5) that opens the mobile menu. - Center: wordmark "IGLOO" — `text-sm tracking-[0.35em] text-neutral-600 uppercase`, font Inter. - Right (`flex gap-4 md:gap-5`): Instagram icon (desktop only) and Search icon, lucide size 18, strokeWidth 1.5, `text-neutral-700 hover:text-neutral-900`. 3. **Left thumbnail rail** (desktop only): `absolute left-4 md:left-6 top-1/2 -translate-y-1/2 z-[30] flex-col gap-3`; each thumb `w-12 md:w-16 h-12 md:h-16 rounded-lg overflow-hidden cursor-pointer hover:scale-105 transition-transform shadow-md` with object-cover image. 4. **Right scroll line** (desktop only): `absolute right-8 top-1/2 z-[30]`, a `w-px h-32 bg-neutral-500/60` vertical rule, vertically centered via translateY(-50%). 5. **Bottom caption**: `absolute bottom-8 md:bottom-12 left-1/2 -translate-x-1/2 z-[30] flex flex-col items-center gap-3 text-center px-6`: - Paragraph in 'Courier New', monospace: `text-[10px] md:text-xs tracking-widest text-white max-w-xs md:max-w-sm leading-relaxed`, text: "A conceptual vision of an igloo, afloat in the Arctic. Where minimalism, nature, and imagination converge." - Below it a lucide ChevronDown (size 16, white) with Tailwind `animate-bounce`. ### SECTION 2 — "With A View" (`relative z-[20] w-full h-screen overflow-hidden -mt-[20px]`) Inner column `relative z-10 h-screen flex flex-col justify-between p-6 md:p-10 lg:p-16`: 1. Top block (`flex flex-col gap-4 pt-16`): - Heading row (`flex items-start`): per-letter animated text "With A View" rendered uppercase — `text-[18vw] md:text-[16vw] leading-[0.85] text-white tracking-[0.01em] uppercase`, font Dimensions W03 300R → Anton fallback, left-aligned; to its right (desktop only) a horizontal rule `flex-1 mt-[0.42em] ml-4` containing `w-full h-px bg-white/70`. - Subtext row (`flex md:justify-end`): paragraph `text-white text-sm md:text-base max-w-xs leading-relaxed md:text-right`: "Elevated sanctuaries perched above the clouds, where architecture meets the infinite horizon." 2. Bottom card grid: `grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 pb-4 max-w-4xl mx-auto mt-8 md:mt-0`. Each card: `group relative rounded-xl overflow-hidden aspect-[3/4] cursor-pointer max-h-[28vh]`; the 3rd card additionally `col-span-2 md:col-span-1 max-w-[50%] md:max-w-full mx-auto md:mx-0` (so on mobile it spans both columns but is half-width and centered). Image: `w-full h-full object-cover transition-transform duration-500 group-hover:scale-110`. Title overlaid `absolute bottom-3 left-3 right-3` as `text-white text-xs md:text-sm font-medium tracking-wide`. ### Mobile menu (z-[100] fixed overlay) - Backdrop: `bg-black/60 backdrop-blur-sm`, fades opacity over 500ms, click closes. - Panel: right-anchored drawer `w-[75vw] max-w-xs h-full bg-white/95 backdrop-blur-xl shadow-2xl`, slides in from `translate-x-full` over 500ms with easing `cubic-bezier(0.16,1,0.3,1)`. Contains an X close button (top-right, lucide size 24), the three nav links stacked (`text-lg font-semibold tracking-widest uppercase`, each fading/sliding in from `translate-x-8` with delays 150ms/230ms/310ms when open), and bottom-left Instagram + Search icons (size 20) fading up with 400ms delay. Opening sets `document.body.style.overflow = 'hidden'`; closing restores it. ## 4. ANIMATIONS (implement exactly) 1. **LettersPullUp** (framer-motion, used for both big headlines): split text into characters; each char is a `motion.span` with variants `initial: { y: 20, opacity: 0 }` → `animate: { y: 0, opacity: 1, transition: { delay: i * 0.05 } }` (i = char index), triggered once when the element scrolls into view (`useInView(ref, { once: true })`). Spaces render as ` `. Wrapper is `flex flex-wrap` with justify-center by default, justify-start for the "With A View" heading. 2. **Scroll-driven background zoom/pan** (custom hook, applied to BOTH the background and overlay images): on scroll (rAF-throttled, passive listener), compute `progress = min(scrollY / window.innerHeight, 1)`; set `scale = 1 + progress * 0.12` (i.e. 1 → 1.12) and `focalY = progress * 100` (objectPosition drifts from `center 0%` to `center 100%`). Transform origin `top center`. 3. **Staggered reveal on scroll** (custom hook, IntersectionObserver, fires once): container observed at threshold 0.1 (hero) / 0.15 (view section); when intersecting, each indexed child transitions from `opacity: 0; translateY(24px)` to visible over `0.7s cubic-bezier(0.16,1,0.3,1)` with per-index delay — hero uses 150ms steps (headline=index 0, nav=2, thumbnails=3–6, right line=7, bottom caption=8), view section uses 200ms steps (heading=0, subtext=1, cards=2–4). For elements that also carry a centering transform (right line, bottom caption), compose it: e.g. hidden state `translateX(-50%) translateY(24px)` → visible `translateX(-50%)`. 4. **Micro-interactions**: thumbnail `hover:scale-105`; card image `group-hover:scale-110` (500ms); chevron `animate-bounce`; all link color transitions via `transition-colors`. ## 5. DEPENDENCIES package.json deps: react ^18.3.1, react-dom ^18.3.1, framer-motion ^12, lucide-react ^0.344.0, @vitejs/plugin-react, tailwindcss ^3.4, typescript ^5.5, vite ^5.4. Tailwind config: default, content `./index.html` + `./src/**/*.{js,ts,jsx,tsx}`. Vite config: react plugin, `optimizeDeps.exclude: ['lucide-react']`.2e:T13bb,Recreate this hero section exactly. Here are the complete specifications: Video Background: Full-screen background video, absolutely positioned, covering the entire viewport (object-cover) Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 Autoplay, loop, muted, playsInline NO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever. Typography (CRITICAL - must be applied globally): Import the Google Font Inter via a <link> tag in index.html: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> Set the body font-family in CSS to: 'Inter', sans-serif Apply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body Also extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically Navbar: Wrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding The navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between Left: Logo text "VEX" - text-2xl font-semibold tracking-tight Center (hidden on mobile, visible md+): Links "Story", "Investing", "Building", "Advisory" - text-sm, gap-8, hover transitions to gray-300 Right: "Start a Chat" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100 Hero Content (Bottom of viewport): Container: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16 On large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end) Left Column - Main content: Heading: "Shaping tomorrow\nwith vision and action." (literal line break between "tomorrow" and "with") Responsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal, mb-4 Inline style: letterSpacing: '-0.04em' Character-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms. Spaces render as \u00A0 (non-breaking space) Subheading: "We back visionaries and craft ventures that define what comes next." text-base md:text-lg text-gray-300 mb-5 Fade-in animation: starts at 800ms delay, 1000ms duration Buttons row: flex-wrap with gap-4 "Start a Chat" - bg-white text-black px-8 py-3 rounded-lg font-medium "Explore Now" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text Fade-in animation: starts at 1200ms delay, 1000ms duration Right Column - Tag: Aligned to bottom-right on large screens (flex items-end justify-start lg:justify-end) Glass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl Text: "Investing. Building. Advisory." - text-lg md:text-xl lg:text-2xl font-light Fade-in animation: starts at 1400ms delay, 1000ms duration Liquid Glass CSS (place in global CSS): .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } FadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class. AnimatedHeading component: Splits text by \n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay. Color scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo. Stack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).2f:T9c01,<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auren

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:T3511,Build a React + TypeScript + Vite + Tailwind CSS landing page for "NexaCore" — an enterprise infrastructure operations platform. Use lucide-react for icons, hls.js for HLS video streaming, and @supabase/Bolt Database-js (available but not yet wired). No other UI libraries. Global Setup Fonts (src/index.css) Load "Mazzard H" custom font via @font-face before Tailwind directives: Weight 400: https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2 (+ .woff, .ttf fallbacks same hash) Weight 500: https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2 (+ .woff, .ttf fallbacks) Apply globally: @layer base { html, body, * { font-family: 'Mazzard H', sans-serif; } } App Structure (src/App.tsx)

Brand Colors (use consistently) Deep navy text: rgb(26, 11, 84) Muted lavender text: rgb(169, 151, 206) / rgb(189, 174, 231) / rgb(131, 121, 158) Accent purple: rgb(200, 111, 255) (also #c86fff) Primary solid blue: rgb(28, 78, 255) Gradient A (logos/buttons): linear-gradient(90deg, rgb(28,78,255), rgb(172,36,255) 50%, rgb(254,136,27)) Gradient B (headline highlights): linear-gradient(90deg, rgb(43,167,255), rgb(202,69,255) 50%, rgb(254,136,27)) Off-white chip bg: rgb(249, 249, 249) Dark card bg: rgba(10, 5, 20, 0.88) with backdrop-filter: blur(36px) Never use purple/indigo outside these exact gradient stops. Heading font-weight is always 500, body 400. 1. Navbar (src/components/Navbar.tsx) Fixed floating pill-shaped navbar. Container: fixed top-4 left-0 right-0 z-50 flex justify-center pl-4 pr-1.5 Inner

: white background, rounded-2xl, shadow-lg, width transitions from max-w-6xl → max-w-3xl on scroll > 20px (transition-all duration-500 ease-in-out). Inner row: flex items-center justify-between gap-6, padding pl-5 pr-2 py-1.5 → pl-4 pr-2 py-1.5 on scroll. Logo: 28x28 SVG circle stroked with logoGradient linear gradient (stops: rgb(28,78,255) → rgb(172,36,255) → rgb(254,136,27)), strokeWidth 2.5. Text "NexaCore" next to it, size 22, letter-spacing -0.02em, color rgb(26,11,84), font-weight 500. Nav links (desktop, hidden on mobile): "What We Build", "Our Method", "Who We Are", "Thinking". Links: text-sm, rounded-xl, hover:bg-gray-100, padding shrinks on scroll (px-4 py-2 → px-2 py-1.5), gap from 1 to 0. Right cluster: Search icon button (lucide Search size 20) in a 40x40 rounded-xl hover:bg-gray-100, plus . Mobile: Menu/X toggle (lucide) reveals stacked nav links centered + search icon + ContactButton (with flex-1). ContactButton (src/components/ContactButton.tsx) Gradient-border pill button. Outer : relative inline-flex items-center justify-center rounded-xl p-px, background = Gradient A. Inner : rounded-[11px] px-7 py-3 text-base text-white, background = solid rgb(28,78,255) by default, switches to Gradient A on hover with transition-colors duration-300. Text: "Contact". 2. Hero (src/components/Hero.tsx) Full-screen looping background video with centered text. Section: relative min-h-screen flex items-center justify-center px-4 overflow-hidden

gap 10. Each

color rgb(189,174,231), clamp(12px,1vw,15px), padding-left clamp(22px,1.8vw,28px), background-image the bullet SVG at https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/683ef70a24657b10be91ef49_bullet-list.svg, size 18px, position 0% 50%. "Learn more" button: hidden by default (max-height 0, opacity 0, translateY 20px), on hover (max-height 80, opacity 1, translateY 0). Background = Gradient A, white text, rounded-xl, padding clamp(10px,0.9vw,14px) 0, font clamp(13px,1.1vw,16px). 4. FreedomSection (src/components/FreedomSection.tsx) White section. 3-column grid (negatives | HLS circular video | positives). Section: bg #ffffff, padding clamp(48px,6vw,80px) clamp(16px,3vw,40px), gap 36. Header: centered gap-9. Chip: bg rgb(249,249,249), rounded-full, padding 0.9vw 1.25vw, color rgb(26,11,84), text-lg font-medium. Inline SVG (19x18, viewBox 0 0 17 16) of two-heart/cloud shape filled rgb(200,111,255) (exact path in code). Text: "Control". H2 font-medium clamp(32px,4vw,56px) color rgb(26,11,84) line-height 1.15: "Stop absorbing the chaos."
gradient span (Gradient B with paddingBottom: 0.3vw; display: inline-block): "Run with confidence." Grid: flex flex-col lg:grid, grid-template-columns: 26vw 1fr 26vw, column gap 36, row gap 24, align-items start, padding 0 clamp(0px,2.92vw,40px). Left column — negatives Font clamp(13px,1.15vw,17px), color rgb(131,121,158), gap 12. Each row: white bg, rounded 18, padding clamp(12px,0.97vw,16px) clamp(14px,1.25vw,20px), box-shadow 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a. Icon (cross) src: https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc0f520a992816d8b15dc_bullet-list-cross.svg width clamp(16px,1.25vw,20px). Texts (in order): "Reactive firefighting when foundational issues surface too late" "Bloated coordination overhead drains bandwidth from core teams" "Constant re-verification because source data can't be trusted" "Fragmented vendor relations produce mismatched deliverables" "Scattered specs and decisions buried across siloed systems" Center column — circular HLS video Wrapper: borderRadius: 50%; overflow: hidden; width/height: clamp(200px,22vw,400px). component: uses hls.js. On mount, create new Hls({ startLevel: -1, capLevelToPlayerSize: false, maxMaxBufferLength: 60, enableWorker: true }), load https://stream.mux.com/bnYL6x5cAX6WiJv2pOKpITehZd3NVdXpj3ylJFpX5Lk.m3u8, attachMedia, on MANIFEST_PARSED set hls.currentLevel = hls.levels.length - 1 and play. Native Safari HLS fallback via canPlayType('application/vnd.apple.mpegurl'). Video style: width:160%; height:160%; object-fit:cover; absolute top:50% left:50%; transform: translate(-50%,-50%). Attrs autoPlay loop muted playsInline. Right column — positives Same card styling as negatives, but icon (check) src: https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc068490683bbb3377d04_bullet-list.svg. Inner text color rgb(26,11,84). Texts: "Layered dependency maps eliminate costly surprises at every phase" "Streamlined team handoffs deliver production-ready outcomes fast" "Live validation loops keep requirements locked across all stages" "Unified vendor management through a single accountable contact" "Centralized context and clear records accelerate every decision" Center column has class order-first lg:order-none so it appears first on mobile. 5. PrecisionSection (src/components/PrecisionSection.tsx) Light background-image section with a 4-pillar "staircase". Background image (exact): https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_125638_553b96dc-a1fd-4b2b-81a9-ed7daa80006e.png&w=1280&q=85 cover / center / no-repeat. Padding clamp(48px,8vw,120px) clamp(16px,4vw,60px) clamp(48px,5.56vw,80px), gap clamp(32px,4vw,56px), centered column, text-align center. Header: Chip: bg rgb(249,249,249), radius 36, padding clamp(8px,0.9vw,14px) clamp(12px,1.25vw,20px), font clamp(14px,1.1vw,18px) weight 500, color rgb(26,11,84). Inline SVG (19x18, viewBox 0 0 17 16): circle stroke #c86fff at (8.5, 8) r=7, plus four tick marks at top/bottom/left/right, all filled rgb(200,111,255). Text: "Structured Delivery". H2 max-width clamp(700px,60vw,900px), gap 22 from chip. Block 1 (display:block, sm:whitespace-nowrap): "One integrated, end-to-end system." Block 2 (display:block, Gradient B text, paddingBottom: 0.3vw): "Compounding operational value." Style: clamp(28px,4vw,56px), weight 500, rgb(26,11,84), line-height 1.15. Paragraph: clamp(15px,1.2vw,20px), rgb(169,151,206): "NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track." Desktop staircase (hidden on sm and below) Wrapper max-width: 82.292vw. Relative block width: 82.292vw; height: 31.94vw, text color rgb(26,11,84). Four pillars, each absolutely positioned via left: Xvw; bottom: Yvw: Label left bottom Items Scopes 2.8vw 7vw conditions, capacity, specs, timelines Integrates 22.4vw 9.08vw civil, mechanical, electrical, controls Certifies 41.2vw 11.16vw redundancy, testing, compliance, sign-offs Activates 61.1vw 13.24vw cutover, runbooks, handoff, SLAs Each pillar = column (align center): Chip: linear-gradient(135deg, rgb(255,255,255), rgba(255,255,255,0.6)), fontSize 18, weight 500, radius 20, padding 0.972vw 1.736vw, gap 8. Inside: logo image src https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870f623cf3df417ce45df05_icon%20logo%20eternacloud.png width 1.111vw + label text. Vertical line: 1px wide, height: 14.24vw, background = linear-gradient(rgb(28,78,255), rgb(254,136,27) 0%, rgb(172,36,255) 25%, rgb(247,159,255) 50%, rgb(255,214,0) 66%, rgb(254,136,27) 84%, rgba(254,136,27,0) 102%). Items absolutely positioned top: 0.56vw; left: 1.94vw (right of the line), gap 4, fontSize 16. Each item padding 0.69vw 1.04vw. Mobile layout (sm:hidden) Same 4 pillars in a vertical column, alternating alignment: index 0,2 left-aligned; 1,3 right-aligned. Chip (smaller: fontSize 15, padding 10px 18px, logo 16px). Below chip a row flex-direction: row (or row-reverse when right): 1px gradient line (min-height 120) adjacent to items. Items fontSize 14, color rgb(100,80,160), padding 8px 0. Build config Vite + React 18.3 + TS 5.5. Tailwind 3.4, PostCSS, Autoprefixer. package.json deps: @supabase/Bolt Database-js, hls.js, lucide-react, react, react-dom. Scripts: dev, build (vite build), preview, lint, typecheck.24:T1e92,Create a React + Tailwind CSS v4 + Motion (framer-motion successor) stats section component. Use Vite as the bundler. The section should be fully mobile responsive. ### Fonts Import from Google Fonts in your global CSS: ``` @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap'); ``` Define two Tailwind v4 theme fonts: - `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;` (used as the primary UI font via `font-sans`) - `--font-dm-serif: "Instrument Serif", serif;` (used as the accent/poetic font via `font-dm-serif`) The page wrapper uses `bg-black font-sans text-white`. ### Dependencies - `react` v19 - `motion` (npm package "motion", imported as `motion/react` -- provides `motion`, `useInView`, `animate`) - `tailwindcss` v4 with `@tailwindcss/vite` plugin - Vite v6+ ### Section Layout The section is a `
` with: - `id="stats"` - Classes: `bg-black text-white py-8 md:py-24 px-6 md:px-12 lg:px-[120px] w-full border-t border-white/10 overflow-hidden` - Inner wrapper: `w-full max-w-[1440px] mx-auto` - Content is a two-column flexbox: `flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch` ### Left Column (flex-1, flex flex-col justify-start) The entire left column is wrapped in a `motion.div` with staggered reveal animation: - `initial="hidden"`, `whileInView="visible"`, `viewport={{ once: true, margin: "-100px" }}` - Variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06 } }` **Heading (h2):** - Classes: `text-[clamp(1.5rem,4vw,3.5rem)] font-medium tracking-tight mb-6 leading-[1.1] w-[590px] max-w-full` - Content uses a custom `` component (described below): - `` followed by `
` - `` then a `` wrapping `` - The phrase "Maximize Your Yield" renders in Instrument Serif italic as the accent font. **Subtitle (p):** - Classes: `text-base md:text-lg text-white/40 leading-relaxed font-light max-w-lg whitespace-normal mb-16` - Content: `` **Stats Grid:** - Wrapped in `motion.div` with stagger variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.1 } }` - Classes: `grid grid-cols-2 md:grid-cols-[max-content_max-content] gap-8 md:gap-x-16 lg:gap-x-24` - 5 stat items, each wrapped in `motion.div` with variants: hidden = `{ opacity: 0, y: 20 }`, visible = `{ opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }` - Each stat item (`flex flex-col`): - **Number:** `text-4xl md:text-5xl lg:text-[56px] font-dm-serif tracking-tight mb-3` (uses Instrument Serif) - **Label:** `text-[10px] md:text-xs font-semibold text-white/40 uppercase tracking-wider` The 5 stats with their AnimatedCounter props: 1. `value={500} suffix="K+"` / Label: "Acres Harvested Annually" 2. `value={99.8} decimals={1} suffix="%"` / Label: "Crop Recovery Rate" 3. `value={50} suffix="+"` / Label: "Modern Combines Deployed" 4. `value={15} suffix="+"` / Label: "Crop Varieties Supported" 5. `value={24} suffix="/7"` / Label: "Uptime During Season" ### AnimatedCounter Component A helper component that animates from 0 to a target value on scroll into view: - Props: `value: number`, `suffix?: string` (default ""), `prefix?: string` (default ""), `decimals?: number` (default 0) - Uses `useRef`, `useInView(ref, { once: true, margin: "-50px" })` from `motion/react` - On `inView`, calls `animate(0, value, { duration: 1.5, ease: "easeOut", onUpdate(val) { ref.current.textContent = prefix + val.toFixed(decimals) + suffix } })` - Returns `{prefix}0{suffix}` as initial render ### Typewriter Component A reusable character-by-character reveal animation triggered on scroll: - Props: `text: string`, `delay?: number` (default 0), `speed?: number` (default 0.015), `className?: string` (default "") - Uses `useRef`, `useInView(ref, { once: true, margin: "-10px" })` from `motion/react` - Renders a `motion.span` with `initial="hidden"` and `animate={inView ? "visible" : "hidden"}` - Parent variants: hidden = `{ opacity: 1 }`, visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }` - Splits text into individual characters, each wrapped in `motion.span` with variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1 }` ### Right Column: Logo-Masked Video - Wrapper: `flex justify-center lg:justify-end items-center shrink-0 lg:w-1/2` - Inner `motion.div`: - `initial={{ opacity: 0, scale: 0.9 }}` - `whileInView={{ opacity: 1, scale: 1.2 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.8, delay: 0, ease: "easeOut" }}` - Classes: `w-full max-w-[500px] lg:max-w-none lg:w-[120%] aspect-square origin-center` - Uses CSS `mask-image` (both `-webkit-mask-image` and `mask-image`) with an inline SVG data URI of a triangular/mountain-like logo shape. The exact SVG path data: ``` m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z ``` - SVG viewBox: `0 0 100 100` - Mask properties: `maskSize: 'contain'`, `maskRepeat: 'no-repeat'`, `maskPosition: 'center'` - Full inline style object: ```js { WebkitMaskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`, WebkitMaskSize: 'contain', WebkitMaskRepeat: 'no-repeat', WebkitMaskPosition: 'center', maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`, maskSize: 'contain', maskRepeat: 'no-repeat', maskPosition: 'center', } ``` - Inside the masked div, a `
` containing: 1. A **fixed full-viewport background video** (z-index 0) 2. A **fixed transparent navbar** (z-index 10) 3. **Section 1** -- Hero (100vh, z-index 1) 4. **Section 2** -- Statement (100vh, z-index 1, transparent bg over video) 5. **Section 3** -- Services (auto height, z-index 2, #C5C5C5 bg) 6. **Fixed scroll indicator** (bottom center, z-index 5) 7. **Fixed share/repost button** (bottom right, z-index 5) --- ## FIXED BACKGROUND VIDEO ``` position: fixed, top: 0, left: 0, width: 100%, height: 100vh, objectFit: cover, zIndex: 0 src: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_135830_bb6491d1-9b66-4aec-9722-13b4dfe3fb46.mp4" autoPlay, muted, loop, playsInline ``` --- ## NAVBAR (fixed, transparent) - `position: fixed; top:0; left:0; right:0; z-index:10; background: transparent; border-bottom: 1px solid rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:space-between; padding: 20px 32px;` - **Left:** Brand "COGNITRA" -- FadeUp delay=0, fontSize 13px, fontWeight 700, letterSpacing 0.12em, uppercase, color #1a1a1a - **Center:** Links ['MAIN', 'OFFERING', 'CASE', 'RATES'] in a flex row gap 48px. Each link wrapped in FadeUp with delay = 0.05 + i*0.05. Links: fontSize 11px, letterSpacing 0.06em, color #1a1a1a, fontWeight 400 - **Right:** Links ['CREW', 'CONNECT'] same style, FadeUp delay = 0.3 + i*0.05 - Hover on all links: opacity 0.6 --- ## SECTION 1 -- HERO (100vh) - `position: relative; zIndex: 1; height: 100vh;` - **Top overlay div** (absolute, top:0, left:0, right:0, height: 48%, background: #C5C5C5, flex column, paddingTop: 70px) - Inner content area: `flex:1; display:flex; alignItems:flex-end; padding: 0 32px 24px 32px;` - **Hero row** (flex, stretch, width 100%, gap 48px): - **Left column** (width 32%, flex-column, justify space-between, gap 80px): - `
` FadeUp as="h1" delay=0.1 -- "SCALING\nFASTER USING AI" -- fontSize clamp(26px, 3vw, 42px), fontWeight 700, lineHeight 1.05, letterSpacing -0.01em, uppercase, color #1a1a1a - Slide counter FadeUp delay=0.5 -- "001 / 005" -- fontSize 11px, letterSpacing 0.08em, color #666 - **Right column** (flex:1, flex-column, justify space-between, gap 80px): - `
` FadeUp as="p" delay=0.25 -- "We engineer custom automation flows and personalized AI products for ambitious modern businesses." -- fontSize 18px, lineHeight 1.6, color #5a5a5a, maxWidth 340px - Buttons row (flex, gap 10px) FadeUp delay=0.4: - "BOOK A CALL!" -- btn-primary: bg #1a1a1a, color #fff, border 1px solid #1a1a1a, border-radius 9999px, padding 12px 36px, fontSize 11px, fontWeight 500, letterSpacing 0.08em, uppercase - "OUR PRODUCTS" -- btn-secondary: bg transparent, color #1a1a1a, border 1px solid #1a1a1a, same radius/padding/fontSize/weight/spacing. Hover: bg #1a1a1a, color #fff - **Bottom-left text** (absolute, top 74%, transform translateY(-50%), left 32px, maxWidth 260px) FadeUp delay=0.6: - "Guiding future-minded companies forward with bespoke AI products and streamlined workflows." -- fontSize 14px, lineHeight 1.65, color rgba(255,255,255,0.9) --- ## SECTION 2 -- STATEMENT (100vh, transparent over video) - `position:relative; zIndex:1; height:100vh; display:flex; flexDirection:column; justify-content:center; padding: 70px 32px 32px 32px;` - Inner div: flex-column, align flex-start, maxWidth 720px, padding 80px 0 - `
` -- fontSize clamp(26px, 3vw, 42px), fontWeight 700, lineHeight 1.08, letterSpacing -0.01em, uppercase, color #fff, display flex, flexWrap wrap, gap 0.25em - Text "WE BUILD END-TO-END AI AUTOMATION SYSTEMS." split by space, each word wrapped in FadeUp as="span" delay = 0.15 + i*0.08, y=32 - `
` FadeUp as="p" delay=0.9 -- "We provide all-in-one AI automation services in one place." -- marginTop 24px, fontSize 14px, lineHeight 1.65, color rgba(255,255,255,0.85), maxWidth 260px --- ## SECTION 3 -- SERVICES (gray bg) - `position:relative; zIndex:2; background:#C5C5C5; display:flex; flexDirection:column; padding: 70px 32px 80px 32px; min-height:auto;` - **Counter**: FadeUp delay=0 -- "003 / 005" -- fontSize 11px, letterSpacing 0.08em, color #666, marginBottom 20px - **Head row** (flex, gap 48px, align flex-start, marginBottom 32px): - Left col (width 32%): `
` "EXPLORE WHAT WE OFFER" -- fontSize clamp(26px, 3vw, 42px), fontWeight 700, lineHeight 1.05, letterSpacing -0.01em, uppercase, color #1a1a1a, maxWidth 320px, display flex, flexWrap wrap, gap 0.25em. Each word FadeUp as="span" delay = 0.1 + i*0.1, y=28 - Right col (flex:1, paddingTop 8px): FadeUp as="p" delay=0.25 -- "We provide all-in-one AI automation services in one place." -- fontSize 14px, lineHeight 1.65, color #3a3a3a, maxWidth 320px - **Cards grid** (CSS grid, 3 columns 1fr, gap 20px, grid-auto-rows 1fr): - 3 cards, each FadeUp delay = 0.4 + idx*0.15: - Card container: bg transparent, border 1px solid rgba(0,0,0,0.18), borderRadius 20px, overflow hidden, flex column, paddingTop 16px - Video area: width 100%, aspectRatio 4/3, position relative, overflow hidden. Video inside: absolute inset 0, objectFit cover - Text area: padding 24px 28px 28px 28px - `
` fontSize 18px, fontWeight 600, color #1a1a1a, marginBottom 14px - `
` fontSize 13px, lineHeight 1.6, color #3a3a3a - Card data: 1. video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_220333_48163edc-995f-4513-9f44-48dbb07a7329.mp4`, title: "Process Streamlining", text: "We automate your processes by linking together the daily tools you rely upon. Lifting throughput and improving overall output." 2. video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_221040_e6ba7c5a-864e-46e9-871e-341a176a7e3e.mp4`, title: "Strategic advisory", text: "We craft intelligent assistants that are adaptive, grasp context, and are skilled enough to handle highly intricate customer requests." 3. video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_221104_fb538584-5b87-495f-952e-09ddd5a1792a.mp4`, title: "Assistant engineering", text: "Through our knowledge, we explore deep into your business and advise you on how AI powered automations may transform your operations." --- ## FIXED SCROLL INDICATOR (bottom center) - `position:fixed; bottom:32px; left:50%; transform:translateX(-50%); zIndex:5;` - CSS animation `scrollBounce`: `0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); }` -- 2s ease-in-out infinite - Pill shape: width 22px, height 36px, border 1.5px solid rgba(0,0,0,0.75), borderRadius 11px, flex, justify center, paddingTop 6px - Inner dot: width 3px, height 8px, background rgba(0,0,0,0.85), borderRadius 2px --- ## FIXED REPOST BUTTON (bottom right) - `position:fixed; bottom:32px; right:32px; zIndex:5; display:flex; alignItems:center; gap:6px; color:rgba(0,0,0,0.8); fontSize:11px; letterSpacing:0.08em; uppercase; cursor:pointer;` - Inline SVG (share icon), width 14, height 14, viewBox "0 0 24 24", fill none, stroke currentColor, strokeWidth 2, strokeLinecap round, strokeLinejoin round: ``` ``` - Text: "REPOST" --- ## RESPONSIVE BREAKPOINTS **@media (max-width: 900px):** - nav padding: 16px 18px; nav-links gap: 18px; hide .nav-links-secondary - hero-row: flex-direction column, gap 24px; hero-col-left/right: width 100%, gap 24px - section-pad: 90px 18px 32px 18px; section-pad-lg: 90px 18px 60px 18px - services-head-row: flex-direction column, gap 16px, marginBottom 24px; services-head-col: width 100% - cards-grid: 1 column, gap 16px - section-3: height auto, min-height 100vh - hero-bottom-text: top auto, bottom 80px, transform none, left 18px, right 18px, maxWidth none - btn-primary/secondary: padding 11px 22px, fontSize 10px **@media (max-width: 600px):** - nav-links gap: 14px; nav-brand fontSize: 12px - hero-overlay height: 56%, paddingTop: 64px - hero-buttons: flex-wrap wrap --- ## PACKAGES - react, react-dom - framer-motion - lucide-react - tailwindcss, postcss, autoprefixer - vite, @vitejs/plugin-react29:T1129,Build a single React component for an "About" section using Tailwind CSS. Use `lucide-react` for the ArrowRight icon. System font stack only (no custom fonts). Match every detail exactly: --- ### Outer wrapper `
` with `bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden`. Inner container: `max-w-[1440px] mx-auto`. --- ### Badge row `px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8`. - **Numbered circle:** `w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] sm:text-[12px] font-semibold`. Displays "1". - **Pill label:** Text "Introducing Axion". `text-[12px] sm:text-[13px] font-medium rounded-full px-3 sm:px-4 py-1 sm:py-1.5`. No border, no background. --- ### Heading `
` with `px-5 sm:px-8 lg:px-12 text-[clamp(1.5rem,4vw,3.2rem)] font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28`. Text: "Strategy-led creatives, delivering / results in digital and beyond." - the `/` represents a line break that is `
` with a ` ` fallback space before it (so on mobile it reads as one flowing line, on sm+ it breaks into two lines). --- ### Content area - MOBILE / TABLET layout (lg:hidden) Wrapper: `lg:hidden px-5 sm:px-8`. 1. **Paragraph:** "Through research, creative thinking and iteration we help growing brands realize their digital full potential." - `text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 mb-6`. 2. **CTA button** (inside a `mb-8` wrapper): Orange button (`bg-[#F26522] hover:bg-[#e05a1a]`) with text "About our studio", `text-white text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 flex items-center gap-3`. Contains: - **Text-roll hover animation:** The button text is inside `overflow-hidden h-[20px]` > `flex flex-col` container. The text is duplicated (two identical `h-[20px] flex items-center` spans). On `group-hover`, the flex-col translates `-translate-y-1/2` with `transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`. - **Arrow circle:** White circle `bg-white w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center`. Contains `ArrowRight` from lucide-react (size 14), `text-[#F26522]`, starts at `-rotate-45`, on `group-hover` rotates to `rotate-0` (same duration-500 easing). The entire button has `className="group"`. 3. **Images:** `flex flex-col sm:flex-row gap-4 sm:gap-5`. - First: `sm:w-[45%]`, `` with `w-full aspect-[438/346] rounded-xl sm:rounded-2xl object-cover`. - Second: `sm:w-[55%]`, `` with `w-full aspect-[900/600] rounded-xl sm:rounded-2xl object-cover`. --- ### Content area - DESKTOP layout (hidden lg:grid) Wrapper: `hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-5 sm:px-8 lg:px-12`. - **Left column** (`self-end`): Small image, `w-full aspect-[438/346] rounded-2xl object-cover`. - **Center column** (`self-start flex flex-col justify-end`): - Paragraph: `text-[16px] xl:text-[18px] leading-[1.65] font-medium text-gray-900 whitespace-nowrap mb-6`. Text with explicit `
` tags: "Through research, creative thinking`
`and iteration we help growing brands`
`realize their digital full potential." - Same orange CTA button as mobile (identical text-roll animation). - **Right column** (`self-end`): Large image, `w-full aspect-[3/2] rounded-2xl object-cover`. --- ### Image URLs - **Small image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85` - **Large image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85` --- ### Technical details - **Framework:** React 18 + TypeScript + Tailwind CSS 3.4 (default config, no custom theme extensions) - **Icons:** `ArrowRight` from `lucide-react` - **Font:** System default (no custom font loaded) - **All hover animations:** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]` - **Max content width:** 1440px, centered with `mx-auto` - **Responsive breakpoints:** Default Tailwind (sm: 640px, md: 768px, lg: 1024px, xl: 1280px) ---2a:Tfbe,Create a fullscreen hero landing page for a creative studio called "Foldcraft" using React, Tailwind CSS, and Lucide React icons. The page is a single viewport-height section with a looping background video, a responsive navbar, a mobile menu, and staggered-animated hero text. **Video Background:** - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4` - Attributes: autoPlay, muted, loop, playsInline - Styling: absolute positioned, full width/height, object-cover, object-position at 70% horizontal center - The video sits behind all content (no z-index or z-0) **Font:** - Google Fonts: Geist (weights 300-700), loaded via `` in index.html - Tailwind config extends fontFamily with `geist: ['Geist', 'sans-serif']` - Applied as `font-geist` on the root container - Body CSS: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale` **Root Container:** - `relative h-screen w-full overflow-hidden bg-black font-geist` **Navbar (z-30):** - Flex, space-between, padding: `px-6 py-5 md:px-12 lg:px-16` - Left side: Logo text "Foldcraft" (`text-lg font-semibold tracking-tight text-white sm:text-xl`) followed by desktop nav links (hidden on mobile, flex on md+) - Nav links: Home, Projects, Studio, Reach Us (`text-sm text-white/80 hover:text-white transition-colors`) - Right side (desktop): "Let's Talk" button (`rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`) - Right side (mobile): hamburger toggle button (40x40, z-50) with animated Menu/X icons from lucide-react. Menu rotates 90deg out and X rotates in with opacity and scale transitions (duration-300). Button has `active:scale-90`. **Mobile Menu (z-20):** - Absolute, `inset-x-0 top-0`, full-screen overlay with `bg-black/98 backdrop-blur-xl` - Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]` toggling between `h-screen opacity-100` and `h-0 opacity-0 pointer-events-none` - Inner content: centered vertically (`flex h-full flex-col justify-center px-8`), with a delayed fade + translate animation (delay-100, translate-y-8) - Links: Home, Projects, Studio, Reach Us (`text-3xl font-medium text-white/90 hover:text-white`) - Button: "Let's Talk" (`mt-6 rounded-full bg-white px-8 py-3.5 text-base font-medium text-black hover:scale-105`) - All links/button call `setMobileMenuOpen(false)` on click **Hero Content (z-10):** - Flex column, justify-between, fills remaining height: `h-[calc(100vh-80px)]` - Padding: `px-6 pb-10 pt-12 sm:pb-12 sm:pt-16 md:px-12 md:pb-16 md:pt-20 lg:px-16` **Top Section (max-w-3xl):** - Badge: "Brand & Visual Storytelling" (`text-xs sm:text-sm text-white/90`), with `animate-[fadeSlideUp_0.8s_ease_0.2s_both]`, margin-bottom 4 (sm:6) - Heading h1: "Shaping visual / narratives, / one pixel at a time." with `
` line breaks - Sizing: `text-3xl sm:text-5xl md:text-6xl lg:text-7xl` - Style: `font-medium leading-[1.1] tracking-tight text-white` - Animation: `animate-[fadeSlideUp_0.8s_ease_0.4s_both]` **Bottom Section:** - Paragraph: "Turning vision into reality through craft, motion, and an endless pursuit of beauty." - Style: `text-sm sm:text-base md:text-lg leading-relaxed text-white/60 max-w-sm sm:max-w-lg mb-5 sm:mb-6` - Animation: `animate-[fadeSlideUp_0.8s_ease_0.7s_both]` - CTA Button: "Explore Work" with ArrowRight icon (size 16) - Style: `rounded-lg bg-white px-5 py-2.5 sm:px-6 sm:py-3 text-sm font-medium text-black hover:scale-105 transition-transform inline-flex items-center gap-2` - Animation: `animate-[fadeSlideUp_0.8s_ease_0.9s_both]` **CSS Animation (in index.css):** ```css @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } ``` **CSS Reset (in index.css):** ```css * { margin: 0; padding: 0; box-sizing: border-box; } ``` **Dependencies:** React, lucide-react (ArrowRight, Menu, X), Tailwind CSS, Google Fonts Geist.2b:T126f,Build a full-screen hero section landing page for "Aurai" - an always-on AI wellness companion. The page is a single viewport-height section with a looping background video and overlaid content. ## Video Background - Full-screen `
` with `flex items-center justify-between`: **Left nav pill (glassmorphism):** - `bg-black/20 backdrop-blur-md rounded-2xl border border-white/10` - Padding: `px-4 py-2.5 sm:px-6 sm:py-4` - Contains: - A custom SVG logo (4-petal pinwheel shape, `w-5 h-5 sm:w-7 sm:h-7`, white) - Brand text "Aurai" in `font-askan text-white text-base sm:text-xl tracking-wide` - Hamburger menu icon (lucide-react `Menu`/`X`) with left margin: `ml-4 sm:ml-32 md:ml-64 lg:ml-96` **Right button (desktop only):** - `hidden sm:block bg-white text-gray-900 font-medium text-sm px-6 py-3 rounded-full` - Text: "Join the list" ## Mobile Menu (shown on toggle) - `sm:hidden`, positioned `absolute top-[4.5rem] left-4 right-4` - `bg-black/30 backdrop-blur-xl rounded-2xl p-5 border border-white/10` - Contains links: "Story", "Benefits", "Connect" (white text) and a full-width "Join the list" button ## Main Content (Bottom-aligned) On mobile: a spacer `flex-1 sm:hidden` pushes content to the bottom. The content container: `flex flex-col sm:flex-1 sm:flex-row sm:items-end pb-4 sm:pb-12 lg:pb-16 sm:mt-auto` **Left column:** 1. **Heading:** `font-askan text-white text-[2rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem] leading-[1.05] tracking-tight max-w-[700px]` - Text: "Your calm is always within." 2. **Subtitle:** `text-white/70 text-xs sm:text-base md:text-lg max-w-[520px] leading-relaxed` - Text: "Aurai is your always-on wellness companion. Built by leading therapists, it brings you the care and clarity right when you need it." 3. **Email form:** A rounded pill input with inline submit button - Container: `bg-black/30 backdrop-blur-md rounded-full border border-white/10` - Input: transparent background, white text, placeholder "Your email address", `px-4 sm:px-6 py-3 sm:py-4 text-sm` - Submit button (absolute right-1.5): `bg-white text-gray-900 text-xs sm:text-sm font-medium px-3 sm:px-6 py-2 sm:py-3 rounded-full` - Text: "Join the list" - On submit: shows alert with entered email 4. **Feature pills (mobile only):** `flex sm:hidden flex-wrap gap-2 mt-2` - Three pills with `bg-black/30 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full border border-white/10` - Labels: "Smart Therapy", "Real-time Healing", "Insights into outcomes" **Right column (desktop only):** - `hidden sm:flex flex-col items-end gap-2 self-end` - Same three feature pills as mobile but with `text-xs sm:text-sm px-4 py-2` ## Custom SVG Logo A pinwheel/4-quadrant shape with this path: ``` M 228 0 C 172.772 0 128 44.772 128 100 L 128 0 L 0 0 L 0 28 C 0 83.228 44.772 128 100 128 L 0 128 L 0 256 L 28 256 C 83.228 256 128 211.228 128 156 L 128 256 L 256 256 L 256 228 C 256 172.772 211.228 128 156 128 L 256 128 L 256 0 Z ``` ViewBox: `0 0 256 256`, fill: `currentColor` ## Global CSS ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` ## Key Design Principles - No dark overlay on the video - content relies on glassmorphism pills and text contrast - All interactive glass elements use `bg-black/20` or `bg-black/30` with `backdrop-blur-md` or `backdrop-blur-xl` - Borders are `border-white/10` throughout - White text with `/70` opacity for secondary text - Rounded-full for buttons and inputs, rounded-2xl for containers - Page title: "Aurai - Always-On Wellness Companion"2c:T24ca,# Prompt: Recreate “Your Robots” game UI (pixel-faithful) Build a **single-file static HTML page** (`index.html` + local `assets/`) that is a **1:1 recreation** of a robot-selection game HUD titled **“Your Robots”**. No frameworks. Pure HTML/CSS. Body `overflow: hidden`. Full viewport (`100svh`). Transparent page background; all atmosphere comes from a full-bleed hero backdrop image. --- ## 1. Exact asset URLs (download into `assets/`) ### Hero / backdrop (1672×941 PNG) ``` https://stone-expand-60400629.figma.site/_assets/v11/7c90cead4ef79aaead3abbe65cc533997dd3796b.png → assets/backdrop.png ``` Subject: centered white ceramic robot head, glowing orange-red circular eyes, thick black fabric cowl/scarf, dark shoulder armor, flat light grey studio background. Landscape crop. ### Roster thumbnails (each 89×95 PNG) ``` 1 BERSERKER → https://stone-expand-60400629.figma.site/_assets/v11/c0bd937d3837ba304e8e9ae2e4725d8b25bc40f0.png → assets/robot-portrait-1.png 2 DESTROER → https://stone-expand-60400629.figma.site/_assets/v11/427e49f7f762554d6348570481817f035bc00ba5.png → assets/robot-portrait-2.png 3 WARRIOR → https://stone-expand-60400629.figma.site/_assets/v11/0bd6c97ff19b492e8dcf902550c0d4d6b36b8f8e.png → assets/robot-portrait-3.png 4 FIGHTER → https://stone-expand-60400629.figma.site/_assets/v11/fe2a7d2ee80e217a5e3502cbf07255c030df3844.png → assets/robot-portrait-4.png ``` ### Fonts (UI type) Local WOFF2 files named **Roboto Flex UI** at weights **400 / 500 / 700**: ``` assets/roboto-flex-ui-400.woff2 assets/roboto-flex-ui-500.woff2 assets/roboto-flex-ui-700.woff2 ``` `@font-face` family name must be exactly `'Roboto Flex UI'`. Fallback stack: ```css font-family: 'Roboto Flex UI', Roboto, 'Helvetica Neue', Arial, sans-serif; ``` `-webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;` ### Icons (Google Material Symbols Outlined — NOT PNGs) Load: ``` https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block ``` Use these exact glyph names: | Slot | Icon name | FILL | |---|---|---| | Coin badge next to balance | `toll` | 0 | | Signal / wifi | `wifi` | 0 | | Skill 1 | `local_fire_department` | 1 | | Skill 2 | `skull` | 1 | | Skill 3 | `pets` | 1 | Do **not** use image assets for coin, wifi, or skills. --- ## 2. Scaling system (critical — do not use fixed px layout) Reference artboard: **1414 × 900** design units. ```css --frame-block-start: clamp(8px, 1.8vh, 28px); --u: clamp( 0.5px, min(100vw / 1414, (100vh - var(--frame-block-start)) / 900), 1.45px ); ``` **Every** dimension, type size, gap, and margin is `calc(N * var(--u))`. Layout never crops; slack goes into the flexible center column (desktop) or the flexible dossier row (portrait). --- ## 3. Color / surface tokens ``` --glass-face: rgba(255,255,255,.46) --glass-edge: rgba(255,255,255,.8) --glass-blur: calc(6 * var(--u)) --panel-face: #fefefe --ink: #060606 --ink-soft: #24242b --ink-muted: #2f3133 --level-face: #555557 --level-ink: #454546 --skill-face-a:#575759 --skill-face-b:#5e5c61 --cta-face: rgba(16,16,16,.44) /* portrait upright: rgba(16,16,16,.86) */ --cta-edge: #070707 --cta-halo: rgba(255,255,255,.85) --rule: rgba(0,0,0,.35) ``` Glass cards: `backdrop-filter: blur(var(--glass-blur))` + translucent white face. Active unit card is opaque `#fefefe` with **no** blur. --- ## 4. Corner-bracket motif (shared visual language) Roster unit cards, ADD tile, and skill tiles use **L-shaped corner brackets** (not full borders): - Top-right + bottom-left only - Stroke `--unit-bracket-w: calc(3.5 * var(--u))` - Arm length = 100% of card height for units/add; **50%** for skills - 30° mitred tips via `--unit-bracket-tip: calc(1.7320508 * var(--unit-bracket-w))` - Bracket color = `--glass-edge` normally; active unit = `#fff` --- ## 5. Exact DOM / content inventory ### Shell ``` .app img.app__backdrop (src=assets/backdrop.png) header.topbar main.stage section.roster section.dossier ``` ### Backdrop placement - Absolute, `z-index:0`, full height, `object-fit:cover`, `object-position:50% 30%` - Width: `max(1580u, 100% + 52u)`, centered then shifted left by `-26u` - Portrait upright: shift/bleed = 0, width 100%, `object-position:50% 26%` ### Topbar (left → right) 1. **Back button** — SVG 86×55 viewBox, black plate polygon `0,0 86,0 72,55 0,55`, white triangle arrow `27,27.5 52.5,16.5 51.5,39.5` 2. **Title** `Your Robots` — 40.7u / weight 400 / tracking 0.7u / color `#131313` 3. **HUD** (margin-inline-start:auto): - White circle 48u: Material `toll` at 22u - Pill `#fdfdfd` balance **`2523`** — 20.5u / weight 500 / color `#070707` / height 31u / min-width 91u - Material `wifi` at 28u, gutter 72u from pill ### Roster (left column) - Eyebrow (exact text with spaces): `CLASSES S — A` (em dash `—` / `—`) — 29u / weight **700** / white / tracking 2.06u / soft black text-shadow - 4 unit buttons, gap 16u: | # | Name | ID | Portrait | State | |---|---|---|---|---| | 1 | BERSERKER | Robot 2300.10 | robot-portrait-1.png | default glass | | 2 | DESTROER | Robot 1747.12 | robot-portrait-2.png | default glass | | 3 | WARRIOR | Robot 2347.12 | robot-portrait-3.png | default glass | | 4 | FIGHTER | Robot 0440.01 | robot-portrait-4.png | **active** (wider opaque card) | - Default unit: 302×126u, 15u padding, portrait 89×95u, name 27.4u / id 18.4u (`--ink-soft`) - Active unit: 326×127u, white brackets, solid panel - **ADD ROBOTS** button 301×128u, glass, label 26.1u weight 500, plus-icon box 69×72u with 4u ink border and CSS + bars (25×5 and 5×26) ### Dossier (right column, 456u wide track) **Level block (129u wide):** - Giant **`51`** — 111.4u / weight 500 / color `#454546` / right-aligned - Grey bar **`LEVEL`** — height 34u / bg `#555557` / white / tracking 5.85u / weight 500 **Identity:** - **`FIGHTER`** — 31.5u / color `#343234` - `Class ` + bold **`S`** (21.72u / weight 700 / black) **Stats (single column desktop; 2-col portrait), exact values + fill %:** | Label | Value | `--stat-fill` | |---|---|---| | ATTACK | 260 | 85.714% | | DEFENCE | 80 | 34.762% | | ACCURACY | 150 | 48.095% | | DEXTRETY | 220 | 72.381% | Meters: 6u tall track; 2u hairline rule under; solid black fill bar. Spellings **DEFENCE** and **DEXTRETY** are intentional (keep typos). **Skills** label `Skills` then 3 tiles 73×80u, gap 25u: - Grey gradient plate `#575759 → #5e5c61` (SVG linearGradient) - White filled Material icons centered: `local_fire_department`, `skull`, `pets` at 28u **Decorative scrollbar** (non-interactive): 8u wide rail, 1.5u grey track, black thumb 7×98u starting 44u down, total height 261u. **START CTA** height 90u: - Stepped/notched rectangle (8/280 × 8/90 notch fractions on all 4 corners) - Face `rgba(16,16,16,.44)` + blur - SVG edge viewBox `0 0 280 90`: outer white halo stroke 1.4 + inner black stroke 6 - Label **`START`** white, 24.7u, weight 500, **huge tracking 9.75u** --- ## 6. Desktop layout (landscape) ``` topbar (fixed height ~85u + frame inset) stage: grid columns [auto | minmax(120u,1fr) | 456u] padding: 30u left, 24u right, 62u bottom roster = col 1 | empty center shows robot art | dossier = col 3 ``` Dossier internal grid: ``` rows: 180u | auto | auto | 1fr | auto cols: auto | 1fr | auto level(1,1) ident(2,1) stats(2,2) skills(2-3,3) scroll(3,1-4) cta(2-3,5) ``` --- ## 7. Responsive compositions (must implement) ### A. Portrait shared (`orientation:portrait` and `max-width:1200px`) - Single column stage: roster on top, dossier glass panel anchored to bottom - Dossier becomes bordered glass panel with padding 26u - Stats → 2 columns; skills move to masthead opposite level - Active unit same size as others (no grow) - CTA face darkens to `rgba(16,16,16,.86)` ### B. Phone (`portrait` + `max-width:480px`) - Artboard becomes **620×880** - Roster = horizontal snap-scroll rail of cards; ADD parks beside scroller as compact stacked icon+label tile - Level/skills compressed (level ~72u, skills 48×53u) ### C. Tablet (`portrait` + `481–1200px`) - Artboard **900×1400**; console max-width 820u centered - Roster = **2-column** grid of units; ADD = full-width bar ### D. Wide tablet (`+ min-aspect-ratio: 7/8`) - Roster becomes **4 columns** on one row; stack max-width 1280u --- ## 8. Aesthetic rules (do not “improve”) - Monochrome UI chrome (black/white/grey) over photoreal robot art; **only** accent in the artwork is the orange eyes - Glassmorphism cards with **corner brackets only** — never rounded cards, never purple, never glow stacks, never pill clusters beyond the balance pill - No Inter/Roboto/Arial as primary — use **Roboto Flex UI** - No hero overlays, badges, or floating chips on the robot - Keep intentional copy typos: DESTROER, DEXTRETY, DEFENCE - Page title: `Your Robots` - Static mock: buttons need no JS --- ## 9. Deliverable One self-contained `index.html` with embedded CSS matching the token architecture above, plus `assets/` containing the 5 PNGs and 3 WOFF2s. Visual target: desktop landscape first viewport = topbar + left roster rail + centered robot backdrop + right dossier (level/stats/skills/START), matching the described measurements within ±1 design unit. ---2d:T285f,Build a single-page "IGLOO" concept site using Vite + React 18 + TypeScript + Tailwind CSS 3 + framer-motion + lucide-react. Recreate it EXACTLY as specified below. ## 1. FONTS (load in index.html , in this exact order) ```html ``` Font usage rules: - Display headlines ("IGLOO" hero text and "WITH A VIEW"): `font-family: 'Dimensions W03 300R', 'Anton', sans-serif` — Dimensions W03 300R is the primary display face (a tall condensed stencil-style font loaded from onlinewebfonts.com); **Anton (Google Fonts) is the explicit fallback for headlines only**, so if the onlinewebfonts stylesheet fails or is blocked in any browser, headlines render in Anton, never in a default sans. - Body/UI text: `font-family: 'Inter', sans-serif` (weights 300/400/500/600), set globally on `body`. - Hero description paragraph: `font-family: 'Courier New', monospace`. - Page ``: IGLOO. Global CSS (index.css); body has Inter, `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `overflow-x: hidden`. ## 2. ASSETS (exact URLs) Page background (shared, spans both sections): `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260723_224514_a4f5778c-5a68-4e60-b9f8-74aeec2ef48b.png&w=1920&q=85` Overlay image (iceberg cutout, sits in front of background but behind ALL UI, spans both sections, pointer-events-none): `https://soft-zoom-63098134.figma.site/_assets/v11/7e3b4feb333e9a78d12d5afc7d48730615390ec2.png` Left-side thumbnails (top to bottom, 4 images): 1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094505_c14a7566-ec38-46cf-b298-b641815acbdc.png&w=1280&q=85` 2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094527_33af18d8-e52c-49a6-8b9b-4706b0c0a85a.png&w=1280&q=85` 3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094546_3f85bc04-8e66-4d82-aa27-fcf40742a384.png&w=1280&q=85` 4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094606_79a7fc4d-cf64-48bc-a2d3-52dd5ad6ffe3.png&w=1280&q=85` "With A View" cards (3 cards, in order, with titles): 1. "Cliffside Retreat" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101354_a5a857b7-b9ce-4e3f-9cc1-27424c9e4c8d.png&w=1280&q=85` 2. "Island Escape" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101420_1c0cbb04-a7b5-41f1-9d21-fcf3976f6be6.png&w=1280&q=85` 3. "Coastal Haven" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101434_83163d4d-1639-4812-8753-e679652939ff.png&w=1280&q=85` ## 3. PAGE STRUCTURE Root `<div style="background-color:#D6D7DD">` containing: (a) a MobileMenu overlay component, and (b) a `relative overflow-hidden` wrapper that spans BOTH full-screen sections and holds two absolutely-positioned full-bleed images: - Background `<img>`: `absolute inset-0 w-full h-full object-cover`, dynamic `objectPosition: center {focalY}%` and `transform: scale({scrollScale})` with `transformOrigin: top center` (see animation #2). - Overlay `<img>`: identical positioning/animation, plus `z-[10] pointer-events-none`. ### SECTION 1 — Hero (`relative w-full h-screen overflow-hidden`) 1. **Giant "IGLOO" headline**: absolutely centered container `inset-0 flex items-start justify-center pt-[13vh] pointer-events-none z-[2]`. Text rendered with a per-letter animation component (see animation #1). Classes: `text-[36vw] md:text-[35vw] leading-[0.85] text-white/80 tracking-[0.01em] select-none`, font: Dimensions W03 300R → Anton fallback. It sits BEHIND the iceberg overlay (z-2 < z-10) so the iceberg visually cuts through the wordmark. 2. **Fixed navbar** (`fixed top-0 z-[40] flex items-center justify-between px-5 md:px-8 py-4 md:py-5`): - Left (desktop only, `hidden md:flex gap-10`): links PORTFOLIO, ABOUT, LAB — `text-xs font-semibold tracking-widest uppercase text-neutral-700 hover:text-neutral-900 transition-colors`, href="#". - Left (mobile only): hamburger Menu icon (lucide, size 22, strokeWidth 1.5) that opens the mobile menu. - Center: wordmark "IGLOO" — `text-sm tracking-[0.35em] text-neutral-600 uppercase`, font Inter. - Right (`flex gap-4 md:gap-5`): Instagram icon (desktop only) and Search icon, lucide size 18, strokeWidth 1.5, `text-neutral-700 hover:text-neutral-900`. 3. **Left thumbnail rail** (desktop only): `absolute left-4 md:left-6 top-1/2 -translate-y-1/2 z-[30] flex-col gap-3`; each thumb `w-12 md:w-16 h-12 md:h-16 rounded-lg overflow-hidden cursor-pointer hover:scale-105 transition-transform shadow-md` with object-cover image. 4. **Right scroll line** (desktop only): `absolute right-8 top-1/2 z-[30]`, a `w-px h-32 bg-neutral-500/60` vertical rule, vertically centered via translateY(-50%). 5. **Bottom caption**: `absolute bottom-8 md:bottom-12 left-1/2 -translate-x-1/2 z-[30] flex flex-col items-center gap-3 text-center px-6`: - Paragraph in 'Courier New', monospace: `text-[10px] md:text-xs tracking-widest text-white max-w-xs md:max-w-sm leading-relaxed`, text: "A conceptual vision of an igloo, afloat in the Arctic. Where minimalism, nature, and imagination converge." - Below it a lucide ChevronDown (size 16, white) with Tailwind `animate-bounce`. ### SECTION 2 — "With A View" (`relative z-[20] w-full h-screen overflow-hidden -mt-[20px]`) Inner column `relative z-10 h-screen flex flex-col justify-between p-6 md:p-10 lg:p-16`: 1. Top block (`flex flex-col gap-4 pt-16`): - Heading row (`flex items-start`): per-letter animated text "With A View" rendered uppercase — `text-[18vw] md:text-[16vw] leading-[0.85] text-white tracking-[0.01em] uppercase`, font Dimensions W03 300R → Anton fallback, left-aligned; to its right (desktop only) a horizontal rule `flex-1 mt-[0.42em] ml-4` containing `w-full h-px bg-white/70`. - Subtext row (`flex md:justify-end`): paragraph `text-white text-sm md:text-base max-w-xs leading-relaxed md:text-right`: "Elevated sanctuaries perched above the clouds, where architecture meets the infinite horizon." 2. Bottom card grid: `grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 pb-4 max-w-4xl mx-auto mt-8 md:mt-0`. Each card: `group relative rounded-xl overflow-hidden aspect-[3/4] cursor-pointer max-h-[28vh]`; the 3rd card additionally `col-span-2 md:col-span-1 max-w-[50%] md:max-w-full mx-auto md:mx-0` (so on mobile it spans both columns but is half-width and centered). Image: `w-full h-full object-cover transition-transform duration-500 group-hover:scale-110`. Title overlaid `absolute bottom-3 left-3 right-3` as `text-white text-xs md:text-sm font-medium tracking-wide`. ### Mobile menu (z-[100] fixed overlay) - Backdrop: `bg-black/60 backdrop-blur-sm`, fades opacity over 500ms, click closes. - Panel: right-anchored drawer `w-[75vw] max-w-xs h-full bg-white/95 backdrop-blur-xl shadow-2xl`, slides in from `translate-x-full` over 500ms with easing `cubic-bezier(0.16,1,0.3,1)`. Contains an X close button (top-right, lucide size 24), the three nav links stacked (`text-lg font-semibold tracking-widest uppercase`, each fading/sliding in from `translate-x-8` with delays 150ms/230ms/310ms when open), and bottom-left Instagram + Search icons (size 20) fading up with 400ms delay. Opening sets `document.body.style.overflow = 'hidden'`; closing restores it. ## 4. ANIMATIONS (implement exactly) 1. **LettersPullUp** (framer-motion, used for both big headlines): split text into characters; each char is a `motion.span` with variants `initial: { y: 20, opacity: 0 }` → `animate: { y: 0, opacity: 1, transition: { delay: i * 0.05 } }` (i = char index), triggered once when the element scrolls into view (`useInView(ref, { once: true })`). Spaces render as ` `. Wrapper is `flex flex-wrap` with justify-center by default, justify-start for the "With A View" heading. 2. **Scroll-driven background zoom/pan** (custom hook, applied to BOTH the background and overlay images): on scroll (rAF-throttled, passive listener), compute `progress = min(scrollY / window.innerHeight, 1)`; set `scale = 1 + progress * 0.12` (i.e. 1 → 1.12) and `focalY = progress * 100` (objectPosition drifts from `center 0%` to `center 100%`). Transform origin `top center`. 3. **Staggered reveal on scroll** (custom hook, IntersectionObserver, fires once): container observed at threshold 0.1 (hero) / 0.15 (view section); when intersecting, each indexed child transitions from `opacity: 0; translateY(24px)` to visible over `0.7s cubic-bezier(0.16,1,0.3,1)` with per-index delay — hero uses 150ms steps (headline=index 0, nav=2, thumbnails=3–6, right line=7, bottom caption=8), view section uses 200ms steps (heading=0, subtext=1, cards=2–4). For elements that also carry a centering transform (right line, bottom caption), compose it: e.g. hidden state `translateX(-50%) translateY(24px)` → visible `translateX(-50%)`. 4. **Micro-interactions**: thumbnail `hover:scale-105`; card image `group-hover:scale-110` (500ms); chevron `animate-bounce`; all link color transitions via `transition-colors`. ## 5. DEPENDENCIES package.json deps: react ^18.3.1, react-dom ^18.3.1, framer-motion ^12, lucide-react ^0.344.0, @vitejs/plugin-react, tailwindcss ^3.4, typescript ^5.5, vite ^5.4. Tailwind config: default, content `./index.html` + `./src/**/*.{js,ts,jsx,tsx}`. Vite config: react plugin, `optimizeDeps.exclude: ['lucide-react']`.2e:T13bb,Recreate this hero section exactly. Here are the complete specifications: Video Background: Full-screen background video, absolutely positioned, covering the entire viewport (object-cover) Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 Autoplay, loop, muted, playsInline NO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever. Typography (CRITICAL - must be applied globally): Import the Google Font Inter via a <link> tag in index.html: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> Set the body font-family in CSS to: 'Inter', sans-serif Apply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body Also extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically Navbar: Wrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding The navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between Left: Logo text "VEX" - text-2xl font-semibold tracking-tight Center (hidden on mobile, visible md+): Links "Story", "Investing", "Building", "Advisory" - text-sm, gap-8, hover transitions to gray-300 Right: "Start a Chat" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100 Hero Content (Bottom of viewport): Container: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16 On large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end) Left Column - Main content: Heading: "Shaping tomorrow\nwith vision and action." (literal line break between "tomorrow" and "with") Responsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal, mb-4 Inline style: letterSpacing: '-0.04em' Character-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms. Spaces render as \u00A0 (non-breaking space) Subheading: "We back visionaries and craft ventures that define what comes next." text-base md:text-lg text-gray-300 mb-5 Fade-in animation: starts at 800ms delay, 1000ms duration Buttons row: flex-wrap with gap-4 "Start a Chat" - bg-white text-black px-8 py-3 rounded-lg font-medium "Explore Now" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text Fade-in animation: starts at 1200ms delay, 1000ms duration Right Column - Tag: Aligned to bottom-right on large screens (flex items-end justify-start lg:justify-end) Glass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl Text: "Investing. Building. Advisory." - text-lg md:text-xl lg:text-2xl font-light Fade-in animation: starts at 1400ms delay, 1000ms duration Liquid Glass CSS (place in global CSS): .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } FadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class. AnimatedHeading component: Splits text by \n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay. Color scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo. Stack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).2f:T9c01,<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auren

Service About Contact

Hands
Off.

A private AI driver that learns the way you move — your routes, your routine, your time of day. It settles into the car you already drive and quietly takes the wheel, so less of every trip depends on you.

Join the waitlist and be first to let your car do the driving. No spam, just the road ahead.

Auren

Just speak. Ask for a warmer cabin, a quieter route, a stop for coffee — the car listens and takes care of the rest while you ride.

Drop a few points on the map and it strings them together — every turn, every stop, driven in order while you sit back and watch.

Effortless.

Anywhere.

30:T3d74,**Create a React + Vite + Tailwind CSS v4 landing page for "WISA" -- a premium football/soccer organization website. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.** --- ### GLOBAL SETUP **package.json dependencies (exact):** ``` react, react-dom ^19.0.0 motion ^12.23.24 gsap ^3.14.2 lucide-react ^0.546.0 tailwindcss ^4.1.14 @tailwindcss/vite ^4.1.14 @vitejs/plugin-react ^5.0.4 vite ^6.2.0 ``` **vite.config.ts:** Use `@tailwindcss/vite` plugin + `@vitejs/plugin-react`. Alias `@` to project root. **index.html:** Standard HTML5. Include `` in head. **src/index.css -- EXACT:** ```css @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } @keyframes flyOutRight { 0% { transform: translateX(0); } 100% { transform: translateX(250%); } } @keyframes flyInLeft { 0% { transform: translateX(-250%); } 100% { transform: translateX(0); } } .animate-fly-out { animation: flyOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in { animation: flyInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flyOutUp { 0% { transform: translateY(0); } 100% { transform: translateY(-150%); } } @keyframes flyInUp { 0% { transform: translateY(150%); } 100% { transform: translateY(0); } } .animate-fly-out-up { animation: flyOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in-up { animation: flyInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } ``` These define 4 keyframe animations: - `flyOutRight / flyInLeft` (250% translateX, 0.5s) -- for the arrow button hover - `flyOutUp / flyInUp` (150% translateY, 0.4s) -- for nav text hover - All use `cubic-bezier(0.4, 0, 0.2, 1)` easing with `forwards` fill mode --- ### COMPONENT: ScrollReveal (`src/components/ScrollReveal.tsx` + `ScrollReveal.css`) **ScrollReveal.css:** ```css .scroll-reveal { margin: 0; } .scroll-reveal-text { display: flex; flex-wrap: wrap; margin: 0; } .word { display: inline-block; white-space: pre; } ``` **ScrollReveal.tsx:** A GSAP-powered word-by-word scroll reveal component. - Props: `children` (string), `scrollContainerRef?`, `enableBlur` (default true), `baseOpacity` (default 0.1), `baseRotation` (default 3), `blurStrength` (default 4), `containerClassName`, `textClassName`, `rotationEnd` (default "bottom bottom"), `wordAnimationEnd` (default "bottom bottom") - Splits children text by whitespace into `` elements using `useMemo` - Three GSAP ScrollTrigger animations: 1. **Rotation**: Container rotates from `baseRotation` degrees to 0, origin "0% 50%", scrub true, trigger start "top bottom", end = `rotationEnd` 2. **Opacity**: Each `.word` fades from `baseOpacity` to 1, stagger 0.05, scrub true, trigger start "top bottom-=20%", end = `wordAnimationEnd` 3. **Blur** (if `enableBlur`): Each `.word` goes from `blur(blurStrength px)` to `blur(0px)`, same stagger/trigger as opacity - Renders: `
{splitText}
` - Cleanup: kills all ScrollTrigger instances on unmount --- ### COMPONENT: Reveal (inline in App.tsx) A motion.div wrapper for viewport-triggered fade-in: ```tsx function Reveal({ children, delay = 0, className = "" }) { return ( {children} ); } ``` Easing is `[0.16, 1, 0.3, 1]` (ease-out-expo style). --- ### COMPONENT: NavItem (inline in App.tsx) A hover-animated navigation link with vertical text fly animation: - Uses a `cycle` counter state (useState(0)) - On `mouseEnter` and `mouseLeave`: increment cycle - When `cycle === 0` (initial, no hover yet): render single `` with `text-white/64` and `group-hover:text-white transition-colors duration-300` - When `cycle > 0`: render TWO spans keyed by cycle -- one with `.animate-fly-out-up` (exits upward), one absolute-positioned with `.animate-fly-in-up` (enters from below) - Container: `` with `relative overflow-hidden group flex items-center justify-center py-1` --- ### MAIN APP (src/App.tsx) - ARCHITECTURE **Video URL constant:** ``` const VIDEO_URL = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_064421_279656fd-e76f-40a0-8fed-7456d4f7715a.mp4'; ``` **State & Refs:** - `arrowCycle` (useState(0)) -- for arrow button hover animation, same pattern as NavItem - `videoRef` (useRef HTMLVideoElement) - `videoContainerRef` (useRef HTMLDivElement) - `isLoaded` (useState false) -- tracks when video is ready - `screen3Ref` (useRef HTMLDivElement) -- reference to footer section for scroll calculation - `scrollY` from motion's `useScroll()` - `headerY` = `useTransform(scrollY, [0, 500, 800], [0, 0, -150])` -- header slides up and out after scrolling past 500px --- ### SCROLL-DRIVEN VIDEO - CRITICAL IMPLEMENTATION **Effect 1: Video Loading** ```tsx useEffect(() => { const video = videoRef.current; if (!video) return; const handleCanPlay = () => setIsLoaded(true); video.addEventListener('canplaythrough', handleCanPlay); video.load(); return () => video.removeEventListener('canplaythrough', handleCanPlay); }, []); ``` **Effect 2: Scroll-to-Video-Scrub (with the `video.seeking` guard)** ```tsx useEffect(() => { if (!isLoaded) return; const video = videoRef.current; if (!video || !video.duration) return; const handleScroll = () => { if (!screen3Ref.current || video.seeking) return; // ^^ CRITICAL: "video.seeking" check tells the browser: "Only update the video // frame when you've completely finished rendering the previous one." // Without this guard, rapid scroll events queue up competing .currentTime assignments, // causing visible frame tearing, flickering, and dropped frames. The browser's // internal seek operation is asynchronous -- setting .currentTime while a previous // seek is still in progress gets silently ignored or causes visual glitches. // By checking video.seeking, we skip scroll events that arrive before the prior // frame has been decoded and painted, resulting in smooth, tear-free scrubbing. const rect = screen3Ref.current.getBoundingClientRect(); const absoluteTop = window.scrollY + rect.top; const stopScroll = Math.max(1, absoluteTop - (window.innerHeight * 0.2)); const scrollFraction = Math.max(0, Math.min(1, window.scrollY / stopScroll)); video.currentTime = scrollFraction * video.duration; }; window.addEventListener('scroll', handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener('scroll', handleScroll); }, [isLoaded]); ``` The scroll fraction maps from 0 (top of page) to 1 (when the footer section is 20% of viewport height from top). This means the video plays through its full duration as the user scrolls from top to the footer. --- ### SECTION 0: LOADING SCREEN Shown when `!isLoaded`. Fixed fullscreen, z-50, black bg, centered: - "LOADING" text: `text-[10px] font-mono tracking-widest mb-4 text-white/50` - Progress bar below: `w-64 h-[1px] bg-white/10 mt-8 overflow-hidden` with inner `h-full bg-white w-1/3 animate-pulse` --- ### LAYER STRUCTURE The entire page is layered: 1. **Fixed video background** (`fixed inset-0 z-0 bg-black`) -- video is absolutely centered with cover behavior using `transform: translate(-50%, -50%)`, `minWidth/minHeight: 100%`, `objectFit: cover` 2. **Fixed header** (z-20) -- animated with motion, slides out via `headerY` transform 3. **Scrollable content** (`relative z-10 pointer-events-none`) -- all sections flow here, with `pointer-events-auto` on interactive areas --- ### SECTION 1: HERO (Screen 1) Container: `w-[90%] mx-auto h-screen flex flex-col py-8 md:py-12 lg:py-16 pb-12` Inner main: `flex-1 w-full pointer-events-auto flex flex-col md:grid md:grid-cols-12 md:grid-rows-[1fr_auto] gap-y-8 md:gap-y-0 md:gap-x-8` **Grid layout (desktop 12-col, 2-row):** 1. **Heading** (bottom-left): `md:row-start-2 md:col-start-1 md:col-span-8 flex items-end` - H1: `text-[clamp(2.5rem,6vw,5rem)] leading-[1.05] font-medium tracking-tight text-white whitespace-nowrap` - Text: "Championing" `
` "The Pitch Of Legends" - Wrapped in `` 2. **Description paragraph** (center-right): `md:row-start-1 md:col-start-8 md:col-span-5 flex flex-col justify-center items-start md:items-end text-left md:text-right` - Paragraph: `text-[clamp(1rem,1.6vw,1.375rem)] text-white/64 leading-[1.3] font-normal max-w-[460px] relative -top-[90px]` - Text: "Advanced preparation and training of world-class football teams for leagues, tournaments, and trophies. **We bring the trophy closer to your cabinet.**" (bold part is `font-semibold text-white`) - Wrapped in `` 3. **CTA Button** (bottom-right): `md:row-start-2 md:col-start-8 md:col-span-5 flex items-end justify-start md:justify-end` - Two-part button with 1px gap (`flex items-stretch gap-1 group cursor-pointer`) - **Text part**: `px-8 py-5 bg-white/8 backdrop-blur-[80px]` -> on group-hover: `bg-white`. Text: "EXPLORE OUR STADIUMS" in `font-mono text-[12px] tracking-[-0.01em] text-white/90` -> hover: `text-black` - **Arrow part**: `px-6 bg-white/8 backdrop-blur-[80px]` -> hover: `bg-white`. Contains `` (lucide, w-5 h-5) with the same fly-out/fly-in animation pattern as NavItem but horizontal (`.animate-fly-out` / `.animate-fly-in`) - `arrowCycle` state drives the animation, same increment pattern on mouseEnter/mouseLeave - Wrapped in `` --- ### SECTION 1.5: SPACER `
` -- 200px empty gap --- ### SECTION 2: SCROLL-REVEAL TEXT + 3-COLUMN GRID Container: `w-[90%] mx-auto min-h-screen flex flex-col justify-center py-8 md:py-12 lg:py-16 pointer-events-auto` Inner: `max-w-[1200px] w-full` **ScrollReveal component usage:** ```tsx Complete Football Programs For Professional Player Development. We Build The Foundations For Next-Generation Strikers, Midfielders, And Star Defenders. ``` **3-Column Grid below** (`mt-24 grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8`): 1. **Col 1 (md:col-span-4)**: Globe SVG (71x43 wireframe globe) + WISA logo SVG (157x25, scaled to h-[18px] w-auto) side by side with `gap-4`. Below: tagline "Winning the future on pitch" in `text-[11px] font-mono tracking-widest text-white/60 uppercase leading-relaxed`. Wrapped in `` 2. **Col 2 (md:col-span-4)**: H3 "Performance Analytics / Facilities" (`text-xl font-medium text-white`), paragraph below (`text-[15px] text-white/80 leading-relaxed`). Wrapped in `` 3. **Col 3 (md:col-span-4)**: H3 "Matchday Premium / Fan Experiences!" same styling, paragraph same styling. Wrapped in `` --- ### SECTION 2.5: SPACER Another `h-[200px]` spacer --- ### SECTION 3: FOOTER (ref={screen3Ref}) This is the scroll endpoint for the video scrub calculation. Wrapped in `pointer-events-auto`. **Footer container**: `width: 90%, margin: 0 auto, paddingBottom: 64px` (inline styles) **Inner card** (glassmorphism): `backgroundColor: rgba(26, 26, 26, 0.6)`, `backdropFilter: blur(80px)`, `WebkitBackdropFilter: blur(80px)`, `border: 1px solid rgba(255, 255, 255, 0.1)`, `padding: clamp(32px, 4vw, 64px)` -- all inline styles **CTA Section** (top of footer card): - Flexbox wrap, `alignItems: flex-end`, `justifyContent: space-between`, `gap: 40px` - Bottom border: `1px solid rgba(255, 255, 255, 0.1)`, `paddingBottom: clamp(48px, 4vw, 80px)` - H2: "Ready To Score / Your Winning Season?" -- `fontSize: clamp(2rem, 4.5vw, 3.5rem)`, `fontWeight: 500`, `letterSpacing: -0.02em`, `lineHeight: 1.05` - Button: Same two-part pattern (text + arrow) but with white bg / black text, `padding: 20px 32px` and `20px 24px`. Text: "START YOUR SEASONS" in `font-mono, 12px, -0.01em tracking, bold 700` **Footer Links Grid** (`paddingTop: clamp(48px, 4vw, 64px)`): - CSS Grid: `repeat(auto-fit, minmax(160px, 1fr))`, `gap: clamp(32px, 3vw, 48px)` - 4 columns: 1. **Brand**: WISA logo SVG (h:14px) + tagline paragraph (13px, rgba white 0.4, maxWidth 220) 2. **Company**: Header "COMPANY" (10px mono, 0.1em tracking, rgba white 0.3) + links: About, Rosters, Press, Contact (14px, rgba white 0.6) 3. **Services**: Header "SERVICES" same style + links: Coaching, Training Camp, Fitness, Tryout 4. **Connect**: Header "CONNECT" same style + links: LinkedIn, X / Twitter, YouTube, Newsletter **Copyright Bar** (`marginTop: 56, paddingTop: 32, borderTop: 1px solid rgba white 0.1`): - Flex wrap space-between - Left: "2026 WISA. ALL RIGHTS RESERVED." (11px mono, rgba white 0.25, 0.1em tracking) - Right: PRIVACY | TERMS links (same styling, gap-24px) --- ### FIXED HEADER `` with: - `style={{ y: headerY }}` -- slides out after scroll 500-800px - `initial={{ opacity: 0, y: 20 }}`, `animate={{ opacity: 1 }}`, easing `[0.16, 1, 0.3, 1]`, duration 0.8 - Classes: `fixed top-0 left-1/2 -translate-x-1/2 z-20 w-[90%] flex items-center justify-between pointer-events-auto py-4 md:py-6 lg:py-8` **Left: WISA Logo SVG** (157x25, white, 4 paths spelling "WISA") **Right: Navigation bar** (`hidden lg:flex items-stretch bg-[#1A1A1A]/40 backdrop-blur-[80px]`): - Nav links container: `flex items-center justify-between px-6 font-mono text-xs tracking-[-0.01em] w-[480px]` - 5 NavItem components: LEAGUES, STADIUMS, TRAINING, COMPETITIONS, TICKETS - CTA button: `bg-white text-black px-6 py-5 font-mono text-xs leading-4 font-bold tracking-[-0.01em] hover:bg-gray-200 transition-colors w-[148px]` -- text "BUY MATCH PASS" --- ### SVG ASSETS **WISA Logo** (used 3 times -- header, section 2, footer): 157x25 viewBox, 4 white paths. The paths spell "W I S A" in a custom typeface. **Globe icon** (used in section 2 col 1): 71x43 viewBox, wireframe globe with horizontal/vertical/meridian lines, stroke white, no fill. Both SVGs are inlined directly. They are too detailed to describe -- copy the exact path data from the source code above. --- ### KEY DESIGN TOKENS SUMMARY | Token | Value | |-------|-------| | Font sans | Manrope 300-700 | | Font mono | JetBrains Mono 400-700 | | Background | Pure black (#000) | | Text primary | white | | Text secondary | white/64 (rgba 255,255,255,0.64) | | Text muted | white/60, white/50, white/40, white/25 | | Glass bg | #1A1A1A at 40% opacity | | Glass blur | 80px | | Glass border | rgba(255,255,255,0.1) | | Button bg | white/8 -> white on hover | | Spacing rhythm | 90% viewport width container, clamp-based responsive values | | Easing (motion) | [0.16, 1, 0.3, 1] | | Easing (CSS) | cubic-bezier(0.4, 0, 0.2, 1) |31:T105b,Prompt: Build a modern React landing page using Vite, Tailwind CSS, and motion/react for elegant animations. The application must feature a highly polished, aesthetic hero section and a glassmorphic navigation bar. 1. Typography & Global CSS (src/index.css) Import the fonts "Inter" and "Outfit" from Google Fonts. Set --font-sans to Inter and --font-display to Outfit. Set --color-brand-green to #9fff00 and --color-bg-base strictly to #EDEEF5. Ensure the body uses @apply bg-bg-base text-zinc-900 font-sans antialiased; to carry the #EDEEF5 background throughout the entire page. 2. Component Structure (src/App.tsx) Import Navbar and Hero. Return a div containing the and
. Set the wrapper container classes to min-h-screen bg-bg-base selection:bg-brand-green selection:text-black. 3. Navbar Component (src/components/Navbar.tsx) Give it fixed styling: fixed top-0 left-0 w-full z-50 py-6 md:py-10 bg-gradient-to-b from-[#f1f1f1]/80 to-transparent backdrop-blur-[2px]. Container layout: A 12-column grid (grid-cols-12 max-w-7xl mx-auto). Left (Cols 1-3): A geometric flower/clover SVG icon (fill: #1a1a1a) beside the brand name "mėntality" using the display font. Center (Cols 4-9): Desktop-only hidden nav links: "service", "patient resources", "about us", "education center". Styled small and lowercase. Right (Cols 10-12): "find help" anchor link, a black rounded button reading "get started →", and an elegant animated hamburger toggle icon for mobile. Include an AnimatePresence and motion.div drawer that slides down for mobile with the navigation links. 4. Hero Component (src/components/Hero.tsx) Main styling:
Background Video Container: Absolute wrapper:
The video itself should be
. Place the text in col-span-12 md:col-span-10 md:col-start-2. Hero Header (motion.h1): Needs a slide-up fade (initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}). Exact text formatting: [#1a1a1a] Remix: Mentality offers [#8e8e8e] information (line break) [#8e8e8e] and resources to help you manage (line break) [#8e8e8e] your [Eye Icon Puipl UI Element] mental wellbeing. For the Eye Icon Element between "your" and "mental", create an inline pill-shaped visual: w-[16px] md:w-[42px] lg:w-[62px] border-[2px] border-[#1a1a1a] rounded-full inline-flex items-center justify-center containing a tiny solid black dot (w-2 h-2). Search Pill Component: Add a delayed slide-up animation (delay: 0.15) under the header text. Make a custom capsule
. Include an with transparent background so it looks integrated. Trailing action button:

Only pay for cloud storage your teams actually use.

Storage costs

Starter

Team

Enterprise

NexaCore

Arceage Stats

Evergreen Finance

PROMPT

Eco Intelligence

AI Automation

Axion About

Immersive Ocean

Wellness Hero

robot battle arena

arctic lab

VEX Ventures

Automotive AI

Scroll Landing Page

IntelligentX

Glitch Pulse

NimBus Pricing

Modern Agency

ClubX Investors

Zenith Footer