# Tasks: Página Sobre

**Input**: Design documents from `/specs/021-pagina-sobre/`
**Prerequisites**: plan.md ✅, spec.md ✅, research.md ✅, data-model.md ✅, quickstart.md ✅

**Tests**: Não solicitados — feature 100% estática sem lógica testável via testes unitários.

**Organização**: Tarefas agrupadas por user story para permitir implementação e validação independente.

## Format: `[ID] [P?] [Story] Descrição`

- **[P]**: Pode rodar em paralelo (arquivos diferentes, sem dependências entre si)
- **[Story]**: User story correspondente (US1, US2, US3)
- Caminhos de arquivo relativos à raiz do repositório

---

## Phase 1: Setup

**Propósito**: Verificação do ambiente. Feature sem dependências novas — tudo já está instalado.

- [ ] T001 Confirmar que `react-router-dom` v6 está listado em `frontend/package.json` e que `tailwind.config.ts` define os tokens `bg-canvas`, `bg-panel`, `text-text-primary`, `text-text-secondary` e `text-text-tertiary`

**Checkpoint**: Ambiente pronto — nenhuma instalação necessária.

---

## Phase 2: Foundational (Pré-requisitos Bloqueantes)

**Propósito**: Garantir que os arquivos de referência foram lidos antes de qualquer implementação.

**⚠️ CRÍTICO**: Leia os arquivos de referência abaixo antes de iniciar qualquer tarefa das fases seguintes.

- [ ] T002 Ler `frontend/src/pages/PrivacyPolicyPage.tsx` para entender o padrão de página estática adotado no projeto (estrutura `<Navbar />` + `<main>` + `<Footer />`)
- [ ] T003 [P] Ler `frontend/src/App.tsx` para identificar onde inserir a nova rota `/sobre` e qual import seguir como padrão
- [ ] T003 [P] Ler `frontend/src/components/Footer.tsx` para entender como o link "Sobre" está implementado atualmente (`#sobre`) e confirmar que `Link` de `react-router-dom` já está importado (padrão introduzido na feature 020)

**Checkpoint**: Padrões de referência entendidos — implementação pode iniciar.

---

## Phase 3: User Story 1 — Visitante conhece a empresa na página Sobre (Priority: P1) 🎯 MVP

**Goal**: A rota `/sobre` é acessível publicamente, exibe as seis seções institucionais (Hero, História, Diferenciais, Números, Equipe, CTA Final) com Navbar e Footer, e o link "Sobre" no Footer navega para `/sobre` sem recarregar a aplicação.

**Independent Test**: Acessar `http://localhost:5173/sobre` e verificar que as seis seções são renderizadas com conteúdo visível em mobile (320 px) e desktop (1280 px), sem erros de console.

### Implementação da User Story 1

- [ ] T004 [US1] Criar `frontend/src/pages/AboutPage.tsx` — componente sem props e sem estado seguindo o padrão de `PrivacyPolicyPage.tsx`:
  - Importar `Link` de `react-router-dom`, `Navbar` e `Footer`
  - Estrutura raiz: `<Navbar />` + `<main id="main-content" className="min-h-screen bg-canvas">` + `<Footer />`
  - Largura máxima do conteúdo: `max-w-[1200px] mx-auto px-6`
  - Definir tipos locais (não exportados): `DiferencialItem { icon, title, description }` e `MetricItem { value, label }`
  - **Seção Hero** (JSX direto): label `text-[#5e6ad2] text-sm font-medium tracking-widest uppercase` + título da empresa `font-semibold text-text-primary tracking-tight` + subtítulo `text-text-secondary` + parágrafo de missão/valores `text-text-tertiary`
  - **Seção Nossa História** (JSX direto): título de seção + 2–3 parágrafos narrativos `text-text-secondary`
  - **Seção Nossos Diferenciais** (`.map()` sobre array `diferenciais: DiferencialItem[]` com 3 itens): grid de cards `bg-panel border border-white/[0.06] rounded-2xl p-6`, cada card com ícone (emoji UTF-8), título `text-text-primary font-semibold` e descrição `text-text-secondary`
  - **Seção Números em Destaque** (`.map()` sobre array `numeros: MetricItem[]` com 4 itens — anos de mercado, imóveis negociados, satisfação de clientes, número de corretores): grid de cards `bg-panel border border-white/[0.06] rounded-2xl`, cada card com valor `text-[#5e6ad2] font-bold text-3xl` e label `text-text-secondary text-sm`
  - **Seção Nossa Equipe** (JSX direto): título de seção + texto introdutório + `<Link to="/corretores">` "Conheça nosso time"
  - **Seção CTA Final** (JSX direto): título "Pronto para encontrar seu imóvel?" + `<Link to="/imoveis">` com classe `bg-[#5e6ad2] hover:bg-[#6872e5] text-white rounded-lg px-5 py-2.5` + `<a href="https://wa.me/5500000000000?text=Olá!%20Gostaria%20de%20saber%20mais%20sobre%20os%20imóveis%20disponíveis." target="_blank" rel="noopener noreferrer">` com classe `border border-white/[0.08] text-text-secondary hover:text-text-primary rounded-lg px-5 py-2.5`

