M16 — Logo Carousel

Módulo de destaque que apresenta logótipos de prémios, certificações, parceiros ou marcas associadas ao hotel em movimento contínuo horizontal. O módulo pode ter uma ou duas filas independentes: cada fila desliza automaticamente num sentido (esquerda ou direita) em loop infinito, criando uma sensação de prestígio e reconhecimento institucional sem obrigar o visitante a interagir.

Campo	Valor
Módulo	M16 — Logo Carousel
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T573
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Fundo Claro e Fundo Bege

Mobile (375px) — Fundo Claro e Fundo Bege

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

Variantes por tema

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Logo Carousel é um bloco de reforço de reputação e confiança. Apresenta no topo um cabeçalho opcional (uma pequena etiqueta, um título grande e um parágrafo de introdução) e, por baixo, uma ou duas filas horizontais com cartões que se deslocam lentamente em loop contínuo.

Cada cartão tem uma imagem (por exemplo, o logótipo de um prémio, certificação ou marca parceira) e, opcionalmente, um subtítulo curto e uma pequena descrição. As filas deslizam de forma suave e contínua no sentido escolhido: uma pode deslizar para a esquerda e a outra para a direita, criando movimento cruzado que atrai o olhar sem ser intrusivo. Quando o visitante passa o rato por cima, o movimento pausa temporariamente para permitir ler com atenção.

Por baixo das filas, pode ainda existir um botão principal que leva o visitante a uma página dedicada (por exemplo, “Ver todos os prémios” ou “Conhecer os parceiros”).

Este módulo é útil em páginas institucionais (“Sobre o Hotel”, “Reconhecimento e Prémios”, “Sustentabilidade”, “Parceiros”) — sempre que o hotel queira comunicar visualmente o seu prestígio ou as suas associações de forma elegante e não intrusiva.

Variantes

Variante 1 — Fundo claro (padrão)

Como visitante, quero ver os prémios e certificações do hotel num fundo limpo e neutro, para que os logótipos se destaquem sem competir com outros elementos da página.

Elementos visíveis:

Fundo branco/claro
Pequena etiqueta em maiúsculas centrada no topo
Título grande centrado por baixo da etiqueta (pode ter palavras a negrito)
Parágrafo curto centrado por baixo do título
Duas filas de cartões com imagens em loop contínuo, em sentidos opostos
Por baixo de cada imagem, o nome (subtítulo) e uma descrição curta centrados
Botão principal centrado por baixo das filas

Critérios de Aceitação:

O fundo do módulo é claro (branco ou bege muito suave)
O título aparece centrado no topo, com a etiqueta por cima
As filas de cartões deslocam-se automaticamente em loop sem interrupção
As duas filas movem-se em sentidos opostos (uma para a esquerda, outra para a direita)
O botão redireciona para a página indicada pelo editor

Variante 2 — Fundo bege (ênfase institucional)

Como visitante, quero identificar visualmente os módulos mais institucionais do site (como prémios e reconhecimento), para que se distingam dos módulos de conteúdo regular.

Elementos visíveis:

Fundo em tom bege/creme suave (em vez de branco)
Mesmos elementos da Variante 1 (etiqueta, título, descrição, duas filas, botão)
Os cartões aparecem sobre o mesmo fundo bege (não têm fundo próprio)

Critérios de Aceitação:

O fundo do módulo é bege/creme em vez de branco
Todos os textos mantêm bom contraste sobre o fundo bege
A estrutura e o comportamento mantêm-se iguais à Variante 1

Variante 3 — Apenas uma fila

Como editor de conteúdo, quero poder mostrar apenas uma fila de logótipos, para situações em que o hotel tem menos logótipos ou quer uma apresentação mais compacta.

Elementos visíveis:

Cabeçalho (etiqueta, título, descrição) igual às variantes anteriores
Apenas uma fila de cartões em movimento contínuo
Botão opcional por baixo

Critérios de Aceitação:

A fila única mantém-se centrada verticalmente
Não aparece espaço vazio onde estaria a segunda fila
A fila pode deslocar-se para a esquerda ou para a direita, conforme configurado

