Obsidian

在云境TS 中打开并复制 →

内容预览

Build a single-page website called **OBSIDIAN** — a dark, editorial, high-fashion tattoo-studio landing page with a scroll-scrubbed fullscreen video hero. Recreate it EXACTLY as specified below: every URL, color, Tailwind class, animation constant, easing curve, and line of copy is intentional. Do not substitute, paraphrase, or "improve" anything. ## 1. Stack & project setup - Vite + React 18 + TypeScript + Tailwind CSS 3.4 (default config, no theme extensions, no plugins). - Vite alias: `'@'` → `./src`. - Files: `src/main.tsx` (StrictMode + createRoot), `src/App.tsx`, `src/index.css`, `src/components/Navbar.tsx`, `src/components/ScrollVideoHero.tsx`, `src/components/ClosingSection.tsx`. - `App.tsx` renders, inside ``: ``, ``, `` — in that order. Nothing else. ## 2. index.html (head) - `OBSIDIAN` - Font stylesheet link (this is the exact font source — keep it): `` - Inline style to prevent white flash: `html,body,#root{background:#DADADA;margin:0}` ## 3. Global CSS (src/index.css) After the three `@tailwind` directives: - `* { margin: 0; padding: 0; box-sizing: border-box; }` - `html { scroll-behavior: auto; background: #DADADA; }` - `body { font-family: 'Helvetica Neue ME', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #DADADA; color: #ffffff; overflow-x: hidden; }` - Hide the scrollbar entirely: `::-webkit-scrollbar { width: 0px; background: transparent; }` Every headline/body element that sets a font inline uses `style={{ fontFamily: "'Helvetica Neue ME', 'He

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