98 lines
3.2 KiB
Markdown
98 lines
3.2 KiB
Markdown
# 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` |
|