M07 — Slider with Categories

Módulo de destaque que combina uma navegação por categorias com um carrossel horizontal de cartões. O visitante escolhe uma categoria (ex: Quartos, Restaurantes, Spa) e o carrossel apresenta os cartões dessa categoria, que pode percorrer deslizando ou clicando nas setas.

Campo	Valor
Módulo	M07 — Slider with Categories
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T425
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Savoy Palace

Mobile (375px) — Savoy Palace

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema (desktop)

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Slider with Categories é um bloco de descoberta de conteúdo. Apresenta no topo um título grande (e uma pequena etiqueta acima) e, por baixo, dois elementos em conjunto: à esquerda, uma lista vertical de categorias (por exemplo “Quartos”, “Restaurantes”, “Spa”, “Experiências”); à direita, um carrossel horizontal de cartões da categoria selecionada.

Cada cartão tem uma imagem, um título, uma descrição curta e um botão que leva o visitante à página detalhada desse item. Os cartões têm alturas ligeiramente diferentes (alternando entre maior e menor) para criar um ritmo visual interessante, e estão organizados num carrossel que o visitante pode percorrer deslizando ou usando as setas de navegação.

Um fundo decorativo subtil atrás do título (pode ser um padrão ornamental, um símbolo do hotel ou o nome do hotel em letras claras) reforça a identidade visual da secção.

Este módulo é útil em páginas de “Alojamento”, “Gastronomia”, “Experiências”, “Spa & Bem-Estar” — sempre que há várias sub-categorias de conteúdo que merecem destaque visual no mesmo módulo.

Variantes

Variante 1 — Desktop padrão (categorias à esquerda, carrossel à direita)

Como visitante num computador, quero ver as categorias ao lado dos cartões para poder passar entre elas rapidamente sem perder a visão global dos conteúdos.

Elementos visíveis:

Pequena etiqueta em maiúsculas acima do título
Título grande centrado no topo (pode ter palavras a negrito)
Fundo decorativo do tema do hotel atrás do título (padrão ornamental, símbolo ou nome do hotel em tom claro)
Lista vertical de categorias à esquerda; a categoria ativa tem um pequeno ícone identificador (ex: diamante, gráfico de barras)
Carrossel horizontal de cartões à direita, com várias alturas (alternando entre mais alto e mais baixo)
Cada cartão: imagem, título, descrição curta, botão sublinhado
Barra de progresso horizontal fina, por baixo dos cartões, indicando onde o visitante está no carrossel
Botões redondos de seta esquerda/direita no canto inferior direito para navegar

Critérios de Aceitação:

O título aparece centrado no topo, com a etiqueta por cima
O padrão decorativo do fundo é visível mas não prejudica a leitura do texto
Todas as categorias estão visíveis numa lista à esquerda
A categoria selecionada aparece destacada (cor e ícone)
Os cartões aparecem em linha à direita, com alturas alternadas
Os botões de seta avançam ou recuam o carrossel ao clicar
A barra de progresso move-se à medida que o visitante avança no carrossel

Variante 2 — Mobile (categorias em barra horizontal, um cartão de cada vez)

Como visitante num telemóvel, quero ver o módulo adaptado a um ecrã estreito, percorrendo as categorias e os cartões com gestos naturais.

Abrir screenshot mobile (375px) em nova janela →</a>

Elementos visíveis:

Título centrado no topo, com o fundo decorativo adaptado ao tamanho do ecrã
Etiqueta por cima do título
Categorias apresentadas numa linha horizontal deslizável (em vez de coluna vertical)
A categoria ativa aparece destacada com o ícone ao lado
Um cartão principal visível, com o próximo cartão a “espreitar” à direita (sugerindo que se pode deslizar)
Barra de progresso no fundo, mais curta e proeminente
Botões de seta redondos no canto inferior direito

Critérios de Aceitação:

As categorias estão numa linha horizontal e podem ser percorridas com o dedo
O cartão principal ocupa quase toda a largura do ecrã
O cartão seguinte aparece parcialmente visível à direita (para indicar que há mais)
Deslizar com o dedo avança os cartões
Os botões de seta também funcionam por toque
O fundo decorativo adapta-se ao formato vertical sem cortar elementos importantes

Variante 3 — Adaptação por tema do hotel

Como visitante de qualquer hotel Savoy Signature, quero que o módulo reflita visualmente a identidade desse hotel para reforçar a coerência de marca.

Elementos que mudam entre temas:

