# Quickstart: Página Sobre

**Feature**: 021-pagina-sobre  
**Branch**: `master` (branch recomendada para esta feature: `feat/021-pagina-sobre`)

---

## Pré-requisitos

- Node.js instalado
- Dependências do frontend instaladas: `cd frontend && npm install`
- Docker não é necessário — feature 100% estática, sem backend

---

## Arquivos envolvidos

| Ação | Arquivo |
|------|---------|
| **Criar** | `frontend/src/pages/AboutPage.tsx` |
| **Modificar** | `frontend/src/App.tsx` (1 import + 1 `<Route>`) |
| **Modificar** | `frontend/src/components/Footer.tsx` (link `#sobre` → `<Link to="/sobre">`) |

---

## Como rodar o frontend em dev

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

Acesse `http://localhost:5173/sobre` para ver a nova página.

---

## Passo a passo de implementação

### Passo 1 — Criar `AboutPage.tsx`

Criar o arquivo `frontend/src/pages/AboutPage.tsx` seguindo o padrão de `PrivacyPolicyPage.tsx`:
- Sem props, sem estado, sem hooks
- Estrutura: `<Navbar />` + `<main>` com 6 seções + `<Footer />`
- Importar `Link` de `react-router-dom` para CTAs internos
- Usar tokens do DESIGN.md (ver `data-model.md` — seção "Design tokens")

Seções que usam `.map()` sobre array local:
- **Diferenciais**: array `diferenciais: DiferencialItem[]` com 3 itens
- **Números**: array `numeros: MetricItem[]` com 4 itens

Seções implementadas como JSX direto:
- Hero, Nossa História, Nossa Equipe, CTA Final

### Passo 2 — Registrar rota em `App.tsx`

```diff
import AgentsPage from './pages/AgentsPage';
import PrivacyPolicyPage from './pages/PrivacyPolicyPage';
+import AboutPage from './pages/AboutPage';
// ...
<Route path="/politica-de-privacidade" element={<PrivacyPolicyPage />} />
+<Route path="/sobre" element={<AboutPage />} />
```

### Passo 3 — Atualizar Footer

Em `Footer.tsx`, converter o link "Sobre" de `<a href="#sobre">` para `<Link to="/sobre">`.

Garantir que `Link` está importado de `react-router-dom` (provavelmente já está após feature 020).

---

## Checklist de validação manual

Após implementar, verificar:

- [ ] `http://localhost:5173/sobre` carrega sem erros de console
- [ ] As 6 seções são visíveis (Hero, História, Diferenciais, Números, Equipe, CTA)
- [ ] Navbar e Footer são exibidos corretamente
- [ ] Link "Sobre" no Footer navega para `/sobre` sem recarregar a página
- [ ] Botão "Ver imóveis disponíveis" navega para `/imoveis`
- [ ] Link "Conheça nosso time" navega para `/corretores`
- [ ] Link WhatsApp abre `wa.me` (verificar URL em inspeção de elemento)
- [ ] Layout responsivo funciona em 375 px (mobile) e 1280 px (desktop)
- [ ] Estilo visual consistente com `PrivacyPolicyPage` e demais páginas

---

## Critérios de aceite (mapeados da spec)

| Critério | Como verificar |
|----------|---------------|
| SC-001: `/sobre` acessível sem auth | Abrir em aba anônima |
| SC-002: Responsivo 320–1920 px | DevTools → breakpoints 320, 375, 768, 1280, 1920 |
| SC-003: Footer "Sobre" → `/sobre` | Clicar no link e confirmar URL sem reload |
| SC-004: CTAs corretos | Clicar em cada um e verificar destino |
| SC-005: Sem erros de console | Console limpo após carregamento |
| SC-006: Performance equivalente | Primeira renderização comparável a `/politica-de-privacidade` |