FAQ CTA

**提示词：**

使用 React + TypeScript + Vite + Tailwind CSS 构建一个包含“CTA + FAQ + 页脚”部分的页面，并使用 **Inter** 字体。图标使用 `lucide-react`（`ChevronDown`、`ChevronUp`）。不要使用其他 UI 库。

### 布局

居中容器使用 `max-w-[1100px] w-full mx-auto px-5`，页面主体为白色（`bg-white text-neutral-900`），应用字体：`style={{ fontFamily: "'Inter', sans-serif" }}`。主区域使用 `py-20 max-[900px]:py-[60px]`。

在 `<main>` 内使用双列网格：
- `grid grid-cols-[1.6fr_1fr] gap-[30px] items-stretch max-[900px]:grid-cols-1 max-[900px]:gap-[60px]`

### 左栏——动态渐变 CTA 卡片

一个 class 为 `c5-animated-gradient rounded-[24px] py-20 px-10 text-white flex flex-col justify-center items-center text-center` 的 div，并设置内联样式 `boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05)'`。

内容：
- `<h2>`——“准备好进行<br/>无国界转账了吗？”使用 class `font-normal leading-[1.1] mb-[15px]`，并设置内联样式 `fontSize: '3.5rem', letterSpacing: '-0.03em'`。
- `<p>`——“以最优惠的汇率向全球汇款”，使用 `text-[0.9rem] mb-[30px] font-normal opacity-85`。
- `<button>`——“立即开始”，class 为 `bg-neutral-900 text-white font-semibold cursor-pointer border-none text-[0.95rem] transition-all duration-200 hover:-translate-y-0.5`，内联样式为 `padding: '14px 32px', borderRadius: '12px', boxShadow: '0 10px 20px rgba(0,0,0,0.3)'`。悬停时通过 `onMouseEnter`/`onMouseLeave` 将阴影增强为 `0 14px 30px rgba(0,0,0,0.4)`。

### 动态渐变 CSS（放在 Tailwind 指令之后的 `src/index.css` 中）

使用 CSS `@property` 声明，让自定义属性平滑插值；使用五个 radial-gradient 色块，每个色块都沿大范围路径漂移并脉动改变尺寸。动画快速、循环播放，并遵循 `prefers-reduced-motion`：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@property --c5-x1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --c5-y1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --c5-x2 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --c5-y2 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --c5-x3 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --c5-y3 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --c5-x4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --c5-y4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --c5-x5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --c5-y5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --c5-s1 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --c5-s2 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --c5-s3 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --c5-s4 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --c5-s5 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }

