C10 — Booking Bar

Barra de reservas que permite ao visitante iniciar o processo de reserva diretamente na homepage. Permite selecionar datas, número de hóspedes e código promocional, redirecionando depois para o motor de reservas externo (Navarino) com todos os campos pré-preenchidos.

Campo	Valor
Componente	C10 — Booking Bar
Tipo	Componente (vive dentro do módulo Hero Slider)
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Overview	Abrir no Figma
Zoho Task	Ver tarefa
Criada	2026-04-23
Aprovada	—
Aprovada por	—

Importante: Este é um componente, não um módulo. É um dos componentes mais importantes de todo o projeto. Vive dentro do módulo Hero Slider e, por isso, não aparece na lista de módulos que o editor escolhe para uma página — é ativado e configurado globalmente para cada hotel no separador de definições do site (siteRoot).

Screenshots de Referência

Desktop (1440px) — barra colapsada

Mobile (375px) — barra colapsada

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

Visão geral (todos os estados)

Variantes por tema (matrizes de variantes)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

A Booking Bar é a barra de reservas do hotel — um dos componentes mais importantes de todo o site, pois é por aqui que o visitante inicia o processo de fazer uma reserva. Aparece sobreposta à imagem principal da homepage (dentro da área do Hero Slider), sempre visível para quem chega ao site.

A barra apresenta-se inicialmente numa forma compacta (pill), com quatro áreas lado a lado: Datas de estadia (check-in — check-out), Hóspedes (adultos e crianças), Código promocional e o botão BOOK NOW. O visitante clica numa destas áreas para expandir e preencher a informação correspondente:

Datas: abre um calendário com dois meses lado a lado, já com indicação visual da disponibilidade e preço por noite em cada dia, fornecido pela integração externa com a Navarino.
Hóspedes: abre um painel com contadores para adultos e crianças. Se houver crianças, aparece um seletor de idade para cada criança (até 6 crianças).
Código promocional: abre um campo onde o visitante introduz um código (ex: PALACE30).

Após selecionar tudo, o visitante clica em BOOK NOW e o site redireciona-o para o URL final da Navarino com todos os campos já preenchidos (datas, número de hóspedes, idades e código promocional). A partir daí, toda a reserva (pagamento, confirmação) acontece no sistema da Navarino — fora do site do hotel.

A Booking Bar está presente apenas nos sites dos hotéis individuais (Savoy Palace, Royal Savoy, Saccharum, The Reserve, Calheta Beach, Gardens, Hotel Next). Não aparece no site institucional Savoy Signature.

Integração Externa — Navarino

Este componente depende de uma integração externa fundamental com a Navarino — o sistema de reservas hoteleiras contratado pelo grupo Savoy Signature. A Navarino é a empresa revendedora; por baixo, a tecnologia que opera o motor de reservas é a Synxis (SHR). Para efeitos do site e do conteúdo desta User Story, Navarino e Synxis são tratados como uma única integração — onde se lê “Navarino”, o motor técnico subjacente é o Synxis.

A responsabilidade divide-se da seguinte forma:

O que é gerido pela Navarino

Seleção de datas — o calendário com disponibilidade e preços por noite é um widget externo fornecido pela Navarino. Ele carrega dentro da Booking Bar quando o visitante clica em “Check-in — Check-out”. A disponibilidade, preços, regras de estadia mínima e cores dos dias disponíveis/indisponíveis vêm todos da Navarino em tempo real.
Motor de reservas — após o visitante clicar em BOOK NOW, o processo de reserva (escolha de quarto, pagamento, confirmação) acontece inteiramente no domínio da Navarino/Synxis.

O que é gerido pelo site

Seletor de hóspedes — o painel de adultos, crianças e idades das crianças é desenvolvido e controlado pelo próprio site.
Campo de código promocional — o campo onde o visitante introduz o código promocional é do site. O código pode ser pré-preenchido pelo editor no backoffice (por exemplo, para páginas de promoções específicas) ou passado automaticamente através de um parâmetro no URL (ex: ?promo=PALACE30).
Botão BOOK NOW — ao clicar, o site constrói o URL final da Navarino juntando todos os parâmetros (datas escolhidas no widget Navarino + hóspedes do nosso seletor + código promocional) e redireciona o visitante.

Pontos críticos da integração

