# frontend/src/pages/GuidePage/

Public-facing user guide page at `/guide`. Renders `docs/USER-GUIDE.md` content as styled React components with screenshots.

## Files

| File | What | When to read |
| ---- | ---- | ------------ |
| `GuidePage.tsx` | Main page component with layout, nav bar, and section rendering | Modifying page structure or navigation |
| `GuideTableOfContents.tsx` | Sticky sidebar TOC (desktop) / collapsible accordion TOC (mobile) | Modifying TOC behavior or styling |
| `guideTypes.ts` | Section metadata (id, title, subSections) used by TOC and anchors | Adding/renaming sections |

## Subdirectories

| Directory | What | When to read |
| --------- | ---- | ------------ |
| `components/` | Shared components (GuideScreenshot, GuideTable) | Modifying screenshot or table rendering |
| `sections/` | 10 content section components (one per guide chapter) | Updating guide content |

## Architecture

- Static JSX components (no react-markdown dependency); content changes require editing section files directly
- Each section is 150-250 lines of JSX; individual files prevent a 2000+ line monolith
- GuideScreenshot provides consistent lazy loading (`loading="lazy"`), responsive sizing, and WebP support across all sections
- GuideTable renders MUI Table from `headers[]` and `rows[][]` arrays, preventing verbose MUI Table boilerplate in each section
- The page has its own public nav bar (matching HomePage style) because it is accessible without authentication
- `/guide` route is detected in App.tsx and rendered outside the authenticated `/garage/*` shell

## Key Patterns

- Section anchor IDs must match `guideTypes.ts` section IDs for TOC smooth scroll to work
- Screenshots stored in `frontend/public/guide/` as static assets with `loading="lazy"`
- TOC uses `window.innerWidth < 768` breakpoint: sidebar on desktop, MUI Accordion on mobile
- Guide link in HamburgerDrawer uses `window.location.href` (not Zustand navigation) because `/guide` is outside the `/garage/*` shell