Estrutura da Home

Aderência à ordem da Fase 06 e divergência justificada

A ordem arquitetural (06 §6.1, revisada na v2 daquele documento): 1. Barra de benefícios · 2. Header + busca · 3. Destaque/vitrine principal · 4. Grid de categorias · 5. Vitrine · Destaques · 6. Bloco Personalize seu Avental · 7. Vitrine Ofertas e Kits · 8. Vitrine por Perfil · 9. Prova social e selos · 10. Blog/conteúdo · 11. Newsletter · 12. Footer.

Revisão pós-validação do cliente (v2) — reordenação da Home

Na validação da Fase 08 o cliente reordenou a Home e renomeou uma vitrine. A ordem da v1 desta fase era: Hero (3) → Grid de Categorias (4) → Bloco Personalize (5) → Destaque de Atacado (6) → Vitrines de Produto (7: Mais Vendidos / Ofertas / Kits) → Vitrine por Perfil (8) → …

O que mudou, e por quê:

• A vitrine de produto subiu para logo depois do Grid de Categorias, antes do Bloco Personalize. Consequência estrutural: o agrupamento único de vitrines da v1 se parte em duas — a Seção 5 (Vitrine · Destaques) sobe, e Ofertas e Kits e Combos ficam na Seção 8, depois do Atacado. Efeito: o comprador vê produto real antes do discurso de diferencial, e o Bloco Personalize + Atacado passam a funcionar como faixa de argumentação entre duas vitrines, em vez de separar o Grid da primeira vitrine.
• "Mais Vendidos" virou "Destaques" — o cliente riscou o nome e pediu "outra seleção, como Destaques". A curadoria deixa de ser automática por volume de venda e passa a ser curada (a definir com o cliente — ver Observações da Seção 5). Atenção: o critério de ordenação "mais vendidos" da PLP (06 §6.2) não foi alterado — é outra coisa; a mudança é só do rótulo da vitrine da Home.
• A divergência justificada acima permanece válida: o Destaque de Atacado continua sendo a única seção acrescentada por esta fase; apenas sua vizinhança mudou (agora entre Personalize e a vitrine Ofertas e Kits). A justificativa de origem (06 §5; 05 Ricardo) não é afetada pela reordenação.

A ordem da v1 fica registrada aqui; o Mapa de blocos para wireframe ao final reflete apenas a ordem vigente (v2), por ser o contrato direto com home.html.

Elementos globais não-menu herdados de 06 §2.5 (WhatsApp flutuante e Newsletter pop-up) são descritos ao final como sobreposições persistentes, fora do fluxo vertical.

1. Barra de Benefícios Alta

Objetivo: comunicar de imediato, no topo de todas as páginas, as condições comerciais que reduzem fricção e sustentam a confiança.

Conteúdo: faixa horizontal com 4 itens (ícone + texto): 1. "Frete grátis acima de R$ 199" · 2. "3% de desconto no PIX" · 3. "4x sem juros no cartão" · 4. "Despacho rápido".

CTA: nenhum primário; itens 1 e 4 podem linkar para a Política de Frete e Entrega. Hierarquia: peso deliberadamente baixo — primeira coisa da página, mas não compete com o Hero. Responsivo: desktop = 4 itens em linha; mobile = 1 item em rotação (carrossel) ou 2 linhas de 2; nunca 4 linhas empilhadas.

2. Header (Cabeçalho + Busca) Alta

Objetivo: acesso persistente a navegação por linha de produto, busca inteligente, conta e carrinho — idêntico em Home/PLP/PDP.

• Logo Casacha (placeholder, à esquerda).
• Menu principal: Aventais (megamenu: Cintura, Peito/Corpo Inteiro, Garçom, Confeitaria + por cor) · Utensílios em Inox (Talheres, Servir/Finger Food, Sousplat, Mesa Posta) · Kits e Combos · Personalize seu Avental (destaque) · Por Perfil · Ofertas · Blog · Ajuda.
• Busca inteligente com autocomplete (refino por cor/modelo).
• Utilitários: Conta · Carrinho / mini-cart com subtotal e progresso do frete grátis.

Hierarquia: busca e menu dominam; "Personalize" recebe peso maior. Responsivo: desktop = menu horizontal + megamenus + busca visível; mobile = hambúrguer (drawer em acordeão), lupa (busca em tela cheia), carrinho.

3. Destaque Principal (Hero) Alta

Objetivo: comunicar em segundos o posicionamento e encaminhar cada persona ao seu caminho.

Conteúdo: banner principal (imagem ambientada — placeholder) com título verbatim da Fase 06: "Aventais profissionais e utensílios em inox para food service — com desconto por quantidade e personalização."; subtítulo de apoio; 2 CTAs. Suporta carrossel de 2–3 lâminas (catálogo, Personalize, Ofertas por quantidade).

