M11 — Banner

Secção visual de destaque em página, apresentada como uma faixa de largura total que pode ter imagem de fundo ou cor sólida do tema. Combina um título em destaque, um texto de apoio e até dois botões de ação, com a opção de adicionar uma imagem decorativa lateral e uma etiqueta de distinção (prémio, selo, logótipo). Serve para dar protagonismo a serviços, áreas ou experiências do hotel ao longo da navegação.

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

Screenshots de Referência

Desktop (1440px) — Matriz de variantes

Mobile (375px) — Matriz de variantes

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

Variantes por tema (matrizes completas)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Banner é um módulo visual de grande impacto que ocupa toda a largura da página. Apresenta um título em destaque, um texto de apoio e até dois botões de ação que direcionam o visitante para páginas relevantes (quartos, restaurantes, spa, experiências, etc.).

Dependendo da configuração escolhida, o fundo pode ser:

Uma fotografia com sobreposição escura para garantir a legibilidade do texto branco por cima
Uma cor sólida neutra do tema do hotel, sem imagem, para um visual mais calmo e sóbrio

O banner pode ainda incluir uma imagem decorativa lateral (por exemplo, uma fotografia adicional de um restaurante ou de uma experiência) e uma etiqueta de distinção acima do título (um prémio, um selo de qualidade, o logótipo de uma referência externa).

Este módulo aparece tipicamente em páginas de destino, páginas interiores e na homepage para destacar serviços, experiências ou áreas do hotel. Pode surgir mais do que uma vez na mesma página — alternando a posição do texto (esquerda/direita) e o tipo de fundo para criar variedade visual entre banners consecutivos.

Variantes

Variante 1 — Com imagem de fundo (destaque forte)

Como visitante, quero ver uma secção visualmente impactante com imagem fotográfica de fundo e texto legível em destaque, para conhecer rapidamente um serviço ou área do hotel e poder aceder a mais informação.

Elementos visíveis:

Imagem de fundo fotográfica a ocupar toda a área do banner
Sobreposição escura por cima da imagem (para garantir que o texto branco é legível)
Etiqueta de distinção no topo do conteúdo (opcional — ex: selo de prémio ou logótipo de parceiro)
Título principal em destaque (texto grande, branco)
Texto descritivo abaixo do título (texto mais pequeno, branco)
Botão principal (preenchido) — ex: “Explorar Quartos”
Botão secundário (sublinhado) — ex: “Ver Suites”
Imagem decorativa lateral (opcional — ex: fotografia de um restaurante) posicionada ao lado do conteúdo textual

Critérios de Aceitação:

A imagem de fundo ocupa toda a área do banner
O texto branco é legível sobre a imagem escurecida
O título aparece em destaque, com tamanho maior que o texto descritivo
O botão principal redireciona para a página indicada
O botão secundário redireciona para a página indicada
A imagem decorativa lateral aparece ao lado do conteúdo textual no computador
A etiqueta de distinção aparece acima do título (quando preenchida)

Variante 2 — Com fundo de cor sólida (visual calmo)

Como visitante, quero ver uma secção informativa com fundo suave do tema do hotel, para ler confortavelmente sobre um serviço sem a distração de uma imagem fotográfica de fundo.

Elementos visíveis:

Fundo de cor sólida neutra (tom natural do tema do hotel, ex: bege/creme)
Etiqueta de distinção (opcional)
Título principal em destaque (cor escura)
Texto descritivo (cor escura)
Botão principal (preenchido)
Botão secundário (sublinhado)
Imagem decorativa lateral (opcional)

Critérios de Aceitação:

O fundo é uma cor sólida suave do tema, sem imagem fotográfica
O texto aparece em cor escura, legível sobre o fundo claro
Todos os outros elementos funcionam igual à variante com imagem de fundo
As cores adaptam-se ao tema do hotel

Variante 3 — Texto à direita

Como visitante, quero que o texto e os botões possam aparecer à direita do banner, para criar variedade visual entre banners consecutivos na mesma página.

Elementos visíveis:

Mesmos elementos das variantes anteriores, mas com o texto posicionado à direita
A imagem decorativa (quando presente) passa para o lado esquerdo

Critérios de Aceitação:

O conteúdo textual aparece à direita do banner
A imagem decorativa (quando presente) aparece à esquerda
A leitura e a hierarquia visual mantêm-se claras
Funciona tanto com fundo fotográfico como com fundo de cor sólida

Variante 4 — Tamanho grande (máximo destaque)

Como visitante, quero que o banner possa ter uma altura maior, para dar ainda mais destaque a conteúdos especialmente importantes (uma campanha, uma experiência premium, uma oferta limitada).

Elementos visíveis:

Mesmos elementos das variantes anteriores, mas com o banner mais alto
O título aparece num tamanho de letra maior
Há mais espaço em volta do conteúdo

Critérios de Aceitação:

O banner ocupa mais espaço vertical na página
O título é apresentado num tamanho de letra maior
A imagem de fundo e a imagem decorativa adaptam-se à nova altura
O layout mantém-se equilibrado

Variante 5 — Sem imagem decorativa lateral

Como visitante, quero que o banner funcione sem a imagem decorativa lateral, quando não existir uma imagem adicional relevante para mostrar.

Elementos visíveis:

Todos os elementos textuais e botões mantêm-se
A imagem decorativa não aparece
O texto ocupa mais espaço horizontal

