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

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`

// 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`

// 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`

// 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

cd frontend
npm run build

Sem erros de TypeScript = pronto para PR.

4.4 KiB Raw Blame History