Cor do título, etiqueta, categoria ativa, setas e barra de progresso
Fonte dos títulos (pode mudar entre temas)
Ícone da categoria ativa (diamante, gráfico, estrela, etc. — próprio de cada hotel)
Fundo decorativo: pode ser um padrão ornamental (Savoy Palace), o nome do hotel em letras grandes claras (Saccharum), formas geométricas (Next), etc.
Raio dos cantos das imagens dos cartões (pode ser quadrado, ligeiramente arredondado ou mais arredondado consoante o tema)

Critérios de Aceitação:

As cores de todos os elementos seguem o tema do hotel atual
O ícone da categoria ativa é específico do hotel
O fundo decorativo corresponde ao hotel (padrão, nome, forma)
A tipografia dos títulos segue o tema
A estrutura e o comportamento mantêm-se iguais entre todos os temas

Variante 4 — Uma única categoria

Como editor de conteúdo, quero que o módulo funcione mesmo quando só tenho uma categoria, para poder usá-lo num contexto mais simples (por exemplo, apenas “Quartos” numa página dedicada).

Elementos visíveis:

Título e etiqueta como nas outras variantes
Lista de categorias apresenta apenas um item
Carrossel de cartões funciona normalmente

Critérios de Aceitação:

Com apenas uma categoria, a lista de categorias mostra esse único item (sempre ativo)
O carrossel comporta-se normalmente (setas, arrastar, barra de progresso)
O layout não deixa áreas vazias nem parece desequilibrado

Variante 5 — Muitos cartões por categoria

Como visitante, quero poder percorrer uma categoria com muitos itens sem que isso prejudique a visualização dos cartões ou torne a página demasiado longa.

Elementos visíveis:

Mesma estrutura das variantes anteriores
Carrossel permite percorrer muitos cartões (10+, 15+) mantendo-se visualmente idêntico
Barra de progresso fica proporcionalmente mais fina à medida que o número de cartões aumenta

Critérios de Aceitação:

O módulo comporta-se visualmente igual com 3, 10 ou 20 cartões
A barra de progresso reflete corretamente a posição atual
As setas desativam-se quando não há mais cartões para avançar/recuar

Interações do Utilizador

Este é um módulo interativo. O visitante pode trocar de categoria, avançar e recuar nos cartões, e deslizar com o dedo no telemóvel.

Interação	Descrição
Clicar numa categoria	A lista de cartões à direita muda para mostrar os cartões dessa categoria. A categoria clicada passa a aparecer destacada.
Clicar no botão de seta direita	O carrossel avança para o próximo conjunto de cartões. A barra de progresso move-se.
Clicar no botão de seta esquerda	O carrossel recua para o conjunto anterior de cartões.
Deslizar com o dedo para a esquerda (telemóvel)	Avança os cartões, com um movimento suave.
Deslizar com o dedo para a direita (telemóvel)	Recua os cartões.
Deslizar nas categorias (telemóvel)	Percorre a lista horizontal de categorias.
Clicar no botão de um cartão	Navega para a página indicada (página detalhada do item).
Usar as setas do teclado	Permite mudar de categoria (Esquerda/Direita) ou percorrer os cartões quando o carrossel está focado.
Carregar Tab	Permite navegar entre categorias, cartões e botões de seta usando o teclado.

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas apresentado por cima do título principal. O editor escolhe o nível de cabeçalho.
Título principal	Título	Não	Texto em destaque centrado no topo (suporta negrito). O editor escolhe o nível de cabeçalho.
Categorias	Lista	Sim	Lista de categorias. Cada categoria tem um nome e uma coleção de cartões. Pelo menos uma categoria é necessária.

Cada categoria contém:

Elemento	Tipo	Obrigatório	Descrição
Nome da categoria	Texto	Sim	Texto apresentado na lista de categorias (ex: “Quartos”, “Restaurantes”)
Cartões	Lista	Sim	Conjunto de cartões dessa categoria

Cada cartão contém:

Elemento	Tipo	Obrigatório	Descrição
Imagem (computador)	Imagem	Sim	Imagem do cartão para ecrãs grandes
Imagem (telemóvel)	Imagem	Sim	Imagem do cartão para ecrãs pequenos
Descrição da imagem	Texto	Sim	Descrição para leitores de ecrã (ex: “Suite Deluxe com vista para o Atlântico”)
Título do cartão	Título	Não	Nome do item (ex: “Suite Deluxe”, “Restaurante Galáxia”)
Descrição	Texto	Não	Texto curto com o essencial sobre o item
Botão	Botão	Não	Botão sublinhado com texto (ex: “Descobrir”, “Reservar”) e ligação para a página do item

