Build a Hero section for a DeFi dashboard named RIVR showcasing a sleek, glassmorphism aesthetic. Please mimic these exact specifications to ensure a premium UI. Dependencies: - Use `lucide-react` for icons. - Use `motion` (imported from `'motion/react'`) for animations. 1. Global Styles (`src/index.css`) Import the custom 'Helvetica Regular' font, set the Tailwind theme properly, and reset the body. Exact CSS to include: @import "tailwindcss"; @font-face { font-family: "Helvetica Regular"; src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot"); src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"), url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg"); } @theme { --font-helvetica: "Helvetica Regular", ui-sans-serif, system-ui, sans-serif; } :root { font-family: var(--font-helvetica); } body { margin: 0; overflow-x: hidden; background-color: #f0f0f0; } 2. App Structure (`src/App.tsx`) Create a single `` instance that returns the `` component. 3. Hero Component (`src/components/Hero.tsx`) Outer wrapper: ``. Inner container: `` Inside the ``: - The Video Background
……（完整源码请在站内查看）
