M06 — Hero Simple

Bloco de destaque no topo de uma página interior, composto por texto e botões opcionais sobre um fundo de cor (duas opções diferentes) ou imagem (com ou sem proteção). Serve para introduzir o tema da página com uma frase forte e clara.

Campo	Valor
Módulo	M06 — Hero Simple
Estado	Aprovada
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T395
Criada	2026-04-21
Aprovada	2026-06-11
Aprovada por	Savoy (cliente)

Screenshots de Referência

Desktop (1440px) — Palace

Mobile (375px) — Savoy Palace

Abrir screenshot mobile (375px) em nova janela →

Variantes por hotel

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Hero Simple é um bloco introdutório para páginas interiores do site do hotel. Apresenta um título grande e marcante, uma pequena etiqueta opcional por cima do título, um texto de apoio e até dois botões de ação. O fundo pode ser uma cor sólida do tema (duas opções) ou uma imagem de fundo (com ou sem proteção) — neste caso, o módulo suporta ficheiros JPG, PNG, WEBP e SVG.

Serve para abrir secções como “Alojamento”, “Restauração”, “Spa”, “Experiências”, “Sobre Nós”, entre outras. É um módulo discreto mas presente — dá contexto imediato ao visitante sobre o que vai encontrar na página, sem competir com as imagens do restante conteúdo.

Suporta várias combinações visuais: fundo cor A, fundo cor B ou com imagem (com ou sem proteção), texto alinhado à esquerda, ao centro ou em modo “Big Type”, e tamanhos diferentes para casos em que se quer mais ou menos destaque. Quando o fundo tem imagem, estão disponíveis oito tipos de proteção de leitura (sobreposições escuras, claras ou gradientes), selecionáveis no backoffice.

Este módulo aparece habitualmente uma única vez por página, logo a baixo dos breadcrumbs.

Variantes

Variante 1 — Cor A, layout esquerda (padrão)

Como visitante, quero ver uma introdução limpa e legível no topo da página, com o título em destaque à esquerda, para perceber rapidamente o tema da secção.

Elementos visíveis:

Fundo na Cor A do tema do hotel (definida nas configurações visuais de cada hotel — pode ser clara ou escura consoante a identidade da marca)
Etiqueta pequena em maiúsculas no topo (ex: “ACCOMMODATION”, “FINE DINING”)
Título grande, em duas linhas, alinhado à esquerda
Texto descritivo à direita do título (numa segunda coluna, em ecrã grande)
Botão principal preenchido (ex: “Explore Rooms”)
Botão secundário sublinhado (ex: “View Suites”)

Critérios de Aceitação:

O fundo apresenta a Cor A do tema ativo, sem imagem
A etiqueta aparece por cima do título
O título está posicionado à esquerda, ocupando cerca de metade da largura
O texto descritivo e os botões aparecem à direita do título, na mesma linha
O botão principal direciona para a página indicada
O botão secundário direciona para uma segunda página indicada

Variante 2 — Cor B, layout esquerda

Como visitante, quero ver um Hero com a segunda cor do tema para páginas que devem ter um contraste visual diferente da variante padrão.

Elementos visíveis:

Fundo na Cor B do tema do hotel (a segunda opção de cor definida nas configurações visuais de cada hotel)
Etiqueta, título, texto e botões com cores ajustadas ao contraste da Cor B
Mesmo layout da variante 1 (texto à esquerda, conteúdo à direita)

Critérios de Aceitação:

O fundo apresenta a Cor B do tema ativo, sem imagem
Todo o texto e os botões adaptam as suas cores para garantir contraste legível sobre a Cor B
A hierarquia e posicionamento mantêm-se iguais à variante Cor A

Variante 3 — Fundo com imagem

Como visitante, quero ver um Hero com uma imagem de fundo impactante, para páginas onde a fotografia reforça a mensagem.

Elementos visíveis:

Imagem de fundo a ocupar toda a área do módulo (JPG, PNG, WEBP, SVG)
Uma proteção de leitura aplicada sobre a imagem, selecionável no backoffice:
- Sem proteção — imagem a 100% sem sobreposição
- Dark 20% / 40% / 60% — sobreposição escura com opacidade crescente
- Light 20% / 40% — sobreposição clara com opacidade crescente
- Gradiente escuro esquerda — zona sólida ocupa 60% da largura à esquerda, com degradé para a direita
- Gradiente escuro direita — zona sólida ocupa 60% da largura à direita, com degradé para a esquerda
Etiqueta, título, texto e botões com cores adaptadas para garantir contraste sobre a imagem

