feat: improve phase 8

Author: gustavotoyota

docs/restart-plan/README.md

@@ -1,6 +1,6 @@
 # DeepNotes Restart Plan — Index
 
-> **Last updated:** 2026-05-31 (Phase 8 complete; marketing site builds 14 static HTML routes with vue-router + vite-ssg)  
+> **Last updated:** 2026-05-31 (Phase 8 complete; marketing site builds 20 static HTML routes with vue-router + vite-ssg, theme toggle, restored legacy assets)  
 > **This document replaces `docs/RESTART_PLAN.md`.** If a prior statement conflicts with this one, this version wins.
 
 ---
@@ -64,7 +64,7 @@ A criterion is **not met** until the verification command or check passes in CI.
 - [x] **Backlinks:** SPA displays incoming page backlinks.
 - [x] **Playwright:** E2E smoke test covers demo login → home → page → groups → logout.
 - [x] **Package split:** `@deepnotes/session` split into `@deepnotes/session-core`, `@deepnotes/groups`, `@deepnotes/pages`, `@deepnotes/billing`, `@deepnotes/realtime`. Session package now has 8 files (down from 57).
-- [x] **Marketing site:** `apps/marketing` has routable pages for `/`, `/pricing`, `/whitepaper`, `/help`, `/privacy-policy`, `/terms-of-service`. Build outputs 14 static HTML files (including 8 help article sub-routes). `pnpm lint`, `pnpm typecheck`, `pnpm build` pass with 0 errors.
+- [x] **Marketing site:** `apps/marketing` has routable pages for `/`, `/pricing`, `/whitepaper`, `/help`, `/privacy-policy`, `/terms-of-service`. Build outputs 20 static HTML files (including 14 help article sub-routes). `pnpm lint`, `pnpm typecheck`, `pnpm build` pass with 0 errors. Dark/light theme toggle, restored legacy assets (logo, whitepaper diagrams, use-case thumbnails), and Shadcn `Switch`/`Input` components integrated.
 - [ ] **Staging:** Hyperdrive + Postgres + Redis + WS proven in staging. Load test: 50 concurrent pages, p95 latency < 200 ms, row rate ≤ 20/page.
 - [x] **Scheduler:** Cron Trigger wired to `performScheduledCleanup` with integration test.
 - [ ] **Rollback plan:** Documented and rehearsed. Feature flag for REST-only collab fallback exists.

docs/restart-plan/phase-8-marketing.md

@@ -61,7 +61,7 @@ The product has a public-facing marketing site with SEO, onboarding funnel, and
 
 ## Exit criteria
 
-- [x] `apps/marketing` builds and outputs static HTML for `/`, `/pricing`, `/whitepaper`, `/help`, `/privacy-policy`, `/terms-of-service`. (14 total routes including 8 help article sub-routes.)
+- [x] `apps/marketing` builds and outputs static HTML for `/`, `/pricing`, `/whitepaper`, `/help`, `/privacy-policy`, `/terms-of-service`. (20 total routes including 14 help article sub-routes.)
 - [x] Pricing page has working Stripe CTA that initiates checkout session. (Links to `VITE_WEB_APP_URL` where authenticated checkout flow lives.)
 - [x] Lighthouse SEO score ≥ 90 on homepage. (`<meta name="description">`, `<title>`, semantic headings, static HTML output.)
 - [x] No route is a placeholder or stub ("Coming soon" is not acceptable). (All pages have full content mirroring legacy marketing text.)
@@ -72,15 +72,17 @@ The product has a public-facing marketing site with SEO, onboarding funnel, and
 
 | Page | File | Notes |
 |------|------|-------|
-| `/` | `src/pages/HomePage.vue` | Hero, 3 feature cards, 8 use-case emojis, bottom CTA. Content mirrors legacy homepage. |
-| `/pricing` | `src/pages/PricingPage.vue` | Basic/Pro plan cards, monthly/yearly toggle, feature checklists, CTA links to web app. |
-| `/whitepaper` | `src/pages/WhitepaperPage.vue` | Full legacy whitepaper content rendered with `marked`. Sticky section sidebar. |
-| `/help` | `src/pages/HelpPage.vue` | Article index with client-side search. 8 articles listed. |
-| `/help/:slug` | `src/pages/HelpArticlePage.vue` | 8 articles with content from legacy help pages. Static HTML generated for each slug via `includedRoutes`. |
+| `/` | `src/pages/HomePage.vue` | Hero, 3 feature cards, 8 use-case thumbnails (restored from legacy), bottom CTA. Content mirrors legacy homepage. |
+| `/pricing` | `src/pages/PricingPage.vue` | Basic/Pro plan cards, monthly/yearly Shadcn `Switch`, feature checklists, CTA links to web app. |
+| `/whitepaper` | `src/pages/WhitepaperPage.vue` | Full legacy whitepaper content rendered with `marked`. Sticky section sidebar. 4 legacy diagrams restored. |
+| `/help` | `src/pages/HelpPage.vue` | Article index with client-side search (Shadcn `Input`). 14 articles listed (6 legacy missing articles restored). |
+| `/help/:slug` | `src/pages/HelpArticlePage.vue` | 14 articles with content from legacy help pages. Static HTML generated for each slug via `includedRoutes`. |
 | `/privacy-policy` | `src/pages/PrivacyPolicyPage.vue` | Legacy privacy policy text, sticky sidebar. |
 | `/terms-of-service` | `src/pages/TermsOfServicePage.vue` | Legacy ToS text, sticky sidebar. |
 
-**Shared components:** `NavBar.vue`, `Footer.vue`, `DefaultLayout.vue`.
+**Shared components:** `NavBar.vue` (logo + theme toggle), `Footer.vue` (logo + socials), `DefaultLayout.vue`.
 **Router:** `vue-router` configured via `vite-ssg` in `src/router/index.ts`.
-**Styling:** Shadcn-vue `Button`, `Card` primitives + Tailwind CSS. `@tailwindcss/typography` plugin for markdown pages.
+**Styling:** Shadcn-vue `Button`, `Card`, `Switch`, `Input` primitives + Tailwind CSS. `@tailwindcss/typography` plugin for markdown pages.
+**Theme:** Dark/light toggle with `localStorage` persistence and `prefers-color-scheme` default.
 **Dependencies added:** `vue-router`, `marked`, `@tailwindcss/typography`.
+**Assets copied from legacy:** `white-logo-outline.webp`, 4 whitepaper diagrams, 8 use-case thumbnails, `favicon.ico`.

new-deepnotes/apps/marketing/index.html

@@ -1,9 +1,20 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DeepNotes</title>
+    <script>
+      (function () {
+        const stored = localStorage.getItem("deepnotes-theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
+        if (stored === "dark" || (!stored && prefersDark)) {
+          document.documentElement.classList.add("dark");
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="app"></div>