# Implementation Plan: Página de Política de Privacidade + Link no Footer **Branch**: `master` | **Date**: 2026-04-17 | **Spec**: [specs/020-politica-de-privacidade/spec.md](spec.md) **Input**: Feature specification from `specs/020-politica-de-privacidade/spec.md` ## Summary Criar a página estática `/politica-de-privacidade` com 8 seções LGPD e adicioná-la ao sistema de roteamento SPA. Adicionar link client-side (``) no Footer existente. Feature 100% frontend — sem backend, sem API, sem estado. ## 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 — componente puramente estático **Testing**: `npm run build` (TypeScript type-check via tsc); verificação visual manual **Target Platform**: Browser (SPA — Vite/React) **Project Type**: Web application (frontend only) **Performance Goals**: Navegação client-side < 500 ms (SC-003); sem requisições de rede na carga da página **Constraints**: Layout max-width 800px; responsivo ≥ 320px sem overflow horizontal; conformidade total com tema dark do DESIGN.md **Scale/Scope**: 1 componente novo (`PrivacyPolicyPage.tsx`), 2 arquivos modificados (`App.tsx`, `Footer.tsx`) ## Constitution Check *GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.* | Princípio | Status | Evidência | |---|---|---| | **I. Design-First** | ✅ PASS | Componente usa `bg-canvas`, `text-text-primary`, `text-text-secondary`, `border-white/[0.06]`, `fontFeatureSettings: '"cv01","ss03"'` — tokens idênticos às demais páginas. Max-width 800px, responsivo. Nenhum estilo inline que desvie do design system. | | **II. Separation of Concerns** | ✅ PASS | Feature 100% frontend. Nenhuma rota Flask nova. Nenhum modelo de dados alterado. | | **III. Spec-Driven Development** | ✅ PASS | `spec.md` aprovado com user stories e acceptance scenarios. Ordem: spec → plan → tasks → implement. | | **IV. Data Integrity** | ✅ N/A | Sem entidades de banco. Sem Pydantic schemas. Sem migrations. | | **V. Security** | ✅ PASS | Rota pública sem guards — correto (política de privacidade é pública). Nenhum token ou secret no frontend. | | **VI. Simplicity First** | ✅ PASS | Componente stateless. Sem hooks. Sem services. Sem abstrações novas. 3 arquivos alterados/criados. Conteúdo inline no componente. | **Resultado**: Nenhuma violação. Pode avançar para implementação. --- ## Project Structure ### Documentation (this feature) ```text specs/020-politica-de-privacidade/ ├── plan.md ← este arquivo ├── research.md ← gerado (Phase 0) ├── data-model.md ← gerado (Phase 1) ├── quickstart.md ← gerado (Phase 1) └── tasks.md ← será gerado pelo /speckit.tasks ``` ### Source Code (arquivos desta feature) ```text frontend/ ├── src/ │ ├── pages/ │ │ └── PrivacyPolicyPage.tsx ← CRIAR (novo) │ ├── components/ │ │ └── Footer.tsx ← MODIFICAR (adicionar Link) │ └── App.tsx ← MODIFICAR (adicionar rota) ``` **Sem backend envolvido.** Sem migrations, sem novos endpoints, sem schemas Pydantic. --- ## Implementation Approach ### Fase de implementação (executada via /speckit.tasks) **Task 1 — Criar `PrivacyPolicyPage.tsx`** Componente stateless com Navbar + main + Footer. Conteúdo estático das 8 seções LGPD inline. Design conforme tokens do DESIGN.md. Ver `data-model.md` para estrutura e conteúdo de cada seção. **Task 2 — Adicionar rota em `App.tsx`** Importar `PrivacyPolicyPage` e adicionar `} />` após a rota `/corretores`. **Task 3 — Atualizar `Footer.tsx`** Importar `Link` do react-router-dom. Adicionar `
  • Política de Privacidade
    • ` no `