AI Workflow Hero

在云境TS 中打开并复制 →

内容预览

### Stack - **Vite** + **React 18** + **TypeScript** - **Tailwind CSS 3.4** - **lucide-react** for icons (`LogIn`, `UserPlus`, `Play`, `Sparkles`, `Menu`, `X`) - No Framer Motion -- all animations are CSS `transition-*` classes --- ### Fonts (loaded in `index.html`) ```html ``` Body/root font stack (in `index.css`): ```css html, body, #root { height: 100%; margin: 0; font-family: 'Neue Haas Grotesk Display Pro 55 Roman', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } ``` --- ### Video URL (CloudFront) ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_131941_d136af49-e243-493a-be14-6ff3f24e09e6.mp4 ``` --- ### Color Palette | Token | Hex | |-------|-----| | Dark green (text, buttons) | `#1f2a1d` | | Medium dark green | `#2d3a2a` | | Button hover | `#2a3827` | | Body text green | `#4b5b47` | | Heading primary | `#336443` | | Heading accent | `#85AB8B` | | Bottom-left text | `#3d5638` | | Bottom-left button bg | `#3d5638`, hover `#2d4228` | --- ### Architecture Two files: 1. **`BoomerangVideoBg.tsx`** -- captures video frames into canvas, then plays them forward/backward in a seamless boomerang loop at 30fps (960px max capture width). 2. **`App.tsx`** -- the full hero section. --- ### `BoomerangVideoBg.tsx` (exact) ```tsx import { useEffect, useRef, useState } from 'react'; type Props = { src: string; className?: string; }; export default function BoomerangVideoBg({ src, cla

……（完整源码请在站内查看）