M24 — Full Image

Módulo de imagem de fundo a toda a largura e altura do ecrã, com conteúdo de texto e botões sobrepostos. Serve como secção de destaque visual forte — tipicamente usada para apresentar um hotel, um restaurante, uma experiência ou uma área do site.

Campo	Valor
Módulo	M24 — Full Image
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Zoho Task	P894-T620
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot em tamanho real

Links Figma: Desktop | Mobile

Descrição Geral

O Full Image é um módulo de grande impacto visual: uma imagem ocupa toda a largura e pelo menos toda a altura do ecrã, com conteúdo de texto e botões sobrepostos numa zona definida pelo editor.

O módulo apresenta tipicamente:

Uma pequena etiqueta no topo (por exemplo, o nome do hotel, categoria ou secção)
Um título grande em destaque (com possibilidade de usar negrito parcial)
Um parágrafo de descrição (opcional)
Até dois botões lado a lado (por exemplo, um principal e um secundário)

A imagem de fundo tem um efeito de parallax durante o scroll da página — a imagem desloca-se a uma velocidade ligeiramente diferente da da página, criando uma sensação de profundidade. Para utilizadores com prefers-reduced-motion ativo, o efeito de parallax é desativado e a imagem fica estática.

Aparece em páginas como: página inicial dos hotéis, páginas de apresentação de restaurantes, spa, quartos, experiências, ou sempre que o objetivo é dar uma entrada visual forte a uma secção da página.

Variantes

Variante 1 — Texto sobre imagem (configuração padrão)

Como utilizador, quero ver uma imagem em tela cheia com um título e uma descrição sobrepostos, para compreender imediatamente o tema daquela secção e ter acesso rápido à ação sugerida.

Elementos visíveis:

Imagem de fundo a toda a largura e altura do ecrã
Camada de proteção subtil (escurece a imagem por baixo do texto para melhor leitura)
Etiqueta pequena em maiúsculas
Título de grande dimensão (com parte do texto em negrito se o editor assim definir)
Parágrafo curto de descrição
Dois botões: um principal (preenchido) e um secundário (apenas texto)
Posição do texto e ctas pode ser alinhado à esquerda, centrado ou à direita.

Critérios de Aceitação:

A imagem ocupa toda a largura do ecrã e, no mínimo, toda a altura
O texto é legível sobre a imagem em qualquer hotel/tema
Os botões redirecionam para as páginas indicadas
O título aparece em destaque, acima da descrição
A etiqueta aparece acima do título, em texto menor

Variante 2 — Apenas imagem (sem texto)

Como utilizador, quero ver apenas a imagem, sem qualquer texto sobreposto, para que a fotografia fale por si quando o contexto da secção anterior já é suficiente.

Elementos visíveis:

Imagem de fundo a toda a largura e altura do ecrã
Nenhum texto, etiqueta ou botão

Critérios de Aceitação:

Quando nenhum campo de texto ou botão está preenchido, apresenta-se apenas a imagem limpa
Não aparecem espaços vazios nem caixas sem conteúdo
A camada de proteção só é aplicada se o editor escolher uma — caso contrário, a imagem é vista sem filtro

Variante 3 — Texto com camada de proteção em gradiente

Como utilizador, quero ver o texto sobreposto a uma imagem com um escurecimento gradual vindo de um dos lados, para que o fundo se funda suavemente com a imagem sem perder detalhe nas zonas claras.

Elementos visíveis:

Imagem de fundo
Camada de escurecimento/aclaramento com efeito gradual (a partir da esquerda ou da direita)
Texto e botões alinhados do lado onde o gradiente é mais forte

Critérios de Aceitação:

O gradiente tem maior intensidade no lado onde o texto está posicionado
O texto mantém-se legível sobre a zona escurecida/clareada
A imagem continua visível do lado oposto, sem filtro

Interações do Utilizador

Este módulo apresenta conteúdo maioritariamente estático. A única interação disponível é com os botões:

Interação	Descrição
Clicar no botão principal	Navega para a página indicada pelo editor (por exemplo, página de reserva, de quartos, ou de informação) ou outro tipo de link.
Clicar no botão secundário	Navega para uma página alternativa (por exemplo, ver galeria, saber mais, ler artigo) ou outro tipo de link.
Passar o rato por cima dos botões	Os botões mudam ligeiramente de aparência (escurecem ou clareiam consoante o tema)

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Imagem de fundo (computador)	Imagem	Sim	Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop. Dimensões recomendadas: 1440 × 900px.
Imagem de fundo (telemóvel)	Imagem	Não	Versão para ecrãs pequenos. Se não for fornecida, usa a versão para computador. Suporta os mesmos formatos. Dimensões recomendadas: 375 × 812px.
Etiqueta	Título	Não	Texto curto acima do título principal, tipicamente em maiúsculas (ex: o nome do hotel, “Gastronomia”, “Bem-vindo”)
Título principal	Título	Não	Texto em destaque. Pode marcar partes do texto a negrito. Suporta RTE simplificado: negrito, itálico, sublinhado e link (interno via content picker ou externo).
Descrição	Texto	Não	Parágrafo curto abaixo do título. Suporta RTE simplificado: negrito, itálico, sublinhado e link (interno via content picker ou externo).
Botão principal	Botão	Não	Botão preenchido com texto e ligação a outra página
Botão secundário	Botão	Não	Botão secundário (apenas texto com sublinhado) com texto e ligação a outra página

