Feature Specification: Grid de Imóveis — 4 Colunas, Altura Uniforme e UX/UI

Feature Branch: 014-properties-grid-ux Created: 2026-04-14 Status: In Progress

Contexto

A página /imoveis atualmente exibe um grid de 3 colunas (xl:grid-cols-3) com cards de altura variável conforme o comprimento do título. Os separadores visuais entre cards ficam descalinhados, a paginação usa per_page=12 (múltiplo de 3) e o max-w do layout é 1200px. Esta feature reestrutura o grid para 4 colunas, garante altura uniforme nos cards alinhando o rodapé (stats e botão comparar) ao fundo, aumenta o max-w para acomodar 4 colunas ao lado do filtro, e aplica melhorias de UX/UI: localização no card (cidade/bairro), ícone de estacionamento, skeleton atualizado, e ajuste de per_page para 16.

Estado atual

CatalogPage (ou equivalente): xl:grid-cols-3, max-w-[1200px], per_page=12
PropertyCard.tsx: altura variável conforme título; sem exibição de cidade/bairro; sem ícone de vagas
PropertyCardSkeleton.tsx: reflete estrutura de 3 colunas com 12 itens no loading
FilterSidebar.tsx desktop: w-64

User Stories

US1 — 4 colunas no grid (P1)

Given usuário na página /imoveis em tela >= 1280px, When grid de imóveis é renderizado, Then exibe 4 cards por linha. Em telas menores: 1 coluna (< 640px), 2 colunas (640–1023px), 3 colunas (1024–1279px).

US2 — Altura uniforme nos cards (P1)

Given grid com cards de títulos longos e curtos na mesma linha, When renderizado, Then todos os cards de uma mesma linha têm exatamente a mesma altura, com o rodapé (stats + botão comparar) sempre alinhado na parte inferior.

US3 — Localização no card (P2)

Given card de um imóvel com cidade e/ou bairro informados, When exibido no grid, Then mostra cidade e bairro abaixo do título em texto menor e discreto.

US4 — Ícone de vagas no card (P2)

Given imóvel com parking_spots > 0, When exibido no grid, Then exibe ícone de carro + número de vagas na seção de stats.

US5 — Paginação compatível (P1)

Given grid de 4 colunas, When nova página carrega, Then per_page=16 (múltiplo de 4) e skeleton também exibe 16 itens.

US6 — Responsividade revisada (P1)

Given usuário em qualquer dispositivo, When página carrega, Then layout adapta corretamente: filtro como overlay no mobile, grid responsivo sem overflow horizontal.

Acceptance Criteria

Grid alterado para grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4
max-w do layout aumentado para max-w-[1400px]
FilterSidebar desktop reduzida de w-64 para w-56
per_page default alterado de 12 para 16
PropertyCard.tsx: elemento raiz do link usa flex flex-col h-full; rodapé (stats + botão comparar) usa mt-auto
PropertyCard.tsx: exibe cidade e bairro abaixo do título quando disponíveis
PropertyCard.tsx: exibe ícone de carro + parking_spots quando parking_spots > 0
PropertyCardSkeleton.tsx: atualizado para refletir nova estrutura (placeholder de localização + parking)
Skeleton renderiza 16 itens durante o estado de loading
Nenhuma dependência externa nova

3.2 KiB Raw Blame History Unescape Escape