Livo AI - AI Analysis for Real-Time Discussions

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:T1c8d,Build a dark, cinematic drone/UAV technology landing page called **"AETHER_X"** using React + Vite + TypeScript + Tailwind CSS. The site has a scroll-driven video background and two content sections with reveal-on-scroll animations. Here is the exact specification: --- ### Font & Global Styles - Load **Helvetica Neue Regular** via this stylesheet in `index.html`: ``` https://db.onlinewebfonts.com/c/0d49fc455f4a8951a42daf952412a713?family=Helvetica+Neue+Regular ``` - Body: `font-family: 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif`, background `#0a0a0a`, color `#fff`, antialiased. - In `tailwind.config.js`, set `fontFamily.sans` and `fontFamily.mono` to `'"Flexo Soft Medium"', 'system-ui', 'sans-serif'`. - Selection highlight: `rgba(255, 255, 255, 0.2)`. - Page title: `AETHER_X — Where Sky Meets Machine Logic` --- ### Dependencies Only: `react`, `react-dom`, `lucide-react`, `@supabase/supabase-js`. Tailwind + PostCSS + Autoprefixer + Vite for tooling. --- ### Architecture (5 components) ``` App.tsx -> ScrollVideo (fixed fullscreen background) -> Navbar (fixed top) -> main -> SectionOne (hero, bottom-aligned) -> spacer div (h-[80vh], aria-hidden) -> SectionTwo (full-height, justify-between) ``` --- ### Component 1: `Reveal.tsx` (scroll-triggered animation wrapper) - Props: `children`, `delay` (ms, default 0), `className`, `as` ('div' | 'span', default 'div') - Uses `IntersectionObserver` with `threshold: 0.15` - Animates from `translate-y-8 opacity-0` to `translate-y-0 opacity-100` - Transition: `duration-700 ease-out will-change-transform` - `transitionDelay` applied via inline style from `delay` prop --- Component 2: ScrollVideo.tsx (frame-extracted scroll-synced video) Video URL (CloudFront): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_230900_ef8565a6-16eb-4fe9-98e4-4b972d3f436d.mp4 Architecture principle: The

Plans

Mind Amplified.

Silent thought.

Cortex.

Cognitive flow.

Intuition.

Instant recall.

Insight.

Courses

Daily Quiz

AI analysis

Apex Pulse

Future-State

Prioritize

AI Meeting Notes

Editorial Collection CTA

deep neural interface

Bite-Sized Courses

SaaS Pricing Flow

Terra Geo Map

Luxury Botanical

Rocket CTA

F1 Driver Profile

Audio Showcase

Kova Testimonial

Prosthetics Hero

Nimbus Sticky Cards

Wellness Companion

Velorah Focus

Pet Products

NexaCore Process