Wireframes
Converte a documentação (Fase 07 mapa de blocos da Home; Fase 06 estrutura das demais páginas) em wireframes HTML monocromáticos e navegáveis, reusando ../assets/wireframe.css. Sem qualquer decisão estética (cor, branding, imagens reais) — apenas tons de cinza, grid, espaçamento e placeholders. Representa estrutura e hierarquia, não aparência final (Princípio 5). Nomes reusados verbatim das Fases 06/07.
Como navegar
Cada arquivo tem, no topo, uma .wf-toolbar sticky com o link "← Portal" e links entre todos os 10 wireframes, marcando aria-current="page" no atual. Cada seção é um .wf-block rotulado por uma .wf-tag com o tipo de bloco. Grids colapsam para 1 coluna no mobile.
Duas páginas ficam de fora dos wireframes: o Checkout (a loja será feita em Shopify, cujo checkout é hospedado e padronizado — sem customização de layout; o fluxo está documentado na Arquitetura 06 §6.8) e o Blog + Artigo (adiado "por enquanto" a pedido do cliente — pode ser retomado depois).
Wireframes gerados
Os 10 wireframes já existem em portal/wireframes/. Clique para abrir em nova aba:
Lista de wireframes (origem e status)
| # | Arquivo | Página canônica | Origem | Prioridade |
|---|---|---|---|---|
| 01 | home.html | Home | Fase 07 (mapa de blocos) + 06 §6.1 | Alta |
| 02 | categoria.html | Categoria (PLP) | 06 §6.2 | Alta |
| 03 | produto.html | Produto (PDP) | 06 §6.3 | Alta |
| 04 | personalizacao-avental.html | Personalize seu Avental | 06 §6.4 | Alta |
| 05 | carrinho.html | Carrinho | 06 §6.7 | Alta |
| 06 | area-cliente.html | Minha Conta / Meus Pedidos | 06 §6.9 | Média |
| 07 | landing-perfil.html | Vitrine por Perfil | 06 §6.5 | Média |
| 08 | institucional.html | Institucional (Sobre) | 06 §6.10 | Média |
| 09 | faq.html | Central de Ajuda (FAQ) | 06 §6.12 | Média |
| 10 | contato.html | Contato | 06 §6.14 | Baixa |
Não geram wireframe próprio (registrado em 06 §7): Checkout (hospedado e padronizado pela Shopify — sem customização de layout), Blog + Artigo (adiado "por enquanto"), Resultados de Busca (reusa categoria.html), Guia de Tamanhos e Políticas (conteúdo estático), Entrar/Criar Conta e 404 (páginas de sistema).
Blocos representados por wireframe
1. home.html — Home
Barra de Benefícios (sticky) · Header (busca + megamenu + mini-cart com progresso do frete) · Hero (carrossel 2–3 lâminas + 2 CTAs) · Grid de Categorias (6 cards, "Personalize" com destaque) · Bloco Personalize · Destaque de Desconto por Quantidade (Atacado) com mini-tabela de faixas placeholder · Vitrines de Produto (card com badge "desconto por quantidade", PIX, parcelas, quick-add) · Vitrine por Perfil (3 cards) · Prova Social e Selos · Blog (3 cards) · Newsletter · Footer · Overlays (WhatsApp + pop-up).
2. categoria.html — Categoria/PLP
Breadcrumb · Título + texto SEO · Subcategorias (chips) · Ordenação + botão de filtros (mobile) · Filtros facetados com faceta Cor (diferencial) + tamanho, gênero, tipo, preço, avaliação, contagens e aba/faceta Atacado · Grid de produtos (card com badge de quantidade, quick-add, "Dúvidas? WhatsApp") · Paginação · Footer.
3. produto.html — Produto/PDP
Breadcrumb + H1 · Galeria com vídeo dentro do carrossel · Preço + PIX(-3%)/parcelas · Variações simples · Quantidade + tabela de faixas de desconto com recálculo e próximo patamar · Comprar · Frete por CEP + prazo + retirada Maringá · Personalizar + Guia de Tamanhos · Sinal de estoque · WhatsApp "Dúvidas?" · Conteúdo em abas · Produtos relacionados · Footer + selos.
4. personalizacao-avental.html — Configurador
Breadcrumb + intro · Configurador em 2 colunas: passos (Modelo → Cor → Nome/logo bordado + upload → Tamanho + Guia) e pré-visualização ao vivo + resumo de preço + quantidade "a partir de 1 peça" + Adicionar · Prazo/observações · FAQ (acordeão) · Footer.
5. carrinho.html — Carrinho
Título · Barra de progresso do frete grátis (R$ 199) · Lista de itens (quantidade editável, preço por faixa) · Sugestão de itens · Desconto por quantidade + próximo patamar · Cupom · Frete/prazo por CEP + Maringá · Subtotal/total no PIX · Finalizar · Selos · Footer.
6. area-cliente.html — Minha Conta / Meus Pedidos
Header com cliente PJ reconhecido · Menu da conta · Resumo · Meus Pedidos com "Comprar de Novo" (pedido inteiro e item por item) · Dados/endereços · Lista de desejos · Preferências/newsletter · Footer.
7. landing-perfil.html — Vitrine por Perfil
Hero do perfil · Texto de contexto (SEO) · Vitrine curada · Bloco de personalização · Kits recomendados · Prova social do segmento · Conteúdo/blog relacionado · CTA para categoria completa · Footer.
8. institucional.html — Institucional/Sobre
História/posicionamento · Especialização no nicho (inox profissional) · Prova social/números (a validar) · Diferenciais (personalização, desconto por volume) · Selos/parcerias · CTA para catálogo/contato · Footer.
9. faq.html — Central de Ajuda
Busca na ajuda · Categorias de dúvida (pedido, frete/entrega, pagamento, personalização, trocas, retirada Maringá) · Perguntas por tema (acordeão) · Atalho WhatsApp/Contato · Footer.
10. contato.html — Contato
Canais (WhatsApp em destaque, e-mail, telefone/horários) · Formulário com validação e mensagem de erro acionável · Endereço/retirada em Maringá · Link para Central de Ajuda · Footer.
Conformidade
- Monocromático: nenhuma cor de marca, imagem real ou ícone de marca; ícones como rótulos
[ícone]/[campo]/placeholders. - Hierarquia por peso/ordem/tamanho: Hero como maior peso da Home; blocos de diferencial destacados por borda forte e
.wf-tag, nunca por cor. - Responsivo: grids colapsam em 1 coluna; header/footer reorganizam no mobile.
- Lacunas herdadas sinalizadas como placeholder: faixas/percentuais do desconto por quantidade (
06 §8lacuna 2) e números agregados de prova social (a validar).
10 wireframes HTML monocromáticos gerados em portal/wireframes/ (o Checkout fica a cargo do padrão Shopify; o Blog + Artigo está adiado "por enquanto"), com os diferenciais da Casacha representados fielmente e sem qualquer decisão estética (Princípio 5).