M04 — Footer
Footer do site apresentado no fundo de todas as páginas. Reúne contactos, ligações de navegação, redes sociais, transferência da aplicação, logótipos das marcas do grupo Savoy Signature e avisos legais. Serve como âncora de identidade e ponto de contacto para o visitante.
| Campo | Valor |
|---|---|
| Módulo | M04 — Footer |
| Estado | Rascunho |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Figma Library (página) | Abrir no Figma |
| Zoho Task | P894-T384 |
| Criada | 2026-04-15 |
| Aprovada | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px) — Savoy Palace
Section titled “Desktop (1440px) — Savoy Palace”
Mobile (375px) — Savoy Palace
Section titled “Mobile (375px) — Savoy Palace”Abrir screenshot mobile (375px) em nova janela →
Variantes por hotel
Section titled “Variantes por hotel”Saccharum
Section titled “Saccharum”
Calheta Beach
Section titled “Calheta Beach”
Hotel Next
Section titled “Hotel Next”
Savoy Signature (organização diferente)
Section titled “Savoy Signature (organização diferente)”
Links Figma: Desktop | Mobile | Saccharum | Calheta Beach | Next | Savoy Signature
Descrição Geral
Section titled “Descrição Geral”O Footer é um módulo de site apresentado no fundo de todas as páginas. É a zona onde o visitante encontra os contactos principais do hotel, as redes sociais, a aplicação para descarregar, e as ligações rápidas para outras áreas do site (corporativo, clientes, profissionais).
Existirão dois tipos de footer diferentes: Um para todos os hotéis, outro específico para Savoy Signature, o site institucional do grupo. No total são 8 sites: 7 hotéis + o site institucional Savoy Signature.
Opção Hotel
No topo do footer aparece o logótipo do hotel, seguido de três blocos de contacto em linha (contactos gerais, reservas por WhatsApp, morada) e três blocos informativos (inscrição na newsletter, carreiras, loja online). Por baixo, em ecrã grande, aparecem três colunas de ligações rápidas organizadas por tipo de visitante.
Existe ainda na coluna esquerda, links para as redes sociais e dois logos para download da app (caso exista).
Mais abaixo, uma barra clara apresenta o logótipo Savoy Signature à esquerda e os logótipos dos 7 hotéis do grupo à direita — cada um é uma ligação para o site correspondente. No final, uma barra escura mostra a informação de direitos de autor e as ligações legais (Política de Privacidade, Termos e Condições, Livro de Reclamações).
Opção Signature (grupo)
No topo do footer aparece quatro blocos de contacto em linha (contactos gerais, reservas por WhatsApp, morada e inscrição na newsletter). Por baixo, em ecrã grande, aparecem três colunas de ligações rápidas organizadas por tipo de visitante. Na quarta coluna à direita, links para as redes sociais e dois logos para download da app (caso exista).
Mais abaixo, uma barra clara apresenta o logótipo Savoy Signature em destaque. No final, uma barra escura mostra a informação de direitos de autor e as ligações legais (Política de Privacidade, Termos e Condições, Livro de Reclamações).
No telemóvel, os blocos informativos e as colunas de ligações transformam-se em secções expansíveis (acordeão) para poupar espaço e tornar a navegação mais fácil.
Este módulo aparece uma única vez por site, em todas as páginas, e é gerido de forma centralizada no backoffice.
A lógica de visibilidade dos icons de redes sociais e da informação do download app é controlada por CMS.
Variantes
Section titled “Variantes”Variante 1 — Footer padrão (todos os blocos preenchidos)
Section titled “Variante 1 — Footer padrão (todos os blocos preenchidos)”Como visitante, quero ter acesso no fundo da página a todos os contactos, redes sociais, ligações úteis e informação legal do hotel, para encontrar rapidamente o que procuro sem ter de voltar ao topo da página.
Elementos visíveis:
- Logótipo do hotel à esquerda
- Bloco “Contactos Gerais” com telefone, nota sobre tarifário e botão “Mais Contactos”
- Bloco “Reservas por WhatsApp” com telefone e horário de atendimento
- Bloco “Morada” com morada em linhas e botão “Ver no Mapa”
- Secção “Redes Sociais” com ícones redondos com bordo (Facebook, Instagram, YouTube, LinkedIn)
- Secção “Download da Nossa Aplicação” com selos Google Play e App Store
- Bloco “Inscreva-se na Newsletter” com título, descrição e botão
- Bloco “Trabalha Connosco” com título, descrição e botão
- Bloco “Visita a Nossa Loja Online” com título, descrição e botão
- Três colunas de ligações rápidas (Corporativo, Hóspedes, Profissionais)
- Barra clara com logótipo Savoy Signature e logótipos dos 7 hotéis do grupo
- Barra escura com direitos de autor à esquerda e ligações legais à direita
Critérios de Aceitação:
- O logótipo do hotel aparece no canto superior esquerdo do footer
- Os três blocos de contacto apresentam-se lado a lado na primeira linha
- Os três blocos informativos (newsletter, carreiras, loja) apresentam-se lado a lado na segunda linha
- As três colunas de ligações rápidas apresentam-se lado a lado na terceira linha
- Os ícones de redes sociais têm forma redonda com borda
- Os selos de transferência (Google Play + App Store) estão visíveis quando existem
- O botão “Mais Contactos” direciona para a página de contactos
- O botão “Ver no Mapa” abre a morada no Google Maps
- Os 7 logótipos de hotéis do grupo aparecem na barra clara e cada um é uma ligação
- A informação de direitos de autor aparece no canto inferior esquerdo da barra escura
- As ligações legais aparecem no canto inferior direito da barra escura
Variante 2 — Vista mobile com secções expansíveis
Section titled “Variante 2 — Vista mobile com secções expansíveis”Como visitante em telemóvel, quero que o conteúdo do footer se apresente de forma compacta com secções que posso abrir apenas quando preciso, para não ter de percorrer uma lista muito longa.
Elementos visíveis:
- Logótipo do hotel centrado no topo
- Blocos de contacto empilhados verticalmente (contactos, WhatsApp, morada)
- Secções expansíveis em forma de botões com contorno redondo:
- Visita a Nossa Loja Online
- Corporativo
- Hóspedes
- Profissionais
- Cada secção tem uma seta que indica se está aberta ou fechada
- Secção “Redes Sociais” centrada com os ícones
- Secção “Download da Nossa Aplicação” com os selos
- Barra de logótipos dos hotéis do grupo (apresentada em várias linhas)
- Barra escura com direitos de autor e ligações legais empilhados
Critérios de Aceitação:
- O logótipo do hotel aparece centrado no topo
- Os três blocos de contacto estão empilhados verticalmente
- As secções de ligações apresentam-se como botões expansíveis (acordeão) com forma redonda
- Ao tocar num botão expansível, a secção abre e a seta muda de orientação
- Ao tocar novamente, a secção fecha
- É possível abrir várias secções ao mesmo tempo
- Os ícones de redes sociais e os selos da aplicação aparecem centrados
- Os logótipos dos 7 hotéis apresentam-se em duas ou mais linhas, adaptando-se ao espaço disponível
Variante 3 — Adaptação por tema do hotel
Section titled “Variante 3 — Adaptação por tema do hotel”Como visitante de qualquer um dos hotéis Savoy Signature, quero que o footer reflita visualmente a identidade do hotel em que estou, para reforçar a sensação de marca e coerência visual.
Elementos visíveis:
- Mesmos elementos das variantes anteriores
- A cor de fundo do footer principal muda de acordo com o hotel:
- Savoy Palace — bege claro
- Saccharum — verde suave
- Calheta - azul claro
- Hotel Next — rosa claro
- Savoy Signature - bege claro
- Royal Savoy, Gardens, The Reserve — cada um com a sua cor, a ser definida posteriormente
- A cor do logótipo do hotel, títulos de secção e botões adapta-se ao tema
- A tipografia dos títulos de secção e do corpo de texto segue a fonte definida para cada hotel
Critérios de Aceitação:
- A cor de fundo do footer corresponde ao tema do hotel
- O logótipo do hotel no topo corresponde ao hotel atual
- Os títulos das secções aparecem na cor definida pelo tema
- Os botões adotam as cores primárias do tema
- A tipografia dos títulos e do corpo de texto segue o tema
- A barra clara dos logótipos do grupo e a barra escura dos avisos legais mantêm-se iguais entre temas
Variante 4 — Footer Savoy Signature (grupo)
Section titled “Variante 4 — Footer Savoy Signature (grupo)”Como visitante do site institucional Savoy Signature, quero um footer adaptado ao grupo (sem a barra de logótipos dos hotéis), para encontrar contactos, ligações e redes sociais do grupo de forma coerente com a identidade institucional.
Elementos visíveis:
- No topo, quatro blocos de contacto em linha: contactos gerais, reservas por WhatsApp, morada e inscrição na newsletter
- Em ecrã grande, três colunas de ligações rápidas organizadas por tipo de visitante
- Uma quarta coluna à direita com as ligações para as redes sociais e dois selos para download da aplicação (quando exista)
- Barra clara com o logótipo Savoy Signature em destaque (sem a barra dos 7 logótipos de hotéis)
- Barra escura final com os direitos de autor e as ligações legais (Política de Privacidade, Termos e Condições, Livro de Reclamações)
Critérios de Aceitação:
- O footer Signature apresenta quatro blocos de contacto em linha, incluindo a inscrição na newsletter
- A barra de logótipos dos 7 hotéis do grupo NÃO aparece neste footer
- O logótipo Savoy Signature aparece em destaque na barra clara
- As ligações legais e os direitos de autor aparecem na barra escura final
- A estrutura mantém-se coerente com o footer dos hotéis, mudando apenas a organização dos blocos de topo e a ausência da barra de 7 logótipos
Interações do Utilizador
Section titled “Interações do Utilizador”Este é um módulo com algumas interações no telemóvel, mas essencialmente estático no computador.
| Interação | Descrição |
|---|---|
| Tocar num botão expansível (telemóvel) | A secção correspondente abre, mostrando a lista de ligações. A seta muda de orientação para indicar o estado aberto. |
| Tocar novamente num botão expansível aberto | A secção fecha e a lista de ligações desaparece. |
| Clicar num ícone de rede social | Abre o perfil do hotel na rede social correspondente (Facebook, Instagram, YouTube, LinkedIn) numa nova aba. |
| Clicar num selo da aplicação | Abre a página da aplicação na Google Play ou na App Store numa nova aba. |
| Clicar em “Mais Contactos” / “Inscrever na Newsletter” / outros botões | Direciona o visitante para a página interna correspondente. |
| Clicar em “Ver no Mapa” | Abre a morada no Google Maps numa nova aba. |
| Clicar num logótipo da barra de hotéis do grupo | Abre o site do hotel correspondente. |
| Clicar numa ligação legal (Privacidade, Termos, Livro de Reclamações) | Abre a página legal correspondente. |
Elementos
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo:
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Logótipo do hotel | Imagem | Sim | Logótipo principal do hotel apresentado no topo do footer |
| Telefone (contactos gerais) | Texto | Sim | Número de telefone geral do hotel (ex: (+351) 291 213 000) |
| Nota do telefone | Texto | Não | Texto pequeno abaixo do telefone (ex: “Chamada para a rede fixa nacional”) |
| Botão “Mais Contactos” | Botão | Não | Botão com ligação para a página de contactos |
| Telefone WhatsApp | Texto | Sim | Número de telefone para reservas via WhatsApp |
| Horário WhatsApp | Texto | Não | Horário de atendimento (ex: “Segunda a Sexta: 9h — 19h”) |
| Linhas da morada | Texto | Sim | Morada do hotel, apresentada em linhas separadas |
| Botão “Ver no Mapa” | Botão | Não | Ligação externa para o Google Maps |
| Título da newsletter | Título | Não | Título da secção de inscrição na newsletter (ex: “Stay in the loop”) |
| Descrição da newsletter | Texto | Não | Texto introdutório da secção |
| Botão de inscrição na newsletter | Botão | Não | Botão com ligação para a página ou formulário de inscrição |
| Título das carreiras | Título | Não | Título da secção “Trabalha connosco” |
| Descrição das carreiras | Texto | Não | Texto introdutório da secção |
| Botão de carreiras | Botão | Não | Botão com ligação para as vagas abertas |
| Título da loja online | Título | Não | Título da secção “Visita a nossa loja online” |
| Descrição da loja online | Texto | Não | Texto introdutório da secção |
| Botão da loja online | Botão | Não | Botão com ligação para a loja |
| Colunas de ligações rápidas | Lista de colunas | Não | Conjunto de colunas com título e lista de ligações (ex: Corporativo, Hóspedes, Profissionais) |
| Ícones de redes sociais | Lista de ligações | Não | Lista de redes sociais com nome, URL e ícone (Facebook, Instagram, YouTube, LinkedIn, etc.) |
| Ligação Google Play | Campo de ligação | Não | URL para a aplicação na Google Play |
| Selo Google Play | Imagem | Não | Imagem oficial do selo “Get it on Google Play” |
| Ligação App Store | Campo de ligação | Não | URL para a aplicação na App Store |
| Selo App Store | Imagem | Não | Imagem oficial do selo “Download on the App Store” |
| Logótipo Savoy Signature | Imagem | Sim | Logótipo do grupo Savoy Signature na barra clara |
| Logótipos das marcas | Lista de imagens | Sim | Logótipos dos 7 hotéis do grupo, cada um pode ter uma ligação para o site correspondente |
| Texto de direitos de autor | Texto | Sim | Linha de copyright (ex: ”© 2026 Savoy Palace. Todos os direitos reservados.”) |
| Ligações legais | Lista de ligações | Sim | Lista de ligações legais (ex: Política de Privacidade, Termos e Condições, Livro de Reclamações) |
Nota: Os elementos assinalados como obrigatórios garantem que o footer nunca aparece incompleto (logótipo, contactos principais, direitos de autor e avisos legais). Os elementos opcionais (como as colunas de ligações rápidas, os selos da aplicação e as descrições dos blocos) adaptam-se automaticamente à sua ausência — o módulo ajusta os espaços sem deixar áreas vazias.
Opções de Configuração
Section titled “Opções de Configuração”Este módulo não tem opções de configuração visual adicionais. Todo o conteúdo é gerido diretamente pelos campos indicados na secção Elementos. O aspeto visual (cores, fontes, logótipos) é determinado automaticamente pelo tema do hotel em que o footer está a ser apresentado. O footer é um elemento estrutural permanente do site — está sempre presente em todas as páginas e não tem opção de ativar/desativar por página (ao contrário dos módulos de conteúdo, que podem ser desativados sem serem apagados).
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Disposição geral | Conteúdo organizado em colunas com zona lateral esquerda fixa (logótipo, redes sociais, aplicação) e três linhas de blocos à direita | Conteúdo empilhado verticalmente, centrado |
| Logótipo do hotel | Alinhado à esquerda, junto da barra lateral | Centrado no topo, tamanho maior |
| Blocos de contacto | Três blocos lado a lado na primeira linha | Empilhados verticalmente, centrados |
| Blocos informativos (newsletter, carreiras, loja) | Três blocos lado a lado na segunda linha | Expansíveis consoante o design |
| Colunas de ligações rápidas | Três colunas lado a lado na terceira linha | Transformam-se em secções expansíveis (acordeão) |
| Redes sociais | Alinhadas à esquerda, abaixo do logótipo | Centradas, abaixo dos blocos de contacto |
| Selos da aplicação | Alinhados à esquerda, abaixo das redes sociais | Centrados, abaixo das redes sociais |
| Barra de logótipos de hotéis do grupo | Logótipo Savoy Signature à esquerda e 7 logótipos dos hotéis à direita, todos numa linha | Logótipo Savoy Signature no topo, 7 logótipos empilhados em várias linhas abaixo |
| Barra legal | Direitos de autor à esquerda e ligações legais à direita, na mesma linha | Direitos de autor e ligações legais empilhados |
Estados Visuais
Section titled “Estados Visuais”| Estado | Descrição |
|---|---|
| Inicial | O footer aparece com todos os elementos visíveis. No telemóvel, todas as secções expansíveis começam fechadas. |
| Ao passar o rato num botão | O botão muda ligeiramente de cor e o sublinhado destaca-se para indicar que é clicável. |
| Ao passar o rato num ícone de rede social | O ícone muda de cor ou o bordo destaca-se. |
| Ao passar o rato num logótipo de hotel do grupo | O logótipo ganha destaque (opacidade ou contorno) para indicar que é uma ligação. |
| Secção expansível aberta (telemóvel) | A seta aponta para cima e a lista de ligações aparece por baixo. |
| Secção expansível fechada (telemóvel) | A seta aponta para baixo e a lista de ligações não é visível. |
| Sem descrição num bloco | O espaço da descrição não aparece vazio; os restantes elementos ajustam-se. |
| Sem seleção de redes sociais | A secção “Redes Sociais” não aparece no footer. |
| Sem ligação para a aplicação | A secção “Download da Nossa Aplicação” não aparece no footer. |
| Conteúdo de texto longo | O footer cresce em altura e os blocos adaptam-se sem cortar o texto. |
Animação
Section titled “Animação”Referência: REF: https://www.lorunser.com/stay
Acessibilidade
Section titled “Acessibilidade”- Pode ser navegado inteiramente com o teclado (Tab para percorrer, Enter ou Espaço para ativar botões e abrir secções expansíveis).
- As secções expansíveis indicam claramente ao leitor de ecrã se estão abertas ou fechadas.
- Os ícones de redes sociais têm uma descrição legível por leitor de ecrã (ex: “Facebook”, “Instagram”), mesmo quando apresentam apenas o ícone.
- Os selos da aplicação têm uma descrição alternativa (“Disponível na Google Play”, “Descarregar na App Store”).
- Os logótipos dos hotéis do grupo têm o nome do hotel como descrição alternativa.
- As ligações externas (redes sociais, Google Maps, lojas de aplicações) abrem em nova aba e são comunicadas corretamente.
- O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual em todos os temas.
- Os elementos interativos (botões, ligações, secções expansíveis) têm indicação visual clara quando estão selecionados pelo teclado.
- A barra legal escura mantém contraste suficiente para o texto cinzento dos direitos de autor e o texto branco das ligações legais.
O módulo adapta-se visualmente a cada hotel: a cor de fundo, os títulos de secção, o corpo de texto e os 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)- este site tem um footer diferente
- Gardens (por desenvolver)
- The Reserve (por desenvolver)
- Royal Savoy (por desenvolver)
A barra clara com os logótipos do grupo Savoy Signature e a barra escura dos avisos legais mantêm o seu aspeto visual comum a todos os hotéis, reforçando a coerência do grupo.
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-06 | Validação Tech | Atualizado e validado por Rui Rosa |
| 2026-05-05 | Validação Design | Atualizado e validado por Liliana Moreira |
| 2026-04-15 | Rascunho | Versão inicial criada a partir do Figma |
| 2026-04-15 | Publicada | Publicada no Docmost (nova página) |
| 2026-04-15 | Publicada | Republicada no Docmost (conteúdo atualizado) |
| 2026-04-15 | Publicada | Mobile screenshot convertida em link; Zoho task P894-T384 associada e notificada |