Brasa Alta
Site conceitual de uma hamburgueria fictícia na brasa, com cardápio, busca, pedido montável e atendimento simulado por mensagem. Brasa Alta é uma marca fictícia: marca, imagens e vídeo foram criados com IA, o endereço e os preços são fictícios e nenhuma mensagem sai do site.
- Aplicação
- Site de restaurante com cardápio, busca e pedido montável
- Tecnologias
- Marca e imagens
- Marca fictícia. Marca, fotos e vídeo gerados com IA
- Status
- Publicado na Cloudflare Pages
O projeto
O Brasa Alta mostra como eu construo um site de restaurante completo: o visitante lê o cardápio, busca um item, monta o pedido e vê como seria o atendimento por mensagem.
A marca é fictícia e foi criada para este projeto. O endereço e os preços também são fictícios, com referência em hamburguerias artesanais da região Sul do Brasil em 2026. O envio do pedido é uma simulação: nenhuma mensagem sai do site.
O que o site faz
- Cardápio de 51 itens em 9 categorias, gerado a partir de uma lista de dados, com barra de categorias fixa que acompanha a rolagem.
- Busca sem acento e sem diferenciar maiúsculas, por nome, descrição, categoria e etiqueta.
- Bandeja de pedido: o botão Adicionar vira controle de quantidade, os chopes têm seletor de 300 e 500 ml, e o total, a observação e a forma de retirada aparecem em tempo real. No celular, a bandeja é uma folha arrastável.
- Envio simulado: o pedido vira uma conversa com resposta da casa, que muda conforme o horário de Brasília, a forma de retirada e a presença de bebida alcoólica.
- Chat com respostas prontas: horário calculado na hora, endereço, tempo de retirada, opções vegetarianas e chopes, tudo lido dos mesmos dados do cardápio.
- Desfazer por 10 segundos, com atalho de teclado (Ctrl+Z ou Cmd+Z).
Decisões de design
Conceito
O papel kraft da bandeja vira a página. O vídeo da grelha abre o site e o cardápio aparece logo na primeira rolagem.
Tipografia
Big Shoulders Display nos títulos, condensada como um letreiro pintado, e Archivo no texto. As fontes são servidas pelo próprio site.
Movimento
Trechos do vídeo viram fotos vivas que só tocam quando estão na tela, e um disco voa até a bandeja ao adicionar um item. Tudo para quando o sistema está com a preferência de reduzir movimento.
Cara de produto
Linhas de cardápio impresso em vez de cartões, estados reais (vazio, removido, desfazer, nada encontrado) e textos escritos como um cardápio de verdade.
Acessibilidade e qualidade
- Contraste verificado por par de cores (WCAG), alvos de toque de 44 px, foco visível e uma única região de anúncio para leitor de tela.
- Testado no Chrome em 320, 360, 390, 768 e 1440 px e em paisagem, sem rolagem horizontal e sem erros no console.
- Revisão independente em três rodadas.
Como foi construído
Página
HTML, CSS e JavaScript puros, sem framework e sem dependência externa em tempo de execução.
Dados
O cardápio, a busca, a bandeja e o chat leem a mesma lista de dados.
Imagens
Marca, fotos e vídeo foram gerados com IA. A pesquisa de preços e de cardápio que embasou os valores está no repositório.
Publicação
O site está hospedado na Cloudflare Pages.
Links
- Site publicado
- Código no GitHub
- Pesquisa de cardápio e preçosO que embasou os valores fictícios
As fontes Big Shoulders Display e Archivo usam a licença SIL Open Font License.