LAGOM
Um website construído à mão para um espaço de brunch: o equilíbrio do "lagom" traduzido em cada componente, feito de raiz, sem bibliotecas de UI.
Visitar website↗
A MIRAE construiu o website do Lagom componente a componente: hero em carrossel com preload inteligente, galeria e lightbox feitos de raiz, pipeline de imagens próprio, consentimento RGPD integrado com o Google Consent Mode e SEO completo com dados estruturados de restaurante.
O briefing
O Lagom traz o conceito sueco do "nem demasiado, nem pouco" a um brunch, e o site tinha de ter a mesma medida: leve, calmo e rápido, com a comida e o espaço em primeiro plano.
O âmbito é assumido: sem reservas online nem e-commerce. A mesa marca-se por telefone com um toque, o menu descarrega-se em PDF e há ligação direta ao Uber Eats e às reviews reais do Google. Um site em português, focado em mostrar o espaço e levar à chamada.
Abordagem de design
Feito à mão, sem atalhos
Todos os componentes foram construídos de raiz, sem bibliotecas de UI nem carrosséis prontos: um ficheiro de CSS puro por componente, ícones em SVG inline e animação com Framer Motion, tudo na medida certa do espaço.
O hero em carrossel
Seis imagens em rotação com cross-fade e logo animado, com preload inteligente: só carrega a imagem atual e a seguinte, no tamanho certo para cada ecrã, incluindo Retina. Em mobile, a altura do hero fica bloqueada para não saltar quando a barra do browser aparece.
Desenvolvimento
Pipeline de imagens próprio
Um script próprio em Node e Sharp gera três a quatro tamanhos por imagem, em WebP com fallback JPEG, e ainda placeholders desfocados em base64 embebidos no código: as 21 fotografias da galeria carregam progressivamente, sem ecrãs vazios.
Galeria e lightbox de raiz
Uma galeria responsiva de 21 imagens, de uma a quatro por vista consoante o ecrã, com setas, dots e swipe, e um lightbox de ecrã inteiro com navegação por teclado: tudo construído à medida, sem plugins.
RGPD com Consent Mode
Um banner de consentimento próprio com três opções e detalhe por categoria, integrado com o Google Consent Mode: o analytics só dispara depois do consentimento, verificado logo no head, antes de o gtag carregar.
SEO de restaurante a sério
Dados estruturados schema.org Restaurant com morada, GPS, horários, telefone, tipos de cozinha e métodos de pagamento, sitemap.xml e robots.txt configurados: o Lagom aparece nos resultados como um restaurante completo, não como mais um link.
Continua a explorar o nosso trabalho
Diga-nos o que está a construir
Fale-nos dos seus objetivos e respondemos em 24 horas com um âmbito claro e os próximos passos.