M13 — FAQs

Bloco de perguntas frequentes organizadas em acordeão. O visitante clica numa pergunta para ver a respetiva resposta, sem sair da página. Serve para responder às dúvidas mais comuns (horários, check-in, restauração, spa) de forma organizada e compacta.

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

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →

Variantes por hotel

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo FAQs apresenta uma lista de perguntas frequentes que o visitante pode expandir para ver as respostas. No desktop, várias perguntas podem estar abertas em simultâneo (o utilizador controla o que quer ver); no mobile, apenas uma pergunta pode estar aberta de cada vez por secção, para manter a navegação limpa num ecrã estreito.

No topo do bloco aparece um título principal (ex: “Frequently asked Questions”) e, opcionalmente, uma chamada para um botão de contacto (“CONTACT US”) caso o visitante não encontre resposta à sua dúvida. As perguntas podem ser organizadas em várias secções, cada uma com o seu próprio subtítulo (ex: “Check-in & Check-out”, “Restauração”, “Spa”).

No fim da lista, pode existir um botão opcional que funciona de duas formas distintas, configuráveis no BO: como botão de “carregar mais” (expande perguntas adicionais inline sem sair da página) ou como link de navegação para a página completa de FAQs.

Tipicamente aparece em páginas de informação ao hóspede, páginas de serviços, ou numa página dedicada “Perguntas Frequentes”.

Variantes

Este módulo tem uma estrutura única — uma lista de perguntas em acordeão. As diferenças entre instâncias resultam dos campos que o editor preenche (título, contactos, subtítulos, botão final) e de quantas secções são configuradas.

Variante 1 — Completa (título + contacto + uma secção com subtítulo + botão final)

Como visitante, quero ver uma lista organizada de perguntas frequentes com um contacto à mão e um botão final, para poder consultar as respostas no local e alargar a informação se necessário.

Elementos visíveis:

Título principal à esquerda (ex: “Frequently asked Questions”)
À direita, etiqueta “Got any more questions?” e botão preenchido “CONTACT US”
Subtítulo da secção
Lista de perguntas, cada uma com um sinal de ”+” à direita
Botão final (ex: “View all FAQs” ou “Carregar mais”)

Critérios de Aceitação:

O título e a zona de contacto aparecem lado a lado no topo do bloco, em desktop
Todas as perguntas aparecem inicialmente fechadas (com ”+”)
Desktop: várias perguntas podem estar abertas em simultâneo — clicar numa pergunta fechada abre-a sem fechar as outras
Mobile: apenas uma pergunta pode estar aberta de cada vez por secção — clicar numa segunda pergunta da mesma secção fecha a anterior
Ao clicar numa pergunta aberta, ela fecha; o ”+” muda para ”−” quando aberta
O botão “CONTACT US” redireciona para a página de contacto indicada
O botão final comporta-se conforme a configuração do BO: abre mais perguntas inline ou redireciona para outra página

Variante 2 — Várias secções

Como visitante, quero encontrar as perguntas agrupadas por tema (ex: Check-in, Restauração, Spa), para poder localizar rapidamente a dúvida que tenho.

Elementos visíveis:

Título principal e zona de contacto (opcionais)
Várias secções, cada uma com o seu subtítulo
Lista de perguntas por secção (acordeão independente por secção)

Critérios de Aceitação:

Cada secção mostra o seu subtítulo por cima das suas perguntas
Desktop: as perguntas de todas as secções são independentes — podem estar abertas várias em simultâneo, de secções diferentes ou da mesma secção
Mobile: apenas uma pergunta pode estar aberta de cada vez por secção (cada secção é independente)

Variante 3 — Sem cabeçalho (apenas lista de perguntas)

Como visitante, quero ver uma lista de perguntas sem cabeçalho, para quando este bloco está dentro de uma página que já tem um título próprio por cima.

Elementos visíveis:

Apenas a lista de perguntas (com ou sem subtítulo de secção)

Critérios de Aceitação:

O título principal e a zona de contacto não aparecem
O bloco começa diretamente com a lista de perguntas (ou com o subtítulo da secção se existir)

Variante 4 — Sem secção com subtítulo

Como visitante, quero ver uma lista simples de perguntas sem agrupamento, para módulos mais curtos onde não se justifica dividir por temas.

