Orbis NFT

创建一个名为 "Orbis.Nft" 的 NFT 落地页，包含 4 个区块，采用深色太空主题。页面使用由 CloudFront 提供的视频背景、液态玻璃 UI 效果，以及指定的颜色/字体系统。严格按照以下说明复现。

字体（Google Fonts）

Anton - 用于所有标题和导航文本（在 Tailwind 中别名为 font-grotesk）

Condiment - 用于强调/叠加文本的手写字体（在 Tailwind 中别名为 font-condiment）

系统等宽字体（font-mono）- 用于正文/描述段落

在 index.html 中通过 Google Fonts 加载：

https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap


颜色系统（Tailwind config）

背景：#010828（深暗海军蓝）

cream：#EFF4FF（灰白色，用于所有文本）

neon：#6FFF00（亮绿色，用于强调手写文本和下划线条）

液态玻璃 CSS 效果

通过 .liquid-glass class 应用。用于 navbar、社交图标按钮、NFT 卡片和卡片叠加层：

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


纹理叠加层

一个全屏固定纹理叠加层位于所有内容之上（z-50、pointer-events-none）。它使用 /texture.png 图像，设置 mix-blend-mode: lighten 和 opacity: 0.6，以 background-size: cover 覆盖整个 viewport。

区块 1：HERO（完整 viewport）

背景：铺满整个区块、循环、静音、自动播放的视频，使用 object-cover

视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4

容器：max-w-[1831px] 居中，并带响应式水平内边距

区块底部使用 rounded-b-[32px] 圆角，并裁剪视频

Header：

左侧："Orbis.Nft" logo 文本，使用 Anton、16px、uppercase

中间：带 liquid-glass 效果的 Navigation bar，rounded-[28px]、px-[52px] py-[24px]。包含 5 个链接：Homepage、Gallery、Buy NFT、FAQ、Contact。每个链接均为 Anton 13px uppercase。链接带有 hover:text-neon transition。Nav 在移动端隐藏（hidden lg:block）。

Hero 内容：

使用 Anton font 的大标题，响应式尺寸：移动端 40px / sm 60px / md 75px / lg 90px。uppercase。移动端 leading-[1.05]，平板及以上 leading-[1]。桌面端最大宽度 780px，并使用 lg:ml-32 偏移。

文本为：

超越地球
以及（它）熟悉的边界


叠加的手写强调文本 "Nft collection" 使用 Condiment font（响应式 24px-48px），absolute 定位在标题右侧，轻微旋转（-rotate-1），使用霓虹绿色（text-neon），并设置 mix-blend-exclusion 和 opacity-90。

社交图标（桌面端）：

3 个方形按钮（56x56px）垂直堆叠在右上角，每个按钮均带 liquid-glass 和 rounded-[1rem]。图标：来自 lucide-react 的 Mail、Twitter、Github（20x20px）。hover:bg-white/10 transition。

社交图标（移动端）：

同样的 3 个按钮，但在标题下方水平居中，仅在低于 lg breakpoint 时显示。

区块 2：ABOUT / INTRO（完整 viewport）

背景：铺满整个区域、循环、静音、自动播放的视频，使用 object-cover

视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4

容器：同样采用 max-w-[1831px] 居中，并设置宽裕的垂直内边距（响应式 64px-96px）

顶部行（桌面端为 flex row，移动端为 column）：

左侧：使用 Anton 的标题，响应式 32px-60px、uppercase：

你好！
我是 orbis


叠加一个使用 Condiment 手写字体的 "Orbis"，霓虹绿色、mix-blend-exclusion、响应式 36px-68px，absolute 定位在标题右下角，并轻微旋转。

右侧：简短段落，使用等宽字体 14px-16px、uppercase、cream 颜色，最大宽度 266px："一个固定在时间与地点之外的数字对象。一次对太空中距离、形态与寂静的探索"

底部行（flex row、space-between）：

两列（左侧和右侧），每列包含 2 个相同段落。使用与上方相同的等宽文本，但设置 opacity-10（几乎不可见，用于装饰）。右列在低于 lg 时隐藏。在移动端，文本使用 text-[#010828]（深色），因此在视频背景上几乎不可见。

区块 3：NFT COLLECTION GRID

背景：纯色 #010828（无视频）

容器：同样采用 max-w-[1831px] 居中

标题行：

左侧：使用 Anton 的标题，响应式 32px-60px、uppercase：

藏品系列
  [缩进] 太空物件


其中 "太空" 使用 Condiment 手写字体和霓虹绿色，"物件" 使用 Anton。第二行使用响应式 ml-12 / ml-24 / ml-32 缩进。

右侧：一个 "查看所有创作者" 按钮。"查看" 较大（32px-60px），"所有" 和 "创作者" 以较小字号（20px-36px）在旁边上下堆叠。文本下方是一条霓虹绿色横条（bg-neon，响应式高度 6px-10px，宽度与按钮相同）。

NFT 卡片网格：

桌面端为 3 列网格（lg:grid-cols-3），平板端 2 列，移动端 1 列。间距 24px。

每张卡片：带 liquid-glass 的容器，rounded-[32px]、padding 18px、hover:bg-white/10 transition。

每张卡片内部：方形视频容器（使用 pb-[100%] 宽高比技巧），rounded-[24px] overflow hidden。

视频 URL：

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4（评分：8.7/10）

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4（评分：9/10）

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4（评分：8.2/10）

每张卡片底部都有一个叠加条：带 liquid-glass 的横条，rounded-[20px]、px-5 py-4，显示 "稀有度评分：" 标签（11px、cream/70% opacity）和评分值（16px）。横条右侧是一个圆形紫色渐变按钮（48x48px、bg-gradient-to-br from-[#b724ff] to-[#7c3aed]），内部带有向右箭头 chevron SVG，并设置 shadow-lg shadow-purple-500/50 和 hover:scale-110 transition。

区块 4：CTA / 最终区块

背景：全宽视频（不使用 object-cover，而是使用 w-full h-auto block，以原生宽高比显示）

视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4

文本内容（absolute 定位在视频之上）：

右对齐内容块，使用 lg:pr-[20%] lg:pl-[15%] 偏移

较小的 "超越" 文本使用 Condiment 手写字体、霓虹绿色、mix-blend-exclusion，absolute 定位在标题块左上方。响应式尺寸：17px-68px。

标题使用 Anton，响应式 16px-60px、uppercase：

加入我们。
揭示隐藏之物。
定义未来所向。
追随信号。


"加入我们。" 具有额外的底部外边距（响应式 mb-4 到 mb-12），与其余几行隔开。

社交图标（左下角，absolute 定位）：

定位为 left-[8%]，并根据响应式 breakpoint 使用 bottom-[12%] 到 bottom-[20%]。

一个垂直的 liquid-glass 容器，响应式使用 rounded-[0.5rem] 到 rounded-[1.25rem]，内含 3 个垂直堆叠的图标按钮（Mail、Twitter、Github）。

按钮宽度使用 viewport 单位和 rem 值进行响应式设置（例如 w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]），高度也采用类似的响应式设置。

按钮之间使用 border-b border-white/10 分隔线（最后一个除外）。

关键技术细节

Framework：React + TypeScript + Vite + Tailwind CSS

图标：lucide-react（Mail、Twitter、Github）

除 Vite + React + Tailwind 提供的内容外，无需额外 package

所有视频：使用 autoPlay loop muted playsInline attributes

响应式：Mobile-first，全程使用 sm:、md:、lg: breakpoints

最大内容宽度：所有区块均为 1831px

除 Condiment 手写强调文本采用正常大小写外，所有文本均为 uppercase