Website Prompts

PROMPT TO RECREATE THIS LANDING PAGE

---

**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 `<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>` 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;
}
```

### KEY FEATURES

- Scroll-driven video background with frame-perfect scrubbing
- GSAP ScrollTrigger word-by-word reveal animations
- Framer Motion viewport-triggered fade-ins
- Glassmorphism UI with 80px blur backdrop
- Hero section with dual-column grid layout
- 3-column feature grid with staggered reveals
- Glassmorphic footer with link sections
- Fixed animated header that slides away on scroll
- Responsive design (mobile-first with md/lg breakpoints)

### SCROLL-VIDEO IMPLEMENTATION (CRITICAL)

The scroll-to-video scrub uses a guard against `video.seeking`:

```tsx
if (video.seeking) return; // Skip events during async frame decode
```

This prevents frame tearing and visual glitches by ensuring only one seek operation completes before the next scroll event fires.

### COMPONENT ARCHITECTURE

1. **ScrollReveal** - GSAP-powered word-by-word reveal with rotation, opacity, and optional blur
2. **Reveal** - Motion.div wrapper for whileInView fade-in animations
3. **NavItem** - Hover-animated nav link with vertical fly animations
4. **App** - Main component with video background, header, hero, features, and footer

### DESIGN SYSTEM

| Token | Value |
|-------|-------|
| Font Sans | Manrope 300-700 |
| Font Mono | JetBrains Mono 400-700 |
| Background | Pure black (#000) |
| Glass BG | #1A1A1A at 40% opacity |
| Glass Blur | 80px |
| Text Primary | white |
| Text Secondary | white/64 |
| Button Hover | white/8 → white |
| Motion Easing | [0.16, 1, 0.3, 1] |
| CSS Easing | cubic-bezier(0.4, 0, 0.2, 1) |

This is a production-ready template for high-performance, cinematic landing pages.