CTA: primário "Ver categorias" · secundário "Personalizar avental". Hierarquia: maior peso da página — primeira dobra, maior tipo, CTA primário mais proeminente. Responsivo: desktop = banner largo; mobile = altura reduzida, texto empilhado, CTAs de largura total (primário acima). No máximo 3 lâminas para não penalizar mobile.

4. Grid de Categorias Alta

Objetivo: roteirizar a navegação — portas de entrada das duas linhas e das categorias-âncora.

Conteúdo: grade de 6 cards (imagem + rótulo), verbatim do sitemap: Aventais · Utensílios em Inox · Kits e Combos · Personalize seu Avental · Por Perfil · Ofertas.

Hierarquia: peso alto, segundo bloco após o Hero; cards de igual peso, exceto "Personalize" (leve destaque). Responsivo: desktop = 3 col × 2 linhas; mobile = 2 colunas (ou 1 com cards maiores).

5. Vitrine · Destaques Alta

Objetivo: entregar produto real logo após as portas de entrada do Grid de Categorias — descoberta e compra rápida (quick-add) antes de qualquer bloco de argumentação, com os diferenciais de preço já sinalizados no card.

Conteúdo: 1 carrossel/grade rotulado "Destaques" com cards de produto reusando o padrão de card da PLP (06 §6.2): imagem-placeholder, nome, preço riscado + preço PIX + parcelas, badge "desconto por quantidade" quando aplicável, avaliação (estrelas) e ação rápida.

CTA: por card "Adicionar ao carrinho" (quick-add) / "Ver produto"; por vitrine "Ver todos" → PLP correspondente. Hierarquia: peso médio-alto; subordinada ao Hero e ao Grid de Categorias, mas acima do Bloco Personalize na ordem de leitura. Mesmo peso da Vitrine Ofertas e Kits (Seção 8) — a diferença entre elas é de posição, não de destaque. Responsivo: desktop = 4 cards/linha com setas; mobile = carrossel horizontal (~1,5–2 cards), quick-add ao toque.

6. Bloco Personalize seu Avental Alta

Objetivo: ativar o diferencial âncora não comoditizável — dar entrada visível, a partir da Home, ao Configurador de personalização (06 §3.4, §6.4).

Conteúdo: bloco de destaque com imagem/mockup de avental personalizado (placeholder de nome/logo em estampa DTF) + título e texto curto reforçando a mensagem do Configurador: "Monte o seu avental com o nome ou a logo da sua marca — modelo e cores a partir de 1 peça; logo em estampa DTF a partir de 30 peças." Micro-lista de 3 passos que resume os 5 passos do Configurador:

CTA: primário "Personalizar avental" → Configurador; secundário "Ver guia de tamanhos". Hierarquia: peso alto e visualmente distinto das vitrines vizinhas; largura maior, CTA proeminente. Ordem: após a Vitrine · Destaques (v2 — era após o Grid de Categorias). Responsivo: desktop = 2 colunas (mídia / texto+CTA); mobile = empilha, mockup legível (Camila é mobile-first).

Observações: o "a partir de 1 peça" de modelo e cores ainda diferencia frente a concorrentes que travam personalização em alto volume (06 §6.4; 05 Camila). Personalização modelada como produto composto simples por restrição da Bling (01 §5.1, §6.3) — a Home só faz a chamada, o detalhe é do Configurador.

7. Destaque de Desconto por Quantidade (Atacado) Alta

Objetivo: antecipar, já na Home, o maior diferencial em aberto — quanto mais leva, menos paga por peça — e conduzir Ricardo ao caminho de atacado.

Conteúdo: faixa/banner com título "Quanto mais você leva, menos paga por peça" + texto explicando o desconto progressivo. Representação de faixas (mini-tabela ou trilha "1–9 · 10–29 · 30+" com placeholder de percentuais). Sem inventar percentuais.

CTA: primário "Ver ofertas por quantidade" / "Comprar no atacado" → PLP de Ofertas ou faceta Atacado; secundário "Ver Kits e Combos". Hierarquia: peso alto, mas subordinado ao Hero e ao Bloco Personalize; funciona como faixa de transição de destaque antes da Vitrine Ofertas e Kits. Responsivo: desktop = faixa larga (texto à esquerda, faixas à direita); mobile = empilha texto → faixas → CTA de largura total.

8. Vitrine Ofertas e Kits Alta

Objetivo: habilitar descoberta de produto direto na Home e permitir compra rápida (quick-add) depois da argumentação de personalização e atacado, convertendo quem chegou até aqui.

