랜딩 페이지: D3RO 브랜드 프로모션 사이트 + GitHub Pages 배포

- Vite + React 19 + Tailwind CSS
- 4가지 디자인 레퍼런스 통합 (CRT 스크린, 크로스헤어, 노이즈, 인스트루먼트)
- 섹션 9개: Hero, Features, HowItWorks, Privacy, Pricing, FAQ, CTA, Header, Footer
- 재사용 컴포넌트 8개 (Badge, Container, InstrumentCard, GlowButton 등)
- i18n 10개 국어 (en/ko/ja/zh/es/fr/de/pt/ru/vi)
- GitHub Pages 자동 배포 워크플로우

site/src/tokens.ts

@@ -0,0 +1,109 @@
+/**
+ * D3RO Voice Landing Page - Centralized Design Tokens
+ *
+ * All visual constants live here. Components reference these tokens
+ * instead of hardcoding colors, spacing, or typography values.
+ *
+ * Tailwind classes map to these same values via tailwind.config.js.
+ * Use tokens when building inline styles or JS-driven visuals.
+ */
+
+// ── Colors ──────────────────────────────────────────────
+export const color = {
+  brand: {
+    amber: '#f25b29',
+    amberLight: '#ff7a4d',
+    amberDark: '#c44a22',
+    amberGlow: 'rgba(242,91,41,0.6)',
+    amberDim: 'rgba(242,91,41,0.15)',
+    amberMuted: 'rgba(242,91,41,0.08)',
+  },
+  surface: {
+    950: '#0a0a0c',
+    900: '#0d0d0f',
+    800: '#131315',
+    700: '#19191b',
+    600: '#1e1f21',
+    500: '#242427',
+    400: '#2a2a2d',
+    300: '#333338',
+    200: '#3a3b3f',
+    100: '#4a4b50',
+  },
+  neutral: {
+    50: '#fafafa',
+    100: '#f0f0f1',
+    200: '#d4d4d8',
+    300: '#a1a1aa',
+    400: '#71717a',
+    500: '#52525b',
+  },
+  semantic: {
+    success: '#22c55e',
+    warning: '#eab308',
+    error: '#ef4444',
+  },
+} as const
+
+// ── Typography ──────────────────────────────────────────
+export const font = {
+  display: '"Space Grotesk", sans-serif',
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: '"JetBrains Mono", "Fira Code", monospace',
+} as const
+
+// ── Spacing (px) ────────────────────────────────────────
+export const space = {
+  section: { y: 120, yMobile: 80 },
+  grid: { gap: 16, gapLg: 24 },
+  container: { maxWidth: 1280, px: 24, pxLg: 48 },
+} as const
+
+// ── Shadows ─────────────────────────────────────────────
+export const shadow = {
+  insetPanel: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
+  chassis: '0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)',
+  glowSm: '0 0 10px rgba(242,91,41,0.3)',
+  glowMd: '0 0 20px rgba(242,91,41,0.25), 0 0 40px rgba(242,91,41,0.1)',
+  glowLg: '0 0 30px rgba(242,91,41,0.3), 0 0 60px rgba(242,91,41,0.15), 0 0 90px rgba(242,91,41,0.05)',
+} as const
+
+// ── Radii ───────────────────────────────────────────────
+export const radius = {
+  instrument: '2px',
+  panel: '6px',
+  card: '12px',
+  pill: '999px',
+} as const
+
+// ── Z-Index ─────────────────────────────────────────────
+export const zIndex = {
+  header: 50,
+  overlay: 40,
+  modal: 60,
+} as const
+
+// ── Timing ──────────────────────────────────────────────
+export const timing = {
+  fast: '150ms',
+  normal: '250ms',
+  slow: '400ms',
+  easeOut: 'cubic-bezier(0.16, 1, 0.3, 1)',
+} as const
+
+// ── Feature Labels ──────────────────────────────────────
+export const tierLabel = {
+  free: 'FREE',
+  pro: 'PRO',
+  proPlus: 'PRO+',
+} as const
+
+// ── Nav Items ───────────────────────────────────────────
+// Labels come from i18n (t.nav.*). Only hrefs and keys are defined here.
+export const navItems = [
+  { key: 'features' as const, href: '#features' },
+  { key: 'pipeline' as const, href: '#pipeline' },
+  { key: 'privacy' as const, href: '#privacy' },
+  { key: 'pricing' as const, href: '#pricing' },
+  { key: 'faq' as const, href: '#faq' },
+] as const