Product Card
Card de produto usado no Consultant Catalog (vitrine pública) e no PDV (consultora/vendedora). Exibe imagem com hover, nome, preço, tipo de entrega e botão de adicionar. Componente custom do SYSGO.
import { ProductCard } from "@/components/product-card";
<ProductCard
product={{
id: "1",
name: "Perfume Ana Autentic 50ml",
slug: "perfume-ana-autentic-50ml",
image_url: "/products/perfume.jpg",
retail_price: 189.90,
delivery_types: ["pronta_entrega"],
}}
consultantSlug="ana-paula-carvalho"
/>Minimal — Card limpo
Variante minimal sem borda, imagem com cantos arredondados, preço com formatação split (R$ menor, valor grande, decimais menor), badge FULL e parcelas. Ideal para vitrines com fundo claro.
Alioth
Sabonete Líquido 250ml
R$79,90
ou 12x de R$ 7,98 no cartão
Merak
Body Splash 200ml
R$79,90
ou 12x de R$ 7,98 no cartão
Catálogo — Tipos de entrega
Card do catálogo público com duas modalidades: Entrega Local (estoque da consultora) e Full (envio direto pela marca). Hover troca a imagem.
Phecda
Body Splash 200ml
Fragrância fresca e marcante, com notas cítricas e aromáticas que proporcionam energia e elegância.
R$ 69,90
Megrez
Body Splash 200ml
Fragrância doce e envolvente, com notas gourmand que trazem aconchego e sofisticação.
R$ 69,90
PDV — Card com lucro
Usado no PDV da consultora, vendedora e admin. Mostra preço de venda e lucro estimado com percentual.
Phecda
Body Splash 200ml
Fragrância fresca e marcante, com notas cítricas e aromáticas que proporcionam energia e elegância.
R$ 69,90
Megrez
Body Splash 200ml
Fragrância doce e envolvente, com notas gourmand que trazem aconchego e sofisticação.
R$ 69,90
Estrutura do componente
| Elemento | Classe / Prop | Função |
|---|---|---|
Container | w-full rounded-2xl border | Card com borda leve e cantos arredondados |
Favorito | absolute top-3 right-3 size-8 | Botão de favoritar com backdrop blur |
Imagem | aspect-square object-cover / hover troca | Imagem preenche todo o espaço (object-cover) com transição de hover (500ms ease-out) |
Linha | text-[11px] text-muted-foreground/60 | Nome da linha (Alioth, Mizar, Vega) |
Nome | text-[15px] font-semibold line-clamp-2 | Nome do produto com truncamento em 2 linhas |
Descrição | text-xs line-clamp-2 | Descrição curta com truncamento em 2 linhas |
Avaliação | 5 estrelas amber-400 | Rating com estrelas (apenas no catálogo) |
Entrega | emerald (PE) / violet (AA) | Badge de tipo de entrega com estoque opcional |
Preço | text-lg font-semibold text-primary | Preço de varejo na cor primária |
Lucro | bg-success/10 text-success | Badge de lucro com percentual (apenas no PDV) |
Adicionar | h-9 w-full rounded-lg bg-primary | Botão de adicionar ao carrinho |
Variantes
Duas variantes do card dependendo do contexto de uso.
| Variante | Usado em | Diferenças |
|---|---|---|
ProductCard | Consultant Catalog (vitrine pública) | Favorito, hover imagem, rating, badge de entrega |
ProductCardWithProfit | PDV (consultora, vendedora, admin) | Sem favorito, sem rating, com lucro e percentual |
ProductCardMinimal | Vitrine / Landing page | Sem borda, imagem arredondada, preço split, badge FULL, parcelas, hover imagem |
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
product | Product | — | Objeto do produto com id, name, slug, image_url, retail_price, delivery_types |
consultantSlug | string | — | Slug da consultora para construir a URL do produto |
priority | boolean | false | Se true, usa priority loading na imagem (LCP) |
showProfit | boolean | false | Exibir lucro estimado (variante PDV) |
isFavorited | boolean | false | Estado do botão de favoritar |
onFavoriteToggle | () => void | — | Callback ao clicar no botão de favoritar |