Estrutura da Home

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

A ordem arquitetural (06 §6.1): 1. Barra de benefícios · 2. Header + busca · 3. Destaque/vitrine principal · 4. Grid de categorias · 5. Bloco Personalize · 6. Vitrines de produto · 7. Vitrine por Perfil · 8. Prova social e selos · 9. Blog/conteúdo · 10. Newsletter · 11. Footer.

Elementos globais não-menu (WhatsApp flutuante e Newsletter pop-up) são descritos ao final como sobreposições persistentes.

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 · Retirada em Maringá".

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 + cor + gênero) · 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. Bloco Personalize seu Avental Alta

Objetivo: ativar o diferencial âncora — entrada visível, a partir da Home, ao Configurador.

Conteúdo: bloco de destaque com mockup de avental personalizado + título/texto: "Monte o seu avental com o nome ou a logo da sua marca — a partir de 1 peça." Micro-lista de 3 passos opcional (modelo → cor → nome/logo).

CTA: primário "Personalizar avental" → Configurador; secundário "Ver guia de tamanhos". Hierarquia: peso alto e distinto do grid; largura maior, CTA proeminente. Responsivo: desktop = 2 colunas (mídia / texto+CTA); mobile = empilha, mockup legível (Camila é mobile-first).

6. 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".

7. Vitrines de Produto (Mais Vendidos / Ofertas / Kits e Combos) Alta

Objetivo: descoberta de produto na Home e compra rápida (quick-add), com diferenciais de preço sinalizados no card.

Conteúdo: 2–3 carrosséis/grades: 1. Mais Vendidos · 2. Ofertas · 3. Kits e Combos. Cada card reusa o padrão da PLP: imagem-placeholder, nome, preço riscado + preço PIX + parcelas, badge "desconto por quantidade" quando aplicável, avaliação, ação rápida.

CTA: por card "Adicionar ao carrinho" / "Ver produto"; por vitrine "Ver todos". Responsivo: desktop = 4 cards/linha com setas; mobile = carrossel horizontal (~1,5–2 cards), quick-add ao toque.

8. 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. Responsivo: desktop = 3 cards lado a lado; mobile = 1 coluna (ou carrossel).

9. 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".

10. 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).

11. 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).

12. 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) e endereço/retirada Maringá.

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.