Variante 4 — Sem cabeçalho (apenas filas)

Como editor de conteúdo, quero poder apresentar apenas os logótipos em movimento, sem texto introdutório, para quando o contexto já está dado pela secção anterior da página.

Elementos visíveis:

Não há etiqueta, título nem descrição
Apenas as filas de cartões em movimento
Botão opcional por baixo

Critérios de Aceitação:

Quando não há cabeçalho, o módulo começa diretamente com as filas de cartões
O espaço que seria ocupado pelo cabeçalho não aparece vazio
O módulo mantém a sua identidade visual (fundo, espaçamentos)

Variante 5 — Cartões apenas com imagem

Como editor de conteúdo, quero poder apresentar só os logótipos, sem textos por baixo, para quando os logótipos já são autoexplicativos (por exemplo, prémios bem conhecidos como Michelin ou Forbes).

Elementos visíveis:

Cartões apenas com a imagem do logótipo (sem subtítulo nem descrição)
Filas mais compactas verticalmente

Critérios de Aceitação:

Os cartões apresentam apenas a imagem, sem textos por baixo
A altura dos cartões ajusta-se automaticamente (fica menor)
A opção de mostrar/esconder os subtítulos e as descrições é global (aplica-se a todos os cartões do módulo)

Variante 6 — 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 da etiqueta, do título e do botão principal
Cor do fundo bege (tonalidade própria de cada hotel)
Fonte dos títulos e dos subtítulos dos cartões
Cor dos subtítulos por baixo das imagens

Critérios de Aceitação:

As cores de todos os elementos seguem o tema do hotel atual
A tipografia dos títulos e textos segue o tema
A estrutura e o comportamento mantêm-se iguais entre todos os temas

Interações do Utilizador

Este é um módulo maioritariamente visual. O visitante não precisa de interagir para ver todos os logótipos — o movimento contínuo mostra-os naturalmente. As interações disponíveis são mínimas:

Interação	Descrição
Passar o rato por cima de uma fila	O movimento da fila pausa temporariamente, permitindo ver com atenção os logótipos e ler os textos por baixo. Ao retirar o rato, a fila retoma o movimento.
Clicar no botão principal	Redireciona para a página indicada pelo editor (por exemplo, página de “Prémios e Reconhecimento”).
Ativar a preferência do sistema “Reduzir movimento”	Quando o sistema operativo do visitante está configurado para reduzir animações, as filas deixam de se deslocar automaticamente (ficam paradas), por respeito a utilizadores sensíveis ao movimento.

Nota: Os cartões em si não são clicáveis — apenas o botão principal redireciona para outra página.

Elementos

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

Cabeçalho do 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.
Descrição	Texto	Não	Parágrafo curto centrado por baixo do título, com o contexto da secção.
Botão principal	Botão	Não	Botão com texto e ligação para outra página (ex: “Ver todos os prémios”).

Filas de cartões

Elemento	Tipo	Obrigatório	Descrição
Filas	Lista	Não	O módulo suporta até duas filas independentes. Cada fila tem os seus próprios cartões e o seu próprio sentido de movimento.

Cada fila contém:

Elemento	Tipo	Obrigatório	Descrição
Sentido do movimento	Opção	Sim	Para onde a fila se desloca: esquerda ou direita.
Cartões	Lista	Sim	Conjunto de cartões a mostrar nessa fila.

Cada cartão contém:

Elemento	Tipo	Obrigatório	Descrição
Imagem (computador)	Imagem	Sim	Imagem do logótipo para ecrãs grandes.
Imagem (telemóvel)	Imagem	Sim	Imagem do logótipo para ecrãs pequenos.
Descrição da imagem	Texto	Sim	Descrição para leitores de ecrã (ex: “Logótipo Michelin Guide”).
Subtítulo	Título	Não	Nome curto por baixo do logótipo (ex: “Michelin Star 2024”).
Descrição curta	Texto	Não	Texto curto adicional por baixo do subtítulo (ex: “Restaurante Galáxia”).

