Replace the placeholder Documentation and Status routes with structured, accessible content layouts

[greatest0fallt1me]

Description

This is a UI/UX issue. The /documentation and /status routes in src/App.tsx are single .placeholder-card blocks with one paragraph of copy. They lack any real structure (sections, headings hierarchy, service status indicators), so users cannot scan or navigate them.

Requirements and Context

• Give Documentation a sectioned layout with a logical heading hierarchy and an in-page table of contents.
• Give Status a list of services with accessible status indicators (not color-only) and a last-updated timestamp.
• Use design tokens and ensure both pages are responsive and themed.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/docs-status-layouts

2. Implement changes
   • src/App.tsx — expand the documentation/status route elements (or extract components)
   • src/index.css — token-driven section/status styles
3. Test and commit
   • npm run dev, open /documentation and /status, verify structure and contrast
   • Include test output and notes in the PR

Example commit message

feat: structured documentation and status page layouts

Acceptance Criteria

• Documentation has a sectioned layout with a TOC and correct heading order
• Status lists services with non-color-only status indicators and a timestamp
• Both pages are responsive and themed
• Heading hierarchy passes an automated a11y scan

Guidelines

• Meet WCAG 2.1 AA 1.4.1 (Use of Color) for status indicators
• Clear documentation and inline comments
• Timeframe: 96 hours