Nota: Todos os elementos de conteúdo (etiqueta, título, descrição, botões) são opcionais. Se o editor não preencher nenhum, o módulo apresenta apenas a imagem. A imagem para computador é o único campo obrigatório — sem ela, o módulo não é mostrado.

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
Cor do texto	A / B	A	Controla se o texto (etiqueta, título, descrição) é apresentado em tons claros (sobre imagem escura) ou escuros (sobre imagem clara)
Alinhamento horizontal	Esquerda / Centro / Direita	Esquerda	Posição horizontal do conteúdo (etiqueta, título, descrição, botões) sobre a imagem
Camada de proteção	Nenhuma / Escura 20% / Escura 40% / Escura 60% / Clara 20% / Clara 40% / Gradiente escuro (esquerda) / Gradiente escuro (direita) / Gradiente claro (esquerda) / Gradiente claro (direita)	Nenhuma	Aplica uma camada semitransparente por cima da imagem para melhorar a leitura do texto. Nos gradientes, a zona sólida ocupa 60% da largura. Apenas existem gradientes escuros — não há gradientes claros.
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: As opções de alinhamento (horizontal) e a cor do texto só têm efeito visível quando há conteúdo de texto preenchido. Nos módulos usados apenas como imagem, estas opções são ignoradas.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Imagem de fundo	Carrega a versão para computador; ocupa toda a largura e altura do ecrã	Carrega a versão para telemóvel (se fornecida); ocupa toda a largura e altura do ecrã
Conteúdo (texto + botões)	Ocupa no máximo metade da largura do ecrã, posicionado conforme o alinhamento escolhido	Ocupa a largura total disponível, com margens laterais
Título	Tamanho grande, pode ter várias linhas	Tamanho ligeiramente reduzido, adaptado à largura do telemóvel
Botões	Lado a lado, dimensão normal	Passam a ocupar toda a largura disponível e ficam empilhados um por cima do outro

Estados Visuais

Estado	Descrição
Inicial	Imagem carregada em destaque máximo (prioridade de carregamento) com o conteúdo sobreposto
Carregamento da imagem	A imagem é marcada como prioritária para carregar rapidamente (é o primeiro elemento visível)
Ao passar o rato sobre os botões	Os botões mudam ligeiramente de aparência (escurecem ou clareiam)
Sem camada de proteção e texto escuro sobre imagem clara	Leitura depende da imagem — o editor deve escolher uma camada de proteção clara se a imagem for muito variada
Sem conteúdo de texto	Apresenta apenas a imagem limpa, sem caixas ou espaços vazios
Conteúdo extenso	O título e a descrição podem ocupar várias linhas; o contentor expande-se para dentro da imagem, mantendo a altura mínima de um ecrã
Sem imagem para telemóvel	Usa a imagem para computador em telemóvel, ajustando-se ao formato vertical do ecrã
Durante scroll	A imagem de fundo desloca-se a uma velocidade ligeiramente inferior à da página (efeito de parallax), criando sensação de profundidade
`prefers-reduced-motion` ativo	O efeito de parallax é desativado; a imagem mantém-se estática durante o scroll

Acessibilidade

A imagem de fundo é marcada como decorativa para leitores de ecrã (o contexto é dado pelo texto sobreposto)
O título é apresentado com o nível semântico escolhido pelo editor (H2, H3, etc.) — os leitores de ecrã entendem a importância do texto no contexto da página
Os botões têm texto legível para leitores de ecrã — nunca são apenas ícones
Pode ser navegado com o teclado (tecla Tab para saltar entre os botões, Enter para ativar)
Os botões têm indicação visual clara quando estão selecionados pelo teclado
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual quando é escolhida uma camada de proteção adequada à imagem
Quando o editor configura “Cor do texto: Claro” deve também escolher uma camada de proteção escura (ou um gradiente escuro) se a imagem tiver zonas claras, para garantir legibilidade

Temas

O módulo adapta-se visualmente a cada hotel: as cores dos botões (preenchido e secundário), a tipografia do título, a etiqueta e o corpo de texto seguem a identidade visual de cada 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)

Diferenças visuais observadas entre temas (Figma):

Savoy Palace

Tipografia serifada clássica; botão principal em roxo escuro, botão secundário com sublinhado em tom dourado. Etiqueta em pequeno capitular.

Saccharum

Tipografia serifada com caráter quente; botão principal em tom terra/castanho, botão secundário em sublinhado.

Calheta Beach

Tipografia sem serifa, visual mais descontraído e contemporâneo; botões em tons verde-azulados.

Hotel Next

Tipografia sem serifa moderna; botões com aspeto minimalista, cores neutras.

Savoy Signature

Tipografia serifada elegante com forte contraste; botões em cor escura, etiqueta em destaque.

Em todos os temas, a estrutura do módulo, o posicionamento do conteúdo e as opções de configuração funcionam da mesma maneira — apenas mudam as cores, a tipografia e o acabamento visual dos botões.

Formatos de Imagem Aceites

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

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.
GIF — apenas quando é necessária animação simples.

Este módulo permite a inserção de imagens em formato GIF. Atenção: dado que estes ficheiros podem ter um peso elevado, é essencial uma gestão cuidada no backoffice — caso contrário, a performance do website poderá ser seriamente comprometida.

Changelog

Data	Estado	Descrição
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 e do código já implementado