# 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.