Model Infrastructure

**Build a single-page landing page for an AI infrastructure company called "Prime Intellect." The design is dark, minimal, editorial, and cinematic -- inspired by Linear, Vercel, and high-end tech aesthetics. Use React 18, TypeScript, Vite, Tailwind CSS 3.4, the `geist` font package (v1.7.2), and `lucide-react` for icons. No other UI libraries.**

---

## Global Setup

### `package.json` dependencies
- `react`, `react-dom` (^18.3.1)
- `geist` (^1.7.2)
- `lucide-react` (^0.344.0)
- Tailwind CSS 3.4, PostCSS, Autoprefixer as devDeps
- Vite 5.4, TypeScript 5.5

### `tailwind.config.js`
- Content: `['./index.html', './src/**/*.{js,ts,jsx,tsx}']`
- No theme extensions, no plugins

### Background Color
- The entire page background is `#0e0e0e` (near-black)
- `html, body { overflow-x: hidden; }`

---

## Fonts (`index.css` -- `@font-face` declarations BEFORE `@tailwind` directives)

```css
@font-face {
  font-family: 'Geist';
  src: url('/node_modules/geist/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/node_modules/geist/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/node_modules/geist/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/node_modules/geist/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/node_modules/geist/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```

Body: `font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;` with `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`

`.font-mono` override: `font-family: 'Geist Mono', monospace;`

---

## CSS Animations (in `index.css`)

### Shimmer (heading text effect)
```css
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.text-shimmer { position: relative; }

.text-shimmer::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(219, 255, 212, 0.34) 42%,
    rgba(255, 255, 255, 0.68) 50%,
    rgba(120, 231, 114, 0.28) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3;
  animation: shimmer 5s ease-in-out infinite;
}
```

### Blinking cursor (terminal prompt)
```css
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor-blink::after {
  content: '\2588';
  animation: blink 1.2s step-end infinite;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 1px;
}
```

### Mobile menu panel transition
```css
.mobile-menu-panel {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-menu-item {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
```

### Partner grid borders
```css
.partner-grid > * {
  border-right: 1px solid #202020;
  border-bottom: 1px solid #202020;
}
.partner-grid > *:nth-child(2n) { border-right: none; }

@media (min-width: 640px) {
  .partner-grid > * { border-right: 1px solid #202020; }
  .partner-grid > *:nth-child(2n) { border-right: 1px solid #202020; }
  .partner-grid > *:nth-child(3n) { border-right: none; }
}

@media (min-width: 768px) {
  .partner-grid > * { border-right: 1px solid #202020; }
  .partner-grid > *:nth-child(3n) { border-right: 1px solid #202020; }
  .partner-grid > *:nth-child(5n) { border-right: none; }
}
```

---

## App-Level Layout (`App.tsx`)

- Outer wrapper: `min-h-screen bg-[#0e0e0e]`
- Scroll state: `useState(false)`, triggers at `scrollY > 10` (passive listener)
- **Announcement Bar wrapper:** `fixed top-0 left-0 right-0 z-[100]`, transitions with `transition-transform duration-300`. When scrolled: `-translate-y-full`. When not scrolled: `translate-y-0`.
- **Navbar wrapper:** `fixed left-0 right-0 z-[99]`, transitions with `transition-all duration-300`. When scrolled: `top-0`. When not scrolled: `top-[33px]`.
- Content div (non-fixed): contains Hero then Partners, stacked vertically with no gap.

---

## Component 1: AnnouncementBar

- `relative z-10 flex items-center justify-center py-2 px-4 bg-black/10 backdrop-blur-md border-b border-white/[0.06] font-mono`
- Single `<a>` link: `flex items-center gap-1 text-[11px] text-white/70 uppercase tracking-wider hover:text-white/90 transition-colors`
- Text: **"Announcing our $130m Series A"**
- Followed by `ChevronRight` icon from lucide-react (w-3 h-3)

---

## Component 2: Navbar

### Container
`<nav>` with `flex items-center justify-between px-5 md:px-8 py-3 font-mono`

### Left: Logo
- `flex items-center gap-2`
- SVG (w-5 h-5, white fill): `<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />`
- Text: **"Prime Intellect"** -- `text-white text-sm font-semibold tracking-tight uppercase`

### Center: Product Navigation (hidden below `lg:`)
- `flex items-center gap-1`
- 4 items in order: Training (01), Inference (02), Compute (03), Research (04)
- Each item: `flex items-center gap-2 px-3.5 py-1.5 text-[11px] uppercase tracking-wider text-white/80 bg-[#6C757E]/60 hover:bg-[#6C757E]/80 transition-colors`
- Number span: `text-white/40 text-[10px]`
- NO border-radius (sharp rectangular pills)

