feat: add landing page and docs website (#537)

* feat: add landing page and docs website package Add packages/website — a Vue 3 + Naive UI static site with landing page and documentation, sharing the Pure Ink monochrome design with the main app. Features: particle network hero animation, screenshot carousel, feature grid, install guide tabs, GitHub star history, scroll reveal animations, and Chinese/English bilingual support. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * chore: add favicon to website package Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: use dynamic theme param for star history chart Switch from CSS media query to JS-based dark mode detection so the star-history SVG matches the current theme toggle state. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: resolve TypeScript strict mode errors in website components - Remove unused isDark import in HeroSection - Add null check for canvas parent element - Rename unused img loop variable in ScreenshotsSection - Remove unused NIcon import in SiteHeader Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: resolve TS narrowing errors in canvas resize closure Use canvasRef.value directly inside resize() with local null check instead of relying on outer closure narrowing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-08 13:36:11 +08:00
parent b0e03ae838
commit 9edb76ac64
34 changed files with 2672 additions and 1 deletions
@@ -0,0 +1,14 @@
+// Website SCSS variables — pure constants (no CSS custom properties)
+// CSS custom properties are defined in global.scss (imported from client)
+
+$font-ui: 'Inter', system-ui, -apple-system, sans-serif;
+$font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+$breakpoint-mobile: 768px;
+
+$radius-sm: 6px;
+$radius-md: 10px;
+$radius-lg: 14px;
+
+$transition-fast: 0.15s ease;
+$transition-normal: 0.25s ease;
@@ -0,0 +1,132 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 14px;
+  line-height: 1.6;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: $font-ui;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--accent-primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--accent-hover);
+  }
+}
+
+code {
+  font-family: $font-code;
+  background: var(--code-bg);
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  font-size: 0.9em;
+}
+
+pre {
+  code {
+    display: block;
+    padding: 16px;
+    border-radius: $radius-md;
+    overflow-x: auto;
+  }
+}
+
+.section {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 80px 24px;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 48px 16px;
+  }
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 16px;
+  color: var(--text-primary);
+
+  @media (max-width: $breakpoint-mobile) {
+    font-size: 24px;
+  }
+}
+
+.section-desc {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 16px;
+  max-width: 640px;
+  margin: 0 auto 48px;
+}
+
+// ─── Scroll reveal animations ────────────────────────────
+
+.reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+
+  &.revealed {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.reveal-delay-1 { transition-delay: 0.08s; }
+.reveal-delay-2 { transition-delay: 0.16s; }
+.reveal-delay-3 { transition-delay: 0.24s; }
+.reveal-delay-4 { transition-delay: 0.32s; }
+
+// ─── Keyframes ────────────────────────────────────────────
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse-border {
+  0%, 100% { border-color: var(--border-color); }
+  50% { border-color: var(--text-muted); }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.7s ease both;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease both;
+}
+
+.animate-delay-1 { animation-delay: 0.1s; }
+.animate-delay-2 { animation-delay: 0.2s; }
+.animate-delay-3 { animation-delay: 0.3s; }
+.animate-delay-4 { animation-delay: 0.4s; }
+.animate-delay-5 { animation-delay: 0.5s; }