100 lines
4.8 KiB
Markdown
100 lines
4.8 KiB
Markdown
# Research: Página de Política de Privacidade
|
|
|
|
**Feature**: 020-politica-de-privacidade
|
|
**Phase**: 0 — Outline & Research
|
|
**Status**: Complete — sem NEEDS CLARIFICATION
|
|
|
|
---
|
|
|
|
## 1. Padrão de página estática no projeto
|
|
|
|
**Decision**: Usar o mesmo padrão de `AgentsPage.tsx` — `<Navbar />` + `<main className="min-h-screen bg-canvas">` + `<Footer />`.
|
|
|
|
**Rationale**: Todas as páginas públicas do projeto seguem este padrão. `AgentsPage.tsx` é o exemplo mais recente e pode ser usado como referência direta.
|
|
|
|
**Alternatives considered**: Criar um componente `PublicLayout` com Navbar/Footer embutidos. Rejeitado por violar Principle VI (YAGNI — só 1 page nova, sem reutilização real).
|
|
|
|
---
|
|
|
|
## 2. Roteamento client-side
|
|
|
|
**Decision**: Adicionar `<Route path="/politica-de-privacidade" element={<PrivacyPolicyPage />} />` direto no arquivo `frontend/src/App.tsx`, na mesma camada das rotas públicas (`/`, `/imoveis`, `/corretores`).
|
|
|
|
**Rationale**: Padrão já usado por todas as rotas públicas. Sem guards de autenticação necessários.
|
|
|
|
**Alternatives considered**: Rota aninhada num layout público. Rejeitado — nenhuma outra rota pública usa layout aninhado; seria over-engineering.
|
|
|
|
---
|
|
|
|
## 3. Link no Footer — `<a>` vs `<Link>`
|
|
|
|
**Decision**: Usar `<Link to="/politica-de-privacidade">` do `react-router-dom` para o novo link no Footer. Os links existentes (`#sobre`, `#contato`) permanecem como `<a>` (são âncoras intra-página, não rotas SPA). O link `/imoveis` existente também fica como `<a>` para não alterar comportamento legado fora do escopo.
|
|
|
|
**Rationale**: FR-006 exige navegação sem recarregamento. O `<Link>` do React Router garante transição client-side sem `window.location` reload. O Footer está dentro do `<BrowserRouter>` (App.tsx), então `<Link>` funciona sem nenhuma mudança estrutural.
|
|
|
|
**Alternatives considered**:
|
|
1. Converter todos os links do footer para `<Link>` — fora de escopo, Principle VI proíbe mudanças além do especificado.
|
|
2. Usar `<a href="/politica-de-privacidade">` — causaria reload completo da página, violando FR-006 e SC-003.
|
|
|
|
---
|
|
|
|
## 4. Design tokens a utilizar
|
|
|
|
**Decision**: Seguir exatamente as classes Tailwind mapeadas para os tokens do DESIGN.md:
|
|
|
|
| Elemento | Classe Tailwind |
|
|
|---|---|
|
|
| Fundo da página | `bg-canvas` |
|
|
| Fundo de seção alternada (opcional) | N/A — fundo único para simplicidade |
|
|
| Texto principal (título, corpo) | `text-text-primary` |
|
|
| Texto secundário | `text-text-secondary` |
|
|
| Texto terciário (metadata) | `text-text-tertiary` |
|
|
| Separador entre seções | `border-white/[0.06]` |
|
|
| Largura máxima do conteúdo | `max-w-[800px] mx-auto px-6` |
|
|
| Títulos de seção | `font-semibold text-text-primary` + `fontFeatureSettings: '"cv01","ss03"'` |
|
|
| Label de categoria | `text-[#5e6ad2] text-sm font-medium tracking-widest uppercase` |
|
|
|
|
**Rationale**: Alinhamento com Principle I (Design-First). Tokens já existentes no `tailwind.config.ts`; sem novos tokens necessários.
|
|
|
|
---
|
|
|
|
## 5. Estrutura das 8 seções LGPD
|
|
|
|
**Decision**: Conteúdo estático inline no componente. Sem fonte de dados externa, sem CMS, sem JSON separado.
|
|
|
|
**Rationale**: Principle VI — a solução mais simples. A política muda raramente; extrair para arquivo JSON seria over-abstraction sem benefício concreto.
|
|
|
|
**Seções obrigatórias (FR-003)**:
|
|
|
|
| # | Título | Conteúdo-chave |
|
|
|---|---|---|
|
|
| 1 | Instituição Responsável | Nome, CNPJ, endereço (placeholders) |
|
|
| 2 | Coleta e Uso de Dados Pessoais | Quais dados, finalidade de uso |
|
|
| 3 | Transferência de Dados Pessoais | Compartilhamento com terceiros (parceiros, financeiras) |
|
|
| 4 | Uso de Cookies | Tipos de cookies, finalidade |
|
|
| 5 | Direitos do Usuário | Acesso, correção, exclusão, portabilidade, revogação de consentimento |
|
|
| 6 | Segurança dos Dados | Medidas técnicas adotadas |
|
|
| 7 | Alterações nesta Política | Versionamento e data de última atualização |
|
|
| 8 | Contato / DPO | E-mail do encarregado (placeholder `[EMAIL DO DPO]`) |
|
|
|
|
---
|
|
|
|
## 6. Responsividade
|
|
|
|
**Decision**: `max-w-[800px] mx-auto px-6` para o container do conteúdo. Em mobile, o padding `px-6` garante margens laterais. Sem media queries adicionais — Tailwind + text-base resolve legibilidade.
|
|
|
|
**Rationale**: SC-004 exige legibilidade a partir de 320px sem overflow horizontal. O container com `px-6` e `max-w-[800px]` atende naturalmente por ser menor que qualquer viewport padrão >375px.
|
|
|
|
---
|
|
|
|
## 7. Dependências novas
|
|
|
|
**Decision**: Nenhuma dependência nova.
|
|
|
|
**Rationale**: `react-router-dom` já está instalado. Tailwind já configurado. Principle VI — sem pacotes novos sem justificativa.
|
|
|
|
---
|
|
|
|
## Resolução de NEEDS CLARIFICATION
|
|
|
|
Não havia ambiguidades de natureza técnica que exigissem pesquisa externa. Todos os pontos foram resolvidos com base no código existente no projeto.
|