gitadmin/sass-imobiliaria
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
sass-imobiliaria/specs/021-pagina-sobre/tasks.md

11 KiB
Raw Permalink Blame History

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)