Critérios de Aceitação:

A imagem cobre toda a área do módulo sem deformação
A proteção de leitura selecionada é aplicada como camada entre a imagem e o texto
O texto é sempre legível independentemente da proteção escolhida

Variante 4 — Texto centrado

Como visitante, quero ver um Hero com texto centrado para secções onde esta composição faz mais sentido visualmente (páginas mais institucionais, estatísticas, citações).

Elementos visíveis:

Mesmos elementos (etiqueta, título, texto, botões)
Todo o conteúdo alinhado ao centro horizontal do bloco
Os botões aparecem centrados, um ao lado do outro

Critérios de Aceitação:

A etiqueta, título, texto e botões estão alinhados ao centro
O bloco de conteúdo mantém uma largura máxima confortável para leitura
Funciona com fundo claro ou escuro

Variante 5 — Tamanho compacto

Como visitante, quero ver um Hero mais discreto para páginas secundárias, onde o destaque não deve competir com o conteúdo principal.

Elementos visíveis:

Mesmos elementos, mas com altura reduzida e tamanho de título menor
Menor espaçamento vertical em volta do conteúdo

Critérios de Aceitação:

A altura do bloco é menor que a variante padrão
O título aparece num tamanho de letra mais pequeno mas ainda em destaque
O texto e os botões continuam legíveis
Todas as outras funcionalidades (alinhamento, fundo, símbolo) continuam a funcionar

Variante 6 — Apenas com título

Como visitante, quero ver uma abertura extremamente simples com apenas um título, para casos onde não é preciso mais contexto.

Elementos visíveis:

Título apenas (sem etiqueta, sem texto descritivo, sem botões)
Fundo do tema

Critérios de Aceitação:

O bloco aparece apenas com o título centrado verticalmente
Não há espaços vazios onde estariam outros elementos
O layout adapta-se naturalmente sem deixar a zona direita (onde normalmente estão os botões) com espaço em branco visível

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 botões (quando presentes) direcionam o visitante para outras páginas do site, mas o módulo em si não tem comportamentos dinâmicos como carrosséis, acordeões ou formulários.

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas apresentado por cima do título (ex: “ACCOMMODATION”). O editor escolhe o nível de cabeçalho.
Título principal	Título	Não	Texto em destaque do Hero (RTE simplificado — Bold, Itálico, Sublinhado). O editor escolhe o nível de cabeçalho.
Texto descritivo	Texto	Não	Parágrafo de apoio abaixo ou à direita do título. RTE simplificado — Bold, Itálico, Sublinhado
Botão principal	Botão	Não	Botão preenchido com texto e ligação para outra página
Botão secundário	Botão	Não	Botão sublinhado com texto e ligação para outra página
Imagem de fundo	Imagem	Não	Imagem de fundo do módulo. Suporta JPG, PNG, WEBP e SVG. Usada quando o “Tipo de fundo” é “Imagem”.
Descrição da imagem de fundo	Texto	Não	Texto alternativo da imagem de fundo para leitores de ecrã. Obrigatório quando existe imagem de fundo.
Proteção de leitura	Seleção	Não	Tipo de sobreposição aplicada sobre a imagem. Visível e aplicável apenas quando o tipo de fundo é “Imagem”.

Nota: Todos os elementos são opcionais. O módulo adapta-se automaticamente à ausência de qualquer campo — os espaços ajustam-se sem deixar áreas vazias. Quando só existe título, o Hero apresenta-se como um bloco simples centrado verticalmente.

Opções de Configuração

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