Cada hotel tem o seu próprio código Navarino (ex: SVP para Savoy Palace), que identifica o hotel no sistema externo e é configurado no backoffice pelo gestor.
O idioma do widget acompanha o idioma da página — se o visitante estiver na versão PT do site, o calendário da Navarino apresenta-se em português; se estiver na versão EN, em inglês.
Se o widget Navarino falhar ao carregar (por exemplo, por problema de rede), a Booking Bar apresenta um estado de fallback simplificado que continua a permitir ao visitante avançar para o motor de reservas.
O momento em que o visitante clica em BOOK NOW é registado para fins de analítica (permite ao hotel saber quantas pessoas iniciaram um processo de reserva a partir da homepage).

Variantes

A Booking Bar apresenta-se em cinco estados visuais distintos, que o visitante vê em sequência consoante interage com ela.

Variante 1 — Barra colapsada (estado inicial)

Como visitante, quero ver imediatamente uma forma clara de começar a reservar quando chego ao site do hotel, para não ter de procurar onde clicar.

Elementos visíveis (desktop):

Pill horizontal com fundo claro, sobreposta à imagem da homepage
Área “Check-in — Check-out” com ícone de calendário
Separador vertical
Área “Guests” (Hóspedes) com ícone de pessoas
Separador vertical
Área “Promo Code” (Código Promocional) com ícone de etiqueta
Botão “BOOK NOW” em destaque à direita (com cor do hotel)

Elementos visíveis (telemóvel):

Área compacta apenas com ícones e contagem rápida: calendário + texto “Check-in — out” + ícone de pessoas com contador “0” + ícone de etiqueta
Separador
Botão “BOOK NOW” em linha inferior, a ocupar toda a largura disponível

Critérios de Aceitação:

A barra aparece sempre que o módulo Hero Slider está presente numa página e a opção “Mostrar Booking Bar” está ativa nas definições do hotel
Os rótulos “Check-in — Check-out”, “Guests”, “Promo Code” e “BOOK NOW” apresentam-se na língua da página (PT ou EN)
A barra destaca-se visualmente sobre a imagem do Hero Slider (com sombra ou contorno suave)
No telemóvel, a barra apresenta-se numa forma mais compacta para caber na largura do ecrã

Como visitante, quero ver rapidamente os dias disponíveis e os preços por noite, para escolher as melhores datas para a minha estadia.

Elementos visíveis:

Painel expandido por cima (ou por baixo) da barra, mostrando dois meses lado a lado (ex: Junho 2026 + Julho 2026)
Setas de navegação para avançar ou recuar nos meses
Nomes dos dias da semana (Sun, Mon, Tue, Wed, Thu, Fri, Sat)
Cada dia do mês mostra o número da noite disponível e o preço (ex: “00” em cima, “€000” em baixo)
Dias com disponibilidade aparecem em tom normal; dias sem disponibilidade aparecem com opacidade reduzida ou cor diferente
As datas selecionadas (check-in e check-out) destacam-se com fundo colorido do hotel, assim como o intervalo entre as duas datas
Legenda em baixo: quadrado colorido + texto “Availability” e quadrado vazio + texto “No Availability”
Resumo dos preços no canto inferior direito: “From €000.00 for 0 Nights”
A barra colapsada mantém-se visível por baixo, como âncora de contexto

Critérios de Aceitação:

O calendário carrega do sistema Navarino com as datas e preços atualizados no momento
O visitante consegue escolher uma data de check-in ao clicar num dia disponível
Ao escolher o check-in, o visitante pode clicar noutro dia posterior para definir o check-out
Entre check-in e check-out, o intervalo completo fica destacado visualmente
Os dias sem disponibilidade não podem ser selecionados
O resumo de preço atualiza-se à medida que a seleção muda
O calendário apresenta-se na língua da página (dias da semana em PT ou EN)
O visitante pode navegar entre meses com as setas esquerda/direita
Se o widget Navarino não carregar por motivos técnicos, a barra apresenta uma mensagem curta e mantém o botão BOOK NOW ativo para seguir com o processo

Variante 3 — Seleção de hóspedes aberta (estado mínimo)

Como visitante, quero indicar quantos adultos e crianças vão ficar no quarto, para que o preço e a disponibilidade sejam calculados corretamente.

Elementos visíveis:

