提示词
为“Neuralyn”——一款分析仪表板 SaaS——创建一个深色落地页。使用 React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui。
字体
正文/UI 使用通过 @fontsource/inter 引入的 Inter（400、500、600、700）
斜体强调词使用通过 @fontsource/instrument-serif 引入的 Instrument Serif（400、400-italic）
颜色主题（全部使用 HSL，默认在 :root 中启用深色模式）
背景：0 0% 0%（纯黑）
前景：0 0% 100%（纯白）
弱化前景：0 0% 65%
卡片：0 0% 5%
边框：0 0% 20%
首屏副标题：210 17% 95%
页面结构
Section 1：首屏（占满视口高度，overflow-hidden）
导航栏——横向布局，内边距 px-8 md:px-28 py-4：
左侧：Logo 图片 + “Neuralyn”文字（text-xl font-bold tracking-tight）+ 导航链接（Home、带 ChevronDown 图标的 Services、Reviews、Contact us）——移动端隐藏链接，链接之间 gap-1，Logo 与链接之间 gap-12 md:gap-20
右侧：“Sign In”按钮——纯白背景（bg-foreground）、黑色文字（text-background）、rounded-lg text-sm font-semibold，悬停时进行 opacity transition
首屏内容——居中纵向排列，mt-16 md:mt-20 px-4：
标签胶囊：一个“liquid glass”风格的胶囊（liquid-glass class），内部包含“New”徽章（白色背景、黑色文字、rounded-md text-sm font-medium px-2 py-0.5）+ 使用 text-sm font-medium text-muted-foreground 的“Say Hello to Corewave v3.2”。胶囊设置 px-3 py-2 rounded-lg mb-6。
标题：text-5xl md:text-7xl、tracking-[-2px]、font-medium、leading-tight md:leading-[1.15] mb-3。文字：“Your Insights.” / “One Clear Overview.”——其中“Overview”使用 Instrument Serif italic（font-serif italic font-normal）
副标题：text-lg font-normal leading-6 opacity-90 mb-8，颜色使用 CSS 变量 --hero-subtitle。文字：“Neuralyn helps teams track metrics, goals, and progress with precision.”，在“goals,”后添加一个 <br/>
CTA 按钮：“Get Started for Free”——纯白色（bg-foreground text-background），rounded-full px-8 py-3.5 text-base font-medium，whileHover: scale 1.03，whileTap: scale 0.98
仪表板 + 视频区域——使用 w-screen 和 marginLeft: calc(-50vw + 50%) 技巧占满整个视口宽度，aspect-ratio: 16/9，positioned relative：
背景视频：<video>，绝对定位，inset-0 w-full h-full object-cover。URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
仪表板图片：绝对定位，居中，max-w-5xl w-[90%] rounded-2xl，mixBlendMode: "luminosity"。具有视差滚动效果（y: 0→-250）。
底部渐变淡出：绝对定位在 section 底部，h-40，从背景色到透明色的渐变，z-30，pointer-events-none。
视差滚动效果（Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform）：
首屏文字内容组：y: [0, -200] 和 opacity: [1, 0]（在滚动的前 50% 逐渐淡出）
仪表板图片：y: [0, -250]
入场动画：交错的 initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}：
标签胶囊：y: 10，duration 0.5s，delay 0
标题：y: 20，duration 0.6s，delay 0.1
副标题：y: 20，duration 0.6s，delay 0.2
CTA：y: 20，duration 0.6s，delay 0.3
仪表板区域：y: 40，duration 0.8s，delay 0.4
Liquid Glass CSS
.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;
}
Section 2：客户评价（min-h-screen，居中，py-24 md:py-32 px-8 md:px-28）
引号符号图片（w-14 h-10 object-contain）
客户评价文字（text-4xl md:text-5xl font-medium leading-[1.2]，包裹在 flex flex-wrap 中）：“Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics.”
滚动驱动的逐词显现：每个单词都是一个带有 mr-[0.3em] 的 <motion.span>。使用 useScroll({ target: containerRef, offset: ["start end", "end center"] })。每个单词映射到连续区间 [i/total, (i+1)/total] → opacity: [0.2, 1] 和 color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"]。
末尾的 ” 引号使用 text-muted-foreground ml-2
作者行（flex items-center gap-4）：头像图片（w-14 h-14 rounded-full border-[3px] border-foreground object-cover）+ 姓名“Brooklyn Simmons”（text-base font-semibold leading-7 text-foreground）+ 职位“Product Manager”（text-sm font-normal leading-5 text-muted-foreground）
布局：max-w-3xl mx-auto，内容左对齐（items-start），元素之间 gap-10
所需资源：
logo.png——小型 Logo 图标
hero-dashboard.png——仪表板截图
quote-symbol.png——装饰性引号标记
testimonial-avatar.png——圆形头像原文提示词（English）
Create a dark landing page for "Neuralyn" — an analytics dashboard SaaS. Use React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui.
Fonts
Inter (400, 500, 600, 700) for body/UI via @fontsource/inter
Instrument Serif (400, 400-italic) for the italic accent word via @fontsource/instrument-serif
Color Theme (all HSL, dark mode by default in :root)
Background: 0 0% 0% (pure black)
Foreground: 0 0% 100% (pure white)
Muted foreground: 0 0% 65%
Card: 0 0% 5%
Border: 0 0% 20%
Hero subtitle: 210 17% 95%
Page Structure
Section 1: Hero (full viewport height, overflow-hidden)
Navbar — horizontal, padded px-8 md:px-28 py-4:
Left: Logo image + "Neuralyn" text (text-xl font-bold tracking-tight) + nav links (Home, Services with ChevronDown icon, Reviews, Contact us) — links hidden on mobile, gap-1 between links, gap-12 md:gap-20 between logo and links
Right: "Sign In" button — solid white background (bg-foreground), black text (text-background), rounded-lg text-sm font-semibold, hover opacity transition
Hero Content — centered column, mt-16 md:mt-20 px-4:
Tag pill: A "liquid glass" styled pill (liquid-glass class) with inner "New" badge (white bg, black text, rounded-md text-sm font-medium px-2 py-0.5) + "Say Hello to Corewave v3.2" in text-sm font-medium text-muted-foreground. Pill has px-3 py-2 rounded-lg mb-6.
Title: text-5xl md:text-7xl, tracking-[-2px], font-medium, leading-tight md:leading-[1.15] mb-3. Text: "Your Insights." / "One Clear Overview." — the word "Overview" is in Instrument Serif italic (font-serif italic font-normal)
Subtitle: text-lg font-normal leading-6 opacity-90 mb-8, color uses CSS variable --hero-subtitle. Text: "Neuralyn helps teams track metrics, goals, and progress with precision." with a <br/> after "goals,"
CTA Button: "Get Started for Free" — solid white (bg-foreground text-background), rounded-full px-8 py-3.5 text-base font-medium, whileHover: scale 1.03, whileTap: scale 0.98
Dashboard + Video Area — full viewport width using w-screen with marginLeft: calc(-50vw + 50%) trick, aspect-ratio: 16/9, positioned relative:
Background video: <video>, absolutely positioned inset-0 w-full h-full object-cover. URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Dashboard image: Absolutely positioned, centered, max-w-5xl w-[90%] rounded-2xl, mixBlendMode: "luminosity". Has parallax scroll (y: 0→-250).
Bottom gradient fade: Absolutely positioned at bottom of section, h-40, gradient from background to transparent, z-30, pointer-events-none.
Parallax Scroll Effects (Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform):
Hero text content group: y: [0, -200] and opacity: [1, 0] (fades over first 50% of scroll)
Dashboard image: y: [0, -250]
Entrance Animations: Staggered initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}:
Tag pill: y: 10, duration 0.5s, delay 0
Title: y: 20, duration 0.6s, delay 0.1
Subtitle: y: 20, duration 0.6s, delay 0.2
CTA: y: 20, duration 0.6s, delay 0.3
Dashboard area: y: 40, duration 0.8s, delay 0.4
Liquid Glass CSS
.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;
}
Section 2: Testimonial (min-h-screen, centered, py-24 md:py-32 px-8 md:px-28)
Quote symbol image (w-14 h-10 object-contain)
Testimonial text (text-4xl md:text-5xl font-medium leading-[1.2], wrapped in flex flex-wrap): "Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics."
Scroll-driven word reveal: Each word is a <motion.span> with mr-[0.3em]. Uses useScroll({ target: containerRef, offset: ["start end", "end center"] }). Each word maps to a sequential range [i/total, (i+1)/total] → opacity: [0.2, 1] and color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"].
Closing " quotation mark in text-muted-foreground ml-2
Author row (flex items-center gap-4): Avatar image (w-14 h-14 rounded-full border-[3px] border-foreground object-cover) + name "Brooklyn Simmons" (text-base font-semibold leading-7 text-foreground) + role "Product Manager" (text-sm font-normal leading-5 text-muted-foreground)
Layout: max-w-3xl mx-auto, content left-aligned (items-start), gap-10 between elements
Assets needed:
logo.png — small logo icon
hero-dashboard.png — dashboard screenshot
quote-symbol.png — decorative quote mark
testimonial-avatar.png — circular headshot
