Product Details
Página de detalhe do produto com layout 2 colunas. Galeria com thumbnails verticais à esquerda, informações do produto e ações de compra à direita. Seções de detalhes, benefícios, pirâmide olfativa e produtos relacionados abaixo. Usado no Consultant Catalog.
// apps/consultant-catalog/products/[productId]/page.tsx
import { ProductDetailClient } from "./product-detail-client";
<ProductDetailClient
product={product}
price={79.90}
planPrice={48.93}
peInventory={5}
hasPe={true}
consultant={{ id, slug, name, phone }}
relatedProducts={relatedProducts}
isAuthenticated={false}
/>Detalhe do produto — Desktop (1440px)
Conforme design Figma: header com utility bar, navegação por categorias, galeria com thumbnails verticais (~45%) e info do produto (~55%). Abaixo: detalhes, benefícios, pirâmide olfativa e produtos relacionados.
Ana Paula
Consultora Ana Autentic
Alioth
Body Splash 200ml
R$ 79,90
6x R$ 13,32
Ver meios de pagamento
Quantidade: 1 unidade
Você pode comprar até 10 unidades
Consultar frete e prazo
Detalhes do Produto
O Body Splash Ana Autentic — Linha Alioth traduz elegância leve e sofisticação natural em uma fragrância delicada, feminina e envolvente. Desenvolvido para o uso diário, proporciona uma perfumação equilibrada, ideal para quem valoriza presença sutil com refinamento.
Alioth envolve a pele com suavidade e frescor, criando uma experiência sensorial confortável, que acompanha a rotina com discrição, charme e sensação contínua de cuidado.
Benefícios
- Fragrância leve, feminina e elegante
- Sensação agradável de frescor ao longo do dia
- Perfumação equilibrada, sem excessos
- Ideal para reaplicação diária
- Alto potencial de aceitação e recompra
Pirâmide Olfativa
Pitaya
Notas de saída
Peônia vermelha
Notas de corpo
Baunilha
Notas de fundo
Quem viu este produto também comprou
Alioth
Esfoliante Corpo e Rosto
R$ 59,90
Alioth
Body Gloss 90ml
R$ 49,90
Alioth
Loção Hidratante 340ml
R$ 89,90
Entre na lista exclusiva de ofertas que enviamos por email
Estrutura da página
Layout 2 colunas no desktop (galeria + info/compra). Seções de conteúdo expandíveis abaixo. Produtos relacionados em grid de 5 colunas.
| Área | Elemento | Função |
|---|---|---|
| Utility Bar | flex justify-between | WhatsApp, ajuda, pedidos, favoritos |
| Header | Logo A + divider + StoreHeader | Logo Ana Autentic + avatar + nome, busca, localização/sacola/conta |
| Categorias | nav horizontal | BODY SPLASH (ativa), ESFOLIANTE, HIDRATANTE... |
| Breadcrumb | text-primary | Voltar > Produtos > Alioth > Body Splash 200ml |
| Galeria | thumbnails + aspect-[549/687] | Thumbnails verticais (80x90) + imagem principal grande |
| Loja Info | avatar + verified badge | "Loja da Ana Paula" com selo verificado |
| Info Produto | flex-1 (coluna direita) | Linha, nome (38px), rating, delivery, preço, qty, CTAs, CEP |
| CTAs | Compre agora + Adicionar | Botão primário rosa + secundário rosa transparente com ícone carrinho |
| Detalhes | 2 cols below fold | Descrição + accordions | Benefícios + pirâmide olfativa |
| Relacionados | grid 5 cols | 5 cards com imagem, nome, rating, preço, botão adicionar |
| Newsletter | email input + CTA | "Lista exclusiva de ofertas" com campo email |
| Footer | utility links + categorias + pagamento | Links utilitários, categorias, ícones de pagamento, copyright, CNPJ |
Paleta de cores
| Token | Hex | Uso |
|---|---|---|
ana-autentic (primary) | #FF3D8D | Logo, linha, breadcrumb, preço parcelado, CTAs, newsletter |
delivery-purple | #9B3DFF | Badge "Full", bg rgba(155,61,255,0.1) |
link-blue | #3D98FF | "Ver meios de pagamento" |
rating-amber | amber-400 | Estrelas de avaliação, badge verificado |
text-primary | #000000 | Títulos, preços, textos principais |
text-muted | rgba(0,0,0,0.5) | Textos secundários, placeholders |
border | #BABABA / #EBEBEB | Inputs, cards, divisores |
bg-surface | #FCFCFC | Header, utility bar, newsletter, footer |
Dimensões
| Elemento | Dimensão | Classe Tailwind |
|---|---|---|
| Container | 1440px, padding 191px laterais | max-w-screen-2xl mx-auto px-[191px] |
| Imagem principal | 549.6x687px, rounded 7.3px | aspect-[549/687] rounded-lg |
| Thumbnails | 80x90px, rounded 6px | w-20 aspect-80/90 rounded-md |
| Título do produto | Inter Medium 38px | text-[38px] font-medium |
| Preço | Inter Regular 51.6px + 18.7px | text-5xl font-normal + text-lg |
| Compre agora | 276x40px, rounded 6.6px, bg-primary | h-10 rounded-md bg-primary text-white |
| Adicionar ao carrinho | 276x40px, rounded 6.6px | h-10 rounded-md bg-primary/20 |
| Card de produto | 196.7x349.5px, rounded 15.9px | rounded-2xl border-[#ebebeb] |
| CEP input | 135.6x29px, rounded 8.1px | h-7 rounded-lg border shadow-sm |
| OK button | 49.8x29px, rounded 8.1px | h-7 rounded-lg border-primary |
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
product | ProductDetail | — | Objeto completo do produto (id, name, images, short_description, full_description, specs, line_name, rating, benefits, scent_pyramid) |
price | number | — | Preço de varejo do produto |
planPrice | number | — | Preço com desconto do plano da consultora |
peInventory | number | — | Quantidade disponível em Entrega Local (estoque da consultora) |
hasPe | boolean | — | Se true, exibe o seletor de entrega com Entrega Local |
consultant | { id, slug, name, phone } | — | Dados da consultora para loja info, carrinho e WhatsApp |
relatedProducts | CatalogProduct[] | — | Produtos relacionados para a seção "Quem viu também comprou" |
isAuthenticated | boolean | — | Se o cliente está autenticado (habilita favoritos) |