xPortfolio Hero

Build a high-performance, agency-grade Hero Section section called "xPortfolio Hero" in React 19, TypeScript, and Tailwind CSS with Framer Motion.

## 1. Overview & Visual Objective
Build a single-page hero section for a brand design agency called "Brandly" using React, Tailwind CSS, and Lucide React icons. The entire page is one viewport-height screen with no scrolling. It uses a fullscreen background video with all content layered on top.

Visual Aesthetics & Mood:
warm off-white cream background fullscreen video massive all-caps condensed display headings paired with clean sans-serif single viewport no scroll bold poster-like layout agency confidence strong typographic hierarchy earthy neutral energetic direct modern striking

## 2. Technical Stack & Dependencies
- Framework: React 19 + TypeScript + Vite
- Styling: Tailwind CSS v4 + Lucide React icons
- Animation Engine: Framer Motion (layout animations, spring physics, scroll-linked parallax)