提示词
---
> **构建此区块前的设置要求：**
>
> **Google Fonts** -- 在 `index.html` 的 `<head>` 中加载以下内容：
> ```html
> <link rel="preconnect" href="https://fonts.googleapis.com" />
> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap" rel="stylesheet" />
> ```
>
> **Tailwind 配置** -- 使用以下精确的自定义值扩展 `theme`：
> ```js
> fontFamily: {
> grotesk: ['Anton', 'sans-serif'],
> condiment: ['Condiment', 'cursive'],
> },
> colors: {
> cream: '#EFF4FF',
> neon: '#6FFF00',
> }
> ```
> `font-grotesk` 映射到 **Anton**（一种高挑、窄体的展示字体）。`font-condiment` 映射到 **Condiment**（一种流畅的手写体/脚本字体）。
>
> **此区块不使用其他 CSS 类或动画。** 没有 keyframes、transitions 或 hover states。这是一个静态布局。
>
> ---
>
> **使用 Tailwind CSS 将以下区块构建为 React 组件：**
>
> 一个带有 `relative overflow-hidden min-h-screen` 类的 `<section>` 标签。不设置背景颜色——背景是全屏视频。
>
> **背景视频：** 一个绝对定位的 `<video>` 元素，覆盖整个区块。类：`absolute inset-0 w-full h-full object-cover`。属性：`autoPlay`、`loop`、`muted`、`playsInline`。`<source>` 元素指向：
> ```
> https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
> ```
> 并设置 `type="video/mp4"`。
>
> **内容容器：** 一个位于视频上方的 `<div>`，类为：`relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`。
>
> 内容容器内有**两行**：
>
> ---
>
> **第 1 行（顶部）：** 一个带有 `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——标题：** 一个带有 `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative` 类的 `<h2>`。文本内容为：
> ```
> 你好！<br />
> 我是 orbis
> ```
>（即第 1 行是“你好！”，第 2 行是“我是 orbis”，两行由 `<br />` 分隔。Tailwind 会将所有内容渲染为大写，因此显示为“你好！”和“我是 ORBIS”。）
>
> **在 `<h2>` 内部**，文本之后有一个绝对定位的 `<span>`，内容为 **“Orbis”**。该 span 的类为：`font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`。
>
> 该 span 的关键细节：
> - `normal-case` 会覆盖父元素的 uppercase，因此它会以 Condiment 手写字体渲染为“Orbis”（大写 O，小写 rbis）。
> - `text-neon` = `#6FFF00`（亮绿色）。
> - `mix-blend-exclusion` 使绿色文本与视频背景产生混合效果。
> - `absolute right-[-8px] bottom-[-20px]`（响应式：`sm:bottom-[-30px] md:bottom-[-40px]`）将其定位在父级标题的下方偏右处，并与上方的“orbis”一词重叠。
> - `-rotate-1` 使其略微逆时针倾斜（-1 度）。
> - `leading-[0.79]` 设置非常紧凑的行高。`tracking-[0.03em]` 添加细微的字间距。
> - `opacity-90` 使其具有 90% 的不透明度。
>
> **子元素 B——段落：** 一个带有 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed` 类的 `<p>`。文本为：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
>（`font-mono` 使用浏览器默认的等宽字体。`leading-relaxed` = 1.625 行高。）
>
> ---
>
> **第 2 行（底部）：** 一个带有 `flex justify-between items-start` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——左侧文本列**（始终可见）：一个带有 `flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，每个标签的类均为 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`。两者都包含相同的文本：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
> 关键细节：默认颜色为 `text-[#010828]`（与页面背景匹配、近乎不可见的深海军蓝），在大屏幕上切换为 `lg:text-cream`（`#EFF4FF`）。与 `opacity-10` 结合后，该文本会极其微弱、如幽灵般若隐若现——几乎不可见，作为细微的纹理元素，而非可读内容。
>
> **子元素 B——右侧文本列**（仅桌面端）：一个带有 `hidden lg:flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，其类和文本与子元素 A 完全相同。此列在手机/平板设备上隐藏，仅在 `lg:`（1024px+）屏幕上显示。
>
> ---
>
> **此区块没有 animations、transitions、hover effects、scroll effects 或 JavaScript interactions。** 它完全是一个带循环背景视频的静态布局。唯一的“动态”来自自动播放的视频本身。
---原文提示词（English）
---
> **Setup requirements before building the section:**
>
> **Google Fonts** -- Load these in `index.html` `<head>`:
> ```html
> <link rel="preconnect" href="https://fonts.googleapis.com" />
> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap" rel="stylesheet" />
> ```
>
> **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 `<section>` tag with classes `relative overflow-hidden min-h-screen`. No background color -- the background is a fullscreen video.
>
> **Background video:** An absolutely positioned `<video>` element covering the entire section. Classes: `absolute inset-0 w-full h-full object-cover`. Attributes: `autoPlay`, `loop`, `muted`, `playsInline`. The `<source>` 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 `<div>` 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 (top):** A `<div>` with classes `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20`. Contains two children:
>
> **Child A -- The heading:** An `<h2>` with classes `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative`. The text content is:
> ```
> Hello!<br />
> I'm orbis
> ```
> (Literally "Hello!" on line 1, "I'm orbis" on line 2, separated by a `<br />`. All rendered uppercase by Tailwind so it displays as "HELLO!" and "I'M ORBIS".)
>
> **Inside the `<h2>`**, after the text, there is an absolutely positioned `<span>` with the word **"Orbis"**. This span has classes: `font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`.
>
> Key details of this span:
> - `normal-case` overrides the parent's uppercase, so it renders as "Orbis" (capital O, lowercase rbis) in the Condiment cursive font.
> - `text-neon` = `#6FFF00` (bright green).
> - `mix-blend-exclusion` makes the green text interact with the video background.
> - `absolute right-[-8px] bottom-[-20px]` (responsive: `sm:bottom-[-30px] md:bottom-[-40px]`) positions it hanging below and slightly right of the parent heading, overlapping the word "orbis" above it.
> - `-rotate-1` gives it a slight counter-clockwise tilt (-1 degree).
> - `leading-[0.79]` is a very tight line-height. `tracking-[0.03em]` adds subtle letter spacing.
> - `opacity-90` makes it 90% opaque.
>
> **Child B -- The paragraph:** A `<p>` with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed`. The text is:
> > "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
>
> (`font-mono` uses the browser's default monospace font. `leading-relaxed` = 1.625 line-height.)
>
> ---
>
> **ROW 2 (bottom):** A `<div>` with classes `flex justify-between items-start`. Contains two children:
>
> **Child A -- Left text column** (always visible): A `<div>` with classes `flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags**, each with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`. Both contain the same text:
> > "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
>
> Key detail: The color is `text-[#010828]` (near-invisible dark navy matching the page background) by default, switching to `lg:text-cream` (`#EFF4FF`) on large screens. Combined with `opacity-10`, this text is extremely faint/ghostly -- almost invisible, serving as a subtle texture element rather than readable content.
>
> **Child B -- Right text column** (desktop only): A `<div>` with classes `hidden lg:flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags** with the exact same classes and text as Child A. This column is hidden on mobile/tablet and only appears on `lg:` (1024px+) screens.
>
> ---
>
> **There are no animations, transitions, hover effects, scroll effects, or JavaScript interactions in this section.** It is purely a static layout with a looping background video. The only "motion" comes from the autoplaying video itself.
---
