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
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot em tamanho real
Descrição Geral
Section titled “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
Section titled “Variantes”Variante 1 — Texto sobre imagem (configuração padrão)
Section titled “Variante 1 — Texto sobre imagem (configuração padrão)”Como visitante, 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)
Section titled “Variante 2 — Apenas imagem (sem texto)”Como visitante, 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
Section titled “Variante 3 — Texto com camada de proteção em gradiente”Como visitante, 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
Section titled “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
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo:
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Imagem de fundo (computador) | Imagem | Sim | Suporta JPG, 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
Section titled “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. |
| 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
Section titled “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
Section titled “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
Section titled “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
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
Section titled “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
Section titled “Saccharum”Tipografia serifada com caráter quente; botão principal em tom terra/castanho, botão secundário em sublinhado.
Calheta Beach
Section titled “Calheta Beach”Tipografia sem serifa, visual mais descontraído e contemporâneo; botões em tons verde-azulados.
Hotel Next
Section titled “Hotel Next”Tipografia sem serifa moderna; botões com aspeto minimalista, cores neutras.
Savoy Signature
Section titled “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
Section titled “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
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 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-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 |