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

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`

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`

3.2 KiB Raw Permalink Blame History Unescape Escape