- [ ] T005 [US1] Editar `frontend/src/App.tsx` — adicionar import e rota para `AboutPage`:
  - Adicionar `import AboutPage from './pages/AboutPage';` junto aos demais imports de páginas (após `PrivacyPolicyPage` seguindo ordem alfabética/cronológica)
  - Adicionar `<Route path="/sobre" element={<AboutPage />} />` na mesma camada das rotas públicas, após `<Route path="/politica-de-privacidade" element={<PrivacyPolicyPage />} />`

- [ ] T006 [US1] Editar `frontend/src/components/Footer.tsx` — converter link "Sobre" de âncora para navegação SPA:
  - Localizar o item `{ label: 'Sobre', href: '#sobre' }` (ou equivalente)
  - Substituir por `<Link to="/sobre">Sobre</Link>` seguindo o mesmo padrão do link `/politica-de-privacidade` introduzido na feature 020
  - Garantir que `Link` de `react-router-dom` já está importado (não duplicar import)

**Checkpoint**: User Story 1 completa — `http://localhost:5173/sobre` exibe as seis seções, Navbar e Footer; link "Sobre" no Footer navega sem recarregar a página.

---

## Phase 4: User Story 2 — Visitante usa o CTA final para iniciar contato ou buscar imóveis (Priority: P2)

**Goal**: O botão "Ver imóveis disponíveis" navega para `/imoveis` e o link de WhatsApp abre o app com mensagem pré-preenchida.

**Independent Test**: Na página `/sobre`, clicar em "Ver imóveis disponíveis" e confirmar navegação para `/imoveis`; clicar no link de WhatsApp e confirmar abertura do app/web com mensagem pré-preenchida.

> **Nota**: Os CTAs de US2 são implementados dentro de `AboutPage.tsx` na tarefa T004 (Seção CTA Final). Esta fase consiste apenas em validar o comportamento.

### Validação da User Story 2

- [ ] T007 [US2] Validar na `AboutPage.tsx` (já criada em T004) se os dois CTAs da seção final estão corretos:
  - `<Link to="/imoveis">` usa classe primária `bg-[#5e6ad2] hover:bg-[#6872e5] text-white rounded-lg px-5 py-2.5`
  - `<a href="https://wa.me/5500000000000?text=...">` tem atributos `target="_blank"` e `rel="noopener noreferrer"` (requisito de segurança — evita `window.opener` exploit)
  - Em mobile, confirmar que o link `wa.me` abre o WhatsApp nativo (comportamento padrão do protocolo)

**Checkpoint**: US1 e US2 funcionais — navegação e CTAs de conversão operantes.

---

## Phase 5: User Story 3 — Visitante descobre a equipe e navega para listagem de corretores (Priority: P3)

**Goal**: A seção "Nossa Equipe" exibe texto introdutório e um CTA `<Link to="/corretores">` funcional.

**Independent Test**: Na página `/sobre`, clicar em "Conheça nosso time" (ou equivalente) e confirmar navegação SPA para `/corretores`.

> **Nota**: O CTA de US3 é implementado dentro de `AboutPage.tsx` na tarefa T004 (Seção Nossa Equipe). Esta fase consiste apenas em validar o comportamento.

