提示词
**提示词：**
使用 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，每个动画相互错开，形成自然的动态效果。原文提示词（English）
**PROMPT:**
Build a React + TypeScript + Vite + Tailwind CSS page with a "CTA + FAQ + Footer" section using the **Inter** font. Use `lucide-react` for icons (`ChevronDown`, `ChevronUp`). No other UI libraries.
### Layout
A centered container `max-w-[1100px] w-full mx-auto px-5`, white body (`bg-white text-neutral-900`), applied font: `style={{ fontFamily: "'Inter', sans-serif" }}`. Main section has `py-20 max-[900px]:py-[60px]`.
Inside `<main>`, a two-column grid:
- `grid grid-cols-[1.6fr_1fr] gap-[30px] items-stretch max-[900px]:grid-cols-1 max-[900px]:gap-[60px]`
### Left column — Animated Gradient CTA card
A div with class `c5-animated-gradient rounded-[24px] py-20 px-10 text-white flex flex-col justify-center items-center text-center` and inline `boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05)'`.
Contents:
- `<h2>` — "Ready to Transfer<br/>Without Borders?" with classes `font-normal leading-[1.1] mb-[15px]` and inline `fontSize: '3.5rem', letterSpacing: '-0.03em'`.
- `<p>` — "Send Money Worldwide at the Best Rates" with `text-[0.9rem] mb-[30px] font-normal opacity-85`.
- `<button>` — "Get Started Today", classes `bg-neutral-900 text-white font-semibold cursor-pointer border-none text-[0.95rem] transition-all duration-200 hover:-translate-y-0.5`, inline `padding: '14px 32px', borderRadius: '12px', boxShadow: '0 10px 20px rgba(0,0,0,0.3)'`. On hover, bump shadow to `0 14px 30px rgba(0,0,0,0.4)` via `onMouseEnter`/`onMouseLeave`.
### Animated Gradient CSS (put in `src/index.css` after the Tailwind directives)
Use CSS `@property` declarations so custom properties interpolate smoothly, five radial-gradient blobs that each drift across wide paths AND pulse in size. Fast, looping, respects `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; }
}
```
### Right column — FAQ accordion
State: `const [activeIndex, setActiveIndex] = useState<number | null>(0);` with toggle function.
FAQ data array (in order):
1. Q: "What is the maximum amount I can send?" — A: "Transfer limits depend on your verification level and country. You can check your limits inside your account settings."
2. Q: "Does my recipient need an account?" — A: "No, your recipient doesn't need an account. Funds can be sent directly to their bank account or mobile wallet."
3. Q: "Is there a mobile app available?" — A: "Yes, our mobile app is available on both iOS and Android for easy transfers on the go."
4. Q: "Can I cancel a transfer?" — A: "Transfers can be cancelled if they have not yet been processed by the receiving bank. Check your transfer status for options."
5. Q: "What currencies are supported?" — A: "We support over 50 currencies worldwide. You can view the full list of supported currencies in our app or website."
Container: `flex flex-col justify-center gap-3`.
Each item: clickable div, `bg-white border rounded-[10px] py-[18px] px-5 cursor-pointer transition-all duration-200`, border color `#eaeaea` when active else `#f0f0f0` (+ `hover:border-[#eaeaea]`). Box shadow `0 4px 12px rgba(0,0,0,0.04)` when active, else `0 2px 8px rgba(0,0,0,0.02)`.
Row: `flex justify-between items-center font-normal text-[0.9rem] text-neutral-900`, question on left, `ChevronUp` (size 20) if active else `ChevronDown`.
When active, answer block below: `mt-3 text-[0.9rem] text-[#666] leading-[1.6]`.
### Footer
`<footer className="bg-[#fafafa] pt-20 pb-5 max-[900px]:pt-[60px]">`, container `max-w-[1100px] w-full mx-auto px-5`.
Grid: `grid grid-cols-[2fr_1fr_1fr_2fr] gap-10 mb-[50px] max-[900px]:grid-cols-2 max-[480px]:grid-cols-1`.
1. **Logo column**: `<img src="https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg" className="h-6 mb-[15px]" style={{ filter: 'brightness(0)' }}/>` then `<p className="text-[0.85rem] text-[#888] leading-[1.6] max-w-[220px]">Reliable transfers that always reach their destination on time.</p>`.
2. **Navigation**: `<h4 className="font-semibold mb-5 text-[0.95rem] text-neutral-900">Navigation</h4>` + `<ul>` of `Features, Benefits, Testimonials, Pricing` — each `<li className="mb-3">` with `<a href="#" className="text-[#888] no-underline text-[0.85rem] transition-colors duration-200 hover:text-neutral-900">`.
3. **Pages**: same styling, items `Home, Contact, 404`.
4. **Newsletter**: heading "Newsletter", p: "Join our newsletter and get notified." (`text-[0.85rem] text-[#888] mb-[15px]`), then `flex gap-[10px]`:
- Input: `type="email"`, placeholder "Enter your email...", classes `flex-grow border border-[#f0f0f0] bg-white outline-none transition-colors duration-200 focus:border-[#ccc] text-[0.9rem]`, inline `padding: '12px 16px', borderRadius: '10px', boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.02)'`.
- Button "Subscribe": `bg-neutral-900 text-white border-none font-semibold cursor-pointer transition-all duration-200 hover:-translate-y-0.5 text-[0.9rem]`, inline `padding: '12px 28px', borderRadius: '10px', boxShadow: '0 12px 24px rgba(0,0,0,0.4)'`.
Bottom bar: `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` containing "All rights reserved. © 2025" and "Designed by Peter Design".
### Font loading
Add to `index.html` `<head>`: Google Fonts Inter preconnect + stylesheet link:
```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">
```
### Notes
- Gradient uses five colors: base `#ff8e53`, blobs `#fff1aa`, `#ff4b2b`, `#8aff8a`, `#ffd000`, `#ff1493`.
- Animation uses CSS `@property` for GPU-friendly custom-property interpolation — this is the modern standard for animated CSS gradients (no JS, no canvas).
- Blobs travel wide paths and pulse in radius; durations 3–6.5s, each offset for organic motion.
