Creative Studio

网站 · Agency · 免费
Creative Studio 预览

在云境TS 中打开并复制 →

内容预览

Build a full-screen hero section using React, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font. The page is fully mobile-responsive. Here are the exact specifications: --- **BACKGROUND:** - A full-screen autoplaying, looping, muted video covering the entire viewport as a background. - Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260517_222138_3e3205be-3364-417b-a64a-bfe087acbec4.mp4` - The video is positioned absolute, inset-0, with `object-cover` to fill the viewport. --- **COLOR:** - Accent color: `#5E0ED7` (deep purple). Used for the logo dot, the "+" symbols in stats, and the CTA link text. - All body text is black (#000). --- **FONT:** - Font family: `'Inter', sans-serif` applied to the root container. - All text is uppercase with wide letter-spacing (`tracking-widest` or `tracking-wide`). - Font weights: 600 (semibold) throughout. --- **LAYOUT (flex column, min-h-screen):** The page is a flex column with three vertical sections: 1. **Nav** (top, fixed height) 2. **Stats row** (flex-1, vertically centered, right-aligned) 3. **Bottom content** (pinned to bottom with padding) --- **NAVIGATION BAR:** - Horizontal flex, items centered, justified between. Padding: `px-5 sm:px-8 md:px-12 pt-5 md:pt-6`. - **Left:** A circular logo — 32px round div with 2px border in accent color, containing a 10px solid circle in accent color. - **Center (hidden on mobile, visible md+):** Four nav links: "Story", "Expertise", "Stu

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