Critérios de Aceitação:

O layout ajusta-se naturalmente quando não há imagem decorativa
O texto alarga-se para ocupar o espaço disponível
Não há espaço vazio visível onde estaria a imagem

Variante 6 — Conteúdo mínimo (apenas título e imagem)

Como visitante, quero que o banner funcione apenas com um título sobre a imagem de fundo, quando não há texto adicional nem botões a apresentar.

Elementos visíveis:

Imagem de fundo (ou fundo de cor sólida)
Título principal

Critérios de Aceitação:

O banner apresenta-se corretamente apenas com título e fundo
Não há espaços vazios onde estariam os botões ou o texto descritivo
O layout mantém-se visualmente equilibrado

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 de ação (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 de distinção (computador)	Imagem	Não	Selo, prémio ou logótipo em formato de cápsula, apresentado acima do título
Etiqueta de distinção (telemóvel)	Imagem	Não	Versão da etiqueta adaptada ao ecrã pequeno
Título principal	Título	Não	Texto em destaque do banner (suporta negrito). O editor escolhe o nível de cabeçalho.
Texto descritivo	Texto	Não	Parágrafo de apoio apresentado abaixo 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. Aparece apenas quando também existe botão principal.
Imagem de fundo (computador)	Imagem	Não	Fotografia de fundo para ecrãs grandes (1440×790 recomendado). Usada apenas quando o fundo é fotográfico.
Imagem de fundo (telemóvel)	Imagem	Não	Fotografia de fundo para ecrãs pequenos (375×600 recomendado). Usada apenas quando o fundo é fotográfico.
Imagem decorativa (computador)	Imagem	Não	Imagem lateral decorativa (ex: fotografia de restaurante) apresentada ao lado do texto. Visível apenas no computador.
Imagem decorativa (telemóvel)	Imagem	Não	Versão da imagem decorativa para telemóvel. Atualmente não é apresentada no telemóvel — fica reservada para uso futuro.

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. O botão secundário só aparece se o botão principal também estiver preenchido.

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
Tipo de fundo	Com imagem / Cor sólida do tema	Com imagem	Escolhe entre fundo fotográfico com sobreposição escura ou fundo de cor sólida neutra do tema
Tamanho	Pequeno / Grande	Pequeno	Altura do banner. Grande dá mais destaque e usa um título de maior dimensão
Posição do texto	Esquerda / Direita	Esquerda	Lado do banner onde o texto e os botões aparecem
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

Os espaçamentos verticais acima e abaixo do módulo (margem e preenchimento superior/inferior) também são configuráveis — permitem ajustar a distância entre este módulo e os restantes na mesma página.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Imagem de fundo	Imagem específica para computador, ocupa toda a largura e altura do banner	Imagem específica para telemóvel, adaptada ao formato vertical
Imagem decorativa lateral	Visível ao lado do texto (à direita ou à esquerda, consoante a posição do texto)	Não aparece (escondida no telemóvel)
Etiqueta de distinção	Acima do título, no topo do conteúdo	Acima do título, no topo do conteúdo
Título	Tamanho grande, ao lado da imagem decorativa (quando existe)	Tamanho adaptado, ocupa toda a largura
Texto descritivo	Abaixo do título, mesma coluna	Abaixo do título, toda a largura
Botão principal	Alinhado com o texto, tamanho normal	Ocupa toda a largura do ecrã
Botão secundário	Abaixo do botão principal	Abaixo do botão principal, centrado
Disposição geral	Texto e imagem decorativa lado a lado em duas colunas	Todos os elementos empilhados verticalmente numa única coluna

Estados Visuais

Estado	Descrição
Inicial	O banner 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 título	O espaço do título não aparece vazio; o texto descritivo 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 banner fica mais compacto
Sem etiqueta	O espaço acima do título ajusta-se; o título sobe
Sem imagem decorativa lateral	O texto ocupa toda a largura disponível
Apenas botão secundário (sem principal)	O botão secundário NÃO é apresentado — é necessário preencher primeiro o botão principal
Título com negrito	As palavras marcadas como negrito aparecem mais pretas e espessas dentro do título
Conteúdo de texto longo	O banner cresce em altura para acomodar todo o texto, sem o cortar

Acessibilidade

Pode ser navegado apenas com o teclado (tecla Tab para saltar entre botões, Enter para ativar).
O título mantém a hierarquia semântica escolhida pelo editor (h1, h2, h3, etc.) — importante para leitores de ecrã e para a organização da página.
Os botões têm texto legível por leitores de ecrã.
A etiqueta de distinção tem descrição alternativa para que o seu significado seja transmitido a utilizadores com leitor de ecrã.
A imagem decorativa lateral é 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 (mínimo 4.5:1), tanto na variante com imagem (texto branco sobre fundo escurecido) como na variante de cor sólida (texto escuro sobre fundo claro).
Os botões têm indicação visual clara quando estão selecionados pelo teclado.

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

Na variante de cor sólida, a cor de fundo muda de acordo com o tema do hotel (tom bege, creme ou neutro próprio de cada marca). Os botões (cor de preenchimento e cor de texto) também se adaptam a cada tema. 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-03-26	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Rascunho	Refrescado a partir das matrizes de variantes no Figma (desktop, mobile e 5 temas). Zoho task P894-T429 adicionada.
2026-04-21	Publicada	Publicada no Docmost (nova página)