M09 — Quotes

Bloco de destaque para apresentar uma citação ou testemunho — uma frase forte, o autor da frase e, opcionalmente, logótipos de entidades que reconhecem o hotel. Serve para transmitir credibilidade, confiança e voz externa (clientes, imprensa, parceiros).

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

Screenshots de Referência

Desktop (1440px) — Palace

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →

Outras variantes por hotel (desktop)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo Quotes apresenta uma citação ou testemunho de forma centrada e visualmente destacada. Mostra uma frase em destaque, marcada com uma aspa decorativa grande por cima do texto, e permite acrescentar o nome e a função da pessoa que disse a frase (com uma fotografia circular), assim como uma área final com logótipos de entidades que reconhecem ou se associam ao hotel (imprensa, associações, prémios).

O módulo tem dois parâmetros de configuração independentes: o tamanho da citação (Big ou Small, que controla a dimensão tipográfica da frase) e o modo de fundo (Cor A ou Cor B, que alterna entre os dois esquemas de cor do tema do hotel). Estes parâmetros são configuráveis no backoffice e estão disponíveis para todos os hotéis.

É usado para dar voz a clientes satisfeitos, destacar opiniões de publicações de referência, ou reforçar a credibilidade do hotel através das suas afiliações e distinções.

Tipicamente aparece em páginas institucionais (“Sobre nós”), páginas de um hotel específico, ou em páginas de destino que pretendem criar confiança no visitante antes de apresentar uma decisão (reserva, contacto, etc.).

Variantes

Este módulo combina dois parâmetros de configuração independentes — Tamanho e Cor — com campos de conteúdo opcionais. A aparência final resulta da combinação destes fatores.

Variante 1 — Big, Cor A (citação grande, fundo Cor A)

Como visitante, quero ver uma citação com destaque tipográfico máximo sobre um fundo claro, para absorver a mensagem com impacto imediato.

Elementos visíveis:

Aspa decorativa no topo (quando ativa)
Frase principal em tipografia grande e destacada, centrada
Secção do autor: fotografia circular, nome em negrito, função por baixo (quando preenchidos)
Etiqueta da zona de afiliações em maiúsculas e logótipos (quando preenchidos)

Critérios de Aceitação:

A frase apresenta-se no tamanho Big (tipografia de título grande)
O fundo usa o esquema de cor A do tema do hotel
Todos os elementos opcionais aparecem quando os respetivos campos estão preenchidos no backoffice
O bloco ajusta-se automaticamente à presença ou ausência de cada campo opcional

Variante 2 — Small, Cor A (citação pequena, fundo Cor A)

Como visitante, quero ver uma citação menos dominante sobre um fundo, para contextos onde a frase complementa o restante conteúdo sem o sobrepor.

Critérios de Aceitação:

A frase apresenta-se no tamanho Small (tipografia de corpo maior, mas inferior ao Big)
O fundo usa o esquema de cor A do tema do hotel
Os restantes elementos comportam-se da mesma forma que na Variante 1

Variante 3 — Big, Cor B (citação grande, fundo Cor B)

Como visitante, quero ver uma citação com destaque tipográfico máximo sobre o fundo alternativo do tema, para criar contraste visual em relação às secções adjacentes da página.

Critérios de Aceitação:

A frase apresenta-se no tamanho Big
O fundo usa o esquema de cor B do tema do hotel (a segunda opção de cor, que pode ser mais escura ou mais saturada consoante o hotel)
As cores do texto, aspa decorativa e demais elementos adaptam-se ao esquema B para garantir contraste

Variante 4 — Small, Cor B (citação pequena, fundo Cor B)

Critérios de Aceitação:

A frase apresenta-se no tamanho Small
O fundo usa o esquema de cor B do tema do hotel
Os restantes elementos comportam-se da mesma forma que nas variantes anteriores

Interações do Utilizador

Este módulo apresenta apenas conteúdo estático gerido pelo backoffice. Não contém interações com o utilizador.

Os logótipos de afiliações são imagens estáticas — não são clicáveis. O módulo não tem carrosséis, botões, acordeões, nem qualquer comportamento dinâmico.

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Citação	Texto	Sim	Frase principal da citação. Aceita formatação básica (negrito, itálico, sublinhado) dentro do editor de texto
Nome do autor	Texto	Não	Nome da pessoa a quem a frase é atribuída (ex: “Maria Fernandes”)
Função do autor	Texto	Não	Função, cargo ou contexto da pessoa (ex: “Travel & Leisure Magazine”)
Fotografia do autor	Imagem	Não	Fotografia circular do autor, apresentada ao lado do nome
Etiqueta das afiliações	Texto	Não	Título curto que antecede os logótipos (ex: “OUR AFFILIATIONS”, “FEATURED IN”)
Logótipos de afiliações	Imagem (lista)	Não	Conjunto de logótipos a apresentar, máximo 3. Proporção recomendada 2:1 (horizontal). Cada imagem deve incluir uma descrição alternativa para leitores de ecrã.
Aspas	Imagem	Não	Elemento gráfico em forma de Aspas

