加载中…
创作者 · MotionSites
查看原始来源 ↗Prompt
为名为 "Axon" 的产品构建一个单页 hero 落地页——这是一个为繁琐工作流部署数字员工的平台。页面是一个全视口 hero 区域,包含循环背景视频和叠加内容。
**字体:**
- 加载 Google Fonts:`Instrument Serif`(regular + italic)和 `Inter`(字重 400、500、600)。
- Body 字体:`Inter`,颜色 `#1B133C`。
- 标题字体:`Instrument Serif`。
**页面结构(单个全屏区域,100vh):**
1. **导航栏**——位于顶部居中,padding 为 `pt-4 md:pt-6`。一个横向导航胶囊,使用 `bg-white/70 backdrop-blur-md rounded-xl px-4 md:px-6 py-3 shadow-sm`。包含:
- 自定义 SVG logo(两个 `#1B133C` 的几何箭头/chevron 形状,24x24px)。SVG paths 为:`M 256 256 L 128 256 L 0 128 L 128 128 Z` 和 `M 256 128 L 128 128 L 0 0 L 128 0 Z`,位于 256x256 viewBox 内。
- 导航链接(移动端隐藏,从 `sm:` 起显示):“功能”、“方案”、“安全”、“关于”——样式为 `text-sm font-medium text-[#1B133C]/80`,hover 时过渡到完全不透明。
2. **Hero 内容**——位于导航下方居中,使用 `mt-8 md:mt-16`,垂直堆叠:
- **徽章**:`mb-6`,inline-flex 胶囊,使用 `rounded-xl border border-[#1B133C]/10 bg-white/70 backdrop-blur-sm px-4 py-2 text-sm font-medium`。包含一个橙色方形图标(`bg-orange-500 rounded w-5 h-5`),其中有一个加粗的白色字母 “Y”,后跟文字“由 Y Combinator 投资”。
- **标题**:`font-['Instrument_Serif'] text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight text-[#1B133C] max-w-4xl`。两行:
- “部署数字员工”
- “处理繁琐工作流”
- **副标题**:`mt-5 sm:mt-6 max-w-3xl text-xs sm:text-sm md:text-base leading-relaxed text-[#1B133C]/70`。文字:“告别繁琐的浏览器操作,让团队产能提升 10 倍。为每个常规流程配备智能体,助你更快增长,轻松为客户交付更多成果。”
- **CTA 按钮**:`mt-7 sm:mt-8`,样式为 `rounded-xl bg-[#FEFEFE] px-6 sm:px-8 py-3 sm:py-3.5 text-sm font-semibold text-[#1B133C] shadow-[0px_4px_12px_rgba(0,0,0,0.15)]`,hover 阴影为 `shadow-[0px_6px_16px_rgba(0,0,0,0.2)]`,并使用 `transition-all duration-300`。文字:“获取抢先体验资格”。
3. **背景视频**——使用绝对定位(`absolute inset-0 z-0`),位于所有内容后方。video 元素使用:
- URL:`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260714_113715_c7e0daa0-8bdd-4486-a2da-040901f8f0ea.mp4`
- 属性:`autoPlay muted loop playsInline`
- 样式:`w-full h-[130%] object-cover object-top`——宽度铺满,高度为 130%,使其在垂直方向溢出,并将焦点锚定在顶部。
**index.css 中的 CSS reset:**
```
body { font-family: 'Inter', sans-serif; color: #1B133C; }
```
**关键细节:**
- Hero 区域使用 `relative h-screen w-full overflow-hidden flex flex-col`。
- 所有内容元素均为 `relative z-10`,位于视频(`z-0`)上方。
- 不要添加其他区域或页面——只保留这个单独的 hero。
- 配色:文字使用深海军蓝 `#1B133C`,玻璃元素使用白色/半透明色,Y Combinator 徽章强调色使用 orange-500。
- 页面标题:"Axon — 用于繁琐工作流的数字员工"适用模型与稳定度
建议模型
继续探索
@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