Aurora Onboard

网站 · Signup · 免费
Aurora Onboard 预览

在云境TS 中打开并复制 →

内容预览

Please build a modern, two-column registration interface called "Aurora Sign Up". Use React, Tailwind CSS (v4), `motion/react` (for animations), and `lucide-react` (for icons). The app should be contained entirely in `App.tsx` and `index.css`. ### 1. Global Setup & CSS (`index.css`) - Import the "Inter" font from Google Fonts (weights 300, 400, 500, 600, 700). - Extend the Tailwind theme with `--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;` and a custom color: `--color-brand-gray: #1A1A1A`. - Apply base styles to the `body`: `@apply font-sans bg-black text-white antialiased;`. ### 2. Main Layout (`App.tsx` container) - The `` element should have: `flex min-h-screen w-full bg-black selection:bg-white/30 p-2 transition-all duration-500`. - On `lg` breakpoints: `lg:h-screen lg:overflow-hidden lg:p-4`. - Split this container into a Left Column (Hero) and a Right Column (Form). ### 3. Left Column (Hero & Background Video) - Width on large screens should be exactly `w-[52%]`. It should be hidden on mobile/tablet and only visible `lg:flex`. - Styles: `relative flex-col items-center justify-end pb-32 px-12 rounded-3xl overflow-hidden shadow-2xl h-full`. - **Background Video**: Add an absolutely positioned `` tag (`inset-0`, `w-full`, `h-full`, `object-cover`). It must have `autoPlay`, `muted`, `loop`, and `playsInline`. - **CRITICAL**: The `` MUST be exactly `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_081238_406ed0e3-5d83-436e-a512-

……(完整源码请在站内查看)