Painel expandido com dois blocos lado a lado: “Adultos” (à esquerda) e “Crianças” (à direita)
Cada bloco tem:
- Rótulo principal (ex: “Adultos”, “Crianças”)
- Pequeno texto de referência de idade (ex: “Mais 17 anos” / “Desde 17 anos”)
- Botão circular ”−” para diminuir a contagem
- Número atual (0, 1, 2, …)
- Botão circular ”+” para aumentar a contagem
Botão “CONFIRM” à direita do painel, para fechar a seleção e voltar à barra colapsada
A barra colapsada mantém-se visível por baixo como âncora

Critérios de Aceitação:

O contador de adultos começa em 0 e aceita valores crescentes
O contador de crianças começa em 0 e aceita valores crescentes
O botão ”−” fica desativado quando a contagem está em 0
Existe um limite máximo definido pelo hotel (por defeito, 6 adultos e 6 crianças por quarto)
Ao clicar em “CONFIRM”, o painel fecha e a área “Guests” na barra colapsada mostra o total de pessoas selecionadas
No telemóvel, os dois blocos (Adultos e Crianças) apresentam-se empilhados um em cima do outro para caber na largura do ecrã

Variante 4 — Seleção de hóspedes com idades das crianças

Como visitante, quero indicar a idade de cada criança, para que o hotel possa atribuir camas e preços adequados.

C10 Variante 4 — Hóspedes com idades máx.

Elementos visíveis:

Os mesmos elementos da Variante 3
Abaixo dos contadores, uma linha separadora e a secção “Idades das crianças”
Para cada criança selecionada, uma linha com:
- Rótulo numerado (ex: “Criança 01:”, “Criança 02:”, até “Criança 06:”)
- Caixa de seleção com a palavra “Idade” (abre lista pendente com idades possíveis)
A disposição é em colunas (3 por linha no desktop), aparecendo linhas adicionais à medida que o número de crianças aumenta
Botão “CONFIRM” continua visível à direita

Critérios de Aceitação:

Para cada criança adicionada no contador, aparece uma linha para selecionar a idade
As idades disponíveis na lista pendente vão de 0 a 17 anos
Se o visitante diminuir o contador de crianças, as linhas de idade correspondentes desaparecem
O painel comporta até 6 crianças (limite máximo)
As idades selecionadas são enviadas para o motor de reservas Navarino junto com os restantes dados
No telemóvel, cada criança ocupa uma linha completa (1 por linha em vez de 3)

Variante 5 — Código promocional introduzido

Como visitante que tenho um código de desconto, quero poder introduzi-lo antes de prosseguir, para que a oferta promocional seja aplicada à minha reserva.

Elementos visíveis:

A área “Promo Code” da barra colapsada passa a apresentar o código introduzido em destaque (ex: “PALACE30”) em vez do rótulo genérico
Quando expandida, apresenta um campo de texto onde o visitante escreve o código, seguido de um botão “CONFIRM”

Critérios de Aceitação:

O visitante consegue introduzir um código livre de letras e números
Após confirmar, a área “Promo Code” na barra colapsada passa a mostrar o código em vez do rótulo “Promo Code”
O código é enviado para o motor de reservas Navarino junto com os restantes dados ao clicar em BOOK NOW
Se o visitante chegar à página com um código no URL (ex: ?promo=PALACE30), a área aparece automaticamente pré-preenchida com esse código
Em páginas especiais (por exemplo, de uma campanha), o editor pode configurar no backoffice um código que aparece automaticamente pré-preenchido
O visitante pode apagar ou alterar o código antes de clicar em BOOK NOW

Interações do Utilizador

Este componente é altamente interativo. O visitante navega entre múltiplos painéis e introduz vários tipos de informação antes de prosseguir para a reserva.

Interação	Descrição
Clicar na área “Check-in — Check-out”	Abre o calendário da Navarino com dois meses lado a lado
Clicar num dia disponível no calendário	Define a data de check-in (primeiro clique) ou de check-out (segundo clique)
Clicar nas setas do calendário	Avança ou recua entre meses no calendário
Clicar na área “Guests”	Abre o painel de seleção de hóspedes
Clicar no botão ”+” ou ”−” dos contadores	Aumenta ou diminui o número de adultos/crianças
Selecionar a idade de uma criança	Escolhe a idade de cada criança adicionada
Clicar em “CONFIRM”	Fecha o painel aberto e mostra a informação selecionada na barra colapsada
Clicar na área “Promo Code”	Abre o campo de introdução do código promocional
Escrever o código	O campo aceita letras e números
Clicar em “BOOK NOW”	Redireciona o visitante para o URL da Navarino com todos os campos preenchidos
Chegar à página com `?promo=CODIGO` no URL	O código aparece automaticamente preenchido na Booking Bar
Clicar fora de um painel aberto	Fecha o painel e volta à barra colapsada
Premir a tecla Escape	Fecha o painel aberto
Navegar com o teclado (tecla Tab)	Percorre as áreas da barra e os elementos dentro de cada painel

