Novo Design da Home — Conceitos e Layout (mobile)
Data de criação do design: 02/09/2026
Estamos desenhando a nova home do marketplace. Esta página documenta os conceitos visuais e de comportamento definidos até agora, com prints reais do protótipo (todas as telas abaixo são da versão mobile).
Visão geral do mockup
Home — estado inicial
Header roxo com gradiente, busca, ícones de favoritos/usuário/carrinho, frase promocional em carrossel, banner principal com fotos de produto, categorias em carrossel horizontal, lojas patrocinadas e a grade de produtos.
Cards de produto
Cada card pode combinar diferentes selos ("bags") dependendo da situação do produto. Os selos foram desenhados pra não competir entre si — cada um tem uma posição e cor fixas no card, e regras de precedência quando dois se encontram no mesmo produto.
Entrega rápida (FULL)
Selo verde, inline com o nome do produto. Representa entrega rápida/fulfillment, no estilo do "Full" do Mercado Livre.
<span class="product-fast-delivery" title="Entrega rápida">
<svg>...raio com topo reto...</svg>
FULL
</span>Desconto
Badge rosa arredondado, canto superior direito da imagem, com a porcentagem de desconto. O preço muda de padrão: preço novo em rosa + preço antigo riscado ao lado.
<span class="product-discount-badge">12%</span>Destaque / Patrocinado
Fita azul vertical colada no canto superior esquerdo da imagem, ponta cortada em formato de "A", só com uma estrela (sem texto). Serve pra dois casos: destaque editorial da própria plataforma (mais vendido, bem avaliado) OU produto patrocinado por um lojista que paga/usa crédito de ads pra aparecer em destaque.
<span class="product-featured-badge" title="Produto em destaque">
<svg>...estrela...</svg>
</span>Atacado
Pill roxa no canto inferior esquerdo da imagem, com "$$ Atacado". O preço de atacado aparece entre parênteses depois do preço cheio (ex.: R$ 49,90 (R$ 34,90)). Bem a cara do Saara como mercado popular vendendo em volume.
<span class="product-wholesale-badge" title="Preço especial no atacado">$$ Atacado</span>Personalize
Pill laranja no canto inferior esquerdo (mesma posição do selo de Atacado — quando o produto é os dois ao mesmo tempo, o selo "Personalize" tem prioridade visual, mas o preço de atacado entre parênteses continua aparecendo).
<span class="product-customize-badge" title="Produto personalizável">
<svg>...paleta de pintor...</svg>
Personalize
</span>SAFE (entrega rastreada/segurada)
Pill cinza-chumbo no canto superior esquerdo, pensada pra produtos de valor alto (ex.: acima de R$ 1.000, como joias). Transmite segurança tanto pra quem compra quanto pra quem vende.
<span class="product-safe-badge" title="Entrega rastreada com seguro">
<svg>...cadeado...</svg>
SAFE
</span>Card com vídeo de catálogo
Produtos de destaque (como joias) podem ter um vídeo do produto girando/detalhando, em loop mudo, no lugar da foto — com máscara quadrada cobrindo a altura toda do card. Passa pra próxima foto ao arrastar ou clicar na seta.
Card temático (Black Friday)
Fundo do card escurecido, fita amarela diagonal "BLACK FRIDAY" e selo de desconto amarelo — pensado como campanha sazonal configurável (não fixo).
Menu de catálogo
No mobile, o catálogo sobe como uma folha (bottom sheet) de baixo pra cima, com as categorias em acordeão — toca numa categoria e as subcategorias expandem embaixo dela mesma, com animação suave.
Login
Ao tentar favoritar um produto ou acessar a conta sem estar logado, abre uma lightbox central de login/criação de conta, com opção de entrar com Google.
Carrinho
O carrinho também abre como bottom sheet, com uma barra de progresso mostrando quanto falta pro frete grátis, os itens, subtotal e os botões de "Ver carrinho" / "Finalizar compra".
Próximos passos
As páginas de categoria e de produto ainda não foram desenhadas — em breve.