.c5-animated-gradient {
  background-color: #ff8e53;
  background-image:
    radial-gradient(circle at var(--c5-x1) var(--c5-y1), #fff1aa 0px, transparent var(--c5-s1)),
    radial-gradient(circle at var(--c5-x2) var(--c5-y2), #ff4b2b 0px, transparent var(--c5-s2)),
    radial-gradient(circle at var(--c5-x3) var(--c5-y3), #8aff8a 0px, transparent var(--c5-s3)),
    radial-gradient(circle at var(--c5-x4) var(--c5-y4), #ffd000 0px, transparent var(--c5-s4)),
    radial-gradient(circle at var(--c5-x5) var(--c5-y5), #ff1493 0px, transparent var(--c5-s5));
  animation:
    c5-blob1 5s ease-in-out infinite,
    c5-blob2 6s ease-in-out infinite,
    c5-blob3 5.5s ease-in-out infinite,
    c5-blob4 6.5s ease-in-out infinite,
    c5-blob5 4s ease-in-out infinite,
    c5-size1 3.5s ease-in-out infinite,
    c5-size2 4.2s ease-in-out infinite,
    c5-size3 3.8s ease-in-out infinite,
    c5-size4 4.6s ease-in-out infinite,
    c5-size5 3s ease-in-out infinite;
}

@keyframes c5-blob1 {
  0%,100% { --c5-x1: 5%;  --c5-y1: 5%;  }
  25%     { --c5-x1: 45%; --c5-y1: 20%; }
  50%     { --c5-x1: 30%; --c5-y1: 55%; }
  75%     { --c5-x1: 0%;  --c5-y1: 30%; }
}
@keyframes c5-blob2 {
  0%,100% { --c5-x2: 95%; --c5-y2: 5%;  }
  33%     { --c5-x2: 55%; --c5-y2: 35%; }
  66%     { --c5-x2: 80%; --c5-y2: 65%; }
}
@keyframes c5-blob3 {
  0%,100% { --c5-x3: 5%;  --c5-y3: 95%; }
  40%     { --c5-x3: 45%; --c5-y3: 65%; }
  70%     { --c5-x3: 25%; --c5-y3: 100%; }
}
@keyframes c5-blob4 {
  0%,100% { --c5-x4: 95%; --c5-y4: 95%; }
  30%     { --c5-x4: 60%; --c5-y4: 70%; }
  60%     { --c5-x4: 100%; --c5-y4: 50%; }
}
@keyframes c5-blob5 {
  0%,100% { --c5-x5: 50%; --c5-y5: 50%; }
  25%     { --c5-x5: 70%; --c5-y5: 30%; }
  50%     { --c5-x5: 40%; --c5-y5: 70%; }
  75%     { --c5-x5: 30%; --c5-y5: 40%; }
}

@keyframes c5-size1 { 0%,100% { --c5-s1: 45%; } 50% { --c5-s1: 80%; } }
@keyframes c5-size2 { 0%,100% { --c5-s2: 45%; } 50% { --c5-s2: 85%; } }
@keyframes c5-size3 { 0%,100% { --c5-s3: 45%; } 50% { --c5-s3: 78%; } }
@keyframes c5-size4 { 0%,100% { --c5-s4: 45%; } 50% { --c5-s4: 82%; } }
@keyframes c5-size5 { 0%,100% { --c5-s5: 50%; } 50% { --c5-s5: 85%; } }

@media (prefers-reduced-motion: reduce) {
  .c5-animated-gradient { animation: none; }
}
```

### 右栏——FAQ 手风琴

状态：`const [activeIndex, setActiveIndex] = useState<number | null>(0);`，并配有切换函数。

FAQ 数据数组（按顺序）：
1. 问：“我最多可以汇出多少钱？”——答：“转账限额取决于您的验证级别和所在国家/地区。您可以在账户设置中查看自己的限额。”
2. 问：“收款人需要账户吗？”——答：“不需要，您的收款人无需账户。资金可以直接汇入其银行账户或移动钱包。”
3. 问：“有移动应用吗？”——答：“有，我们的移动应用同时支持 iOS 和 Android，方便您随时随地进行转账。”
4. 问：“我可以取消转账吗？”——答：“如果收款银行尚未处理转账，则可以取消。请查看您的转账状态以了解可用选项。”
5. 问：“支持哪些货币？”——答：“我们支持全球 50 多种货币。您可以在我们的应用或网站中查看受支持货币的完整列表。”

容器：`flex flex-col justify-center gap-3`。

每一项：可点击的 div，使用 `bg-white border rounded-[10px] py-[18px] px-5 cursor-pointer transition-all duration-200`；激活时边框颜色为 `#eaeaea`，否则为 `#f0f0f0`（并添加 `hover:border-[#eaeaea]`）。激活时盒阴影为 `0 4px 12px rgba(0,0,0,0.04)`，否则为 `0 2px 8px rgba(0,0,0,0.02)`。

行：`flex justify-between items-center font-normal text-[0.9rem] text-neutral-900`，问题位于左侧；激活时显示 `ChevronUp`（size 20），否则显示 `ChevronDown`。

激活时，在下方显示答案块：`mt-3 text-[0.9rem] text-[#666] leading-[1.6]`。

### 页脚

`<footer className="bg-[#fafafa] pt-20 pb-5 max-[900px]:pt-[60px]">`，容器使用 `max-w-[1100px] w-full mx-auto px-5`。

网格：`grid grid-cols-[2fr_1fr_1fr_2fr] gap-10 mb-[50px] max-[900px]:grid-cols-2 max-[480px]:grid-cols-1`。

1. **Logo 栏**：`<img src="https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg" className="h-6 mb-[15px]" style={{ filter: 'brightness(0)' }}/>`，然后添加 `<p className="text-[0.85rem] text-[#888] leading-[1.6] max-w-[220px]">可靠的转账服务，始终准时送达目的地。</p>`。
2. **导航**：`<h4 className="font-semibold mb-5 text-[0.95rem] text-neutral-900">导航</h4>` + 包含 `功能、优势、客户评价、定价` 的 `<ul>`——每项使用 `<li className="mb-3">`，其中包含 `<a href="#" className="text-[#888] no-underline text-[0.85rem] transition-colors duration-200 hover:text-neutral-900">`。
3. **页面**：样式相同，项目为 `首页、联系我们、404`。
4. **电子报**：标题“电子报”，段落：“订阅我们的电子报并接收通知。”（`text-[0.85rem] text-[#888] mb-[15px]`），然后使用 `flex gap-[10px]`：
   - 输入框：`type="email"`，placeholder "Enter your email..."，class 为 `flex-grow border border-[#f0f0f0] bg-white outline-none transition-colors duration-200 focus:border-[#ccc] text-[0.9rem]`，内联样式为 `padding: '12px 16px', borderRadius: '10px', boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.02)'`。
   - 按钮“订阅”：`bg-neutral-900 text-white border-none font-semibold cursor-pointer transition-all duration-200 hover:-translate-y-0.5 text-[0.9rem]`，内联样式为 `padding: '12px 28px', borderRadius: '10px', boxShadow: '0 12px 24px rgba(0,0,0,0.4)'`。

底栏：`border-t border-[#f0f0f0] pt-[25px] pb-[10px] flex justify-between text-[0.85rem] text-[#888] max-[480px]:flex-col max-[480px]:gap-[15px] max-[480px]:items-center`，包含“保留所有权利。© 2025”和“由 Peter Design 设计”。

### 字体加载

在 `index.html` 的 `<head>` 中添加 Google Fonts Inter 的预连接和样式表链接：
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

### 注意事项

- 渐变使用五种颜色：基础色 `#ff8e53`，色块颜色为 `#fff1aa`、`#ff4b2b`、`#8aff8a`、`#ffd000`、`#ff1493`。
- 动画使用 CSS `@property` 实现适合 GPU 的自定义属性插值——这是动态 CSS 渐变的现代标准（不使用 JS，也不使用 canvas）。
- 色块沿大范围路径移动并脉动改变半径；持续时间为 3–6.5s，每个动画相互错开，形成自然的动态效果。