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

Hero — Product tagline + mini upload demo + CTA to /app
Features — Feature cards grid (formula recognition, multi-format export, etc.)
How it works — 3-step process
Pricing — Static price cards (Free / Pro / Enterprise), payment integration later
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.

2.9 KiB Raw Blame History