# Quickstart: Página de Política de Privacidade

**Feature**: 020-politica-de-privacidade  
**Branch**: `master` (feature branch recomendada: `feat/020-politica-de-privacidade`)

---

## Pré-requisitos

- Node.js instalado
- Dependências do frontend instaladas: `cd frontend && npm install`
- Docker em execução (opcional — apenas se precisar do backend para outras páginas)

---

## Arquivos envolvidos

| Ação | Arquivo |
|---|---|
| **Criar** | `frontend/src/pages/PrivacyPolicyPage.tsx` |
| **Modificar** | `frontend/src/components/Footer.tsx` |
| **Modificar** | `frontend/src/App.tsx` |

---

## Como rodar o frontend em dev

```powershell
cd frontend
npm run dev
```

Acesse `http://localhost:5173/politica-de-privacidade` para verificar a nova página.

---

## Passo a passo de implementação

### 1. Criar `PrivacyPolicyPage.tsx`

```tsx
// frontend/src/pages/PrivacyPolicyPage.tsx
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'

export default function PrivacyPolicyPage() {
    return (
        <>
            <Navbar />
            <main id="main-content" className="min-h-screen bg-canvas">
                <div className="max-w-[800px] mx-auto px-6 pt-16 pb-20">
                    {/* Header */}
                    <p className="text-[#5e6ad2] text-sm font-medium tracking-widest uppercase mb-3">
                        Legal
                    </p>
                    <h1
                        className="text-3xl md:text-4xl font-semibold text-text-primary tracking-tight mb-2"
                        style={{ fontFeatureSettings: '"cv01","ss03"' }}
                    >
                        Política de Privacidade
                    </h1>
                    <p className="text-text-tertiary text-sm mb-12">
                        Última atualização: abril de 2026
                    </p>

                    {/* Seções */}
                    <div className="space-y-10">
                        {/* Seção 1 */}
                        <section>
                            <h2 className="text-lg font-semibold text-text-primary mb-3"
                                style={{ fontFeatureSettings: '"cv01","ss03"' }}>
                                1. Instituição Responsável
                            </h2>
                            <p className="text-text-secondary text-sm leading-relaxed">
                                [NOME DA EMPRESA], inscrita no CNPJ sob o nº [CNPJ], com sede em [ENDEREÇO COMPLETO],
                                é a controladora dos dados pessoais tratados por meio deste site.
                            </p>
                        </section>

                        {/* Seção 2 */}
                        <section>
                            <h2 ...>2. Coleta e Uso de Dados Pessoais</h2>
                            ...
                        </section>

                        {/* ... demais seções ... */}
                    </div>
                </div>
            </main>
            <Footer />
        </>
    )
}
```

> **Ver data-model.md para o conteúdo completo de cada seção.**

---

### 2. Adicionar rota em `App.tsx`

```tsx
// após import de AgentsPage
import PrivacyPolicyPage from './pages/PrivacyPolicyPage';

// dentro de <Routes>, após a rota /corretores:
<Route path="/politica-de-privacidade" element={<PrivacyPolicyPage />} />
```

---

### 3. Atualizar `Footer.tsx`

```tsx
// Adicionar import no topo:
import { Link } from 'react-router-dom'

// No <ul> dos footerLinks, adicionar após o map existente:
<li>
  <Link
    to="/politica-de-privacidade"
    className="text-xs text-text-tertiary hover:text-text-secondary transition-colors duration-150"
  >
    Política de Privacidade
  </Link>
</li>
```

---

## Verificação de conformidade

| Critério | Como verificar |
|---|---|
| 8 seções presentes | Contar visualmente em `http://localhost:5173/politica-de-privacidade` |
| Link no Footer funciona sem reload | Abrir DevTools > Network, clicar no link — nenhuma requisição de documento nova |
| Sem chamadas de API | DevTools > Network > XHR/Fetch — vazio ao carregar a página |
| Responsivo em 375px | DevTools > Device Toolbar → iPhone SE |
| Tema dark consistente | Comparar com `http://localhost:5173/corretores` — mesmas cores/fontes |

---

## Build de validação

```powershell
cd frontend
npm run build
```

Sem erros de TypeScript = pronto para PR.