150 lines
4.4 KiB
Markdown
150 lines
4.4 KiB
Markdown
# 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.
|