Elementos visíveis:

Título principal e zona de contacto (opcionais)
Lista de perguntas diretamente, sem subtítulo de secção

Critérios de Aceitação:

O subtítulo não aparece
A lista de perguntas começa logo abaixo do cabeçalho (ou no topo, se o cabeçalho não existir)

Variante 5 — Sem botão final

Como visitante, quero ver uma lista de perguntas sem o link final, para páginas onde todas as perguntas relevantes estão já apresentadas.

Elementos visíveis:

Mesmos elementos das outras variantes, sem o link sublinhado no final

Critérios de Aceitação:

O link final não aparece
Não há espaço vazio visível onde estaria o link

Interações do Utilizador

Este módulo é interativo. O visitante pode expandir e fechar as perguntas.

Interação	Descrição
Clicar numa pergunta fechada	Expande a resposta por baixo. Desktop: Mantém o estado de cada pergunta (se tiver outras abertas mantém-se abertas). Mobile: Se outra pergunta da mesma secção estava aberta, essa fecha automaticamente.
Clicar numa pergunta aberta	Fecha a resposta
Clicar no botão “CONTACT US”	Redireciona para a página de contacto indicada
Clicar no link final (ex: “View all FAQs”)	Redireciona para a página com a lista completa de perguntas frequentes
Usar a tecla Tab	Percorre as perguntas uma a uma pela ordem em que aparecem
Premir Enter ou Espaço numa pergunta	Abre ou fecha a resposta da pergunta selecionada

Regras de interação por dispositivo:

Desktop (multi open): várias perguntas podem estar abertas em simultâneo. Clicar numa pergunta fechada abre-a sem afectar as restantes. Clicar numa pergunta aberta fecha-a.

Mobile (single open): apenas uma pergunta pode estar aberta de cada vez por secção. Ao clicar numa pergunta fechada, a que estava aberta nessa secção fecha automaticamente.

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Título do módulo	Título	Não	Título principal do bloco (ex: “Frequently asked Questions”). O editor escolhe o nível de cabeçalho
Etiqueta de contacto	Texto	Não	Texto curto junto ao botão de contacto (ex: “Got any more questions?”)
Botão de contacto	Botão	Não	Botão preenchido que liga à página de contacto (ex: “CONTACT US”)
Secções	Lista de secções	Sim	Pelo menos uma secção tem de existir. Cada secção contém um subtítulo opcional e uma lista de perguntas
Subtítulo da secção	Título	Não	Título da secção (ex: “Check-in & Check-out”). Útil quando há várias secções
Pergunta	Texto	Sim	Texto da pergunta (ex: “What time is check-in?”)
Resposta	Texto	Sim	Texto da resposta. Aceita formatação (negrito, itálico, links, parágrafos) através do editor de texto, parágrafos múltiplos.
Botão final	Botão	Não	Botão no fundo do módulo. O comportamento é configurável no BO: “Carregar mais” (expande perguntas adicionais inline) ou “Ligação externa” (redireciona para outra página, ex: “View all FAQs”).

Nota: Cada secção tem de ter pelo menos uma pergunta. Todos os outros elementos (título do módulo, etiqueta e botão de contacto, subtítulos das secções, link final) são opcionais. O módulo adapta-se automaticamente à ausência de qualquer campo opcional — os espaços ajustam-se sem deixar áreas vazias.

Opções de Configuração

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

Opção	Valores possíveis	Valor padrão	Descrição
Modo de fundo	A / B	A	Alterna entre os dois esquemas de cor do tema do hotel. Disponível para todos os hotéis.
Tipo de botão final	Carregar mais / Ligação externa	Ligação externa	Define o comportamento do botão no fundo do módulo: expande mais perguntas inline ou navega para outra página.
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: O aspeto visual do módulo (cores, tipografia, cor do botão, cor do traço separador entre perguntas) é definido automaticamente pelo tema do hotel — não há opções de configuração visuais no backoffice. O comportamento do acordeão (apenas uma pergunta aberta por secção) é fixo e não é configurável.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Cabeçalho (título + contacto)	Numa linha — título à esquerda, etiqueta e botão à direita	Empilhado — título centrado em cima, etiqueta por baixo, botão a ocupar toda a largura
Título do módulo	Alinhado à esquerda, tamanho grande	Alinhado ao centro, tamanho adaptado ao ecrã
Botão “CONTACT US”	Tamanho normal à direita	Ocupa toda a largura do ecrã
Subtítulo da secção	Alinhado à esquerda, por cima das perguntas	Mesmo comportamento, ligeiramente reduzido
Lista de perguntas	Cada pergunta ocupa toda a largura do bloco	Mesmo comportamento, com margens laterais reduzidas
Resposta expandida	Texto com recuo à esquerda (indentação)	Texto com indentação menor para aproveitar o espaço
Link final	Alinhado à esquerda, abaixo das perguntas	Alinhado à esquerda, abaixo das perguntas