### Right: Links + CTAs (hidden below `md:`)
- `flex items-center gap-5`
- Text links: **Docs**, **Blog**, **Careers** (with badge), **Book a Call**
- Each: `text-[11px] uppercase tracking-wider text-white/60 hover:text-white transition-colors`
- Careers badge: `text-[10px] text-white/40 bg-white/[0.06] px-1.5 py-0.5 rounded-sm` -- text "24"
- **Login button:** `text-[11px] uppercase tracking-wider text-white/90 bg-[#3B3B34] backdrop-blur-md px-3 py-1.5 hover:bg-[#3B3B34]/80 transition-colors` (no border-radius)
- **Start Training button:** `group flex items-center gap-1 text-[11px] uppercase tracking-wider text-[#0e0e0e] font-medium bg-white px-3 py-1.5 hover:bg-white/90 transition-colors` with `ChevronRight` (w-3 h-3 opacity-60) -- no border-radius

### Mobile Hamburger Button (visible below `md:`)
- `relative z-[110] flex items-center justify-center w-9 h-9 text-white`
- Contains overlapping `Menu` and `X` icons (lucide-react, both w-5 h-5)
- Animated swap: `transition-all duration-300 ease-out`
  - When closed: Menu at `opacity-100 rotate-0 scale-100`, X at `opacity-0 -rotate-90 scale-75`
  - When open: Menu at `opacity-0 rotate-90 scale-75`, X at `opacity-100 rotate-0 scale-100`

### Mobile Menu Overlay
- **Backdrop:** `fixed inset-0 z-[105] bg-black/60 backdrop-blur-sm transition-opacity duration-300` (opacity 0/pointer-events-none when closed)
- **Panel:** `fixed top-0 right-0 z-[106] h-full w-[85%] max-w-[320px] bg-[#141414] border-l border-white/[0.06] shadow-2xl mobile-menu-panel` -- slides with `translate-x-full` (closed) / `translate-x-0` (open)
- Body scroll locked when open (`overflow: hidden`)

**Panel Content:**

1. **Products section** (pt-20 pb-8 px-6):
   - Label: `text-[10px] uppercase tracking-[0.2em] text-white/30 mb-3 px-1` -- "Products"
   - Items: Training, Inference, Compute, Research -- each `px-3 py-3 text-sm text-white/80 hover:text-white hover:bg-white/[0.04] rounded`
   - Right-aligned number: `text-[10px] text-white/30 font-mono`
   - Staggered animation: delays 80ms, 130ms, 180ms, 230ms; from `translateX(20px) opacity-0` to `translateX(0) opacity-1`

2. **Resources section:**
   - Label: "Resources" same style
   - Items: Docs, Blog, Careers (with badge "24"), Book a Call
   - `px-3 py-3 text-sm text-white/60 hover:text-white hover:bg-white/[0.04] rounded`
   - Staggered delays: 280ms, 330ms, 380ms, 430ms

3. **Bottom CTAs (mt-auto):**
   - Login: `flex items-center justify-center py-3 text-[11px] uppercase tracking-wider text-white/90 bg-[#3B3B34] hover:bg-[#3B3B34]/80 rounded`
   - Start Training: `flex items-center justify-center gap-1.5 py-3 text-[11px] uppercase tracking-wider text-[#0e0e0e] font-medium bg-white hover:bg-white/90 rounded` + ChevronRight
   - Entry at 500ms delay, from `translateY(16px) opacity-0`

---

## Component 3: Hero

### Section Container
`relative min-h-[85vh] sm:min-h-[78vh] flex flex-col justify-end px-5 md:px-8 pt-24 sm:pt-20 pb-6 sm:pb-8`

