Sentinel AI

在云境TS 中打开并复制 →

内容预览

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: 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-

……（完整源码请在站内查看）