RIVR DeFi

Build a high-performance, agency-grade Landing Page section called "RIVR DeFi" in React 19, TypeScript, and Tailwind CSS with Framer Motion.

## 1. Overview & Visual Objective
Build a high-performance DeFi dashboard landing page using React, Vite, Tailwind CSS v4, Framer Motion (import { motion } from 'motion/react'), and Lucide React icons. The application must match the following specification component by component, using exact styling, animations, colors, and CloudFront video URLs.
1. Global Setup (index.css & App.tsx)
CSS Setup:
Import Tailwind via @import "tailwindcss";.
Import a custom @font-face for "Helvetica Regular" using this base URL for various formats (eot, woff2, woff, ttf, svg): https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65
Create a theme variable --font-helvetica using ui-sans-serif, system-ui, sans-serif fallbacks.
Set :root { font-family: var(--font-helvetica); } and body { margin: 0; overflow-x: hidden; background-color: #f0f0f0; }.
App Setup:
Wrap your page components (Hero, Metrics, Features, CTA, Footer) in <main className="min-h-screen bg-[#f0f0f0]">.