Nexa Talent

网站 · Recruitment · 免费

在云境TS 中打开并复制 →

内容预览

Build a single full-viewport hero section that looks pixel-identical to this layout. Use React + TypeScript + Tailwind CSS + Vite. One page only. No extra sections, navbar, or routes. Tech React 18, Vite, Tailwind CSS 3 lucide-react for the CTA icon (ArrowUpRight) Tailwind color: primary: #031433 Tailwind font: resist: ["Resist Sans Txt Light", "sans-serif"] Load this exact font in index.html: https://db.onlinewebfonts.com/c/1ee2f72753afaa550435b7078d2d1213?family=Resist+Sans+Txt+Light Body font: 'Resist Sans Txt Light', sans-serif with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale Global reset: * { margin: 0; padding: 0; box-sizing: border-box; } Page title: Hero Section Design Section shell Outer: relative min-h-screen w-full overflow-hidden bg-[#f0f1f6] font-resist Background video (full bleed, behind content): src exactly: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260819_204159_7ff9da7a-093f-40db-b983-daea542669ab.mp4 Attributes: autoPlay muted loop playsInline Classes: absolute inset-0 w-full h-full object-cover pointer-events-none Content wrapper on top: relative z-10 flex flex-col min-h-screen px-6 sm:px-10 md:px-16 lg:px-20 Layout is a column: header at top, headline + CTA pushed to the bottom of the remaining space, footer under that. No overlay/gradient on the video. Header / logo (top-left) Header: pt-5 sm:pt-6 Three stacked lines, text-primary, leading-tight, text-sm sm:text-base, font-normal Animation:

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