提示词
一键获取所有令人惊艳动效网站的提示词：
复刻这个落地页的完整提示词
为一家名为「APEX」的虚构公司创建一个深色、高级的 SaaS 落地页——一个营收加速平台。设计采用「液态玻璃」美学，超深色背景、半透明玻璃拟态元素，配绿色强调色。页面使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui 构建，视频流使用 hls.js。
全局设计系统
字体：Geist Sans（安装 @fontsource/geist-sans，字重 400、500、600、700）。通过 font-family: 'Geist Sans', 'Inter', system-ui, sans-serif 应用于 body。
配色方案（HSL，:root 中的 CSS 变量）：
--background: 260 87% 3%（近黑色，带轻微紫调）
--foreground: 40 6% 95%（暖白色）
--primary: 121 95% 76%（鲜绿色——仅用于强调）
--primary-foreground: 0 0% 5%
--secondary: 240 4% 16%
--border: 240 4% 20%
--hero-heading: 40 10% 96%（用于标题的明亮暖白色）
--hero-sub: 40 6% 82%（用于副文本的低调暖灰色）
--card: 240 6% 9%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--radius: 0.75rem
在 tailwind.config.ts 中将所有颜色映射为 hsl(var(--token))。把 hero.heading 和 hero.sub 加入自定义颜色。
「液态玻璃」工具类（在 index.css 的 @layer utilities 下）：
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
按钮变体（在 shadcn 的 button.tsx 中）：
hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90
heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5
跑马灯动画（tailwind.config.ts 关键帧）：
marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } }
动画：marquee 20s linear infinite
版块 1：HERO
全视口 Hero，背后播放一个 MP4 背景视频。
视频 URL：
使用标准 <video> 标签配 <source>（非 HLS）。属性：autoPlay loop muted playsInline。定位为 absolute inset-0 w-full h-full object-cover。
渐变叠加层（absolute，pointer-events-none）：
linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%)
内容（relative z-10，flex column，min-h-screen）：
导航栏——居中，液态玻璃圆角容器（max-w-[850px]），包含：Logo：一个小型 SVG 十字准星图标，位于 w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-muted 容器中 + 「APEX」文字（text-xl font-semibold）
导航项：「Features」（下拉箭头）、「Solutions」、「Plans」、「Learning」（下拉箭头）——纯文字按钮
CTA：<Button variant="hero" size="sm">Sign Up</Button>
公告徽标——液态玻璃圆角药丸：「Nova+ Launched!」加嵌套的「Explore」徽标，配 ChevronRight 图标
标题——text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl：Accelerate Your
Revenue Growth Now
副标题——text-hero-sub text-lg max-w-md mt-4 opacity-80：「Drive your funnel forward with clever workflows, analytics, and seamless lead management.」
CTA 按钮——flex gap-4 mt-8：「Start Free Right Now」（hero 变体）加「Schedule a Consult」（heroSecondary 变体）
社会证明条——位于 Hero 底部。左侧文字：「Relied on by brands across the globe」（两行，text-foreground/50 text-sm）。右侧：无限跑马灯滚动 6 个虚构品牌名（Vortex、Nimbus、Prysma、Cirrus、Kynder、Halcyn），每个都配一个液态玻璃 w-6 h-6 rounded-lg 图标，显示品牌首字母。数组重复一次以实现无缝循环。使用 animate-marquee。
版块 2：FEATURES（三栏卡片，带背景视频）
背景 HLS 视频：
使用 hls.js 播放。视频为 absolute inset-0 object-cover，位于版块背后。
视频上的渐变叠加层：
顶部：bg-gradient-to-b from-background via-background/80 to-transparent（高度 40%）
底部：bg-gradient-to-t from-background via-background/80 to-transparent（高度 40%）
整体加暗：bg-background/40
版块标题：
徽标：液态玻璃圆角药丸——「Core Platform」加「Overview」配 ChevronRight
标题：text-hero-heading text-3xl sm:text-5xl font-semibold：「Built for Teams That / Ship Relentlessly」
副标题：「Three pillars that keep your revenue engine humming without the operational drag.」
3 个功能卡片（grid md:grid-cols-3 gap-6），每个都是 liquid-glass rounded-3xl p-8：
Lightning Workflows——「Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity.」数据：「3.2x faster」/「pipeline throughput」
Deep-Dive Analytics——「Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required.」数据：「148%」/「avg. conversion lift」
Compliance Engine——「SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically.」数据：「Zero」/「compliance incidents」
每张卡片在数据上方都有一条 border-t border-border/50 分隔线。悬停：hover:bg-white/[0.03]。
版块 3：CHESS 版块（视频居左，内容居右）
py-32 px-4，max-w-6xl，grid lg:grid-cols-2 gap-20 items-center。
左侧——视频：liquid-glass rounded-3xl aspect-[4/3] overflow-hidden
HLS 视频：
右侧——内容：
徽标：「Smart Routing」加「New」
标题：「Every Lead Finds / Its Perfect Path」
正文：「Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time.」
要点列表（3 项，配 w-1.5 h-1.5 rounded-full bg-primary 圆点）：「AI-scored lead qualification」「Dynamic rep assignment」「Multi-touch attribution」
按钮：「See It in Action」（hero）加「Read the Docs」（heroSecondary）
版块 4：反向 CHESS 版块（内容居左，视频居右）
布局与 Chess 相同但反转，移动端优先使用 order- 类。
左侧——内容（order-2 lg:order-1）：
徽标：「Pipeline Studio」加「Beta」
标题：「Design Funnels / That Actually Close」
正文：「Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why.」
4 个数据卡片，grid grid-cols-2 gap-4，每个都是 liquid-glass rounded-2xl p-4：「47.2%」/「win-rate increase」
「12 days」/「shorter sales cycle」
「2.8x」/「deal velocity」
「91%」/「forecast accuracy」
按钮：「Try Pipeline Studio」（hero）
右侧——视频（order-1 lg:order-2）：liquid-glass rounded-3xl aspect-[4/3]
HLS 视频：
版块 5：NUMBERS 版块（全宽背景视频）
背景 HLS 视频：
渐变叠加层：
linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
内容（relative z-10，py-32）：
主数据（居中）：$4.7B，字号 text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter，加标签「Revenue influenced」加描述。mb-24。
底部两个数据放在一个 liquid-glass rounded-3xl p-12 grid md:grid-cols-2 中，配一条竖直的 md:border-r border-border/50 分隔线：「18M」/「Leads processed monthly」
「99.97%」/「Platform uptime」
版块 6：TESTIMONIALS
py-32，居中标题加三栏卡片网格。
标题：
「Trusted by Revenue / Leaders Everywhere」
「Hear from the teams that made the switch.」
3 个评价卡片（liquid-glass rounded-3xl p-8），中间卡片用 md:-translate-y-6 做位移偏移：
Clara Whitfield，VP Revenue，Meridian Health（缩写「CW」）
Derek Tanaka，Growth Lead，Baseform（缩写「DT」）
Simone Reuter，CRO，Alpenhaus Group（缩写「SR」）
每张卡片：引用文字加分隔线加头像圆圈（w-10 h-10 rounded-full bg-secondary）配缩写，加姓名 / 职位。
版块 7：CTA 加页脚容器（背景视频）
一个包装组件，CTA 和页脚共用同一个背景 HLS 视频。
HLS 视频：
渐变叠加层：
linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
CTA 版块（relative z-10）：
liquid-glass rounded-[2rem] p-12 sm:p-20 居中卡片
标题：「Ready to Outpace / Your Pipeline Targets?」
副标题：「Join 2,400+ teams already accelerating revenue with APEX. No credit card required.」
按钮：「Start Free Today」（hero）加「Talk to Sales」（heroSecondary）
页脚（relative z-10）：
5 栏网格：品牌（跨 2 栏，含 Logo 加标语）加「Product」（Features、Pricing、Integrations、Changelog、Roadmap）加「Company」（About、Blog、Careers、Press）加「Resources」（Documentation、Community、Support、Status）
底部栏：「© 2026 APEX Inc.」加 Privacy / Terms / Cookies 链接
边框：border-t border-border/30
关键依赖项
hls.js、@fontsource/geist-sans、lucide-react、class-variance-authority、tailwindcss-animate、@radix-ui/react-slot、shadcn/ui 组件、react-router-dom、@tanstack/react-query
页面结构（Index.tsx）
<HeroSection />
<FeaturesSection />
<ChessSection />
<ReverseChessSection />
<NumbersSection />
<TestimonialsSection />
<CTAFooterWrapper /> （包含 CTASection 和 FooterSection）原文提示词（English）
Access ALL prompts for stunning animated websites in one click:
Full Prompt to Recreate the Landing Page
Create a dark, premium SaaS landing page for a fictional company called "APEX" — a revenue acceleration platform. The design uses a "liquid glass" aesthetic with ultra-dark backgrounds, translucent glassmorphic elements, and green accent color. The page is built with React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and hls.js for video streaming.
GLOBAL DESIGN SYSTEM
Font: Geist Sans (install @fontsource/geist-sans, weights 400, 500, 600, 700). Apply via font-family: 'Geist Sans', 'Inter', system-ui, sans-serif on body.
Color Palette (HSL, CSS variables in :root):
--background: 260 87% 3% (near-black with slight purple)
--foreground: 40 6% 95% (warm off-white)
--primary: 121 95% 76% (vivid green — accent only)
--primary-foreground: 0 0% 5%
--secondary: 240 4% 16%
--border: 240 4% 20%
--hero-heading: 40 10% 96% (bright warm white for headings)
--hero-sub: 40 6% 82% (muted warm gray for subtext)
--card: 240 6% 9%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--radius: 0.75rem
Map all colors in tailwind.config.ts as hsl(var(--token)). Add hero.heading and hero.sub as custom colors.
"Liquid Glass" utility class (in index.css under @layer utilities):
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
Button Variants (in shadcn button.tsx):
hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90
heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5
Marquee animation (tailwind.config.ts keyframes):
marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } }
Animation: marquee 20s linear infinite
SECTION 1: HERO
Full-viewport hero with a background MP4 video playing behind all content.
Video URL:
Use a standard <video> tag with <source> (not HLS). Attributes: autoPlay loop muted playsInline. Positioned absolute inset-0 w-full h-full object-cover.
Gradient overlay (absolute, pointer-events-none):
linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%)
Content (relative z-10, flex column, min-h-screen):
Navbar — centered, liquid-glass rounded-3xl container (max-w-[850px]) containing:Logo: small SVG crosshair icon in a w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-mutedbox + "APEX" text (text-xl font-semibold)
Nav items: "Features" (dropdown chevron), "Solutions", "Plans", "Learning" (dropdown chevron) — plain text buttons
CTA: <Button variant="hero" size="sm">Sign Up</Button>
Announcement Badge — liquid-glass rounded-full pill: "Nova+ Launched!" + nested "Explore" badge with ChevronRight icon
Heading — text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl:Accelerate Your
Revenue Growth Now
Subheading — text-hero-sub text-lg max-w-md mt-4 opacity-80: "Drive your funnel forward with clever workflows, analytics, and seamless lead management."
CTA Buttons — flex gap-4 mt-8: "Start Free Right Now" (hero variant) + "Schedule a Consult" (heroSecondary variant)
Social Proof Bar — at bottom of hero. Left text: "Relied on by brands across the globe" (2-line, text-foreground/50 text-sm). Right: infinite marquee scrolling 6 fake brand names (Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn) each with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter. Array is duplicated for seamless loop. Uses animate-marquee.
SECTION 2: FEATURES (3-Column Cards with Background Video)
Background HLS Video:
Use hls.js for playback. Video is absolute inset-0 object-cover behind the section.
Gradient overlays on top of video:
Top: bg-gradient-to-b from-background via-background/80 to-transparent(height 40%)
Bottom: bg-gradient-to-t from-background via-background/80 to-transparent(height 40%)
Overall darkening: bg-background/40
Section header:
Badge: liquid-glass rounded-full pill — "Core Platform" + "Overview" with ChevronRight
Heading: text-hero-heading text-3xl sm:text-5xl font-semibold: "Built for Teams That / Ship Relentlessly"
Sub: "Three pillars that keep your revenue engine humming without the operational drag."
3 Feature Cards (grid md:grid-cols-3 gap-6), each liquid-glass rounded-3xl p-8:
Lightning Workflows — "Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity." Stat: "3.2x faster" / "pipeline throughput"
Deep-Dive Analytics — "Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required." Stat: "148%" / "avg. conversion lift"
Compliance Engine — "SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically." Stat: "Zero" / "compliance incidents"
Each card has a border-t border-border/50 divider above the stat. Hover: hover:bg-white/[0.03].
SECTION 3: CHESS SECTION (Video Left, Content Right)
py-32 px-4, max-w-6xl, grid lg:grid-cols-2 gap-20 items-center.
Left — Video:liquid-glass rounded-3xl aspect-[4/3] overflow-hidden
HLS video:
Right — Content:
Badge: "Smart Routing" + "New"
Heading: "Every Lead Finds / Its Perfect Path"
Body: "Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time."
Bullet list (3 items with w-1.5 h-1.5 rounded-full bg-primarydots): "AI-scored lead qualification", "Dynamic rep assignment", "Multi-touch attribution"
Buttons: "See It in Action" (hero) + "Read the Docs" (heroSecondary)
SECTION 4: REVERSE CHESS SECTION (Content Left, Video Right)
Same layout as Chess but reversed with order- classes for mobile-first.
Left — Content (order-2 lg:order-1):
Badge: "Pipeline Studio" + "Beta"
Heading: "Design Funnels / That Actually Close"
Body: "Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why."
4 stat cards in a grid grid-cols-2 gap-4, each liquid-glass rounded-2xl p-4:"47.2%" / "win-rate increase"
"12 days" / "shorter sales cycle"
"2.8x" / "deal velocity"
"91%" / "forecast accuracy"
Button: "Try Pipeline Studio" (hero)
Right — Video (order-1 lg:order-2):liquid-glass rounded-3xl aspect-[4/3]
HLS video:
SECTION 5: NUMBERS SECTION (Full-Width Background Video)
Background HLS Video:
Gradient overlay:
linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
Content (relative z-10, py-32):
Hero metric (centered): $4.7B in text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter+ label "Revenue influenced" + description. mb-24.
Bottom two metrics in a liquid-glass rounded-3xl p-12 grid md:grid-cols-2 with a vertical md:border-r border-border/50 divider:"18M" / "Leads processed monthly"
"99.97%" / "Platform uptime"
SECTION 6: TESTIMONIALS
py-32, centered header + 3-column card grid.
Header:
"Trusted by Revenue / Leaders Everywhere"
"Hear from the teams that made the switch."
3 Testimonial cards (liquid-glass rounded-3xl p-8), middle card offset with md:-translate-y-6:
Clara Whitfield, VP Revenue, Meridian Health (initials "CW")
Derek Tanaka, Growth Lead, Baseform (initials "DT")
Simone Reuter, CRO, Alpenhaus Group (initials "SR")
Each card: quoted text + divider + avatar circle (w-10 h-10 rounded-full bg-secondary) with initials + name/role.
SECTION 7: CTA + FOOTER WRAPPER (Background Video)
Wrapper component with shared background HLS video behind both CTA and Footer.
HLS Video:
Gradient overlay:
linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
CTA Section (relative z-10):
liquid-glass rounded-[2rem] p-12 sm:p-20 centered card
Heading: "Ready to Outpace / Your Pipeline Targets?"
Sub: "Join 2,400+ teams already accelerating revenue with APEX. No credit card required."
Buttons: "Start Free Today" (hero) + "Talk to Sales" (heroSecondary)
Footer (relative z-10):
5-column grid: Brand (2-col span with logo + tagline) + "Product" (Features, Pricing, Integrations, Changelog, Roadmap) + "Company" (About, Blog, Careers, Press) + "Resources" (Documentation, Community, Support, Status)
Bottom bar: "© 2026 APEX Inc." + Privacy / Terms / Cookies links
Borders: border-t border-border/30
KEY DEPENDENCIES
hls.js, @fontsource/geist-sans, lucide-react, class-variance-authority, tailwindcss-animate, @radix-ui/react-slot, shadcn/ui components, react-router-dom, @tanstack/react-query
PAGE STRUCTURE (Index.tsx)
<HeroSection />
<FeaturesSection />
<ChessSection />
<ReverseChessSection />
<NumbersSection />
<TestimonialsSection />
<CTAFooterWrapper /> (contains CTASection + FooterSect建议模型
Google Stitch · Claude / GPT-5.6 Sol
视频地址
https://media.goodcase.ai/media/video/google-stitch-claude-9c762b56d629.mp4
