# Feature Specification: Página Sobre **Feature Branch**: `021-pagina-sobre` **Created**: 2026-04-17 **Status**: Draft **Input**: Criar uma página estática /sobre com informações da empresa, incluindo hero, história, diferenciais, métricas, referência ao time e CTA final. ## User Scenarios & Testing *(mandatory)* ### User Story 1 — Visitante conhece a empresa na página Sobre (Priority: P1) Um visitante do portal imobiliário deseja saber mais sobre a empresa antes de entrar em contato ou buscar imóveis. Ele acessa "/sobre" diretamente pela URL, pelo link no footer ou por qualquer chamada para ação do site, e navega pelas seções que descrevem a história, diferenciais e números da empresa. **Why this priority**: É o fluxo principal da feature. Sem ele a página não entrega valor algum. Todo o restante depende de a página ser acessível e exibir seu conteúdo. **Independent Test**: Pode ser testado acessando "/sobre" e verificando que as seis seções são renderizadas com conteúdo visível em dispositivos móveis e desktop. **Acceptance Scenarios**: 1. **Given** o visitante está em qualquer página do site, **When** ele acessa a URL "/sobre", **Then** a página é exibida com navbar, todas as seis seções conteúdo e footer, sem erros visíveis. 2. **Given** o visitante está na página inicial ou em outra página qualquer, **When** ele clica no link "Sobre" no footer, **Then** é redirecionado para "/sobre" (navegação interna, sem recarregar a aplicação). 3. **Given** o visitante está na página "/sobre" em um dispositivo móvel, **When** ele rola a página, **Then** todas as seções são legíveis e os elementos se reorganizam adequadamente para telas pequenas. --- ### User Story 2 — Visitante usa o CTA final para iniciar contato ou buscar imóveis (Priority: P2) Após ler sobre a empresa, o visitante quer dar o próximo passo: buscar imóveis disponíveis ou entrar em contato diretamente com a equipe via WhatsApp. **Why this priority**: Os CTAs são o principal canal de conversão da página; sem eles a página seria informativa mas não geraria ação. **Independent Test**: Pode ser testado clicando nos botões da seção CTA final e verificando que levam aos destinos corretos ("/imoveis" e WhatsApp). **Acceptance Scenarios**: 1. **Given** o visitante leu o conteúdo e chegou ao CTA final, **When** ele clica em "Ver imóveis disponíveis" (ou equivalente), **Then** é redirecionado para "/imoveis". 2. **Given** o visitante prefere falar com um corretor, **When** ele clica no link de contato por WhatsApp no CTA final, **Then** o aplicativo ou web do WhatsApp é aberto com uma mensagem pré-preenchida direcionada à imobiliária. 3. **Given** o CTA de WhatsApp é exibido, **When** o visitante acessa pelo celular, **Then** o link abre o WhatsApp nativo (não o web). --- ### User Story 3 — Visitante descobre a equipe e navega para a listagem de corretores (Priority: P3) O visitante quer conhecer a equipe da imobiliária. A seção "Nossa Equipe" na página Sobre apresenta uma chamada para ação que leva para "/corretores". **Why this priority**: Complementa a apresentação institucional, mas o valor principal da feature já é entregue pelas histórias P1 e P2. **Independent Test**: Pode ser testado clicando no CTA da seção "Nossa Equipe" e verificando que o visitante é levado para "/corretores". **Acceptance Scenarios**: 1. **Given** o visitante está na seção "Nossa Equipe" da página "/sobre", **When** ele clica no botão/link "Conheça nosso time" (ou equivalente), **Then** é redirecionado para "/corretores". 2. **Given** a seção "Nossa Equipe" é exibida, **When** o visitante a visualiza, **Then** vê um texto introdutório sobre a equipe e o CTA claramente identificável. --- ### Edge Cases - O que acontece se o visitante acessar "/sobre" sem conexão com a internet após o carregamento inicial? A página deve exibir o conteúdo estático já renderizado (sem dependência de chamadas externas). - O que acontece se o número de WhatsApp configurado estiver incorreto? O link abrirá o WhatsApp, mas direcionará para um número inválido — isso é um problema de conteúdo, não de comportamento da feature. - O que acontece se o visitante acessar a página em um navegador muito antigo sem suporte a CSS moderno? A página deve manter legibilidade mínima; estilos avançados podem degradar graciosamente. - Como a página se comporta com zoom de acessibilidade acima de 200%? O layout responsivo deve garantir que o conteúdo não transborde horizontalmente. ## Requirements *(mandatory)* ### Functional Requirements - **FR-001**: A página "/sobre" DEVE ser acessível para todos os visitantes sem necessidade de autenticação. - **FR-002**: A página DEVE exibir a barra de navegação (navbar) e o rodapé (footer) presentes nas demais páginas do site. - **FR-003**: A página DEVE conter uma seção Hero com título da empresa, subtítulo e parágrafo de apresentação (missão, história breve e valores). - **FR-004**: A página DEVE conter uma seção "Nossa História" com texto narrativo descrevendo a origem, trajetória e conquistas da empresa. - **FR-005**: A página DEVE conter uma seção "Nossos Diferenciais" com 3 a 4 cards, cada um com título e descrição de um diferencial competitivo. - **FR-006**: A página DEVE conter uma seção "Números em Destaque" com pelo menos 4 métricas estáticas representativas da empresa (ex.: anos de mercado, imóveis negociados, satisfação de clientes, número de corretores). - **FR-007**: A página DEVE conter uma seção "Nossa Equipe" com texto introdutório sobre a equipe e um CTA que navega para "/corretores". - **FR-008**: A página DEVE conter uma seção CTA Final com chamada para ação "Pronto para encontrar seu imóvel?" (ou equivalente), um botão que navega para "/imoveis" e um link que abre o WhatsApp para contato. - **FR-009**: O link "Sobre" no footer DEVE navegar para "/sobre" (não mais para "#sobre"). - **FR-010**: Todo o conteúdo da página DEVE ser estático — sem chamadas a APIs ou serviços externos durante a renderização. - **FR-011**: A página DEVE ser responsiva, adaptando layout e tipografia para dispositivos móveis (a partir de 320 px de largura) e desktop. - **FR-012**: A navegação interna (links para "/imoveis" e "/corretores") DEVE funcionar como navegação de página única (SPA), sem recarregar a aplicação. - **FR-013**: A página DEVE ser visualmente consistente com o tema e identidade visual das demais páginas do site. ## Success Criteria *(mandatory)* ### Measurable Outcomes - **SC-001**: 100% dos visitantes conseguem acessar "/sobre" sem autenticação e visualizar todas as seis seções de conteúdo. - **SC-002**: A página é exibida corretamente em dispositivos com largura de tela entre 320 px e 1920 px, sem transbordamento horizontal ou conteúdo cortado. - **SC-003**: O link "Sobre" no footer navega para "/sobre" em 100% dos cenários testados (navegação interna sem recarga de página). - **SC-004**: Todos os CTAs da página (botão para "/imoveis", link para "/corretores" e link de WhatsApp) levam ao destino correto em 100% dos cliques. - **SC-005**: A página carrega sem erros de console relacionados à feature e sem conteúdo quebrado visível. - **SC-006**: O tempo percebido pelo visitante para visualizar o conteúdo principal (acima da dobra) é equivalente ao das demais páginas estáticas do site. ## Assumptions - O conteúdo textual (história da empresa, diferenciais, métricas e descrição da equipe) será preenchido com dados representativos de uma imobiliária; o conteúdo definitivo será definido pelo cliente. - O número de telefone do WhatsApp será um placeholder (`5500000000000`) a ser substituído pelo número real antes do lançamento em produção. - A página "/corretores" já existe e está funcional, portanto o CTA da seção "Nossa Equipe" pode referenciar essa rota sem risco de link quebrado. - A navbar utilizada nas demais páginas já suporta a inclusão de novos itens ou a página "/sobre" será adicionada a ela conforme o padrão existente. - Não há requisito de internacionalização; o idioma da página é exclusivamente português brasileiro. - Não são necessários recursos de acessibilidade além do que já é padrão no restante do site (texto alternativo em imagens, contraste adequado). - As métricas exibidas na seção "Números em Destaque" são valores de marketing estáticos e não refletem dados em tempo real do sistema.