102 lines
5.6 KiB
Markdown
102 lines
5.6 KiB
Markdown
# 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.*
|