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).
👉 Você pode navegar pelo layout completo (HTML/CSS funcional, ainda sem dados reais) em: saaraonline.com.br/layout/home.html
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.
⚡ FULL
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.
12%
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.
★
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.
$$ Atacado
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).
🎨 Personalize
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.
🔒 SAFE
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".
Ver Layout
Google PageSpeed Insights
Rodamos o layout no PageSpeed Insights do Google e o resultado veio 96 no mobile e 97 no desktop — com Total Blocking Time de 0ms e Cumulative Layout Shift de 0.001 (praticamente zero travamento e zero pulo de layout).
 
Próximos passos
As páginas de categoria e de produto ainda não foram desenhadas — em breve.