--- > **Setup requirements before building the section:** > > **Google Fonts** -- Load these in `index.html` ``: > ```html > > > > ``` > > **Tailwind config** -- Extend `theme` with these exact custom values: > ```js > fontFamily: { > grotesk: ['Anton', 'sans-serif'], > condiment: ['Condiment', 'cursive'], > }, > colors: { > cream: '#EFF4FF', > neon: '#6FFF00', > } > ``` > `font-grotesk` maps to **Anton** (a tall, condensed display font). `font-condiment` maps to **Condiment** (a flowing cursive/script font). > > **No additional CSS classes or animations are used in this section.** No keyframes, no transitions, no hover states. It is a static layout. > > --- > > **Build the following section as a React component using Tailwind CSS:** > > A `` tag with classes `relative overflow-hidden min-h-screen`. No background color -- the background is a fullscreen video. > > **Background video:** An absolutely positioned `` element covering the entire section. Classes: `absolute inset-0 w-full h-full object-cover`. Attributes: `autoPlay`, `loop`, `muted`, `playsInline`. The `` element points to: > ``` > https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4 > ``` > with `type="video/mp4"`. > > **Content wrapper:** A `` sitting on top of the video with classes: `relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`. > > Inside the content wrapper are **two rows**: > > --- > > **ROW 1 (t
……（完整源码请在站内查看）
.webp)