### Full-Bleed Background Video
- `<video>` with `absolute inset-0 w-full h-full object-cover`
- **URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_140751_abc85684-bfd2-459d-b87b-ce808ede692b.mp4`
- Attributes: `autoPlay`, `muted`, `loop`, `playsInline`

### Bottom Gradient Overlay
- `absolute inset-x-0 bottom-0 h-64 sm:h-48 bg-gradient-to-t from-[#0e0e0e] to-transparent`

### Content Container
- `relative flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 sm:gap-8`

### Left Column
`flex flex-col items-start gap-3 sm:gap-4 max-w-lg`

1. **Eyebrow + Heading (h1, flexed as column with gap-1.5):**
   - Eyebrow: `text-white/30 text-[10px] sm:text-[11px] uppercase tracking-[0.2em] font-medium` -- **"The Open Superintelligence Stack"**
   - Heading: `text-white/90 text-[26px] sm:text-[32px] md:text-[36px] font-normal leading-[1.15]` with class `text-shimmer` and `data-text="Own Your Intelligence"` -- **"Own Your Intelligence"**

2. **Description:**
   - `text-white/45 text-[13px] sm:text-[15px] leading-[1.7] max-w-md`
   - **"Train, deploy, and continuously improve your own models on an integrated compute, training, inference, and sandbox stack."**

3. **CTA Buttons:**
   - Container: `flex items-center gap-1.5 text-[11px] uppercase tracking-wider font-medium mt-1`
   - **Start Training (primary):** `group flex items-center gap-1.5 bg-white text-[#0e0e0e] font-medium px-3 sm:px-3.5 py-2 hover:bg-white/90 transition-colors` + `ChevronRight` (w-3 h-3 opacity-60, `group-hover:translate-x-0.5 transition-transform`) -- NO border-radius
   - **Book a Call (secondary):** `flex items-center px-3 sm:px-3.5 py-2 text-white/90 bg-[#3B3B34] backdrop-blur-md hover:bg-[#3B3B34]/80 transition-colors` -- NO border-radius

4. **Terminal pip command:**
   - `text-white/46 text-xs sm:text-sm font-mono mt-1`
   - Green dollar sign: `<span className="text-[#78e772]">$</span>`
   - Space, then: `<span className="cursor-blink text-white/45">pip install prime</span>` (animating block cursor)

### Right Column: "Backed By"
- Container: `relative text-sm pb-3 pr-4 pt-3 shrink-0 lg:translate-y-2`
- **Subtle green radial glow:** `absolute -inset-x-8 -inset-y-5 -z-10 blur-2xl bg-[radial-gradient(at_82%_50%,rgba(120,231,114,0.10)_0px,rgba(120,231,114,0.04)_28%,rgba(255,255,255,0.02)_48%,rgba(255,255,255,0)_72%)]`
- Label: `text-white/50 text-[11px] sm:text-xs mb-2` -- **"Backed by"**
- Names row: `flex flex-wrap items-center gap-x-2 sm:gap-x-2.5 gap-y-1.5`
- Each name: `text-white/60 whitespace-nowrap text-[12px] sm:text-[13px]`
- Separator: `/` in `text-white/25` (between each name, not before the first)
- **Names in order:** Founders Fund, Radical, NVIDIA, Intel, Andrej Karpathy, John Schulman, Dylan Patel, Clem Delangue

---

## Component 4: Partners Grid

### Section
`bg-[#0e0e0e] px-5 md:px-8`

### Grid Container
- `partner-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 border border-[#202020]`
- Internal borders handled by the `.partner-grid` CSS (right + bottom borders on cells, last in row has no right border depending on breakpoint)

### Grid Cells (10 total)
- Each cell: `relative flex items-center justify-center h-[80px] sm:h-[100px] p-3 sm:p-4 group transition-colors hover:bg-white/[0.02]`
- Cells with links are `<a>` elements; others are `<div>`

### Partner Badges (on cells with links)
- `absolute top-0 right-0 flex items-center gap-1 px-1.5 sm:px-2 py-1 sm:py-1.5 text-[9px] sm:text-[10px] uppercase tracking-wider text-white/50 bg-white/[0.04] border-l border-b border-[#202020]`
- Visibility: `opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity`
- Contains `ArrowUpRight` icon (lucide-react, w-2.5 h-2.5 opacity-50)

### 10 Partners (in order):

| # | Name | Display Style | Link Label |
|---|------|--------------|------------|
| 1 | ramp | `text-lg font-medium tracking-tight` with green `/` after (`text-[#78e772]`) | "Case study" |
| 2 | NVIDIA | `text-xl font-bold uppercase tracking-widest` | "Read more" |
| 3 | zapier | `text-lg font-medium` with `_` prefix in `text-white/40` | "Case study" |
| 4 | character.ai | `text-sm` wrapped in parentheses: `(character.ai)` | none |
| 5 | Goodfire | `text-xs uppercase tracking-[0.3em] font-medium` | none |
| 6 | inception | `text-base font-medium tracking-tight` | none |
| 7 | Arcee | `text-lg italic font-light` | none |
| 8 | Browserbase | `text-sm font-medium` | "Read more" |
| 9 | Flapping Airplanes | `text-sm` | none |
| 10 | standard intelligence | Two lines: each `block text-[10px] tracking-wider`, container `text-xs leading-tight text-center` | none |

All partner text uses base class `text-white/60 text-center`.

---

## Key Design Principles

- **No border-radius anywhere** except mobile menu items and login button in mobile panel (which use `rounded`)
- **Color palette:** `#0e0e0e` (background), white at opacities (25%, 30%, 40%, 45%, 46%, 50%, 60%, 70%, 80%, 90%), `#3B3B34` (dark olive buttons), `#6C757E` (nav pills), `#78e772` (green accent), `#141414` (mobile panel), `#202020` (grid borders)
- **Typography:** Extremely small (9px-15px), heavy use of uppercase + wide letter-spacing on UI elements, monospace for nav/announcement
- **Spacing:** Tight, deliberate -- `gap-1` to `gap-8`, padding `px-5 md:px-8` horizontal rhythm
- **Interactions:** Hover color shifts, chevron translate on primary CTAs, opacity reveals on partner badges, staggered mobile menu animations
- **Responsive breakpoints:** `sm:` (640px), `md:` (768px), `lg:` (1024px)

---