提示词
一键获取所有令人惊艳动效网站的提示词：
> 用 **React + TypeScript + Vite + Tailwind CSS + lucide-react** 为一个名为 **「Aethera」**（一家专注放贷业务的金融科技 / AI 公司）构建一个单页落地页。页面背景为白色（`#fff`），不使用滚动动画——只做干净、极简、编辑风格的设计。
>
> ### 字体
> - **标题 / 衬线字体：** 「P22 Mackinac W01 Book」，从 `` 加载
> - **正文 / 无衬线字体：** 「Inter」（300、400、500、600 字重），来自 Google Fonts
> - Tailwind 配置：`fontFamily.sans = ['Inter', 'sans-serif']`，`fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']`
>
> ### 页面标题
> `<title>Build Lasting Relationships</title>`
>
> ### 背景视频
它必须在页面上垂直居中
> 使用这个**精确**的 CloudFront 视频 URL：
> ```
>
> ```
> 视频用**绝对定位**放置在 Hero 之后，使用：top: '50%', transform: 'translateY(-50%)'
和 CSS 滤镜 `brightness(1) contrast(1.2)`。使用 `object-contain`，静音，playsInline，preload="auto"。加载后播放一次，播放结束后暂停（不循环，不做回弹反转——只正向播放一次然后停止）。
>
> ### 导航栏
> - `relative z-20`，最大宽度 `max-w-7xl`，居中，`px-8 py-6`，两端对齐布局。
> - **Logo（左侧）：** 文字「Aethera」加上标注册商标符号——`font-serif text-3xl tracking-tight text-[#000000]`，配 `<sup className="text-xs align-super">®</sup>`
> - **导航链接（中间，移动端隐藏 `hidden md:flex`）：** 「Home」（当前项，`text-[#000000]`）、「Studio」、「About」、「Journal」、「Reach Us」（非当前项，`text-[#6F6F6F]`）。每项均为 `text-sm`，悬停变黑。
> - **CTA 按钮（右侧）：** 「Begin Journey」—— `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white`，配 `hover:scale-[1.03] transition-transform duration-200`。
>
> ### Hero 区域
> - 外层容器：`relative flex flex-col items-center`
> - 内层容器：`relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center`
> - 内容容器：`relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6`，内联样式 `marginTop: '-70px'`
> - **标题：** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` —— 文字第一行为「Forge trust,」，第二行为「drive results.」（用 `<br />` 换行）
> - **副文本：** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` —— 「Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email.」
> - **按钮：** 「Get Started」—— `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
>
> ### 信息框（叠加在 Hero 下方）
> - 容器：`relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16`
> - 框体：`bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden`
> - **第一行（两栏网格 `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`）：**
> - 左侧：标签 `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` —— 「How do we help?」。标题 `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` —— 「Dialogues that
spark progress」（换行在移动端隐藏 `hidden sm:block`）
> - 右侧：`flex items-end`，段落 `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` —— 「Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions.」
> - **分隔线：** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
> - **第二行（三个功能药丸，`grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`，`mt-6 sm:mt-8 md:mt-10`）：**
> - 每个药丸：`group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`
> - 内容：数字（`text-[#191919]/40`）加分隔符（`/`，`text-[#191919]/30 mx-2`）加标签（`font-medium`）
> - 项目：「01 / Multichannel」「02 / Integrated」「03 / Auditable」
> - 右侧图标：来自 lucide-react 的 `ArrowRight`，`w-4 h-4 text-gray-400`，配 `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200`
>
> ### 全局 CSS（index.css）
> ```css
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
>
> * {
> box-sizing: border-box;
> }
>
> body {
> font-family: 'Inter', sans-serif;
> -webkit-font-smoothing: antialiased;
> -moz-osx-font-smoothing: grayscale;
> }
> ```
>
> ### 关键行为
> - 视频正好正向播放一次，然后暂停。不循环，不反向。
> - 页面完全响应式，断点为 sm、md、lg。
> - 极简的悬停动画：按钮缩放、箭头位移、颜色过渡。
> - 信息框下方不再有其他版块。
---原文提示词（English）
Access ALL prompts for stunning animated websites in one click:
> Build a single-page landing page for a brand called **"Aethera"** (a fintech/AI company for lending). Use **React + TypeScript + Vite + Tailwind CSS + lucide-react**. The page has a white background (`#fff`), no scrolling animations -- just a clean, minimal, editorial design.
>
> ### Fonts
> - **Heading/serif font:** "P22 Mackinac W01 Book" loaded from ``
> - **Body/sans font:** "Inter" (weights 300, 400, 500, 600) from Google Fonts
> - Configure Tailwind: `fontFamily.sans = ['Inter', 'sans-serif']`, `fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']`
>
> ### Page Title
> `<title>Build Lasting Relationships</title>`
>
> ### Background Video
It has to be centered vertically on the page
> Use this **exact** CloudFront video URL:
> ```
>
> ```
> The video is positioned **absolutely** behind the hero using: top: '50%', transform: 'translateY(-50%)'
and CSS filter `brightness(1) contrast(1.2)`. It uses `object-contain`, is muted, playsInline, preload="auto". It plays once on load and pauses when ended (no looping, no boomerang reversal -- just plays forward once and stops).
>
> ### Navbar
> - `relative z-20`, max-width `max-w-7xl`, centered, `px-8 py-6`, flex between.
> - **Logo (left):** Text "Aethera" with a superscript registered mark -- `font-serif text-3xl tracking-tight text-[#000000]` with `<sup className="text-xs align-super">®</sup>`
> - **Navigation links (center, hidden on mobile `hidden md:flex`):** "Home" (active, `text-[#000000]`), "Studio", "About", "Journal", "Reach Us" (inactive, `text-[#6F6F6F]`). Each is `text-sm` with hover to black.
> - **CTA button (right):** "Begin Journey" -- `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white` with `hover:scale-[1.03] transition-transform duration-200`.
>
> ### Hero Section
> - Wrapper: `relative flex flex-col items-center`
> - Inner container: `relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center`
> - Content container: `relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6` with inline style `marginTop: '-70px'`
> - **Headline:** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` -- text is "Forge trust," on line 1, "drive results." on line 2 (using `<br />`)
> - **Subtext:** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` -- "Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email."
> - **Button:** "Get Started" -- `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
>
> ### Info Box (overlapping below hero)
> - Container: `relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16`
> - Box: `bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden`
> - **Row 1 (two-column grid `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`):**
> - Left: Label `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` -- "How do we help?". Heading `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` -- "Dialogues that
spark progress" (line break hidden on mobile `hidden sm:block`)
> - Right: `flex items-end` with paragraph `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` -- "Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions."
> - **Divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
> - **Row 2 (three feature pills, `grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`, `mt-6 sm:mt-8 md:mt-10`):**
> - Each pill: `group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`
> - Content: Number (`text-[#191919]/40`) + separator (`/` in `text-[#191919]/30 mx-2`) + label (`font-medium`)
> - Items: "01 / Multichannel", "02 / Integrated", "03 / Auditable"
> - Right icon: `ArrowRight` from lucide-react, `w-4 h-4 text-gray-400` with `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200`
>
> ### Global CSS (index.css)
> ```css
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
>
> * {
> box-sizing: border-box;
> }
>
> body {
> font-family: 'Inter', sans-serif;
> -webkit-font-smoothing: antialiased;
> -moz-osx-font-smoothing: grayscale;
> }
> ```
>
> ### Key Behaviors
> - The video plays forward exactly once, then pauses. No loop, no reverse.
> - The page is fully responsive with breakpoints at sm, md, lg.
> - Minimal hover animations: button scale, arrow translate, color transitions.
> - No additional sections below the info box.
---建议模型
Claude · Fable / GPT-5.6 Sol
视频地址
https://media.goodcase.ai/media/video/claude-fable-aethera-fintech-42f59ca99541.mp4
