加载中…
创作者 · MotionSites
查看原始来源 ↗
Prompt
**提示词：**
使用 **React + TypeScript + Tailwind CSS** 构建一个金融科技稳定币落地页的“使用案例”版块，并使用 **lucide-react** 提供图标（使用 `ArrowRight`）。确保完全适配移动端。
---
### 字体设置
页面使用通过 `index.html` 中的样式表链接加载的 **"TT Norms Pro"**：
```html
<link href="https://db.onlinewebfonts.com/c/49bf5d043a27b890a040cf393277e2b2?family=TT+Norms+Pro+Regular" rel="stylesheet">
```
将此 `<link>` 添加到 `index.html` 的 `<head>` 中。
然后在 `index.css` 中全局应用：
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;
}
body {
font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;
}
* {
font-family: inherit;
}
}
```
不需要本地字体文件。字体由上方的外部样式表 URL 提供。
---
### 版块组件：`UseCasesSection`
**外层容器：** 使用 `<section>`，类为 `bg-[#F5F5F5] px-6 py-24`。
**内层容器：** 使用 `<div>`，类为 `max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start`。
---
#### 左栏（纯文本介绍）
使用 `<div>` 作为容器，类为 `md:pr-12 md:pt-2`。
包含三个垂直堆叠的元素：
1. **眉题标签：**
- 元素：`<p>`
- 文本：**“USD Halo 实践”**
- 类：`text-black/60 text-sm font-normal mb-2`
2. **版块标题：**
- 元素：`<h2>`
- 文本：**“使用模式”**
- 类：`text-black text-5xl md:text-6xl font-medium leading-none mb-6`
- 内联样式：`{ letterSpacing: '-0.04em' }`
3. **描述段落：**
- 元素：`<p>`
- 文本：**“USD Halo 为开发者、企业和资金管理机构提供广泛的使用模式，满足其对安全、高回报稳定币集成及更多功能的需求”**
- 类：`text-black/60 text-base leading-relaxed max-w-sm`
---
#### 右栏（大型视频背景卡片）
使用 `<div>` 作为容器，类为 `relative rounded-3xl overflow-hidden min-h-[720px]`。
**背景视频**（作为氛围背景填满整张卡片）：
- 元素：`<video>`
- 类：`absolute inset-0 w-full h-full object-cover`
- 属性：`autoPlay`、`muted`、`loop`、`playsInline`
- `src` URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4`
**内容叠层**（位于视频上方）：
- 使用 `<div>` 作为容器，类为 `relative z-10 p-10 md:p-12`
包含三个元素：
1. **卡片标题：**
- 元素：`<h3>`
- 文本：**“商业”**
- 类：`text-black text-4xl md:text-5xl font-medium leading-tight mb-5`
- 内联样式：`{ letterSpacing: '-0.03em' }`
2. **卡片描述：**
- 元素：`<p>`
- 文本：**“通过提供 USD Halo 提高客户留存率。这是一种可信赖、由美元支持且收益丰厚的稳定币，让你的客户无需费力即可在平台上赚取收益。”**
- 类：`text-black/70 text-base leading-relaxed max-w-md mb-8`
3. **“了解更多”按钮：**
- 元素：`<button>`
- 类：`inline-flex items-center gap-3 text-black text-base font-medium group`
- 包含以下内容（严格遵循此顺序）：
- **图标圆形容器在前：** `<span>`，类为 `w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors`，其中包含来自 lucide-react 的 `<ArrowRight className="w-4 h-4 text-black" />`。
- **文本标签在后：** 纯文本 **“了解更多”**（放在 span 之后，因此图标位于左侧）。
---
### 关键设计规范
- **页面背景：** `#F5F5F5`（浅暖灰色）。
- **视频卡片：** 视频通过 `object-cover` 填满整个圆角卡片，并静音循环播放。**没有渐变叠层、没有深色遮罩、没有模糊层**——文本直接置于视频之上。
- **卡片圆角半径：** `rounded-3xl`（24px）。
- **卡片最小高度：** `min-h-[720px]`。
- **字体排版系统：**
- 所有文本使用从网页字体链接继承的 "TT Norms Pro Regular"。
- 标题：使用 `font-medium` 和紧凑的负字距（版块标题为 `-0.04em`，卡片标题为 `-0.03em`）。
- 正文：默认字重（400），字号为 `text-base`。
- 颜色层级：标题使用 `text-black`，卡片正文使用 `text-black/70`，弱化/次要文本使用 `text-black/60`。
- **“了解更多”按钮：** 磨砂玻璃圆形图标（`bg-white/80 backdrop-blur`）通过 Tailwind `group`/`group-hover` 在悬停时过渡为纯白色。图标圆形容器位于文本标签之前。
- **布局：** 在 `md:` 断点使用双栏网格。移动端堆叠为单栏。左栏使用 `md:pr-12` 和 `md:pt-2` 留出空间。
- **间距：** 栏之间使用 `gap-8`。版块垂直内边距为 `py-24`，水平内边距为 `px-6`。
---
### 完整 JSX 参考
```tsx
import { ArrowRight } from 'lucide-react';
function UseCasesSection() {
return (
<section className="bg-[#F5F5F5] px-6 py-24">
<div className="max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
{/* 左栏 */}
<div className="md:pr-12 md:pt-2">
<p className="text-black/60 text-sm font-normal mb-2">USD Halo 实践</p>
<h2 className="text-black text-5xl md:text-6xl font-medium leading-none mb-6" style={{ letterSpacing: '-0.04em' }}>
使用模式
</h2>
<p className="text-black/60 text-base leading-relaxed max-w-sm">
USD Halo 为开发者、企业和资金管理机构提供广泛的使用模式，满足其对安全、高回报稳定币集成及更多功能的需求
</p>
</div>
{/* 右栏——带背景视频的大卡片 */}
<div className="relative rounded-3xl overflow-hidden min-h-[720px]">
<video
className="absolute inset-0 w-full h-full object-cover"
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4"
autoPlay
muted
loop
playsInline
/>
<div className="relative z-10 p-10 md:p-12">
<h3 className="text-black text-4xl md:text-5xl font-medium leading-tight mb-5" style={{ letterSpacing: '-0.03em' }}>
商业
</h3>
<p className="text-black/70 text-base leading-relaxed max-w-md mb-8">
通过提供 USD Halo 提高客户留存率。这是一种可信赖、由美元支持且收益丰厚的稳定币，让你的客户无需费力即可在平台上赚取收益。
</p>
<button className="inline-flex items-center gap-3 text-black text-base font-medium group">
<span className="w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors">
<ArrowRight className="w-4 h-4 text-black" />
</span>
了解更多
</button>
</div>
</div>
</div>
</section>
);
}
```
---适用模型与稳定度
建议模型
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…
提示语
首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。 将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。 在浏览器中创建一个细节极其丰富的实时 {argument nam