MP.Michel Preto
Projects

Mântega Culinária end-to-end digital presence

Hortolândia · São Paulo

Brand repositioning with an in-house design system (Astro + headless Strapi), paid acquisition, and AI-driven support automation on Instagram — the complete digital operation of a restaurant, built and run solo.

Visit the website
RoleDesign & Development
Year2024
StatusIn production
Web DesignDesign SystemsAstroHeadless CMSMeta AdsAI Automationn8n

Context

Mântega Culinária is a contemporary Japanese restaurant in Hortolândia, São Paulo state, with a strong delivery operation (iFood and DeliveryVip) and support via Instagram and WhatsApp. I took on the business's digital operation end to end: the brand repositioning and site with an in-house design system, paid customer acquisition, and automating support on Instagram — three fronts that would normally take a whole agency, run solo, on infrastructure I built myself.

The Site: Brand Repositioning + Design System

The starting point wasn't "build a restaurant site" — it was pulling Mântega Culinária out of the tired visual tropes of Japanese cuisine. The house tagline, "Esqueça o Tradicional" ("Forget Tradition"), became the decision test: any visual choice that felt like "this is what every Japanese restaurant site looks like" — red-and-black palette, cherry blossoms, bamboo texture, "ninja" fonts — was ruled out on principle. The goal was a site with a point of view, not one more delivery-app card grid.

The final direction, codenamed "the counter after dark", portrays the Desafio do Chef counter scene after dark: warm amber light over a deep espresso background, refined and intimate without turning cold or clinical. I built the entire color system in OKLCH — amber (--primary) for CTAs and highlights, shiso green (--accent) for links and markup — with text-on-background contrast checked and documented (ink/bg ≈ 14:1, dark text on amber ≈ 11:1), guaranteeing AA even on a fully dark theme. The typography pairs a high-contrast serif for headings (Gloock) with a humanist grotesque for body copy and UI (Hanken Grotesk), on a fluid scale in clamp() that adapts without breaking from mobile to desktop. The layout is editorial and asymmetric — experience blocks (Sequencial, Desafio do Chef) alternating which side the image and text sit on, instead of the identical card grid any landing-page generator would produce, because the food and the room are the protagonists; the interface just frames them.

On the technical side, the site is a static Astro site decoupled from a headless Strapi CMS: the menu is fetched from Strapi at build time, with an automatic fallback to local data whenever the CMS is unavailable, so the build never breaks. Images are optimized to WebP during the build, which means the published site doesn't depend on my own infrastructure at runtime: if the CMS server goes down, the site stays up normally, and publishing new content only requires running the build again. On the menu itself, the interactions (Lunch/Dinner/Drinks switching, accent-insensitive search, filters, scroll-spy) run client-side and still degrade gracefully without JavaScript, showing the full menu. The whole CMS runs on versioned Docker Compose (Postgres + Strapi), with automated deployment via GitHub Actions and infrastructure as code, including a planned migration from shared hosting to my own VPS with automatic HTTPS, leaving the dependency on a generic provider behind.

Accessibility was treated as a design requirement, not a post-hoc checklist: AA contrast verified token by token, full keyboard navigation with visible focus, and every bit of motion on the site (the orchestrated hero reveal, the scroll reveals) has a complete alternate path for prefers-reduced-motion: an instant crossfade, with no transform at all.

Acquisition: Auditing and Rebuilding the Delivery Campaign

The delivery ad campaign had been running for over a year with results well below expectations. A full audit revealed the cause: it wasn't the creative (which was already performing above the industry average), it was the setup. Among the problems found: the wrong campaign objective (Traffic instead of Sales), a 17 km geographic radius far beyond the real delivery area, automatic audiences with no conversion signal, placements that included WhatsApp Status, and a budget structure that underused the available spend.

I rebuilt the campaign from scratch: a Sales objective pointed at the purchase event already active on the DeliveryVip pixel, two segmented ad sets (geographic prospecting and remarketing), revised placements, and dynamic creative enabled. Results in the first two weeks: 30 purchases at an average cost of R$ 12,04, with the prospecting set running at R$ 9,22 per purchase, a fraction of what the previous setup produced. Management is ongoing, with continuous budget and audience adjustments as the algorithm exits the learning phase.

Automated Support: An AI Agent on Instagram

The third front solves the bottleneck the site and ads don't cover: repetitive questions in Instagram direct messages (hours, menu, how to order) outside human support hours. I built a support agent that answers messages automatically, using the Claude API to generate natural, accurate responses from a prompt containing all of the restaurant's information: hours, menu, seasonal promotions, reservation policy.

The architecture runs entirely on infrastructure I own: a cloud VPS orchestrates the flow via n8n, with automatic HTTPS, and is connected to Instagram's messaging API (Meta's Graph API). The flow receives the customer's message, extracts the text, queries the AI with the restaurant's up-to-date context (including the date and the day's promotions), and replies automatically, routing to a human on WhatsApp whenever the request needs a reservation or falls outside the bot's scope.

Keeping that kind of integration alive meant solving real production problems: Meta access token expiration, JSON payload formatting sensitive to special characters, and even a full-disk incident on the server that kept crashing the container in a loop: the kind of ongoing operational work that separates a prototype from a system that works every single day. Bringing the agent into production also required updating the site's privacy policy to cover the use of AI in support, a compliance detail many small businesses skip.

Results

A local business with a complete digital operation under its own control: a site with an authored visual identity and decoupled architecture (static site + headless CMS, with no runtime dependency on infrastructure I own), professionalized paid acquisition with controlled CAC, and automated support that covers the gap outside business hours. A small example in scale, but complete in scope: from design system to infrastructure as code, through media performance and AI automation, delivered and maintained by one person alone.