Website para restaurante 2026
Maynard's Burgers
Site de uma hamburgueria do Porto, com um hero conduzido por scroll em que o visitante monta o hambúrguer camada a camada.
O projeto
Site de apresentação da Maynard's Burgers, na Rua de Fernandes Tomás, no Porto. É uma única página renderizada no servidor, que percorre os hambúrgueres em destaque, o manifesto da casa, o menu completo e a informação para visitar o restaurante.
O centro do projeto é o hero. As oito camadas do Cheddar Supremo começam separadas e assentam uma a uma, de baixo para cima, à medida que se faz scroll. No fim o hambúrguer fecha, o preço é carimbado por cima e aparecem os botões de encomenda. Todos os botões de encomenda levam à loja oficial do restaurante, por isso o site não precisa de carrinho nem de pagamentos.
O menu, os preços e os horários vêm de ficheiros de dados e de configuração, e não do HTML. O conteúdo está em quatro línguas. O Gabriel Moura colaborou no projeto com referências, traduções e revisões.
Em detalhe.
Direção visual.
A marca vive de uma só cor, o amarelo Maynard's, com preto e três neutros quentes. A fotografia traz o resto. Uma única família, a Archivo variável, dá três vozes ao variar a largura: larga para o logótipo, normal e pesada para os títulos, condensada para o menu e os preços. Cantos retos, contornos grossos, sombras duras e o losango como motivo em marcadores, carimbos e separadores.
Tipografia
- Archivo
Cores
- #FFD200
- #000000
- #111111
- #FFFDF5
- #F2F0E9
Por dentro.
-
01
A geometria do hambúrguer está declarada em configuração, em frações da largura do contentor, por isso a composição é idêntica em qualquer ecrã.
-
02
A animação usa GSAP ScrollTrigger sobre uma faixa com position sticky em CSS. A cada refresh mede o espaço disponível e calcula a escala e as distâncias da explosão, sem valores fixos em píxeis.
-
03
Sem JavaScript, ou com prefers-reduced-motion, a página mostra o hambúrguer já montado num só ecrã, com os botões visíveis.
-
04
As camadas do hero são WebP com transparência em três larguras. Os pães carregam com prioridade alta e tudo o que está abaixo da dobra é lazy.
-
05
Os dados estruturados de restaurante (JSON-LD) são gerados a partir da mesma configuração que alimenta a página.
-
06
Os testes cobrem as secções da página, SEO, dados estruturados, existência dos ficheiros de imagem, localização e páginas de erro.
Projeto privado. Posso mostrá-lo numa chamada.