Lumina

使用 Tailwind CSS v4、用于动画的 `motion/react` 库和用于图标的 `lucide-react` 创建一个 React 前端。我想构建一个拥有沉浸式视频背景和高度风格化“液态玻璃”页脚的页面。

请严格遵循以下规范：

1. 全局 CSS 与字体（`index.css`）：
将以下完全一致的 `@font-face` 添加到 CSS 文件中，并将其设置为根 Tailwind `--font-sans`：
@font-face {
    font-family: "Helvetica Regular";
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg");
}

2. “液态玻璃”CSS：
添加以下完全一致的自定义 CSS，以实现液态玻璃边框效果：
.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;
}

3. 主应用结构（`App.tsx`）：
- 使用带有 `relative w-full min-h-[115vh] overflow-x-hidden flex flex-col items-center font-sans selection:bg-white/20 selection:text-white` 的 `<main>` 包裹页面。
- 添加一个固定在背景中的 `<video>` 元素（`fixed inset-0 w-full h-full object-cover z-[0]`），使其自动播放、循环播放并静音。
- 视频的 `src` 必须完全采用此 CloudFront URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_114316_1c7889ad-2885-410e-b493-98119fee0ddb.mp4`

4. 内容容器：
在视频之上（`z-10`）添加一个 `max-w-7xl` 容器，用于容纳顶部 CTA（可以使用 CTA 占位内容），并将页脚推至底部。

5. 页脚（`motion.footer`）：
- 使用以下完全一致的 Framer Motion 属性作为起始设置：`initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}`
- 为其添加以下类：`liquid-glass w-full rounded-3xl p-6 md:p-10 text-white/70 mt-32 md:mt-64`。

6. 页脚布局——顶部网格：
- 一个 12 列网格（`grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10`）。
- 第一列（md:col-span-5）：
  - 一个 SVG Logo `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" fill="currentColor"><path d="M 4.688 136 C 68.373 136 120 187.627 120 251.312 C 120 252.883 119.967 254.445 119.905 256 L 0 256 L 0 136.096 C 1.555 136.034 3.117 136 4.688 136 Z M 251.312 136 C 252.883 136 254.445 136.034 256 136.096 L 256 256 L 136.095 256 C 136.032 254.438 136.001 252.875 136 251.312 C 136 187.627 187.627 136 251.312 136 Z M 119.905 0 C 119.967 1.555 120 3.117 120 4.688 C 120 68.373 68.373 120 4.687 120 C 3.117 120 1.555 119.967 0 119.905 L 0 0 Z M 256 119.905 C 254.445 119.967 252.883 120 251.312 120 C 187.627 120 136 68.373 136 4.687 C 136 3.117 136.033 1.555 136.095 0 L 256 0 Z" /></svg>`，旁边配有文字“LUMINA”（text-xl font-medium）。
  - 下方添加说明：“Lumina 免费为所有人提供关于全球事件和宇宙奇观的优质清晰信息。”（`text-sm leading-relaxed max-w-sm`）。

7. 页脚布局——链接部分（md:col-span-7）：
创建一个三列网格，其中包含以下列表：
- 探索：实验室与工作坊、深度探索系列、全球社群、资源库、未来路线图
- 使命：起源故事、共同体、新闻中心、加入团队
- 礼宾服务：联系我们、隐私法律条款、用户协议、举报问题
（标题应使用 `text-sm uppercase tracking-wider text-white font-medium mb-4`，链接应使用 `text-xs space-y-2 hover:text-white transition-colors`）。

8. 页脚布局——底部栏：
- 创建一条顶部边框（`pt-6 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4`）。
- 左侧：`<p className="text-[10px] uppercase tracking-widest opacity-50">由 @GotInGeorgiG 策划</p>`
- 右侧：一个标签 `<span className="text-[10px] uppercase tracking-widest opacity-50">加入旅程：</span>`，旁边是一排水平排列的 `lucide-react` 图标（大小为 16）：Music2、Facebook、Twitter、Youtube 和 Instagram。将每个图标包裹在带有 `opacity-70 hover:opacity-100 transition-colors hover:text-white` 的 `<a>` 中。