Nota: A citação é o único campo obrigatório. Todos os outros são opcionais e o módulo adapta-se à sua presença ou ausência — os espaços ajustam-se sem deixar áreas vazias. Cada logótipo deve incluir a sua descrição alternativa (texto para leitores de ecrã).

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
Tamanho da citação	Big / Small	Big	Controla a dimensão tipográfica da frase principal. Big usa uma tipografia de título grande; Small usa uma tipografia de corpo maior, mais adequada a citações longas ou contextos menos dominantes.
Modo de fundo	Cor A / Cor B	Cor A	Alterna entre os dois esquemas de cor do tema do hotel. Cor A usa o primeiro esquema de cor; Medium usa o segundo esquema, que pode ser mais escuro ou mais saturado consoante o hotel. Disponível para todos os hotéis.
Mostrar aspa decorativa	Sim / Não	Sim	Controla se a aspa decorativa grande aparece no topo da citaçã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.

Nota: As cores de fundo, cor da aspa decorativa, cor do texto e tipografia são definidas automaticamente pelo tema do hotel em que o módulo aparece — não há opções de configuração visuais adicionais no backoffice.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Bloco centrado com largura máxima confortável para leitura	Ocupa toda a largura do ecrã, com margens laterais reduzidas
Aspa decorativa	Tamanho maior (aproximadamente 96×76px)	Tamanho reduzido (aproximadamente 64×50px)
Frase principal	Tipografia de título grande, centrada	Tipografia adaptada, mantém-se centrada e quebra naturalmente em várias linhas
Fotografia do autor	Circular, ao lado do nome/função	Mantém-se circular, ao lado do nome/função
Logótipos das afiliações	Três logótipos lado a lado, sem quebra	Podem quebrar para duas linhas se não couberem todos numa linha
Espaçamento vertical	Maior espaçamento em volta do bloco	Espaçamento reduzido para caber melhor no ecrã

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com todos os elementos visíveis ao carregar a página
Sem autor	A secção do autor não aparece; o espaço ajusta-se automaticamente
Sem afiliações	A etiqueta e os logótipos não aparecem; o bloco fica mais compacto
Sem aspa decorativa	A aspa grande não aparece; a frase sobe no bloco
Citação com negrito	As palavras marcadas como negrito aparecem mais pretas dentro da frase
Citação muito longa	O bloco cresce em altura para acomodar todo o texto sem o cortar
Muitos logótipos	No telemóvel, os logótipos podem reorganizar-se em duas linhas

Animação

O módulo tem uma animação de scroll reveal aplicada ao conteúdo textual: a citação, o autor e as afiliações revelam-se progressivamente à medida que o visitante faz scroll e o módulo entra no campo de visão.

Referência de implementação: https://reactbits.dev/text-animations/scroll-reveal

Para utilizadores com prefers-reduced-motion ativo, todos os elementos aparecem instantaneamente sem animação

Acessibilidade

O módulo usa uma estrutura adequada a leitores de ecrã: a frase é identificada como uma citação (blockquote), e o nome e função do autor são lidos a seguir.
As imagens (fotografia do autor e logótipos das afiliações) têm sempre uma descrição alternativa para utilizadores com leitor de ecrã.
A aspa decorativa grande é apresentada como elemento meramente visual — é ignorada por leitores de ecrã para não poluir a experiência de quem usa tecnologias de apoio.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1), tanto nas variantes claras como na escura (Savoy Signature).

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo, cor do texto, cor da aspa decorativa, cor da fotografia do autor (contorno) e tipografia dos títulos e do corpo de texto seguem a identidade visual do 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)

Notas por tema (com base no Figma):

Savoy Palace — fundos em tons beige claros, aspa em violeta suave, tipografia serifada de título
Saccharum — fundos brancos e verdes muito suaves, aspa em tom terroso
Calheta Beach — fundos brancos e turquesa claro, aspa em vermelho/coral
Hotel Next — fundos brancos e azul forte, aspa em laranja
Savoy Signature — fundos em azul-marinho escuro, texto e elementos em tons claros (tema escuro)

O esquema estrutural (posição da aspa, centramento da frase, disposição do autor e afiliações) mantém-se consistente entre todos os hotéis.

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