GPT Image 2 + Veo 3 + Lovable 营销站

一键获取所有令人惊艳动效网站的提示词：

# 提示词：精确复刻这个落地页

为一个名为「Mindloop」的用心经营的通讯平台构建一个生产级质量的营销落地页，使用 Vite + React + TypeScript 应用，配 Tailwind CSS、shadcn/ui、framer-motion 和 lucide-react。整体美学是平静、编辑感、电影感——黑色背景、白色前景、衬线斜体点缀、环境氛围的循环背景视频，以及交互表面上标志性的「液态玻璃」效果。不使用紫色 / 靛蓝色调。

## 技术栈与依赖

- Vite + React 18 + TypeScript
- Tailwind CSS，配 shadcn/ui 设计令牌（HSL CSS 变量）
- `framer-motion` 用于动画
- `lucide-react` 用于图标
- `@fontsource/inter`（400、500、600、700）和 `@fontsource/instrument-serif`（400、400-italic）作为字体
- 不要安装其他 UI 库

## 全局主题（src/index.css）

在顶部引入 fontsource 的 CSS，然后是 Tailwind layers。通过 HSL 变量实现纯黑白配色：

```css
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/instrument-serif/400.css";
@import "@fontsource/instrument-serif/400-italic.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 85%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;
    --accent: 170 15% 45%;
    --accent-foreground: 0 0% 100%;
    --border: 0 0% 20%;
    --input: 0 0% 18%;
    --ring: 0 0% 40%;
    --hero-subtitle: 210 17% 95%;
    --radius: 0.5rem;
  }
}

@layer base {
  * { @apply border-border; }
  html, body {
    margin: 0; padding: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body { @apply bg-background text-foreground; }
}

.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; }

/* 液态玻璃效果——磨砂表面，带内嵌高光和动态渐变边框 */
.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;
}
```

Tailwind 配置扩展 `fontFamily.sans = Inter`、`fontFamily.serif = "Instrument Serif"`，并把所有颜色映射到 HSL 变量。暗色模式基于 class（但整个网站默认就是黑色）。

## 共享动画辅助函数（src/lib/animations.ts）

```ts
export const fadeUp = (delay: number = 0) => ({
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-100px" },
  transition: { duration: 0.6, delay, ease: "easeOut" as const },
});
```

## App 结构（src/App.tsx）

```tsx
<div className="bg-background text-foreground min-h-screen font-sans">
  <Navbar />
  <main>
    <Hero />
    <SearchChanged />
    <Mission />
    <Solution />
    <CTA />
  </main>
  <Footer />
</div>
```

## Logo 组件

Logo 是放置在 `public/image.png` 的 PNG 图片。组件渲染 `<img src="/image.png" className="h-7 w-auto" />`，配一个可选的 `className` 属性用于调整尺寸（例如 CTA 版块中使用 `h-12 w-auto`）。

---

## 版块 1 —— 导航栏（固定，滚动时收缩为液态玻璃药丸）

- `fixed top-0 left-0 right-0 z-50`，居中的 flex 包装器 `pt-4 px-4`。
- 内层容器：`max-w-6xl rounded-full`，在两种状态间做 500ms 过渡：
  - 未滚动：`bg-transparent px-6 py-3`
  - 已滚动（>20px）：`liquid-glass px-5 py-2.5`
- 左侧：仅 `<Logo />`（无文字）。
- 中间（桌面端）：链接「Home」「How It Works」「Philosophy」「Use Cases」，`text-muted-foreground`，悬停变为 `foreground`，配一条从宽度 0 增长到全宽的动态下划线。
- 右侧（桌面端）：三个圆形 9x9 图标按钮，Instagram / LinkedIn / Twitter（lucide），描边宽度 1.5，悬停背景 `white/5`。
- 移动端：汉堡菜单（`Menu`），点击切换一个 `liquid-glass rounded-2xl` 下拉面板，显示在导航栏下方。

## 版块 2 —— Hero（全屏，循环背景视频）

- 版块：`relative min-h-screen w-full overflow-hidden`。
- 全出血自动播放 / 静音 / 循环 / playsInline 的 `<video>`，铺满视口：
  - src：``
