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 →</a>

Variantes por tema (matrizes de variantes)

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 uma a uma para ver as respostas. Todas as perguntas aparecem por defeito fechadas, e apenas uma pergunta pode estar aberta de cada vez dentro da mesma secção.

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 link opcional para a página completa de FAQs (ex: “View all FAQs”), útil quando esta instância do módulo apresenta apenas uma seleção de perguntas mais relevantes para a página onde está inserido.

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 link para a página completa, 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 (“Lorem ipsum dolor sit”)
Lista de perguntas, cada uma com um sinal de ”+” à direita
Link sublinhado final (ex: “BUTTON TEXT”)

Critérios de Aceitação:

O título e a zona de contacto aparecem lado a lado, no topo do bloco (no computador)
Todas as perguntas aparecem inicialmente fechadas (com ”+”)
Ao clicar numa pergunta, a resposta expande por baixo e o ”+” passa a ”−”
Ao clicar numa segunda pergunta, essa abre e a primeira fecha automaticamente (apenas uma aberta por secção)
Ao clicar numa pergunta aberta, ela fecha
O link final redireciona para a página indicada
O botão “CONTACT US” redireciona para a página de contacto indicada

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
As perguntas de uma secção não afetam as perguntas de outra secção — é possível ter uma pergunta aberta em cada secção em simultâneo
Dentro de cada secção, apenas uma pergunta pode estar aberta de cada vez

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 “BUTTON TEXT” 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. 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

Regra importante: Dentro de cada secção, apenas uma pergunta pode estar aberta de cada vez. Em módulos com várias secções, cada secção tem o seu próprio acordeão independente — pode ter uma pergunta aberta em cada uma em simultâneo.

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
Link final	Botão	Não	Link sublinhado no fim do bloco (ex: “View all FAQs”) que liga a uma página com mais perguntas

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
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

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	O ”+” muda para ”−”; a resposta aparece por baixo com um pequeno espaço; o separador de baixo move-se para acomodar a resposta
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

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 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 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-04-21	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Publicada	Publicada no Docmost (nova página)