5.6 KiB
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.meabre 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.