sass-imobiliaria/specs/031-home-hero-light-dark/spec.md
MatheusAlves96 cf5603243c
Some checks failed
CI/CD → Deploy via SSH / Build & Push Docker Images (push) Successful in 1m0s
CI/CD → Deploy via SSH / Deploy via SSH (push) Successful in 4m35s
CI/CD → Deploy via SSH / Validate HTTPS & Endpoints (push) Failing after 46s
feat: features 025-032 - favoritos, contatos, trabalhe-conosco, area-cliente, navbar, hero-light-dark, performance-homepage
- feat(025): favoritos locais com FavoritesContext, HeartButton, PublicFavoritesPage
- feat(026): central de contatos admin (leads/contatos unificados)
- feat(027): configuração da página de contato via admin
- feat(028): trabalhe conosco - candidaturas com upload e admin
- feat(029): UX área do cliente - visitas, comparação, perfil
- feat(030): navbar UX - menu mobile, ThemeToggle, useFavorites
- feat(031): hero light/dark - imagens separadas por tema, upload, preview, seed
- feat(032): performance homepage - Promise.all parallel fetches, sessionStorage cache,
  preload hero image, loading=lazy nos cards, useInView hook, will-change carrossel,
  keyframes em index.css, AgentsCarousel e HomeScrollScene via props
- fix: light mode HomeScrollScene - gradiente, cores de texto, scroll hint

migrations: g1h2i3j4k5l6 (source em leads), h1i2j3k4l5m6 (contact_config),
            i1j2k3l4m5n6 (job_applications), j2k3l4m5n6o7 (hero theme images)
2026-04-22 22:35:17 -03:00

2.8 KiB

Feature Specification: Configuração de Background da Home por Tema

Feature Branch: 031-home-hero-light-dark Created: 2026-04-22 Status: Draft

Objetivo

Permitir que administradores configurem separadamente a imagem de fundo da seção hero da página inicial para tema claro (light) e tema escuro (dark), com fallback seguro para a imagem atual.

User Scenarios & Testing

User Story 1 — Admin edita imagens light/dark (P1)

Como admin, quero informar URLs diferentes para o background da home em light e dark para manter legibilidade e identidade visual em cada tema.

Independent Test: Admin consegue abrir tela de configuração da home, editar os campos de imagem light/dark e salvar com sucesso.

Acceptance Scenarios:

  1. Dado um admin autenticado, quando acessa a configuração da home, então visualiza os campos de imagem light e dark.
  2. Dado um admin, quando salva URLs válidas, então as mudanças persistem no backend.
  3. Dado falha de API, quando tenta salvar, então recebe feedback de erro sem perder o formulário.

User Story 2 — Home usa imagem correta por tema (P1)

Como visitante/cliente, quero ver uma imagem de fundo adequada ao tema atual para manter contraste e experiência visual.

Independent Test: Alterar tema entre light e dark muda a imagem de fundo da home sem quebrar fallback.

Acceptance Scenarios:

  1. Dado tema light, quando carrega a home, então usa hero_image_light_url.
  2. Dado tema dark, quando carrega a home, então usa hero_image_dark_url.
  3. Dado campo de tema ausente, quando renderiza a home, então usa fallback (hero_image_url e depois gradiente padrão).

Edge Cases

  • Apenas uma das imagens (light ou dark) cadastrada: sistema deve usar fallback sem erro.
  • Registro de homepage_config inexistente: endpoint admin deve criar registro base no primeiro save.
  • URL vazia: deve ser tratada como null.

Requirements

  • FR-001: Backend deve armazenar hero_image_light_url e hero_image_dark_url em homepage_config.
  • FR-002: Endpoint público /api/v1/homepage-config deve retornar os novos campos.
  • FR-003: Backend deve expor endpoint admin autenticado para atualizar configuração da home.
  • FR-004: Frontend admin deve ter tela para editar e salvar imagens light/dark.
  • FR-005: Navbar/menu admin deve permitir acesso à nova tela de configuração da home.
  • FR-006: Home pública deve escolher imagem com base no tema resolvido (resolvedTheme).
  • FR-007: Seed deve popular valores iniciais de imagem light/dark.

Success Criteria

  • SC-001: Admin salva configuração com HTTP 200 e dados persistidos.
  • SC-002: Troca de tema na home altera o background sem erro de renderização.
  • SC-003: Build frontend e backend sem erros após mudança.
  • SC-004: Seed padrão cria HomepageConfig com URLs light/dark preenchidas.