- 底部渐隐叠加层：`absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`。
- 内容 `z-10 pt-28 md:pt-32` 居中纵向排列：
  1. 社会证明行（淡入 + 滑入）：三个重叠的圆形头像（`w-8 h-8 rounded-full border-2 border-background`），来自 Pexels（使用 ID 415829、774909、1222271，配 `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`）加低调文字「7,000+ people already subscribed」。
  2. H1：`text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`，内容：`Get <span className="font-serif italic font-normal">Inspired</span> with Us`。
  3. 副标题，颜色为 `--hero-subtitle`，`text-lg max-w-2xl mt-8`：「Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction.」
  4. 邮箱采集表单：`liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`。透明输入框，药丸按钮 `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]`，标签为「SUBSCRIBE」，配 framer 悬停缩放 1.03 / 点击缩放 0.98。
- 每个元素依次淡入（延迟 0、0.1、0.25、0.4 秒）。

## 版块 3 —— SearchChanged（转变）

- `pt-52 md:pt-64 pb-20 px-6 md:px-8`。
- 标题网格（12 列）：左侧 7 列——小标签「THE SHIFT」（全大写字间距 3px）加 H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]`，内容为 `Search has <italic serif>changed.</italic><br/>Have you?`。右侧 5 列——正文：「The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time.」
- 三卡片网格，使用 1px `bg-border/40` 间隙，包裹在一个 `rounded-3xl overflow-hidden` 容器内，让分隔线看起来像发丝线。每张卡片 `bg-background p-8 md:p-10`，悬停 `bg-white/[0.02]`。
  - 卡片头部：`liquid-glass` 圆角 2xl 的 12x12 图标块（左侧）加 `ArrowUpRight`（右侧），group 悬停时向右上方位移。
  - 大数据：`text-4xl md:text-5xl font-medium tracking-[-1px]` 加低调标签。
  - 名称（半粗体）加低调描述。
  - 卡片内容：ChatGPT / 每周 4 亿用户 /「对话式回答……」；Perplexity / 每日 1500 万次查询 /「带引用来源的回答……」；Google AI / 每月 20 亿+次 AI 概览 /「生成式概览正在取代传统搜索结果页。」
- 下方：居中引语，用两条 `h-px w-12 bg-border` 发丝线框住：`If you don't answer the questions, <foreground>someone else will.</foreground>`
- 每个区块都用 `fadeUp` 交错动画。

## 版块 4 —— Mission（滚动驱动的文字揭示，叠加视差视频）

- 外层：`relative w-full`，内层包装器 `h-[130vh] md:h-[150vh] overflow-hidden`。
- 带视差的背景：`y` 值随滚动进度从 `-6%` 变换到 `6%`，`scale` 在 `1.08 → 1.02 → 1.08` 之间弹动。视频 src：``
- 用于保证可读性的叠加层：
  - `bg-gradient-to-b from-background via-transparent to-background` 加 `bg-background/25`
  - 顶部 `h-32` 和底部 `h-40` 渐隐到背景色。
- 粘性内容容器 `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`。
  - 小标签：发丝线加「OUR MISSION」（全大写字间距 3px）。
  - 两段堆叠的段落，每个单词根据自己在 `useScroll({ target, offset: ["start 0.85","end 0.2"] })` 进度中的切片，从 `opacity 0.2 → 1` 和 `blur(6px) → blur(0)` 做动画。
  - 段落 1（大号 `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`）：「We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having.」其中 **curiosity**、**meets**、**clarity** 三个词高亮为全白色并带稍强的文字阴影；其余单词使用 `--hero-subtitle` 颜色，配柔和文字阴影 `0 2px 20px rgba(0,0,0,0.6)`。
  - 段落 2（较小 `text-xl md:text-2xl lg:text-3xl`）：「A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved.」
  - 带项目符号的标签行：`Depth`、`Reach`、`Meaning`（全大写字间距 3px，低调色）。

## 版块 5 —— Solution（粘性 12 列网格）

