# Implementation Plan: Página Sobre

**Branch**: `021-pagina-sobre` | **Date**: 2026-04-17 | **Spec**: [spec.md](./spec.md)
**Input**: Criar página estática `/sobre` com hero, história, diferenciais, métricas, equipe e CTA final.

## Summary

Criar `AboutPage.tsx` — uma página 100% estática com seis seções institucionais — e integrá-la ao roteamento SPA via `App.tsx`. Adicionalmente, atualizar o link "Sobre" no `Footer.tsx` de `#sobre` para `/sobre` (navegação client-side via `<Link>`). Sem backend, sem chamadas a API, sem novo estado global.

## Technical Context

**Language/Version**: TypeScript 5.5 / React 18  
**Primary Dependencies**: react-router-dom v6 (já instalado), Tailwind CSS 3.4 (já configurado)  
**Storage**: N/A — página 100% estática  
**Testing**: N/A — componente puramente estático  
**Target Platform**: SPA browser (desktop + mobile, 320 px → 1920 px)  
**Project Type**: Web application — frontend SPA  
**Performance Goals**: Tempo de renderização equivalente ao das demais páginas estáticas do site  
**Constraints**: Layout responsivo sem overflow horizontal; sem chamadas a APIs; WhatsApp placeholder `5500000000000`  
**Scale/Scope**: 1 nova page, 2 arquivos editados

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

| Princípio | Status | Observação |
|-----------|--------|------------|
| I. Design-First | ✅ PASS | Todos os tokens do DESIGN.md são aplicados: `bg-canvas`, `bg-panel`, `text-text-primary/secondary/tertiary`, `border-white/[0.06]`, `rounded-2xl`, accent `#5e6ad2`. Nenhum inline style fora do sistema. |
| II. Separation of Concerns | ✅ PASS | Feature 100% frontend. Sem nenhuma chamada ao backend Flask. |
| III. Spec-Driven Development | ✅ PASS | `spec.md` aprovado; ciclo plan → tasks → implement respeitado. |
| IV. Data Integrity | ✅ N/A | Sem dados de API, sem banco de dados. Todo conteúdo é estático. |
| V. Security | ✅ PASS | Página pública, sem segredos, sem autenticação. Link WhatsApp usa `wa.me` com placeholder substituível. |
| VI. Simplicity First | ✅ PASS | 1 componente de page, sem abstração extra, sem helpers, sem contexto novo. |

**Resultado**: Sem violações. Pode prosseguir para Phase 0.

## Project Structure

### Documentation (this feature)

```text
specs/021-pagina-sobre/
├── plan.md              # Este arquivo
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output
├── quickstart.md        # Phase 1 output
└── tasks.md             # Phase 2 output (/speckit.tasks — NÃO gerado aqui)
```

### Source Code (repository root)

```text
frontend/
└── src/
    ├── pages/
    │   └── AboutPage.tsx          ← NOVO
    ├── App.tsx                    ← EDITADO (nova rota /sobre)
    └── components/
        └── Footer.tsx             ← EDITADO (href #sobre → /sobre via <Link>)
```

**Structure Decision**: Web application — apenas camada frontend. Sem novos serviços, hooks, contextos ou tipos compartilhados. `AboutPage.tsx` segue exatamente o padrão de `PrivacyPolicyPage.tsx`.

## Complexity Tracking

*Nenhuma violação de Constitution detectada. Seção omitida conforme orientação do template.*