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 →

Outras variantes por hotel (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 png ou SVG) reforça a identidade visual da secção.

Quando a opção de drag está ativa no backoffice, aparece um cursor de drag sobre o carrossel, indicando que o visitante pode arrastar os cartões diretamente com o rato.

Este módulo suporta até 12 categorias. É ú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, itálico, sublinhado)
Fundo decorativo do tema do hotel atrás do título (padrão ornamental, símbolo ou nome do hotel em tom claro)
Label de secção editável acima da lista de categorias (ex: “EXPLORE”, “DESCUBRA”)
Lista vertical de categorias à esquerda; a categoria ativa tem um pequeno ícone identificador (ex: diamante, gráfico de barras), máximo de 12 elementos, sem scroll.
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
Cursor de drag visível sobre o carrossel quando a opção está ativa no backoffice
Carrossel permite percorrer muitos cartões (12 cartões máx) 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 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
A label de secção aparece acima da lista de categorias com o texto definido no backoffice
Todas as categorias estão visíveis numa lista à esquerda (máximo 12)
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
O cursor de drag aparece sobre o carrossel apenas quando a opção de drag está ativa no backoffice
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

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 →

Elementos visíveis:

Título centrado no topo, com o fundo decorativo adaptado ao tamanho do ecrã
Etiqueta por cima do título
Label de secção acima da lista de categorias
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
A label de secção aparece acima da lista de categorias
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

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 cartão (item por item). A barra de progresso move-se.
Clicar no botão de seta esquerda	O carrossel recua para o cartão anterior (item por item).
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 formatação RTE simplificada: negrito, itálico, sublinhado e link. O editor escolhe o nível de cabeçalho.
Label de categorias	Texto	Não	Texto em maiúsculas apresentado acima da lista de categorias (ex: “EXPLORE”, “DESCUBRA”). Editável no backoffice. Quando não está preenchido, o espaço não aparece vazio — o primeiro item da lista sobe.
Categorias	Lista	Sim	Lista de categorias. Mínimo 1, máximo 12. Cada categoria tem um nome e uma coleção de cartões.

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 (desktop)	Imagem	Sim	Imagem do cartão para ecrãs grandes
Imagem (mobile)	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 ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida.
Drag no carrossel	Ativo / Inativo	Inativo	Quando ativo, aparece um cursor de drag sobre o carrossel indicando que o visitante pode arrastar os cartões diretamente com o rato. Independente do número de cartões.

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	Em BO é obrigatório ter ao menos um card por categoria. Não é apresentada nenhuma mensagem de erro — cabe ao editor evitar esta situação no backoffice.
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
Drag ativo (cursor sobre carrossel)	O cursor do rato muda para o cursor de drag ao entrar na área dos cartões, indicando que é possível arrastar.

Animação de entrada

Headline slide up mask.
REF: https://www.mellem.ca/ **“**Bienvenue à l’ère des locataires.” e “Des histoires à partager”

Na versão slider com mais do que 3 cards, aparece um cursor de drag para fazer drag nos cards.
REF: https://preview.themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266

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.

Este módulo permite adicionar uma imagem vetorial decorativa atrás do título, pelo que o cumprimento do contraste mínimo (4.5:1) entre o título e a imagem fica dependente da escolha do editor no backoffice.

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 sites suportados:

Savoy Palace
Saccharum
Calheta Beach
Hotel Next
Savoy Signature (site do grupo)
Gardens (por desenvolver)
The Reserve (por desenvolver)
Royal Savoy (por desenvolver)

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.

Formatos de Imagem Aceites

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

JPG — preferencial para fotografias e imagens com tratamento fotográfico.
SVG — preferencial para imagens vetoriais (logótipos, ícones, símbolos, ilustrações simples).
WEBP — alternativa otimizada para fotografia/gráficos quando se procura melhor performance.
PNG — para imagens com transparência ou detalhe gráfico que não seja vetorial.
GIF — apenas quando é necessária animação simples.

Este módulo permite a inserção de imagens em formato GIF. Atenção: dado que estes ficheiros podem ter um peso elevado, é essencial uma gestão cuidada no backoffice — caso contrário, a performance do website poderá ser seriamente comprometida.

Changelog

Data	Estado	Descrição
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-06	Validação Tech	Atualizado e validado por Rui Rosa
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-21	Rascunho	Versão inicial criada a partir do Figma