Regras de UX e grade
As seções do slash-kit já trazem essas regras. Você não precisa montá-las à mão; o que você controla é a ordem das seções, a variante e o conteúdo. Esta página diz o que cada regra faz e onde ela está, para que você não a quebre sem perceber.
A página usa 12 colunas no desktop, com 24 px entre as colunas. O conteúdo fica num container de até 1200 px com 24 px de margem interna. Abaixo de 768 px, a grade passa a 4 colunas, com 16 px de espaço e de margem; os blocos de 5 a 12 colunas ocupam a largura toda.
Essa conta está em ui/grid/grid.module.css: a largura de cada bloco é uma fração de 12 colunas (calc((100% - 264px) / 12 * n + …)),
e a versão do celular usa a fração de 4 colunas, com (max-width: 767.98px). Use as classes do grid (grid.container,
grid.span(n)) ao montar uma seção. A tabela de classes está na página Grid.
Os testes de grade do pacote (ui/grid/grid.test.ts) conferem que cada classe span-1 a span-12 usa a fórmula do
desktop e a do celular.
Contato por WhatsApp
Seção intitulada “Contato por WhatsApp”O contato dos templates é o WhatsApp. O modelo multi-page diz isso no próprio guia da agência
(templates/multi-page/files/AGENCIA.md): «O contato é sempre o WhatsApp, sem formulário nem venda online». Os botões de
contato usam o mesmo link, e o WhatsappFab (botão flutuante) aparece em todos os modelos da landing, exceto captura, e em todas as páginas do site.
Um clique em botão de WhatsApp envia o evento generate_lead com method: "whatsapp" (ui/core/cta.ts:11). O número e a
mensagem vêm de src/data/site.ts, em cada projeto.
Formulário só onde há captura
Seção intitulada “Formulário só onde há captura”O formulário de lead aparece no modelo captura, no Hero da variante split-form
(templates/landing-page/models/captura/files/src/data/content.ts:32). Nos outros modelos, a ação é um botão de WhatsApp ou um link.
O modelo captura não tem o botão flutuante do WhatsApp. O teste E2E do modelo,
«lead form above the fold», confere que o formulário aparece sem rolar nas alturas de tela de 360×800, 768×1024,
1024×768, 1280×720 e 1440×900 (templates/landing-page/models/captura/files/tests/e2e/landing.spec.ts:289-291).
Botões do hero lado a lado
Seção intitulada “Botões do hero lado a lado”Com secondaryCta, o Hero põe os dois botões numa mesma fileira. A fileira usa flex-wrap: os botões quebram de
linha só quando não cabem (ui/sections/hero/hero.module.css:11 e :26).
Cabeçalho sem botão no celular
Seção intitulada “Cabeçalho sem botão no celular”Abaixo de 768 px, o botão de ação do Header sai da barra quando o script de navegação carregou
(ui/sections/header/header.module.css:216-225, regra com data-nav-ready). O menu mostra só os links. Sem JavaScript,
o botão continua visível. O contato segue no botão flutuante e na seção final dos modelos.
Alvo de toque de 44 px
Seção intitulada “Alvo de toque de 44 px”Links e botões ocupam pelo menos 44 px de altura para o toque. O rodapé define essa altura mínima
(ui/sections/footer/footer.module.css:23), e o teste E2E da galeria mede o alvo (tests/e2e/gallery.spec.ts:46).
Não reduza esse espaço com CSS solto.
Perguntas em uma coluna
Seção intitulada “Perguntas em uma coluna”O Faq dos modelos usa a variante single, com título centralizado e uma coluna de perguntas. A variante
two-columns não é usada por nenhum modelo. Veja Faq.
Lista sem item sozinho na última linha
Seção intitulada “Lista sem item sozinho na última linha”As listas escolhem o número de colunas que não deixa um item sozinho na última linha. Em About (variante story), 5
itens viram 3 + 2 e 7 viram 4 + 3 (ui/sections/about/about.ts:69-73). Em Cards e Features, a propriedade
columns é sua; confira a conta com o número de itens antes de publicar.
Sem estados de demonstração
Seção intitulada “Sem estados de demonstração”Textos de exemplo ficam marcados
(claude(...), fictitious(...) ou pending(...)), e o comando bun run gate do projeto acusa os que restarem
(templates/multi-page/files/AGENCIA.md, seção «Comandos»).
Migalhas e página atual
Seção intitulada “Migalhas e página atual”Nas páginas internas do site, o PageHeader mostra a trilha (Início, a seção, a página) quando você passa trail
(ui/sections/page-header/page-header.ts:14). A home não tem trilha. O Header marca a página atual com
aria-current="page" (ui/sections/header/header.ts:27-30).
Um só título principal
Seção intitulada “Um só título principal”Cada página tem um h1: o do Hero na landing e o do PageHeader nas páginas internas
(ui/sections/hero/hero.ts:80, ui/sections/page-header/page-header.ts:11).
Tom das seções
Seção intitulada “Tom das seções”Cada seção carrega o seu tom no atributo data-tone (ui/sections/header/header.ts:92; o tipo é Tone em
ui/core/section.ts:5). Você escolhe o tom pela propriedade tone quando a seção aceita.