M06 — Hero Simple

Bloco de destaque no topo de uma página interior, composto apenas por texto e botões opcionais sobre um fundo de cor do tema. Não tem imagem de fundo — é puramente tipográfico e serve para introduzir o tema da página com uma frase forte e clara.

Campo	Valor
Módulo	M06 — Hero Simple
Estado	Rascunho
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	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Matriz de variantes

Mobile (375px) — Savoy Palace

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 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, sobre um fundo de cor sólida (sem imagem).

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 claro ou escuro, texto alinhado à esquerda ou ao centro, com ou sem um símbolo decorativo do hotel, e tamanhos diferentes para casos em que se quer mais ou menos destaque.

Este módulo aparece habitualmente uma única vez por página, no topo ou logo abaixo do menu de navegação.

Variantes

Variante 1 — Fundo claro, texto à 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 de cor clara (tom bege/creme do tema do hotel)
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 é uma cor clara sólida, 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 — Fundo escuro, texto à esquerda

Como visitante, quero ver um Hero com fundo escuro para páginas que devem transmitir mais sobriedade e contraste visual.

Elementos visíveis:

Fundo de cor escura (tom primário escuro do tema do hotel, ex: roxo profundo no Savoy Palace)
Etiqueta, título, texto e botões em cores claras para garantir contraste
Mesmo layout da variante 1 (texto à esquerda, conteúdo à direita)

Critérios de Aceitação:

O fundo é uma cor escura sólida
Todo o texto aparece em tom claro (branco ou semelhante), legível sobre o fundo escuro
Os botões adaptam as cores para garantir contraste
A hierarquia e posicionamento mantêm-se iguais à variante de fundo claro

Variante 3 — Com símbolo decorativo do hotel

Como visitante, quero ver um símbolo visual representativo do hotel ao lado do texto, para reforçar a identidade de marca da secção.

Elementos visíveis:

Mesmos elementos textuais das variantes anteriores (etiqueta, título, texto, botões)
Um símbolo decorativo do hotel (ex: silhueta de uma montanha da Madeira, logótipo estilizado, ícone do grupo) apresentado ao lado ou atrás do título
O símbolo adapta-se ao tema do hotel: pode ser uma forma, um ícone vectorial, ou uma ilustração simples

Critérios de Aceitação:

O símbolo decorativo é visível e alinhado com o texto
O símbolo mantém a legibilidade do texto (nunca se sobrepõe)
O símbolo adapta-se ao tema do hotel (forma/cor)
Quando o símbolo não é fornecido, a variante colapsa para a vista sem símbolo sem quebrar o layout

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 (suporta negrito). O editor escolhe o nível de cabeçalho.
Texto descritivo	Texto	Não	Parágrafo de apoio abaixo ou à direita do título
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

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	Claro / Escuro	Claro	Escolhe entre o tom claro ou o tom escuro do tema do hotel
Alinhamento do texto	Esquerda / Centro	Esquerda	Define se o texto e os botões aparecem alinhados à esquerda ou ao centro
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 esconder o módulo sem o apagar

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

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.

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

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

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.

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)