A tarefa
Uma pizzaria que vende por aplicativo de delivery paga comissão em cada pedido e nunca vê o cliente. O site próprio guarda os dois, desde que seja tão rápido de usar quanto o aplicativo que o cliente já tem no celular.
Então a régua veio das grandes redes: o cardápio abre na hora, o tamanho e os adicionais são escolhidos numa janela sobre a página, e o carrinho não leva ninguém para outra tela. Tema escuro, fotos grandes, tudo legível no celular.
O que construímos
A primeira tela: cidade, tempo de entrega e as abas do cardápio
O topo traz o que quem está com fome confere primeiro: a cidade que a cozinha atende, o tempo de entrega que a marca promete, a nota, o carrinho e o login. Abaixo dele ficam três blocos com as promoções do momento.
Mais abaixo, as abas de categoria grudam no alto da janela: pizzas, combos, petiscos, bebidas, café, sobremesas. Tocar em uma rola o catálogo até aquele bloco em vez de carregar outra página.
O catálogo e a ficha da pizza
As pizzas ocupam a grade em quatro colunas, cada uma com foto, nome e preço a partir de. Selos marcam o que a cozinha quer vender: mais pedida, novidade, melhor preço. As marcas de picante, vegetariano e infantil ficam ao lado do nome.
Um clique abre a ficha sobre o catálogo. Tamanho de dez a dezesseis polegadas, massa clássica ou fina, seis adicionais com preço próprio, e um botão que já mostra quanto custa a pizza do jeito escolhido.
O resto do cardápio e o carrinho
Só de pizza não sai um pedido que valha a entrega, então o catálogo segue: combos, petiscos, bebidas, café, sobremesas, molhos. Todo bloco usa a mesma grade e a mesma ficha, e uma categoria nova entra como dado, não como página nova.
O carrinho abre como uma gaveta à direita e deixa o catálogo atrás. A quantidade muda ali mesmo, o total atualiza na hora, a linha acima do botão diz quanto falta para a entrega grátis, e molhos e bebidas são oferecidos ali, em um toque.
Um rodapé feito para uma rede, não para um ponto
O pé da página carrega o que uma rede em crescimento precisa guardar em algum lugar: franquia, investidores, fornecedores, o formulário para indicar um ponto, a seção sobre as cozinhas e o guia de alérgenos, depois telefone, e-mail e os documentos.
Abaixo disso a marca publica os próprios números, a quantidade de cozinhas e os estados que elas cobrem. Fundo escuro, texto branco e uma cor de destaque seguram a página, e as fotos dos pratos fazem o resto.
Por dentro do projeto
Esta é uma vitrine de demonstração, então a parte técnica diz na lata o que está ligado e o que não está. Dois idiomas, o bloco de busca no cabeçalho, o carrinho no navegador e as conferências no celular.
Busca e respostas de IA
Inglês e português do Brasil
A versão em português é uma página própria em /pt-br/, com preços em reais, enquanto a inglesa fica em dólares. Abrir a versão em português
Título e descrição para a busca
Título, descrição e canonical estão definidos nas duas versões, e o tamanho do título e da descrição cabe inteiro no resultado de busca.
Prévia do link nos mensageiros
No cabeçalho estão uma og:image e o twitter:card como summary_large_image, além dos favicons e de um web manifest.
Catálogo e carrinho
O cardápio é um arquivo de dados
Cinquenta e dois pratos e doze adicionais ficam em um único arquivo JSON, compilado para dentro do site na hora do build.
O carrinho fica no navegador
O carrinho e o cupom ficam guardados no armazenamento do navegador, então atualizar a página ou fechar a aba não esvazia nada.
Pagamento
O checkout aqui é um esboço
Não há provedor de pagamento por trás do botão de fechar o pedido aqui, e ele diz isso em vez de fingir que recebe dinheiro: esta página é uma demonstração.
Versão para celular
Conferido na tela do celular
Com 390 pixels de largura nada escapa para fora da tela, então não existe rolagem lateral para brigar.
Confiabilidade
Limpo nas boas práticas
O Lighthouse dá 100 em boas práticas no celular e no desktop, sem nenhum item reprovado nessa seção.
Arquivos estáticos por HTTPS
O site é HTML, CSS e JavaScript escritos à mão, sem framework por trás, entregues por uma rede de distribuição.
No celular
O que saiu disso
- Da escolha da pizza ao carrinho em dois cliques, sem sair da página.
- Tamanho, massa e adicionais são escolhidos em uma janela, com o preço atualizando na hora.
- O carrinho mostra quanto falta para a entrega grátis e oferece adicionais na mesma gaveta.
O site recebe os pedidos sozinho, então a comissão e o cliente ficam com a cozinha. O cardápio é dado, então preços, fotos e categorias inteiras mudam sem mexer no layout.