Conteúdo: 1 a 2 carrosséis/grades rotulados: 1. Ofertas · 2. Kits e Combos (podem aparecer como uma faixa combinada "Ofertas e Kits e Combos"). Cada linha traz cards de produto reusando o padrão de card da PLP (06 §6.2): imagem-placeholder, nome, preço riscado + preço PIX + parcelas, badge "desconto por quantidade" quando aplicável, avaliação (estrelas) e ação rápida.

CTA: por card "Adicionar ao carrinho" / "Ver produto"; por vitrine "Ver todos". Hierarquia: peso médio-alto; igual peso entre si e em relação à Vitrine · Destaques (Seção 5); ordem interna por relevância comercial: Ofertas → Kits e Combos. Responsivo: desktop = 4 cards/linha com setas; mobile = carrossel horizontal (~1,5–2 cards), quick-add ao toque.

Observações: Ofertas e Kits e Combos correspondem a coleções/PLPs canônicas do sitemap (06 §1), então a curadoria destas duas faixas é direta — diferente da Seção 5, cuja curadoria está em aberto.

9. Vitrine por Perfil Média

Objetivo: segmentar a entrada por perfil profissional e alimentar SEO/aquisição.

Conteúdo: 3 cards de perfil: Para Chef de Cozinha / Restaurante · Para Confeiteiro(a) · Para Barista / Bartender. Cada card = imagem + título + "Tudo o que o [perfil] precisa, reunido num lugar só."

CTA: "Ver produtos do perfil" → Landing correspondente. Hierarquia: peso médio; subordinado às vitrines de produto acima. Ordem: após a Vitrine Ofertas e Kits. Responsivo: desktop = 3 cards lado a lado; mobile = 1 coluna (ou carrossel).

10. Prova Social e Selos Média

Objetivo: reconstruir na loja própria a confiança que hoje mora no marketplace.

• Depoimentos/avaliações reais (2–4 cards com nome/estabelecimento + estrelas + texto curto).
• Números agregados de autoridade (placeholders — nº de pedidos / anos / clientes), a confirmar com o cliente.
• Selos de confiança: segurança (SSL), formas de pagamento, "5 anos de relevância / múltiplos marketplaces".

11. Blog / Conteúdo Baixa

Objetivo: expor a camada editorial/SEO e a ajuda técnica, ligando conteúdo a produto.

Conteúdo: 3 cards dos artigos mais recentes: imagem + título + meta (data/tema) + resumo. CTA: "Ler artigo" / "Ver todos os artigos". A preservação das URLs dos posts é bloqueante de go-live (relevante à arquitetura, não ao layout do bloco).

12. Newsletter Baixa

Objetivo: capturar e-mail para relacionamento/marketing — funcionalidade que a Casacha não tem hoje.

Conteúdo: bloco de captura com título + incentivo ("Receba ofertas e novidades" — desconto na 1ª compra/PIX a confirmar), campo de e-mail e botão, com nota de consentimento (LGPD). CTA: "Assinar newsletter". Existe também um pop-up global (ver Elementos Globais).

13. Footer Alta (estrutural)

Objetivo: navegação secundária completa, políticas, ajuda e reforço final de confiança. Colunas verbatim da Fase 06:

• Institucional: Sobre a Casacha, Blog.
• Ajuda: Central de Ajuda (FAQ), Guia de Tamanhos, Contato, WhatsApp, rastreamento.
• Políticas: Frete e Entrega, Trocas e Devoluções, Formas de Pagamento, Privacidade, Termos de Uso.
• Comprar: Aventais, Utensílios em Inox, Kits e Combos, Ofertas, Personalize seu Avental.
• Newsletter (reforço) + redes sociais.
• Selos de segurança (SSL/Google) e formas de pagamento; linha final com CNPJ/razão social (placeholder), incluindo Maringá/PR.

Responsivo: desktop = 4–5 colunas; mobile = colunas viram acordeões empilhados, com selos e linha legal ao final.

Elementos Globais (sobreposições persistentes)

• Botão WhatsApp flutuante: fixo (canto inferior), persistente em todas as páginas, para atendimento e dúvida de prazo. Alta (suporte)
• Newsletter pop-up: modal de captura com incentivo, acionado por regra (tempo/scroll/saída). Não deve bloquear a primeira dobra nem atrapalhar a compra no mobile. Baixa

Mapa de blocos para wireframe

Lista ordenada topo → rodapé que a Fase 08 converte em home.html. Ordem vigente = v2 (validação do cliente na Fase 08); a ordem da v1 está registrada em "Revisão pós-validação do cliente (v2)" no topo desta página.