Estados Visuais

Estado	Descrição
Inicial	Todas as perguntas aparecem fechadas, cada uma com um sinal ”+” à direita
Ao passar o rato numa pergunta	A linha da pergunta muda ligeiramente de fundo para indicar que é clicável
Pergunta aberta (desktop)	O ”+” muda para ”−”; a resposta aparece por baixo. Outras perguntas mantêm o seu estado — não fecham automaticamente.
Pergunta aberta (mobile)	O ”+” muda para ”−”; a resposta aparece por baixo. A pergunta anteriormente aberta fecha automaticamente.
Pergunta selecionada pelo teclado	A pergunta fica com um contorno visível para indicar que está selecionada
Sem título do módulo	A zona superior do cabeçalho não aparece
Sem etiqueta nem botão de contacto	A zona direita do cabeçalho não aparece
Sem subtítulo de secção	A lista de perguntas começa sem subtítulo acima
Sem link final	Não aparece nenhum link abaixo da última pergunta
Resposta muito longa	A resposta expande verticalmente para mostrar todo o texto; o módulo cresce em altura
Muitas perguntas	A lista cresce verticalmente, mantendo-se legível; não há barra de scroll interno

Animação

O título do módulo tem uma animação de entrada com efeito de “slide up com máscara” — o texto sobe de baixo para cima enquanto fica visível, como se saísse de por baixo de uma linha invisível.

Referência: https://www.mellem.ca/

Para utilizadores com prefers-reduced-motion ativo, o título aparece instantaneamente sem animação.

Acessibilidade

Pode ser navegado apenas com o teclado: tecla Tab para passar entre perguntas, tecla Enter ou Espaço para abrir ou fechar a resposta selecionada.
Cada pergunta é anunciada como “botão” por leitores de ecrã, com indicação de se está aberta ou fechada.
Cada resposta está ligada à respetiva pergunta, de forma a que os leitores de ecrã a identifiquem como parte da pergunta correspondente.
Os ícones de ”+” e ”−” são elementos meramente visuais (ignorados por leitores de ecrã) — a informação de aberto/fechado é transmitida através do estado do botão.
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).
Os elementos interativos (perguntas, botão de contacto, link final) têm indicação visual clara quando estão selecionados pelo teclado.
Respeita a preferência do utilizador por movimento reduzido — quando esta opção está ativa no sistema operativo, as animações de abertura e fecho são desativadas.

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo, cor do texto, cor do botão de contacto, cor dos traços separadores entre perguntas, cor dos ícones ”+” / ”−” 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 claros (branco e beige), texto em tom dourado/terra, botão de contacto em tom dourado escuro
Saccharum — fundos claros, acentos em tom natural/terroso
Calheta Beach — fundos em branco e turquesa suave, acentos em vermelho/coral
Hotel Next — fundos em branco e azul forte, acentos em laranja
Savoy Signature — fundo em azul-marinho escuro, texto em tons claros (tema escuro)

O esquema estrutural (posição do título, cabeçalho lado a lado, lista de perguntas em acordeão, link final) mantém-se consistente entre todos os hotéis.

Changelog

Data	Estado	Descrição
2026-05-18	Revisão Rui Rosa	Revisto e validado por Rui Rosa. Pequenas alterações.
2026-05-18	Análise QA (Agentic QA)	Análise de incoerências, formatação, lógica, e conteúdo. Revisto e alterado.
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-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-21	Rascunho	Versão inicial criada a partir do Figma