Claude + Fable：Aethera Fintech 落地页

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

> 用 **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。
> - 极简的悬停动画：按钮缩放、箭头位移、颜色过渡。
> - 信息框下方不再有其他版块。

---