Nota: Quase todos os elementos do cabeçalho são opcionais (pode existir um módulo apenas com filas). As filas são o conteúdo principal e devem ter pelo menos uma fila com alguns cartões. Cada cartão precisa obrigatoriamente de uma imagem (computador e telemóvel); o subtítulo e a descrição curta são opcionais e podem ser escondidos globalmente através das opções de configuração.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar.
Tipo de fundo	Claro / Bege	Claro	Escolhe entre fundo branco (padrão) ou fundo bege/creme (ênfase institucional).
Mostrar subtítulo dos cartões	Ativo / Inativo	Ativo	Quando desativado, os subtítulos por baixo das imagens ficam escondidos em todos os cartões do módulo.
Mostrar descrição dos cartões	Ativo / Inativo	Ativo	Quando desativado, as descrições curtas por baixo dos subtítulos ficam escondidas em todos os cartões do módulo.

Nota: As opções “Mostrar subtítulo” e “Mostrar descrição” aplicam-se a todo o módulo (todas as filas, todos os cartões). Não é possível esconder apenas alguns subtítulos ou descrições de forma individual — a escolha é global.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Cabeçalho centrado no topo, filas com cartões largos em loop	Cabeçalho centrado no topo, filas com cartões mais pequenos em loop
Largura do título	Título pode ocupar várias linhas num corpo centrado	Título quebra mais linhas, mantém-se centrado
Tamanho dos cartões	Imagens maiores (aproximadamente o dobro da largura mobile)	Imagens mais pequenas, permitindo ver dois cartões em simultâneo
Espaçamento entre cartões	Maior espaçamento horizontal	Espaçamento reduzido
Velocidade do movimento	Suave e contínua	Suave e contínua (mesmo ritmo percetível)
Botão principal	Centrado por baixo das filas	Centrado por baixo das filas, mantendo proporção

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com as filas já em movimento contínuo.
Ao passar o rato por cima de uma fila	A fila onde o rato está pausa o movimento; as outras filas continuam a mover-se. Ao retirar o rato, a fila retoma o movimento.
Filas vazias	Se um módulo for configurado sem filas ou com filas sem cartões, o módulo apresenta apenas o cabeçalho (se existir) e o botão (se existir), sem espaço vazio.
Cabeçalho sem um dos elementos	Se faltar a etiqueta, título ou descrição, o espaço desse elemento não aparece vazio — os outros elementos ajustam-se automaticamente.
Cartões sem subtítulo ou descrição	Quando os subtítulos ou descrições estão desativados ou em falta, os cartões ficam mais compactos; o espaço em baixo não aparece vazio.
Modo sem animações (preferência do sistema)	Quando o sistema operativo do visitante indica preferência por reduzir movimento, as filas ficam paradas (sem deslocação automática) para respeitar essa preferência.

Acessibilidade

As imagens dos cartões têm uma descrição alternativa legível por leitores de ecrã (ex: “Logótipo Michelin Guide”).
O botão principal tem texto legível e pode ser ativado por teclado (tecla Tab para focar, Enter/Espaço para ativar).
O movimento das filas pausa automaticamente para utilizadores que tenham a preferência do sistema “Reduzir movimento” ativada.
O contraste entre os textos (etiqueta, título, descrição, subtítulos) e o fundo (branco ou bege) cumpre os requisitos de acessibilidade visual em todos os temas.
Os cartões em movimento não são elementos interativos — leitores de ecrã não anunciam cada cartão individualmente, evitando sobrecarga de informação.
O botão principal tem indicação visual clara quando está selecionado pelo teclado.

Temas

O módulo adapta-se visualmente a cada hotel: cores (fundo bege, etiqueta, título, botão principal, subtítulos dos cartões) e tipografia (título principal e subtítulos) 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

A estrutura (duas filas em loop, cabeçalho centrado, botão centrado) mantém-se igual em todos os temas para que a experiência seja consistente. O que varia entre temas são as cores, a tonalidade do fundo bege e as fontes tipográficas.

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)