Nota: A etiqueta e o título principal do módulo são opcionais. Já o conjunto de categorias tem de ter pelo menos uma categoria com pelo menos um cartão para o módulo fazer sentido. Os cartões podem ter só a imagem, ou imagem + título, ou imagem + título + descrição + botão — o cartão adapta-se automaticamente aos campos preenchidos.

Opções de Configuração

Opções disponíveis no backoffice:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

O restante aspeto visual (cores, tipografia, ícone da categoria ativa, fundo decorativo, raio dos cantos das imagens) é controlado automaticamente pelo tema do hotel e não precisa de configuração no módulo.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Duas colunas: categorias à esquerda, cartões à direita	Uma coluna: categorias em barra horizontal por cima, cartões em carrossel horizontal por baixo
Título	Grande, centrado, com o fundo decorativo ao redor	Tamanho adaptado, ainda centrado, fundo decorativo ajustado
Lista de categorias	Vertical, ocupando uma coluna à esquerda	Horizontal, deslizável com o dedo
Categoria ativa	Destacada com cor e ícone ao lado	Destacada com cor e ícone ao lado (na posição da lista horizontal)
Cartões	Vários cartões visíveis ao mesmo tempo em linha, com alturas alternadas	Um cartão principal visível, próximo cartão a espreitar à direita
Barra de progresso	Larga, posicionada por baixo dos cartões	Mais curta e visível, ao fundo
Setas de navegação	No canto inferior direito dos cartões	No canto inferior direito, igualmente acessíveis
Fundo decorativo	Grande, atrás do título	Reduzido, ajustado ao formato vertical

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com a primeira categoria selecionada e os seus cartões visíveis
Categoria selecionada	A categoria ativa é apresentada com cor diferente e um ícone ao lado; as outras aparecem em tom mais discreto
Ao passar o rato numa categoria	A cor da categoria muda ligeiramente para indicar que é clicável
Ao passar o rato num botão de seta	O botão ganha um contorno ou muda de cor
Primeira posição do carrossel	O botão de seta esquerda fica desativado (cor mais clara)
Última posição do carrossel	O botão de seta direita fica desativado
Ao mudar de categoria	Os cartões transitam suavemente para os da nova categoria; o carrossel volta à primeira posição
Categoria vazia	Se uma categoria não tiver cartões, o módulo apresenta o espaço do carrossel sem conteúdo visível (ou uma mensagem opcional)
Cartão sem descrição	O cartão apresenta apenas a imagem, título e botão; o espaço da descrição não aparece vazio
Cartão sem botão	O cartão apresenta apenas imagem, título e descrição; o espaço do botão não aparece vazio
Modo sem animações (preferência do sistema)	As transições entre categorias e o deslizar do carrossel ficam instantâneas (sem movimento suave) para utilizadores que preferem menos animação

Acessibilidade

Pode ser navegado inteiramente com o teclado (Tab para saltar entre categorias, cartões e setas; setas do teclado para mudar de categoria e percorrer cartões; Enter/Espaço para ativar).
A lista de categorias funciona como “separadores” (padrão de acessibilidade conhecido): o leitor de ecrã anuncia corretamente qual é a categoria ativa e quantas existem.
As imagens dos cartões têm uma descrição alternativa legível por leitores de ecrã.
Os botões de seta (avançar/recuar) têm texto legível por leitores de ecrã (“Slide anterior”, “Slide seguinte”) mesmo quando aparecem apenas como ícones.
A barra de progresso é anunciada por leitores de ecrã, indicando a posição atual no conjunto de cartões.
Todos os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
Para utilizadores que preferem menos animação (configuração no sistema operativo), as transições suaves são desativadas automaticamente.
O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual em todos os temas.

Temas

O módulo adapta-se visualmente a cada hotel: cores, tipografia, ícone da categoria ativa, fundo decorativo atrás do título e raio dos cantos das imagens dos cartões seguem a identidade visual de cada hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visíveis entre temas (exemplos):

Savoy Palace — roxo profundo + dourado, fundo decorativo ornamental, ícone diamante, cantos das imagens ligeiramente arredondados
Saccharum — verde suave + nome “SACCHARUM” como fundo em letras claras, ícone gráfico, cantos levemente arredondados
Calheta Beach — tom azul-claro relacionado ao mar, fundo adequado à identidade costeira
Hotel Next — paleta mais contemporânea (rosa/azul claro), ícone e fundo adaptados ao posicionamento “next generation”
Savoy Signature — paleta neutra institucional, fundo com logótipo do grupo

A estrutura (posição da lista de categorias, layout dos cartões, setas, barra de progresso) mantém-se igual em todos os temas para que a experiência seja consistente.

Changelog

Data	Estado	Descrição
2026-04-21	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Publicada	Publicada no Docmost (nova página)