# Research: Página Sobre

**Feature**: 021-pagina-sobre  
**Phase**: 0 — Outline & Research  
**Status**: Completo — sem NEEDS CLARIFICATION

---

## 1. Padrão de página estática no projeto

**Decision**: Seguir exatamente o padrão de `PrivacyPolicyPage.tsx` — `<Navbar />` + `<main id="main-content" className="min-h-screen bg-canvas">` + `<Footer />`, com conteúdo dentro de `max-w-[800px] mx-auto px-6`.

**Rationale**: `PrivacyPolicyPage.tsx` foi a página estática mais recente criada no projeto e já foi validada visualmente. É a referência canônica para páginas sem estado. A Página Sobre tem natureza idêntica: conteúdo textual organizado em seções, sem API calls.

**Alternatives considered**: Usar `AgentsPage.tsx` como template. Rejeitado — AgentsPage tem estado (`useState`, `useEffect`, skeleton loaders) que não se aplica a conteúdo estático. Usá-la como base adicionaria código morto desnecessário.

---

## 2. Roteamento — nova rota `/sobre`

**Decision**: Adicionar `<Route path="/sobre" element={<AboutPage />} />` diretamente em `frontend/src/App.tsx`, na mesma camada das rotas públicas existentes (`/`, `/imoveis`, `/corretores`, `/politica-de-privacidade`).

**Rationale**: Padrão já estabelecido para todas as rotas públicas. Sem guards de autenticação necessários — FR-001 exige acesso público irrestrito.

**Alternatives considered**: Rota aninhada num layout público compartilhado. Rejeitado — nenhuma outra rota pública usa layout aninhado; seria over-engineering (Principle VI).

---

## 3. Link "Sobre" no Footer — `<a>` vs `<Link>`

**Decision**: Converter `{ label: 'Sobre', href: '#sobre' }` para usar `<Link to="/sobre">` do `react-router-dom`, de forma análoga ao que foi feito com `/politica-de-privacidade` na feature 020.

**Rationale**: FR-009 e FR-012 exigem navegação SPA sem recarregar a aplicação. `<Link>` do React Router garante transição client-side. O Footer está dentro do `<BrowserRouter>` em App.tsx, portanto `<Link>` funciona sem mudança estrutural adicional. Os demais links `#contato` permanecem como `<a>` (âncoras intra-página, fora de escopo).

**Alternatives considered**: Usar `<a href="/sobre">` — causaria reload completo, violando FR-012 e SC-003.

> **Nota de implementação**: O Footer já usa uma mistura de `<a>` e `<Link>` (introduzida na feature 020 para `/politica-de-privacidade`). Basta adicionar o mesmo padrão para `/sobre`.

---

## 4. Estrutura de seções da AboutPage

**Decision**: Seis seções fixas, implementadas como JSX inline (sem array de seções mapeado, diferente do `PrivacyPolicyPage`):

| # | Nome | Conteúdo principal |
|---|------|--------------------|
| 1 | Hero | Título, subtítulo, parágrafo de missão/valores |
| 2 | Nossa História | Texto narrativo com origem e trajetória |
| 3 | Nossos Diferenciais | 3–4 cards `border border-white/[0.06] rounded-2xl` |
| 4 | Números em Destaque | 4 métricas em grid (anos, imóveis, satisfação, corretores) |
| 5 | Nossa Equipe | Texto introdutório + CTA `<Link to="/corretores">` |
| 6 | CTA Final | `<Link to="/imoveis">` + `<a href="https://wa.me/5500000000000?text=...">` |

**Rationale**: Seções simples, sem iteração sobre array, sem estado. Para as seções Hero/História/Equipe/CTA, JSX direto é mais legível. Para Diferenciais e Números, um array local mapeado por `.map()` reduz repetição sem criar abstração desnecessária.

**Alternatives considered**: Criar um array de seções tipadas para todas as 6 seções (padrão de PrivacyPolicyPage). Rejeitado — as seções têm layouts muito diferentes entre si; forçar um tipo `Section` genérico exigiria `ReactNode` em tudo, que é menos legível.

---

## 5. Design tokens para as seções

**Decision**: Seguir exatamente os tokens do DESIGN.md mapeados no Tailwind:

| Elemento | Classe Tailwind |
|---|---|
| Fundo da página | `bg-canvas` |
| Cards de diferenciais | `bg-panel border border-white/[0.06] rounded-2xl p-6` |
| Métricas em destaque | `bg-panel border border-white/[0.06] rounded-2xl` |
| Texto principal | `text-text-primary` |
| Texto secundário | `text-text-secondary` |
| Texto terciário | `text-text-tertiary` |
| Label de categoria ("Sobre nós", etc.) | `text-[#5e6ad2] text-sm font-medium tracking-widest uppercase` |
| Títulos de seção | `font-semibold text-text-primary tracking-tight` + `style={{ fontFeatureSettings: '"cv01","ss03"' }}` |
| CTA primário (Ver imóveis) | `bg-[#5e6ad2] hover:bg-[#6872e5] text-white rounded-lg px-5 py-2.5` |
| CTA secundário (WhatsApp) | `border border-white/[0.08] text-text-secondary hover:text-text-primary rounded-lg px-5 py-2.5` |
| Largura máxima | `max-w-[1200px] mx-auto px-6` |

**Rationale**: Alinhamento com Principle I (Design-First). Sem novos tokens; apenas os já existentes no `tailwind.config.ts`.

---

## 6. Link de WhatsApp

**Decision**: `https://wa.me/5500000000000?text=Ol%C3%A1%2C%20gostaria%20de%20falar%20com%20um%20corretor`

- Número placeholder: `5500000000000` (substituir antes do go-live)
- `wa.me` abre WhatsApp nativo no mobile e web no desktop, satisfazendo US-2 AC-3
- URL encoding da mensagem pré-preenchida

**Rationale**: Spec/Assumptions confirma uso de placeholder. Nenhum segredo ou token real envolvido.

---

## 7. Navegação interna (CTAs)

**Decision**: Usar `<Link to="...">` do `react-router-dom` para `/imoveis` e `/corretores`.

**Rationale**: FR-012 exige SPA navigation sem reload. Ambas as rotas já existem e estão funcionais (FR prevê `/corretores` como existente).

---

*Todos os NEEDS CLARIFICATION resolvidos. Sem dependências externas. Pode prosseguir para Phase 1.*