Elementos

Conteúdos geridos no backoffice para este componente. Como este é um componente partilhado (não um módulo que o editor adiciona a uma página), os seus textos e configurações vivem numa zona específica das definições do site (siteRoot) e aplicam-se a todas as páginas onde o componente aparece.

Elemento	Tipo	Obrigatório	Descrição
Rótulo “Check-in — Check-out”	Texto	Sim	Texto apresentado na barra colapsada para a área de datas
Rótulo “Hóspedes”	Texto	Sim	Texto apresentado na barra colapsada para a área de hóspedes (ex: “Guests” / “Hóspedes”)
Rótulo “Código Promocional”	Texto	Sim	Texto apresentado na barra colapsada para a área de código (ex: “Promo Code” / “Código Promocional”)
Rótulo do botão de reserva	Texto	Sim	Texto do botão de submissão (ex: “BOOK NOW” / “RESERVAR AGORA”)
Rótulo “Adultos”	Texto	Sim	Título do bloco de adultos no painel de hóspedes
Texto de idade dos adultos	Texto	Não	Pequeno texto por baixo do título (ex: “Mais 17 anos” / “17+ years”)
Rótulo “Crianças”	Texto	Sim	Título do bloco de crianças no painel de hóspedes
Texto de idade das crianças	Texto	Não	Pequeno texto por baixo do título (ex: “Desde 17 anos” / “Under 17 years”)
Rótulo “Idade”	Texto	Sim	Texto apresentado em cada caixa de seleção de idade (ex: “Idade” / “Age”)
Rótulo “Criança”	Texto	Sim	Palavra usada na linha de cada criança (ex: “Criança 01:” / “Child 01:“)
Rótulo do botão “Confirmar”	Texto	Sim	Texto do botão que fecha os painéis de hóspedes e código (ex: “CONFIRM” / “CONFIRMAR”)
Rótulo “Disponibilidade”	Texto	Sim	Legenda apresentada no calendário (ex: “Availability” / “Disponibilidade”)
Rótulo “Sem disponibilidade”	Texto	Sim	Legenda apresentada no calendário (ex: “No Availability” / “Sem disponibilidade”)
Fórmula de preço final	Texto	Sim	Texto usado na área de resumo de preço (ex: “From {preço} for {noites} Nights”)
Mensagem de fallback	Texto	Sim	Texto apresentado se o widget Navarino falhar (ex: “O sistema de reservas está temporariamente indisponível. Por favor, tente novamente em breve.”)
Código Navarino do hotel	Texto	Sim	Identificador do hotel no sistema Navarino (ex: “SVP” para Savoy Palace). Não é visível ao visitante. Definido uma vez por hotel pelo gestor
URL base da Navarino	Ligação	Sim	Endereço base para onde o visitante é redirecionado ao clicar em BOOK NOW. Não é visível ao visitante

Nota: Todos os textos visíveis ao visitante são traduzidos por idioma (PT e EN). Os elementos técnicos (código Navarino, URL base) são comuns a todas as línguas e invariantes — um hotel tem um único código e um único URL.

Opções de Configuração

Opções disponíveis no backoffice para controlar o funcionamento e a apresentação da Booking Bar em cada hotel:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar Booking Bar	Ativo / Inativo	Ativo	Se inativo, a Booking Bar não aparece em nenhuma página do hotel. Útil para hotéis sem sistema de reservas online ou para momentos de manutenção
Máximo de adultos por quarto	Número (entre 1 e 10)	6	Limite superior do contador de adultos
Máximo de crianças por quarto	Número (entre 0 e 10)	6	Limite superior do contador de crianças
Idade máxima de criança	Número (entre 12 e 17)	17	Idade até à qual alguém é contabilizado como criança. Aparece também no texto de referência
Código promocional pré-preenchido	Texto	(vazio)	Se preenchido, o campo de código aparece sempre com este código por defeito. Pode ser sobreposto pelo visitante ou por um parâmetro no URL

