49 lines
3.2 KiB
Markdown
49 lines
3.2 KiB
Markdown
# 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
|