192 lines
11 KiB
Markdown
192 lines
11 KiB
Markdown
# 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)
|