molveau/vitrine

Playbook Vitrine

Uma vitrine é um site de apresentação (catálogo) para um negócio local: algumas páginas que respondem "o que você faz, para quem, quanto custa, posso confiar em você, como chego até você". Visitantes chegam pelo Google ou indicação, decidem em segundos e vão embora se precisarem caçar. Este playbook diz o que construir e em qual ordem; as habilidades de domínio contêm as regras detalhadas.

Portão de direção

Faça isso antes de qualquer código para uma nova página, tela ou reformulação, mesmo quando o pedido for de uma linha. O resto desta habilidade remove erros; ela não dá um caráter de tela. Pulado, o resultado é a página mediana que todo modelo faz: correta nos detalhes, mas de ninguém.

1. Cinco linhas. Produto: o que faz, para quem. Caráter: duas ou três palavras concretas (calmo, exato, um pouco acolhedor), nunca limpo, moderno, elegante, minimalista ou premium. Mundo: o lugar ou material ao qual o produto pertence; tinge os neutros e define o destaque. Momentos: os um ou dois lugares que ganham cor rica e detalhe: para um negócio local, geralmente uma foto real do trabalho ou das pessoas, ou uma lista de preços definida como o documento impresso que o comércio usa. Assinatura: um pequeno detalhe que só este produto tem, usado consistentemente. Um momento é desenhado com cuidado, não apenas limpo: um gráfico redesenhado para o que deve dizer (linhas suaves, uma comparação espelhada, uma escala real), ou o próprio objeto do produto renderizado com peso e luz.
2. Inventário, depois a ideia. Liste 8 a 12 coisas que nenhum concorrente compartilha (nome, rua, números no briefing, materiais, ferramentas, rituais, documentos que o comércio imprime). Escreva: "Nesta página, [um item] se torna [o dispositivo]". Esse dispositivo é o momento.
3. Recuse os padrões de segunda ordem a menos que a marca já os possua. São o que um modelo alcança uma vez que os óbvios são proibidos:
   • um fundo creme, pedra ou off-white quente com um destaque laranja queimado, terracota, sálvia ou floresta, com ou sem um título serifado (o visual "papel e tinta" é o novo padrão, não uma direção);
   • Fraunces, Instrument Serif, Playfair ou Georgia como fonte de título por reflexo; system-ui como única fonte;
   • Inter ou Geist sobre branco com um destaque índigo ou azul;
   • hero, serviços, avaliações, área de atuação, contato, nessa ordem, sem argumento para isso;
   • uma sobretítulo centralizado, título e dois botões como a tela inteira inicial.
4. Teste de troca. Substitua o nome e o ramo pelos de um concorrente. Se a página ainda servir, mude a proposta, o momento e a assinatura, e teste novamente.
5. Mostre e espere. Mostre as cinco linhas e a ideia, e aguarde o dono. Se não puder perguntar (o usuário mandou construir sem mais, ou você roda sem uma pessoa), escreva-as como comentário no topo do arquivo principal e construa exatamente isso.

Profundidade: playbook anti-slop §2 (direção) e §12 (telas de app); a habilidade design-inspiration-index para referências reais.

O que uma vitrine precisa

1. Uma oferta clara por página. A primeira tela diz o que é vendido, para quem e onde, em palavras simples, com uma ação primária. Um leitor que pula todo o resto ainda sabe. Páginas separadas para serviços separados vencem uma página que vende tudo.
2. Preços, ou um preço "a partir de". Compradores comparam. Um preço inicial e o que ele inclui filtra leads ruins e constrói confiança; "entre em contato para um orçamento" sozinho perde pessoas para concorrentes que mostram um número. Indique o que altera o preço. Mantenha valores em um arquivo de dados para que todas as páginas e os dados estruturados concordem.
3. Agendamento ou contato em uma etapa. Um link de telefone visível e um formulário curto ou link de reserva em cada página. Peça apenas o necessário para responder (nome, contato, o que querem). Diga quando terão retorno. Confirme claramente após o envio. Toque para ligar no celular.
4. Prova. Projetos reais com resultado, avaliações reais com nomes e datas (ou links para elas), logotipos apenas se permitidos. Algumas provas específicas vencem muitas vagas. Sem equipe de foto de banco de imagens, sem depoimentos inventados.
5. Fundamentos de SEO local.
   • Uma página por área de atuação que valha a pena ranquear, cada uma com conteúdo genuinamente local (não o mesmo texto com a cidade trocada).
   • JSON-LD LocalBusiness (ou um subtipo mais específico) com nome, endereço ou área de atuação, telefone, horários e faixa de preço que corresponda aos preços publicados. Adicione FAQPage apenas em uma página canônica.
   • Um Perfil Empresarial do Google completo: mesmo nome, endereço e telefone do site, categorias, horários, fotos, um link para a página certa e o hábito de responder avaliações.
   • Um h1 por página, títulos e meta descrições descritivos, hreflang para ambos os idiomas, um sitemap, URLs legíveis.
