Página de vendas para gráfica em Brasília. O visitante calcula o orçamento em tempo real — escolhendo produto, quantidade, material, impressão, acabamento e prazo — e fecha o pedido direto pelo WhatsApp, com o resumo já montado.
Gráfica que vende por WhatsApp perde tempo com o vaivém de "quanto custa X?". Este projeto resolve isso do lado do cliente: ele mesmo calcula o valor, monta o carrinho e envia um pedido estruturado — quantidade, material, acabamento, prazo e observações — já formatado no WhatsApp.
Do lado da gráfica, chega pedido pronto pra fechar. Do lado do cliente, fim do "vou verificar e te falo". Ganha tempo todo mundo.
Do primeiro clique no anúncio até a gráfica recebendo o pedido pronto no WhatsApp.
Cada produto tem "a partir de R$ X/un" calculado na hora. Sem "sob consulta" — o visitante já vê uma faixa de preço antes de se comprometer.
Produto, quantidade, material, tipo de impressão, acabamento e prazo — cada mudança recalcula o total na hora. Sem botão "calcular", sem espera.
O motor de preço aplica desconto por volume (ex.: 15% acima de 1.000 cartões), e acréscimo de urgência quando o prazo escolhido é o expresso.
O cliente adiciona vários itens diferentes (500 cartões + 2 banners + 50 canecas). O carrinho sobrevive ao fechar o navegador via localStorage.
Antes de abrir o WhatsApp, um modal captura nome + telefone (com máscara). Isso qualifica o lead e evita o "oi" vazio chegando na gráfica.
A mensagem já sai com cada item, especificações, observações, se tem arte própria e total estimado. A gráfica só confirma e produz.
Trechos da interface com dados fictícios.
Cliente: João M. · Tel: (61) 9 8888‑7777
Nota de confidencialidade. Os mockups reproduzem o comportamento real da interface. Nome, telefone, valores e logo foram alterados para preservar o cliente.
Seis pontos do código que mostram maturidade de produto digital, não só de tela bonita.
Toda a lógica de preço vive numa função calcular()
que recebe uma configuração e devolve total,
valor unitário e linhas de detalhamento. Testável,
reutilizável, sem espalhar cálculo pela UI.
Cada produto define faixas (ex.: {min:1000, desc:0.15}).
A função escolhe a faixa certa olhando a quantidade — o cliente
ganha desconto sem cupom, sem campo escondido, sem ação manual.
localStorage guarda os itens e o cliente. Se o usuário
fechar o site e voltar 2 horas depois, o pedido ainda está lá.
Reduz o abandono sem exigir login.
Antes de abrir o WhatsApp, valida nome (≥2 caracteres) e telefone (≥10 dígitos). Máscara aplicada no input. Nada de "clicar e ver o que acontece".
Se as credenciais de SUPABASE_URL e
SUPABASE_ANON_KEY estiverem vazias, o site funciona
100% sem back-end. Se estiverem preenchidas, cada lead é registrado
via RPC antes do WhatsApp abrir. Zero fricção para o cliente.
Paleta amarelo · magenta · ciano em gradiente animado no logo, na faixa barber-pole do topo e em cada seção. O site comunica "gráfica colorida" sem precisar dizer.
Zero dependência obrigatória além do WhatsApp.
prefers-color-scheme, gradientes animadoslocalStorage para carrinho e dados do clientewa.me com mensagem montada dinamicamentearia-live no carrinho, respeita prefers-reduced-motionO maior ganho não foi estético — foi comportamental. Quando o orçamento sai na hora, o cliente para de perguntar "quanto custa?" e começa a decidir. A conversa no WhatsApp já chega cinco passos à frente. Isso muda a taxa de fechamento sem mudar preço, sem desconto artificial, sem campanha. É design de produto fazendo trabalho de vendas.
Conta o que você vende. A gente desenha a jornada até o WhatsApp.
Conversar pelo WhatsApp