提示词
使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui，以及作为背景嵌入的 Spline 3D scene，为一家名为“SENTINEL AI”的安防公司创建一个全屏深色 hero landing page。技术栈使用 @splinetool/react-spline 和 @splinetool/runtime 嵌入 3D 内容。以下是全部细节：
字体：
Google Fonts“Sora”，字重为 300、400、500、600、700。在 index.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=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet">
通过 Tailwind config 将 font-sora 设置为 body 字体：fontFamily: { sora: ["Sora", "sans-serif"] }，并在 body 上应用 font-sora antialiased。
配色主题（全部使用 HSL CSS custom properties，仅深色模式，无浅色模式）：
--background: 0 0% 10%（深炭灰色）
--foreground: 0 0% 96%（近白色）
--primary: 119 99% 46%（鲜绿色）
--primary-foreground: 0 0% 4%（近黑色）
--secondary: 0 0% 18%
--secondary-foreground: 0 0% 96%
--muted: 0 0% 16%
--muted-foreground: 0 0% 60%
--accent: 119 99% 46%（与 primary 相同的鲜绿色）
--accent-foreground: 0 0% 4%
--destructive: 0 84% 60%
--border: 0 0% 20%
--input: 0 0% 20%
--ring: 119 99% 46%
--radius: 0.5rem
--nav-button: 0 0% 18%
--hero-bg: 0 0% 8%（最深的背景色，接近黑色）
在 Tailwind config 中使用 hsl(var(--variable)) 模式映射这些属性。添加自定义颜色 token：nav-button 和 hero-bg。
自定义动画（Tailwind config keyframes + animation）：
fade-up keyframe：
0%: opacity: 0, transform: translateY(20px), filter: blur(4px)
100%: opacity: 1, transform: translateY(0), filter: blur(0)
动画：fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards
fade-in keyframe：
0%: opacity: 0
100%: opacity: 1
动画：fade-in 0.5s ease-out forwards
导航栏（固定、透明、悬浮在 Spline scene 上方）：
fixed top-0 left-0 right-0 z-50，水平 flex，justify-between，padding px-8 lg:px-16 py-5
左侧：Logo 文本“SENTINEL”——text-foreground text-xl font-semibold tracking-tight
中间：导航链接数组：["Services", "About Us", "Projects", "Team", "Contacts"]——每项使用 text-sm text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest。链接使用 href={#section-name}。在移动端隐藏（hidden md:flex），gap-8。
右侧：“Get Quote”按钮，使用带有自定义 navCta variant 的 shadcn Button：text-foreground bg-nav-button hover:bg-nav-button/80 active:scale-[0.97] transition-all。Size lg，class 为 hidden md:inline-flex rounded-lg uppercase text-xs tracking-widest px-6。
HERO SECTION（全屏，内容位于左下角）：
结构：
外层 <section>：relative min-h-screen flex items-end bg-hero-bg overflow-hidden
Spline 3D Background（absolute，全尺寸）：通过 React.lazy(() => import("@splinetool/react-spline")) 延迟加载，并包裹在 <Suspense> 中，fallback 为 <div className="absolute inset-0 bg-hero-bg" />。Spline component 使用 scene="https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode" 和 className="w-full h-full"。放置在 <div className="absolute inset-0"> 内。
深色 overlay：<div className="absolute inset-0 bg-black/30 z-[1] pointer-events-none" />
内容容器：relative z-10 pointer-events-none w-full max-w-[90%] sm:max-w-md lg:max-w-2xl px-6 md:px-10 pb-10 md:pb-10 pt-32
内容元素（全部使用错开的 animate-fade-up，初始为 opacity-0）：
Heading（延迟 0.2s）：<h1>，文本由白色的“SENTINEL”和 primary 绿色的“ AI”组成。Classes：text-[clamp(3rem,8vw,6rem)] font-bold leading-[1.05] tracking-[-0.05em] text-foreground mb-2 md:mb-4 uppercase。“AI”部分包裹在 <span className="text-primary"> 中。
Subheading（延迟 0.4s）：<p>——“我们正确地实施安防系统。”——text-foreground/80 text-[clamp(1.125rem,2.5vw,1.875rem)] font-light mb-3 md:mb-6
Description（延迟 0.55s）：<p>——“数日内建成企业级安防系统。采用 zero-trust architecture 部署 AI 驱动的监控系统。为您的整个设施配置智能门禁。一切不仅做得快，更要做得正确。”——text-muted-foreground text-[clamp(0.875rem,1.5vw,1.25rem)] font-light mb-4 md:mb-8
两个 CTA 按钮（延迟 0.7s）：包裹在 flex flex-wrap gap-3 font-bold 中。两者均为普通 <button> 元素（不是 shadcn Button），并带有 pointer-events-auto（由于父元素为 pointer-events-none，以此重新启用点击）：
“预约通话”：bg-primary text-primary-foreground px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-110 transition-all active:scale-[0.97]
“我们的项目”：bg-white text-background px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-90 transition-all active:scale-[0.97]
信任信息行（延迟 0.85s）：<p>——“值得信赖的安防合作伙伴。Columbus, OH。已部署 12 套系统。”——text-muted-foreground/60 text-xs font-light mt-4 md:mt-6
所有动画元素都使用 style={{ animationDelay: "Xs" }} 设置错开时间，并结合 opacity-0 animate-fade-up classes。
页面包装器（Index.tsx）：
简单包装器：<div className="bg-hero-bg min-h-screen">，其中包含 <Navbar /> 和 <HeroSection />。
关键依赖项：
用于嵌入 3D Spline 内容的 @splinetool/react-spline 和 @splinetool/runtime
tailwindcss-animate plugin
带有自定义 variants（navCta、hero、heroOutline）的 shadcn/ui Button component
用于按钮 variants 的 class-variance-authority
重要说明：
Spline scene URL 为 https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode——这是所使用的确切 3D scene
整个内容区域设置了 pointer-events-none，使点击可以穿透至 Spline scene，但按钮通过 pointer-events-auto 重新启用点击
Heading、Subheading 和 Description 使用 clamp() 实现响应式流体排版
内容锚定在 viewport 左下角（section 上使用 flex items-end，内容上设置 padding-bottom）
移动端没有 hamburger menu——导航链接和 CTA 直接隐藏（hidden md:flex / hidden md:inline-flex）原文提示词（English）
Create a full-screen dark hero landing page for a security company called "SENTINEL AI" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and an embedded Spline 3D scene as the background. The tech stack uses @splinetool/react-spline and @splinetool/runtime for the 3D embed. Here is every detail:
FONT:
Google Fonts "Sora" with weights 300, 400, 500, 600, 700. Load it in index.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=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Set font-sora as the body font via Tailwind config: fontFamily: { sora: ["Sora", "sans-serif"] } and apply font-sora antialiased on body.
COLOR THEME (all HSL CSS custom properties, dark only, no light mode):
--background: 0 0% 10% (dark charcoal)
--foreground: 0 0% 96% (near-white)
--primary: 119 99% 46% (vivid green)
--primary-foreground: 0 0% 4% (near-black)
--secondary: 0 0% 18%
--secondary-foreground: 0 0% 96%
--muted: 0 0% 16%
--muted-foreground: 0 0% 60%
--accent: 119 99% 46% (same vivid green as primary)
--accent-foreground: 0 0% 4%
--destructive: 0 84% 60%
--border: 0 0% 20%
--input: 0 0% 20%
--ring: 119 99% 46%
--radius: 0.5rem
--nav-button: 0 0% 18%
--hero-bg: 0 0% 8% (the darkest background, nearly black)
Map these in Tailwind config using hsl(var(--variable)) pattern. Add custom color tokens: nav-button and hero-bg.
CUSTOM ANIMATIONS (Tailwind config keyframes + animation):
fade-up keyframe:
0%: opacity: 0, transform: translateY(20px), filter: blur(4px)
100%: opacity: 1, transform: translateY(0), filter: blur(0)
Animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards
fade-in keyframe:
0%: opacity: 0
100%: opacity: 1
Animation: fade-in 0.5s ease-out forwards
NAVBAR (fixed, transparent, floating over the Spline scene):
fixed top-0 left-0 right-0 z-50, horizontal flex, justify-between, padding px-8 lg:px-16 py-5
Left: Logo text "SENTINEL" -- text-foreground text-xl font-semibold tracking-tight
Center: Nav links array: ["Services", "About Us", "Projects", "Team", "Contacts"] -- each is text-sm text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest. Links use href={#section-name}. Hidden on mobile (hidden md:flex), with gap-8.
Right: "Get Quote" button using shadcn Button with a custom navCta variant: text-foreground bg-nav-button hover:bg-nav-button/80 active:scale-[0.97] transition-all. Size lg, with classes hidden md:inline-flex rounded-lg uppercase text-xs tracking-widest px-6.
HERO SECTION (full-screen, content at bottom-left):
Structure:
Outer <section>: relative min-h-screen flex items-end bg-hero-bg overflow-hidden
Spline 3D Background (absolute, full-size): Lazy-loaded via React.lazy(() => import("@splinetool/react-spline")) wrapped in <Suspense> with a fallback <div className="absolute inset-0 bg-hero-bg" />. The Spline component uses scene="https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode" and className="w-full h-full". Placed inside <div className="absolute inset-0">.
Dark overlay: <div className="absolute inset-0 bg-black/30 z-[1] pointer-events-none" />
Content container: relative z-10 pointer-events-none w-full max-w-[90%] sm:max-w-md lg:max-w-2xl px-6 md:px-10 pb-10 md:pb-10 pt-32
Content elements (all with staggered animate-fade-up, starting opacity-0):
Heading (delay 0.2s): <h1> with text "SENTINEL" in white + " AI" in primary green. Classes: text-[clamp(3rem,8vw,6rem)] font-bold leading-[1.05] tracking-[-0.05em] text-foreground mb-2 md:mb-4 uppercase. The "AI" part is wrapped in <span className="text-primary">.
Subheading (delay 0.4s): <p> -- "We implement security correctly." -- text-foreground/80 text-[clamp(1.125rem,2.5vw,1.875rem)] font-light mb-3 md:mb-6
Description (delay 0.55s): <p> -- "Enterprise security systems built in days. AI-powered surveillance deployed with zero-trust architecture. Smart access control set up for your entire facility. All of it done right, not just fast." -- text-muted-foreground text-[clamp(0.875rem,1.5vw,1.25rem)] font-light mb-4 md:mb-8
Two CTA buttons (delay 0.7s): Wrapped in flex flex-wrap gap-3 font-bold. Both are plain <button> elements (not shadcn Button) with pointer-events-auto (to re-enable clicks since parent is pointer-events-none):
"Book a Call": bg-primary text-primary-foreground px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-110 transition-all active:scale-[0.97]
"Our Work": bg-white text-background px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-90 transition-all active:scale-[0.97]
Trust line (delay 0.85s): <p> -- "Trusted security partner. Columbus, OH. 12 systems deployed." -- text-muted-foreground/60 text-xs font-light mt-4 md:mt-6
All animated elements use style={{ animationDelay: "Xs" }} for the stagger, combined with the opacity-0 animate-fade-up classes.
PAGE WRAPPER (Index.tsx):
Simple wrapper: <div className="bg-hero-bg min-h-screen"> containing <Navbar /> and <HeroSection />.
KEY DEPENDENCIES:
@splinetool/react-spline and @splinetool/runtime for the 3D Spline embed
tailwindcss-animate plugin
shadcn/ui Button component with custom variants (navCta, hero, heroOutline)
class-variance-authority for button variants
IMPORTANT NOTES:
The Spline scene URL is https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode -- this is the exact 3D scene used
The entire content area has pointer-events-none so clicks pass through to the Spline scene, but buttons re-enable with pointer-events-auto
Responsive fluid typography uses clamp() for the heading, subheading, and description
The content is anchored to the bottom-left of the viewport (flex items-end on the section + padding-bottom on the content)
No hamburger menu on mobile -- the nav links and CTA simply hide (hidden md:flex / hidden md:inline-flex)