Opção	Valores possíveis	Valor padrão	Descrição
Tipo de fundo	Cor A / Cor B / Imagem	Cor A	Escolhe entre as duas cores do tema do hotel ou uma imagem de fundo. As cores A e B são definidas automaticamente pelo tema de cada hotel e podem ser claras ou escuras consoante a identidade visual.
Alinhamento do texto	Big Type / Esquerda / Centro	Esquerda	Define o layout tipográfico do conteúdo
Proteção de leitura	Sem proteção / Dark 20% / Dark 40% / Dark 60% / Light 20% / Light 40% / Gradiente escuro esquerda / Gradiente escuro direita	Dark 40%	Visível e obrigatório apenas quando o tipo de fundo é “Imagem”. A zona sólida dos gradientes ocupa 60% da largura do módulo.
Tamanho	Padrão / Compacto	Padrão	Controla a altura do bloco e o tamanho do título
Símbolo decorativo	Ativo / Inativo	Inativo	Mostra um símbolo decorativo do hotel ao lado do texto
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.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Duas colunas: título à esquerda, texto + botões à direita	Uma coluna: título em cima, texto e botões por baixo
Título	Tamanho grande, pode ocupar duas linhas	Tamanho adaptado ao ecrã, quebra naturalmente
Texto descritivo	À direita do título, mesma linha	Abaixo do título, toda a largura
Botão principal	Alinhado à esquerda do seu bloco	Alinhado à esquerda, pode ocupar toda a largura
Botão secundário	Ao lado do botão principal	Abaixo do botão principal
Símbolo decorativo	Visível ao lado do texto (se ativo)	Reduzido em tamanho ou escondido no telemóvel (para não ocupar espaço crítico)
Alinhamento centrado	Os elementos centrados mantêm-se centrados	O centramento adapta-se à largura do telemóvel

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com todos os elementos visíveis ao carregar a página
Ao passar o rato no botão principal	O botão muda ligeiramente de cor para indicar que é clicável
Ao passar o rato no botão secundário	O sublinhado muda de cor ou opacidade
Sem etiqueta	O espaço da etiqueta não aparece vazio; o título sobe
Sem texto descritivo	O espaço do texto não aparece vazio; os botões ficam mais próximos do título
Sem botões	A secção dos botões não aparece; o bloco fica mais compacto
Sem símbolo decorativo	O texto ocupa a totalidade da largura disponível
Título com negrito	As palavras marcadas como negrito aparecem mais pretas e espessas dentro do título
Conteúdo de texto longo	O Hero cresce em altura para acomodar o texto, sem cortar

Animação

O módulo tem uma animação de entrada que se ativa ao carregar a página. A sequência é a seguinte:

Etiqueta e título — entram com um 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)
Texto descritivo — entra em bloco, logo após o título terminar a animação
Botão(ões) — entram por último, com o mesmo efeito ou com um simples fade

Referência: https://www.mellem.ca/ — ver as frases “Bienvenue à l’ère des locataires” e “Des histoires à partager”

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

Acessibilidade

Pode ser navegado apenas com o teclado (tecla Tab para saltar entre botões, Enter para ativar).
O título mantém sempre a hierarquia semântica escolhida pelo editor (h1, h2, etc.), importante para leitores de ecrã.
Os botões têm texto legível por leitores de ecrã.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1), tanto na variante clara como na escura.
Os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
O símbolo decorativo é apresentado como elemento meramente visual (ignorado por leitores de ecrã) para não poluir a experiência de quem usa tecnologias de apoio.

Uma vez que este módulo permite a utilização de uma imagem de fundo, o cumprimento do critério de contraste entre texto e fundo depende da escolha adequada da imagem, e proteção de contraste, por parte do editor do backoffice.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo, texto e botões seguem a identidade visual do hotel, assim como a tipografia dos títulos e do corpo de texto.

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)

Cada hotel define as suas variantes de fundo claro e escuro, a cor dos botões, a fonte dos títulos e do corpo de texto, e o símbolo decorativo próprio quando aplicável. O esquema estrutural (posição do título, alinhamento, espaçamentos) mantém-se consistente entre todos os hotéis.

Imagens e Notas:

Imagem para desktop e mobile: O editor pode carregar uma imagem específica para desktop e outra para mobile. Quando a imagem para mobile não está preenchida, o módulo utiliza automaticamente a imagem de desktop em todos os tamanhos de ecrã.

Enquadramento (crop): Para cada imagem carregada, o editor pode escolher o enquadramento mais adequado a esta utilização — destacando a zona da imagem que melhor funciona, sem alterar o ficheiro original.

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG e WEBP. GIF não é aceite neste módulo.

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.

Changelog

Data	Estado	Descrição
2026-05-19	Atualização	Renomeada secção ‘Formatos de Imagem Aceites’ → ‘Imagens e Notas:’ e formatos envolvidos em callout informativo
2026-05-19	Atualização	Adicionado alerta sobre imagem desktop/mobile e crop
2026-05-19	Revisão PM (Gabriela)	Validado GR com comentário
2026-05-19	Revisão CD (Michelle)
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-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
2026-06-11	Aprovada	Aprovação do cliente (Savoy) confirmada — estado “approved” no Docmost + Excel de controle