- `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`。
- 左栏（`lg:col-span-5 lg:sticky lg:top-32`）：
  - 小标签「SOLUTION」。
  - H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`：`The platform for <italic serif>meaningful</italic> content`。
  - 正文：「Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth.」
  - 视频卡片 `rounded-2xl overflow-hidden aspect-video`，src：``
- 右栏（`lg:col-span-7`）：4 个功能行的纵向列表，用 `border-b border-border/40` 分隔（最后一项无边框）。每行有一个 `liquid-glass` 12x12 圆角 2xl 图标块、标题 `text-xl md:text-2xl font-semibold tracking-[-0.5px]`、右对齐的编号 `01–04`（低调色，字间距 2px），标题下方是低调的描述。图标加文案：
  1. `Compass`—— Curated Feed ——「Editorial-quality recommendations that match your pace and depth.」
  2. `PenLine`—— Writer Tools ——「A calm canvas with the scaffolding serious writers ask for.」
  3. `Users`—— Community ——「Thoughtful readers and creators rewarded for their attention.」
  4. `Radio`—— Distribution ——「Reach built on signal, not noise — measured by meaning.」

## 版块 6 —— CTA（视频背景加居中内容）

- `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`。
- 背景视频（cover，z-0），src：``
- 叠加层 `absolute inset-0 bg-background/45 z-[1]`。
- 居中内容（最大宽度 3xl）：
  - 顶部 `<Logo className="h-12 w-auto" />`。
  - H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`：`<italic serif>Start</italic> Your Journey`。
  - 低调导语：「Step into a quieter internet. Join the readers and writers shaping what comes next.」
  - 按钮行（悬停缩放 1.03，点击缩放 0.98）：
    - 主按钮：`bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` ——「Subscribe Now」。
    - 次按钮：`liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` ——「Start Writing」。
- 每个元素都用 `fadeUp`，延迟分别为 0、0.1、0.2、0.3。

## 版块 7 —— 页脚

- `border-t border-border/30 px-6 md:px-8`，内层 `max-w-7xl pt-20 pb-12`。
- 顶部区块：12 列网格，5/7 拆分，配一条 `border-b border-border/30 pb-16`。
  - 左侧 5 列：仅 `<Logo />`（无「Mindloop」文字）加段落「A quieter internet for readers and writers. Meaningful updates, every week.」加一排三个 `liquid-glass` 10x10 圆形图标按钮（Instagram、LinkedIn、Twitter）。
  - 右侧 7 列：三个链接栏，每栏都有一个全大写字间距 3px 的低调标题，加 4 个链接：
    - Product：How It Works、Philosophy、Use Cases、Changelog
    - Resources：Writer Guide、Reader FAQ、Press Kit、Brand
    - Company：About、Careers、Contact、Journal
- 底部栏 `pt-8 flex md:flex-row items-center justify-between`：左侧「© 2026 Mindloop. All rights reserved.」；右侧 Privacy / Terms / Cookies。
- 巨大的装饰性水印：一个不可交互的 div，渲染单词 `mindloop`，`text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`，在页脚背后形成一个低调的超大衬线字底纹。

## 视频 URL 汇总（精确使用这些地址）

- Hero：``
- Mission：``
- Solution：``
- CTA：``

## 动画规则

- 所有揭示动画使用 `fadeUp(delay)`（`y: 20 → 0`，`opacity: 0 → 1`，0.6 秒 easeOut，只触发一次，`margin: -100px`）。
- Hero 元素在挂载时就播放动画，而不是等待滚动。
- 导航栏在 `window.scrollY > 20` 时，用 500ms 在透明和液态玻璃之间过渡。
- 按钮使用 `whileHover={{ scale: 1.03 }}`，`whileTap={{ scale: 0.98 }}`。
- Mission 版块使用 `useScroll` 加逐词 `useTransform`，分别控制透明度和模糊度（`6px → 0px`）。
- SearchChanged 卡片：`ArrowUpRight` 在 group 悬停时向右上位移 `-translate-y-0.5 translate-x-0.5`，下划线链接通过 `w-0 → w-full` 增长。

## 排版规则

- 正文：Inter，行高约 1.5。
- 标题：Inter `font-medium`，字间距非常紧（展示级为 `-2px`，版块标题为 `-1.5px` / `-1px`）。
- 斜体强调词用 `<span className="font-serif italic font-normal">…</span>` 包裹，使用 Instrument Serif 与几何无衬线字体形成对比。
- 小标签使用 `text-xs uppercase tracking-[3px] text-muted-foreground`。

## 质量标准

- 完全响应式，支持到 375px 移动端；网格折叠为单列；字体随 `md:` / `lg:` 变体缩放。
- 保持黑色（`#000`）背景一致；所有文字为白色或低调灰色——不使用紫色 / 靛蓝色。
- 视频必须是 `autoplay muted loop playsInline` 且 `object-cover`。
- 除了三张 Pexels 头像和 `/image.png` 的 Logo 外，不使用其他外部图片。
- 构建必须能通过 `npm run build`，不产生 TS 错误。