MP.Michel Preto
Projetos

Mântega Culinária presença digital de ponta a ponta

Hortolândia · São Paulo

Reposicionamento de marca com sistema de design próprio (Astro + Strapi headless), aquisição paga e atendimento automatizado com IA no Instagram — a operação digital completa de um restaurante, construída e mantida sozinho.

Visitar o site
FunçãoDesign & Desenvolvimento
Ano2024
StatusEm produção
Web DesignDesign SystemsAstroHeadless CMSMeta AdsAutomação com IAn8n

Contexto

A Mântega Culinária é um restaurante de culinária japonesa contemporânea em Hortolândia/SP, com forte operação de delivery (iFood e DeliveryVip) e atendimento via Instagram e WhatsApp. Assumi a operação digital do negócio de ponta a ponta: o reposicionamento de marca e o site com sistema de design próprio, a aquisição de clientes via anúncios pagos, e a automação do atendimento no Instagram — três frentes que normalmente exigiriam uma agência inteira, conduzidas sozinho, com infraestrutura própria.

O site: reposicionamento de marca + sistema de design

O ponto de partida não foi "fazer um site de restaurante" — foi tirar a Mântega do lugar-comum visual da culinária japonesa. A tagline da casa, "Esqueça o Tradicional", virou o critério de decisão: toda escolha visual que soasse "isso é como todo site de restaurante japonês fica" — paleta vermelho-e-preto, flor de cerejeira, textura de bambu, fontes "ninja" — foi descartada por princípio. O objetivo era um site com ponto de vista, não mais um card grid de app de delivery.

A direção final, codinome "the counter after dark", retrata a cena do balcão do Desafio do Chef à noite: luz âmbar quente sobre um fundo espresso profundo, refinado e íntimo sem cair no frio ou no clínico. Construí o sistema de cor inteiro em OKLCH — âmbar (--primary) para CTAs e destaques, verde-shiso (--accent) para links e marcações — com os contrastes texto-sobre-fundo verificados e documentados (ink/bg ≈ 14:1, texto escuro sobre âmbar ≈ 11:1), garantindo AA mesmo num tema 100% escuro. A tipografia combina uma serifada de alto contraste para títulos (Gloock) com uma grotesca humanista para corpo e UI (Hanken Grotesk), numa escala fluida em clamp() que se adapta sem quebrar do mobile ao desktop. O layout é editorial e assimétrico — blocos de experiência (Sequencial, Desafio do Chef) alternando lado da imagem e do texto, em vez da grade de cards idêntica que qualquer gerador de landing page produz — porque a comida e o ambiente são os protagonistas, a interface só emoldura.

Na base técnica, o site é Astro estático desacoplado de um CMS Strapi headless: o cardápio é buscado do Strapi no momento do build, com fallback automático para dados locais quando o CMS está indisponível — o build nunca quebra. As imagens são otimizadas para WebP durante o build, o que significa que o site publicado não depende da minha infraestrutura em runtime: cai o servidor de CMS, o site continua no ar normalmente, e a próxima publicação de conteúdo só exige rodar o build de novo. No cardápio em si, as interações (alternância Almoço/Jantar/Bebidas, busca sem diferenciar acento, filtros, scroll-spy) funcionam no lado do cliente e ainda degradam bem sem JavaScript, mostrando o cardápio completo. Todo o CMS roda em Docker Compose versionado (Postgres + Strapi), com deploy automatizado via GitHub Actions e infraestrutura como código — incluindo a migração planejada de hospedagem compartilhada para uma VPS própria com HTTPS automático, deixando para trás a dependência de um provedor genérico.

Acessibilidade foi tratada como requisito de design, não checklist posterior: contraste AA verificado token a token, navegação completa por teclado com foco visível, e todo o motion do site (a revelação orquestrada do hero, os reveals de scroll) tem um caminho alternativo completo para prefers-reduced-motion — crossfade instantâneo, sem transformação nenhuma.

Aquisição: auditoria e reconstrução da campanha de delivery

A campanha de anúncios de delivery rodava havia mais de um ano com resultado muito abaixo do esperado. Uma auditoria completa revelou a causa: não era o criativo (que já performava acima da média do setor), era a configuração. Entre os problemas identificados: objetivo de campanha errado (Tráfego em vez de Vendas), raio geográfico de 17 km muito além da área real de entrega, públicos automáticos sem sinal de conversão, posicionamento incluindo Status do WhatsApp, e uma estrutura de orçamento que subutilizava o investimento disponível.

Reconstruí a campanha do zero: objetivo de Vendas apontando para o evento de compra já ativo no pixel do DeliveryVip, dois conjuntos de anúncio segmentados (prospecção geográfica e remarketing), posicionamentos revisados, e criativo dinâmico habilitado. Resultado nas primeiras duas semanas: 30 compras a um custo médio de R$ 12,04 — com o conjunto de prospecção operando a R$ 9,22 por compra, uma fração do que a estrutura anterior gerava. A gestão segue ativa, com ajustes contínuos de orçamento e público conforme o algoritmo sai do período de aprendizado.

Atendimento automatizado: agente de IA no Instagram

A terceira frente resolve o gargalo que site e anúncios não cobrem: perguntas repetitivas no direct do Instagram (horário, cardápio, como fazer pedido) fora do horário de atendimento humano. Construí um agente de atendimento que responde automaticamente às mensagens, usando a API da Claude para gerar respostas naturais e precisas a partir de um prompt com todas as informações do restaurante — horários, cardápio, promoções sazonais, política de reservas.

A arquitetura roda inteiramente em infraestrutura própria: uma VPS na nuvem orquestra o fluxo via n8n, com HTTPS automático, conectada à API de mensagens do Instagram (Graph API da Meta). O fluxo recebe a mensagem do cliente, extrai o texto, consulta a IA com o contexto atualizado do restaurante (incluindo data e promoções do dia) e responde automaticamente — direcionando para o WhatsApp humano quando o pedido exige reserva ou foge do escopo do bot.

Manter esse tipo de integração viva envolveu resolver problemas reais de produção: expiração de token de acesso da Meta, formatação de payload JSON sensível a caracteres especiais, e até um incidente de disco cheio no servidor que derrubava o container em loop — o tipo de trabalho de operação contínua que separa um protótipo de um sistema que funciona todo santo dia. A entrada em produção do agente também exigiu atualizar a política de privacidade do site para cobrir o uso de IA no atendimento — um detalhe de conformidade que muitos pequenos negócios pulam.

Resultado

Um negócio local com operação digital completa e sob controle próprio: um site com identidade visual autoral e arquitetura desacoplada (site estático + CMS headless, sem dependência de runtime na infraestrutura própria), aquisição paga profissionalizada com CAC controlado, e atendimento automatizado que cobre a lacuna fora do horário comercial. Um exemplo pequeno em escala, mas completo em escopo — de sistema de design a infraestrutura como código, passando por performance de mídia e automação com IA, entregue e mantido por uma pessoa só.