## Overview
Fullscreen raw video hero with liquid-glass navbar and bottom-aligned content. Monochrome palette (black, white, gray-300). No overlay or dimming on the video.
## 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
- Font: Inter (heading + body)
- `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale`
- Design config sets both heading and body to `"inter"` from the font registry
## 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: `(charsBefore * charDelay) + (charIndex * charDelay)` where `charDelay = 30ms`. The whole animation starts after `200ms` initial delay. Each character transition is `500ms`.
- Spaces render as ` ` (non-breaking space)
**Subheading:** "We back visionaries and craft ventures that define what comes next."
- `text-base md:text-lg text-muted-foreground 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
```css
.liquid-glass {
background: rgba(0, 0, 0, 0.4);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
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;
}
```
## Animation components
**FadeIn:** 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:** 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.
## Colors
- Black background, white text, gray-300 for secondary text, white/20 for borders
- No purple, no indigo
## Stack
- React + TypeScript, Tailwind CSS, Next.js
- Icons from lucide-react if needed (none currently used in the hero)