Nota: A Booking Bar está disponível apenas nos sites dos hotéis individuais. No site institucional Savoy Signature (a raiz da marca), a Booking Bar não é apresentada — essa funcionalidade está desativada a nível da arquitetura porque o site institucional não gere reservas diretamente.

Configuração no Umbraco

Este componente tem um modelo de configuração diferente dos módulos normais, porque não é adicionado pelo editor a páginas específicas — funciona em modo global por hotel.

Estrutura proposta:

Todas as configurações vivem no siteRoot de cada hotel, num separador próprio chamado “Booking Bar”
O separador agrupa quatro zonas:
1. Ativação — o toggle “Ativar Booking Bar” e os limites (máximo de adultos, crianças, idades)
2. Integração Navarino — o código Navarino do hotel e o URL base de redirecionamento
3. Textos — todos os rótulos visíveis ao visitante (editáveis por idioma)
4. Código promocional — o código pré-preenchido opcional
O componente é injetado automaticamente dentro do Hero Slider sempre que a homepage do hotel tiver o módulo Hero Slider ativo e a opção “Ativar Booking Bar” esteja ligada. O editor não tem de adicionar manualmente a Booking Bar ao conteúdo.
No site institucional Savoy Signature, o separador “Booking Bar” também existe mas o toggle de ativação vem desativado por defeito e não tem efeito — o site institucional não faz reservas.
Para permitir campanhas com código pré-preenchido em páginas específicas (por exemplo, uma página de oferta especial), é possível no futuro adicionar um campo “Código promocional” também à Document Type dessa página; quando o visitante chegar a essa página, o código dessa página sobrepõe-se ao código global. Este comportamento é opcional e pode ser ativado apenas para os tipos de página que dele necessitem.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Barra colapsada	Pill horizontal com 4 zonas (Datas, Hóspedes, Promo Code, BOOK NOW) lado a lado e separadores verticais	Barra compacta com ícones e resumo à esquerda, e botão BOOK NOW numa linha inferior a ocupar toda a largura
Painel de datas	Dois meses lado a lado, ocupando grande parte da largura da página	Um mês de cada vez, com setas para navegar entre meses
Painel de hóspedes (mínimo)	Blocos “Adultos” e “Crianças” lado a lado, botão CONFIRM à direita	Blocos “Adultos” e “Crianças” empilhados, botão CONFIRM abaixo
Painel de hóspedes (com idades)	Idades das crianças em colunas (até 3 por linha)	Cada criança ocupa uma linha completa
Painel de código promocional	Campo e botão CONFIRM em linha	Campo a ocupar toda a largura, botão CONFIRM abaixo
Botão BOOK NOW	Integrado na pill, com largura ajustada ao texto	Linha inferior ocupando toda a largura do ecrã para facilitar o toque

A barra mantém a mesma estrutura lógica (4 zonas + botão BOOK NOW) em todos os tamanhos de ecrã. A disposição adapta-se para garantir que o toque é confortável no telemóvel e que toda a informação é legível em qualquer largura.

Estados Visuais

Estado	Descrição
Colapsada (inicial)	A barra aparece sobre a imagem da homepage com as 4 zonas e o botão BOOK NOW
Ao passar o rato numa zona	A zona destaca-se ligeiramente (cor mais escura no texto ou sublinhado suave) para indicar que é clicável
A abrir um painel	O painel correspondente (datas, hóspedes, código) expande-se com uma animação suave
Painel aberto — datas	O calendário da Navarino aparece e carrega disponibilidade e preços
Painel aberto — hóspedes	Os contadores de adultos/crianças ficam visíveis e editáveis
Painel aberto — código	O campo de introdução de código aparece vazio ou pré-preenchido
Ao passar o rato nos botões ”+” ou ”−“	Os botões destacam-se para indicar que são clicáveis
Contador no valor mínimo (0)	O botão ”−” fica desativado visualmente
Contador no valor máximo	O botão ”+” fica desativado visualmente
Dia sem disponibilidade	O dia aparece com opacidade reduzida ou cor neutra e não pode ser selecionado
Dia selecionado (check-in ou check-out)	Destaque com fundo colorido do hotel
Intervalo entre check-in e check-out	Todos os dias entre as duas datas aparecem com fundo colorido mais claro
Ao passar o rato no botão BOOK NOW	O botão muda ligeiramente de tom para indicar que é clicável
A submeter (após clicar em BOOK NOW)	O botão fica bloqueado e mostra indicação de carregamento enquanto o visitante é redirecionado
Widget Navarino a carregar	O painel de datas mostra uma pequena roda de carregamento no centro
Widget Navarino em falha	A barra mantém-se funcional, mas a zona de datas apresenta uma mensagem curta a indicar que o calendário está temporariamente indisponível