6. Um orçamento de velocidade. Visitantes locais estão em celulares com conexões médias. Pré-carregue a imagem LCP e dimensione-a corretamente (formato moderno, largura e altura explícitas); fontes auto-hospedadas, uma ou duas famílias, font-display definido, subset; sem 3D pesado, vídeos de fundo ou grandes bibliotecas JS para decoração; scripts de terceiros apenas quando merecem seu lugar. O conteúdo está presente ao carregar. Alvo LCP abaixo de 2,5 s no celular e teste com limitação real.
7. Bilíngue FR/EN quando o mercado for. Uma fonte de mensagem por idioma com a mesma estrutura e paridade de conteúdo, um seletor de idioma visível que mantém a página atual, URLs localizadas e hreflang. O texto em francês tem cerca de 20% a mais, então layouts não devem quebrar. Aplique a habilidade french-typography a toda string em francês e adicione sua proteção de CI.
8. Québec: Lei 25. Um site que coleta qualquer informação pessoal em Québec (um formulário de contato é suficiente) executa a habilidade loi-25-website: política de privacidade, responsável indicado, aviso na coleta, rastreamento desligado por padrão, revisão de ferramentas fora do Québec. Trate como parte da construção, não como reflexão tardia; escolha ferramentas de análise e formulários pensando nisso.
9. Movimento: no máximo um momento de assinatura. Uma interação memorável e proposital (um seletor de projetos com crossfade, um antes/depois) mais pressionar e feedback de hover simples. Sem revelações de scroll, bibliotecas de scroll suave ou ornamentos em loop. Use a habilidade motion; movimento reduzido mostra o estado final.

Páginas sugeridas

Início, Serviços (ou uma página por serviço), Projetos com estudos de caso, Preços, Contato. Adicione páginas de área e alguns guias apenas se for mantê-los honestos e atualizados. Pule uma página "Sobre" a menos que carregue prova; insira uma breve introdução humana na página inicial ou de contato.

Ordem de trabalho

1. Oferta e prova. Escreva a oferta em uma frase, as linhas de preço, três provas e o caminho de contato antes de qualquer design. Use a habilidade ux para texto simples.
2. Direção e tokens. Execute o portão de direção acima, depois paleta, uma ou duas fontes auto-hospedadas, espaçamento, raios, com a habilidade ui (padrões de bom gosto se o projeto não tiver nenhum).
3. Mockup, desktop e 390 px. Início primeiro, depois uma página interna. O dono julga; itere antes de construir (habilidade ui, mockup primeiro).
4. Construa páginas com conteúdo real. Fotos e textos reais, não lorem ipsum. Verifique strings longas em francês.
5. SEO e esquema. Títulos, meta, JSON-LD, sitemap, hreflang, páginas de área, Perfil Empresarial do Google alinhado ao site.
6. Idioma e lei. Execute french-typography em todo o texto em francês, depois loi-25-website para o relatório de auditoria.
7. Passagem de velocidade. Meça LCP, CLS e transferência total em um perfil móvel limitado e corrija o maior item primeiro.
8. Movimento, depois passagem de slop. Adicione o único momento de assinatura, depois execute anti-slop e seu detector.

Erros comuns

• Um hero que diz "Bem-vindo" ou um slogan em vez da oferta.
• Preços escondidos atrás de um formulário, ou preços antigos deixados no esquema e páginas de cidade após uma alteração.
• Cinco métodos de contato sem um primário óbvio.
• Páginas de cidade que são a mesma página com o nome da cidade trocado.
• Banners de cookie adicionados por decoração enquanto o rastreamento ainda carrega por padrão.
• Um seletor de idioma que envia visitantes de volta à página inicial.

Checklist de conclusão

• A primeira tela indica oferta, público, local e uma ação primária.
• Um preço inicial e seu escopo aparecem na página de preços e correspondem ao JSON-LD.
• Telefone e formulário de contato funcionam em uma etapa no celular; a confirmação informa o que acontece a seguir.
• Pelo menos três provas reais e específicas.
• JSON-LD LocalBusiness válido; Perfil Empresarial do Google corresponde a nome, endereço, telefone.
• Páginas de área têm conteúdo local distinto; sitemap e hreflang corretos.
• Imagem LCP pré-carregada; fontes auto-hospedadas; LCP abaixo de 2,5 s em móvel limitado; sem 3D pesado.
• FR e EN têm o mesmo conteúdo; verificação french-typography passa.
• Relatório loi-25-website não tem item de correção em aberto (sites do Québec).
• No máximo um movimento de assinatura; movimento reduzido respeitado.
• Detector anti-slop limpo; 390 px e desktop verificados; tsc, lint e testes verdes.