refact: update ui

docs/superpowers/specs/2026-03-25-website-restructure-design.md

@@ -0,0 +1,75 @@
+# Website Restructure Design
+
+## Overview
+Restructure the single-page OCR app into a multi-section website with Home, Docs, Blog, Pricing, Contact modules while maintaining the core OCR tool functionality in a dedicated workspace page.
+
+## Routes
+
+| Route | Page | SEO | Layout |
+|-------|------|-----|--------|
+| `/` | HomePage (Hero + Features + HowItWorks + Pricing + Contact) | Prerender | MarketingLayout |
+| `/app` | WorkspacePage (current 3-panel OCR layout) | noindex | AppLayout |
+| `/docs` | DocsListPage | Prerender | MarketingLayout |
+| `/docs/:slug` | DocDetailPage | Prerender | MarketingLayout |
+| `/blog` | BlogListPage | Prerender | MarketingLayout |
+| `/blog/:slug` | BlogDetailPage | Prerender | MarketingLayout |
+| `/auth/google/callback` | AuthCallbackPage | noindex | None |
+
+## Home Page Sections
+1. **Hero** — Product tagline + mini upload demo + CTA to `/app`
+2. **Features** — Feature cards grid (formula recognition, multi-format export, etc.)
+3. **How it works** — 3-step process
+4. **Pricing** — Static price cards (Free / Pro / Enterprise), payment integration later
+5. **Contact** — Contact info display + form submission
+
+## SEO Strategy
+- **Prerendering**: `vite-plugin-prerender` for static HTML generation of marketing pages
+- **Meta tags**: `react-helmet-async` for per-page title, description, OG/Twitter cards
+- **Structured data**: JSON-LD (SoftwareApplication, Article, TechArticle)
+- **Sitemap**: Auto-generated at build time from routes + markdown content
+- **i18n SEO**: `hreflang` tags for zh/en
+- `/app` route gets `noindex`
+
+## Markdown Content System
+```
+content/
+├── docs/{en,zh}/*.md
+└── blog/{en,zh}/*.md
+```
+- Frontmatter: title, description, slug, date, tags, order, cover
+- Build script scans content/, parses frontmatter, generates manifest JSON
+- Body compiled via remark + rehype (reusing existing KaTeX pipeline)
+
+## Component Architecture
+
+### Layouts
+- `MarketingLayout` — MarketingNavbar + Outlet + Footer
+- `AppLayout` — AppNavbar + Outlet
+
+### New Pages
+- `src/pages/HomePage.tsx`
+- `src/pages/WorkspacePage.tsx` (migrated from App.tsx)
+- `src/pages/DocsListPage.tsx`
+- `src/pages/DocDetailPage.tsx`
+- `src/pages/BlogListPage.tsx`
+- `src/pages/BlogDetailPage.tsx`
+
+### Home Sections
+- `src/components/home/HeroSection.tsx`
+- `src/components/home/FeaturesSection.tsx`
+- `src/components/home/HowItWorksSection.tsx`
+- `src/components/home/PricingSection.tsx`
+- `src/components/home/ContactSection.tsx`
+
+### Shared Layout Components
+- `src/components/layout/MarketingNavbar.tsx`
+- `src/components/layout/AppNavbar.tsx` (evolved from current Navbar.tsx)
+- `src/components/layout/Footer.tsx`
+
+## Migration
+- `App.tsx` core logic → `WorkspacePage.tsx`
+- `Navbar.tsx` → split into `MarketingNavbar` + `AppNavbar`
+- All existing components (LeftSidebar, FilePreview, ResultPanel, etc.) unchanged, referenced by WorkspacePage
+
+## Lazy Loading
+All page components use `React.lazy()` + `Suspense` to keep initial bundle small.