### Validação da User Story 3

- [ ] T008 [US3] Validar na `AboutPage.tsx` (já criada em T004) se a seção "Nossa Equipe" está correta:
  - `<Link to="/corretores">` presente e com texto identificável (ex.: "Conheça nosso time")
  - Texto introdutório sobre a equipe visível acima do CTA

**Checkpoint**: Todas as três user stories funcionais e independentemente testáveis.

---

## Phase 6: Polish & Validação Final

**Propósito**: Verificação de responsividade, consistência visual e ausência de erros.

- [ ] T009 [P] Executar checklist do `quickstart.md` em `http://localhost:5173/sobre`: verificar as seis seções visíveis, Navbar/Footer presentes, ausência de erros de console, link "Sobre" no Footer navegando sem reload
- [ ] T010 [P] Validar responsividade em viewport mobile (320 px e 375 px) e desktop (1280 px e 1920 px) — garantir que nenhum elemento transborda horizontalmente (`overflow-x` ausente)
- [ ] T011 Revisar se todos os tokens Tailwind usados (`bg-canvas`, `bg-panel`, `text-text-primary`, `text-text-secondary`, `text-text-tertiary`, `border-white/[0.06]`, `border-white/[0.08]`) estão definidos em `frontend/tailwind.config.ts` e não foram usados valores inline fora do sistema de design

---

## Dependencies & Execution Order

### Dependências entre Fases

- **Phase 1 (Setup)**: Sem dependências — iniciar imediatamente
- **Phase 2 (Foundational)**: Depende do Phase 1 — BLOQUEIA todas as user stories
- **Phase 3 (US1)**: Depende do Phase 2 — MVP entregável ao final desta fase
- **Phase 4 (US2)**: Depende do Phase 3 (T004 deve estar completo)
- **Phase 5 (US3)**: Depende do Phase 3 (T004 deve estar completo)
- **Phase 6 (Polish)**: Depende de todas as fases anteriores

### Dependências entre User Stories

- **US1 (P1)**: Independente — inicia após Phase 2
- **US2 (P2)**: Depende de US1 (T004 cria os CTAs validados em T007)
- **US3 (P3)**: Depende de US1 (T004 cria o CTA validado em T008)

### Dentro de cada User Story (Phase 3)

- T004 → T005 → T006 (sequencial: página criada → rota registrada → footer atualizado)
- T005 e T006 podem ser feitos em paralelo após T004

### Paralelo dentro da Phase 3

```
Após T004 (AboutPage.tsx criado):
  [P] T005 — editar App.tsx (rota)
  [P] T006 — editar Footer.tsx (link)
```

---

## Parallel Example: User Story 1

```
# T004 deve estar completo antes de T005 e T006
# T005 e T006 podem ser executados em paralelo:

Task T005: "Editar frontend/src/App.tsx — adicionar import e rota /sobre"
Task T006: "Editar frontend/src/components/Footer.tsx — converter link #sobre para /sobre"
```

---

## Implementation Strategy

### MVP First (User Story 1 Only)

1. Completar Phase 1: Setup (verificação rápida)
2. Completar Phase 2: Foundational (leitura dos arquivos de referência)
3. Completar Phase 3: User Story 1 (T004 → T005 + T006)
4. **PARAR E VALIDAR**: Acessar `http://localhost:5173/sobre` e confirmar as seis seções
5. Deploy se validado

### Entrega Incremental

1. Setup + Foundational → Referências entendidas
2. US1 completa → Página acessível, todas as seções visíveis, Footer atualizado → **MVP!**
3. US2 validada → CTAs de conversão verificados
4. US3 validada → CTA da equipe verificado
5. Polish → Responsividade e consistência visual confirmadas

### Estratégia para Desenvolvedor Único

Com um único desenvolvedor (cenário desta feature):

1. Phase 1 + Phase 2: leitura e setup (~10 min)
2. T004: criar `AboutPage.tsx` com todas as 6 seções (~30–45 min)
3. T005 + T006 em paralelo: editar `App.tsx` e `Footer.tsx` (~5 min cada)
4. T007 + T008: validação dos CTAs (~10 min)
5. T009–T011 (Polish): checklist e responsividade (~15 min)