Acessibilidade

A barra pode ser utilizada apenas com o teclado: tecla Tab para navegar entre as zonas, tecla Enter ou Espaço para abrir um painel, setas esquerda/direita/cima/baixo para navegar dentro do calendário, tecla Escape para fechar.
Cada zona da barra é anunciada claramente pelos leitores de ecrã (ex: “Datas de estadia, botão”, “Hóspedes, botão”).
Quando um painel está aberto, o teclado foca automaticamente no primeiro elemento interativo dentro do painel.
Ao fechar um painel, o teclado volta para a zona da barra que foi clicada, para que o visitante retome a navegação sem se perder.
Cada contador de adultos/crianças é anunciado pelos leitores de ecrã com o valor atual (ex: “Adultos: 2. Botão aumentar. Botão diminuir”).
O calendário da Navarino respeita as melhores práticas de acessibilidade web fornecidas pelo próprio widget.
O botão BOOK NOW tem uma descrição clara para leitores de ecrã.
O contraste entre texto, fundo e botão cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1).
Os ícones usados na barra (calendário, pessoas, etiqueta) são decorativos — o significado é transmitido pelo rótulo ao lado.
Respeita a preferência do utilizador por movimento reduzido — quando esta opção está ativa no sistema operativo, as animações de abrir/fechar dos painéis são substituídas por transições imediatas.
A área de cada zona e dos botões tem dimensão suficiente para toque no telemóvel (mínimo 44x44 pixels).

Temas

O componente adapta-se visualmente a cada hotel: cor de fundo da barra, cor do texto, cor dos ícones, cor do botão BOOK NOW e cor de destaque no calendário (dias disponíveis, dias selecionados) seguem a identidade visual do hotel, assim como a tipografia dos rótulos.

Os 8 hotéis suportados:

Savoy Signature (barra desativada por defeito)
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Notas por tema (com base no Figma):

Savoy Palace — barra em bege/creme, texto em violeta profundo, botão BOOK NOW em dourado escuro com texto branco, destaque do calendário em tons de dourado
Saccharum — barra em branco/creme suave, texto em violeta profundo, botão BOOK NOW em verde natural com texto branco, destaque do calendário em tons de verde
Calheta Beach — barra em branco, texto em violeta profundo, botão BOOK NOW em vermelho/coral com texto branco, destaque do calendário em tons de coral
Hotel Next — barra em branco, texto em violeta profundo, botão BOOK NOW em azul claro com texto branco, destaque do calendário em tons de azul
Savoy Signature — barra em branco, texto em violeta profundo, botão BOOK NOW em dourado claro com texto branco (apresentação desligada por defeito neste site)

A estrutura da barra (pill, 4 zonas, separadores, botão BOOK NOW) mantém-se idêntica em todos os hotéis — muda apenas a paleta de cores, a tipografia e os pequenos detalhes como a forma dos botões dos contadores.

Changelog

Data	Estado	Descrição
2026-04-23	Rascunho	Versão inicial criada a partir do Figma
2026-04-23	Publicada	Publicada no Docmost (nova página)

C10 — Booking Bar

Screenshots de Referência

Desktop (1440px) — barra colapsada

Mobile (375px) — barra colapsada

Visão geral (todos os estados)

Variantes por tema (matrizes de variantes)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

Integração Externa — Navarino

O que é gerido pela Navarino

O que é gerido pelo site

Pontos críticos da integração

Variantes

Variante 1 — Barra colapsada (estado inicial)

Variante 2 — Seleção de datas aberta (widget Navarino)

Variante 3 — Seleção de hóspedes aberta (estado mínimo)

Variante 4 — Seleção de hóspedes com idades das crianças

Variante 5 — Código promocional introduzido

Interações do Utilizador

Elementos

Opções de Configuração

Configuração no Umbraco

Comportamento Responsive

Estados Visuais

Acessibilidade

Temas

Changelog