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) — Matriz de variantes

Mobile (375px)

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

Variantes por tema (matrizes de variantes)

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 associam-se ao hotel (imprensa, associações, prémios).

É 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 tem uma estrutura única — a citação e a aspa decorativa estão sempre presentes. As diferenças visíveis entre instâncias do módulo resultam de quais campos opcionais o editor preenche (autor e afiliações).

Variante 1 — Completa (citação + autor + afiliações)

Como visitante, quero ver uma citação com o autor identificado e os logótipos de quem reconhece o hotel, para saber quem diz a frase e sentir confiança na reputação do hotel.

Elementos visíveis:

Aspa decorativa no topo (símbolo de aspas duplas, em tom suave do tema)
Frase principal em destaque, centrada, em tipografia de título
Secção do autor: fotografia circular, nome em negrito, função por baixo
Etiqueta da zona de afiliações (ex: “OUR AFFILIATIONS”), em maiúsculas
Três logótipos lado a lado (imagens de entidades parceiras, imprensa, prémios)

Critérios de Aceitação:

A aspa decorativa aparece no topo, centrada
A frase é apresentada em destaque, centrada e com tipografia grande
A fotografia do autor é circular e está alinhada ao lado do nome e função
A etiqueta da zona de afiliações aparece em maiúsculas sobre os logótipos
Os logótipos aparecem alinhados ao centro, lado a lado
No ecrã de telemóvel, os logótipos podem quebrar para duas linhas se não couberem todos na mesma linha

Variante 2 — Citação + autor (sem afiliações)

Como visitante, quero ver uma citação simples com o autor identificado, para conhecer a opinião de uma pessoa específica sem poluir o espaço com logótipos.

Elementos visíveis:

Aspa decorativa no topo
Frase principal em destaque
Secção do autor: fotografia circular, nome e função

Critérios de Aceitação:

A secção de afiliações não aparece de todo
Não há espaço vazio visível onde estariam os logótipos
A citação e o autor ficam centrados verticalmente no bloco

Variante 3 — Citação + afiliações (sem autor)

Como visitante, quero ver uma citação acompanhada apenas pelos logótipos de quem a cita, para perceber a origem institucional da frase.

Elementos visíveis:

Aspa decorativa no topo
Frase principal em destaque
Etiqueta da zona de afiliações e logótipos

Critérios de Aceitação:

A secção do autor (fotografia, nome, função) não aparece
A frase e a zona de afiliações ficam bem distribuídas verticalmente
Não há espaço vazio visível onde estaria o autor

Variante 4 — Apenas citação

Como visitante, quero ver uma citação impactante sem nenhum detalhe adicional, para absorver apenas a força da mensagem.

Elementos visíveis:

Aspa decorativa no topo
Frase principal em destaque

Critérios de Aceitação:

Apenas a aspa decorativa e a frase aparecem
O bloco mantém-se visualmente equilibrado, sem áreas vazias
A frase fica bem centrada no espaço disponível

Variante 5 — Sem a aspa decorativa

Como editor, quero poder esconder a aspa decorativa grande, para casos em que a frase deve aparecer sem este elemento gráfico (ex: citações curtas, contextos mais minimalistas).

Elementos visíveis:

Frase principal (sem a aspa decorativa por cima)
Autor e afiliações, se estiverem preenchidos

Critérios de Aceitação:

A aspa decorativa não aparece
A frase sobe e fica no topo do bloco
Todo o resto do conteúdo (autor, afiliações) continua a funcionar normalmente

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) 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 imagens dos logótipos a apresentar (até 3 visíveis lado a lado no computador)

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
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 esconder o módulo sem o apagar

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

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 hotéis suportados:

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

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.

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)