← Voltar para projetos
Web DesignFront-endNext.jsSEOLanding Page

Mapew — Site & Landing

A landing page que apresenta o produto e converte visitante em download.

Papel
Product Design + UI + Front-end (projeto solo)
Ano
2026
Plataforma
Web (Desktop + Mobile responsivo)
Stack
Next.js, React, TypeScript, GSAP, Vercel
Processo / Ferramentas
Design no Figma → desenvolvimento em Next.js → deploy na Vercel → Web Analytics
01. Contexto

Um app na loja precisa de uma porta de entrada. O site do Mapew é o ponto onde quem descobre o produto (por vídeo, busca ou indicação) entende o valor em segundos e decide baixar. Ele também é a vitrine de credibilidade — o que um curioso encontra quando pesquisa "Mapew".

02. Problema

O desafio era traduzir um produto que se entende usando (escanear, ver o total, conferir o cupom) em uma página que se entende lendo. Sem fricção, sem jargão, e leve o bastante para carregar rápido no 4G de quem está com pressa.

03. Objetivo

Comunicar a proposta de valor em até 3 segundos, guiar até o botão de download e sustentar a marca do produto na web — com SEO para aparecer em buscas e acessibilidade para servir qualquer pessoa.

04. Processo

Defini a narrativa em seções (gancho → conceito → como funciona → prova → planos → conversão), desenhei a identidade visual alinhada ao app e implementei em Next.js com animações em GSAP. Estruturei metadados de SEO (Open Graph, schema.org), foco em acessibilidade (WCAG) e instalei Web Analytics para medir tráfego e origem das visitas.

05. Solução

Uma landing page única, cremosa e direta: hero com o conceito "o gêmeo digital da sua compra física", demonstração visual do app em cada momento de uso, seção de planos (FREE para sempre + PRO) e CTA recorrente para a Play Store. Mockups de alta fidelidade contam a história sem precisar de texto longo.

06. Resultado

O site está no ar em mapew.com.br, indexado e com analytics ativo medindo cada canal de aquisição. Virou a base para a estratégia de divulgação do produto — todo link de campanha aponta para lá, e cada visita é rastreada por origem (UTM) para entender o que converte.

Galeria
Hero — o conceito do produto
Hero — o conceito do produto
Demonstração: scanner inteligente
Demonstração: scanner inteligente
Demonstração: conferência do cupom
Demonstração: conferência do cupom
Demonstração: dados e histórico
Demonstração: dados e histórico

Gostou deste case?

Posso contar os detalhes — decisões, trade-offs e aprendizados — numa conversa.