提示词
创建一个名为 "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原文提示词（English）
Create an NFT landing page called "Orbis.Nft" with 4 sections, using a dark space theme. The page uses video backgrounds served from CloudFront, a liquid glass UI effect, and a specific color/font system. Recreate it exactly as described below.
FONTS (Google Fonts)
Anton - Used for all headings and navigation text (aliased as font-grotesk in Tailwind)
Condiment - A cursive script used for accent/overlay text (aliased as font-condiment in Tailwind)
System monospace font (font-mono) - Used for body/description paragraphs
Load via Google Fonts in index.html:
https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap
COLOR SYSTEM (Tailwind config)
Background: #010828 (deep dark navy blue)
cream: #EFF4FF (off-white, used for all text)
neon: #6FFF00 (bright green, used for accent cursive text and underline bars)
LIQUID GLASS CSS EFFECT
Applied via a .liquid-glass class. This is used on the navbar, social icon buttons, NFT cards, and card overlays:
.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;
}
TEXTURE OVERLAY
A full-screen fixed texture overlay sits on top of everything (z-50, pointer-events-none). It uses a /texture.png image with mix-blend-mode: lighten at opacity: 0.6, covering the entire viewport with background-size: cover.
SECTION 1: HERO (Full viewport)
Background: Full-bleed looping muted autoplaying video covering the entire section with object-cover
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4
Container: max-w-[1831px] centered with responsive horizontal padding
Section has rounded-b-[32px] bottom corners, clipping the video
Header:
Left: "Orbis.Nft" logo text in Anton, 16px, uppercase
Center: Navigation bar with liquid-glass effect, rounded-[28px], px-[52px] py-[24px]. Contains 5 links: Homepage, Gallery, Buy NFT, FAQ, Contact. Each link is Anton 13px uppercase. Links have hover:text-neon transition. Nav is hidden on mobile (hidden lg:block).
Hero Content:
Large heading in Anton font, responsive sizing: 40px mobile / 60px sm / 75px md / 90px lg. Uppercase. leading-[1.05] mobile, leading-[1] tablet+. Max width 780px on desktop, offset with lg:ml-32.
Text reads:
Beyond earth
and ( its ) familiar boundaries
Overlaid cursive accent text "Nft collection" in Condiment font (24px-48px responsive), positioned absolute to the right side of the heading, slightly rotated (-rotate-1), in neon green (text-neon), with mix-blend-exclusion and opacity-90.
Social Icons (Desktop):
3 square buttons (56x56px) stacked vertically in top-right corner, each with liquid-glass and rounded-[1rem]. Icons: Mail, Twitter, Github from lucide-react (20x20px). hover:bg-white/10 transition.
Social Icons (Mobile):
Same 3 buttons but centered horizontally below the heading, shown only below lg breakpoint.
SECTION 2: ABOUT / INTRO (Full viewport)
Background: Full-bleed looping muted autoplaying video with object-cover
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
Container: Same max-w-[1831px] centered, with generous vertical padding (64px-96px responsive)
Top Row (flex row on desktop, column on mobile):
Left: Heading in Anton, responsive 32px-60px, uppercase:
Hello!
I'm orbis
With an overlaid "Orbis" in Condiment cursive, neon green, mix-blend-exclusion, 36px-68px responsive, positioned absolute at bottom-right of heading, slightly rotated.
Right: Short paragraph in monospace 14px-16px, uppercase, cream color, max-width 266px: "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
Bottom Row (flex row, space-between):
Two columns (left and right), each containing 2 identical paragraphs. Same monospace text as above but at opacity-10 (nearly invisible, decorative). Right column hidden below lg. On mobile, text uses text-[#010828] (dark) so it's effectively invisible against the video.
SECTION 3: NFT COLLECTION GRID
Background: Solid #010828 (no video)
Container: Same max-w-[1831px] centered
Header Row:
Left: Heading in Anton, 32px-60px responsive, uppercase:
Collection of
[indented] Space objects
Where "Space" is in Condiment cursive neon green, and "objects" is in Anton. The second line is indented with ml-12 / ml-24 / ml-32 responsive.
Right: A "SEE ALL CREATORS" button. "SEE" is large (32px-60px), "ALL" and "CREATORS" are stacked smaller (20px-36px) next to it. Below the text is a neon green bar (bg-neon, height 6px-10px responsive, full width of button).
NFT Card Grid:
3-column grid on desktop (lg:grid-cols-3), 2 on tablet, 1 on mobile. Gap 24px.
Each card: liquid-glass container with rounded-[32px], padding 18px, hover:bg-white/10 transition.
Inside each card: a square video container (pb-[100%] aspect ratio trick) with rounded-[24px] overflow hidden.
Video URLs:
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 (Score: 8.7/10)
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 (Score: 9/10)
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 (Score: 8.2/10)
Each card has an overlay bar at the bottom: a liquid-glass bar with rounded-[20px], px-5 py-4, showing "RARITY SCORE:" label (11px, cream/70% opacity) and score value (16px). On the right side of the bar is a circular purple gradient button (48x48px, bg-gradient-to-br from-[#b724ff] to-[#7c3aed]) with a right-arrow chevron SVG inside, with shadow-lg shadow-purple-500/50 and hover:scale-110 transition.
SECTION 4: CTA / FINAL SECTION
Background: Full-width video (NOT object-cover, instead w-full h-auto block so it displays at native aspect ratio)
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4
Text Content (positioned absolute over the video):
Right-aligned block, offset with lg:pr-[20%] lg:pl-[15%]
Small "Go beyond" text in Condiment cursive, neon green, mix-blend-exclusion, positioned absolute at top-left of the heading block. Sizes: 17px-68px responsive.
Heading in Anton, responsive 16px-60px, uppercase:
JOIN US.
REVEAL WHAT'S HIDDEN.
DEFINE WHAT'S NEXT.
FOLLOW THE SIGNAL.
"JOIN US." has extra bottom margin (mb-4 to mb-12 responsive) before the remaining lines.
Social Icons (Bottom-left, absolute positioned):
Positioned at left-[8%], bottom-[12%] to bottom-[20%] with responsive breakpoints.
A vertical liquid-glass container with rounded-[0.5rem] to rounded-[1.25rem] responsive, containing 3 stacked icon buttons (Mail, Twitter, Github).
Buttons have responsive widths using viewport units and rem values (e.g., w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]) and similar responsive heights.
Buttons are separated by border-b border-white/10 dividers (except the last one).
KEY TECHNICAL DETAILS
Framework: React + TypeScript + Vite + Tailwind CSS
Icons: lucide-react (Mail, Twitter, Github)
No additional packages needed beyond what Vite + React + Tailwind provides
All videos: autoPlay loop muted playsInline attributes
Responsive: Mobile-first with sm:, md:, lg: breakpoints throughout
Max content width: 1831px across all sections
All text is uppercase except the Condiment cursive accents which are normal-case
