primocode 9.8.0-beta.8 → 9.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +3 -2
  2. package/bin/primocode.js +45 -18
  3. package/lib/act.js +16 -9
  4. package/lib/api.js +8 -1
  5. package/lib/catalogo.js +11 -3
  6. package/lib/claude-engine.js +25 -3
  7. package/lib/estudio/acervo-site.js +157 -0
  8. package/lib/estudio/assets.js +77 -3
  9. package/lib/estudio/cinema.js +399 -0
  10. package/lib/estudio/composicao.js +470 -0
  11. package/lib/estudio/edicao.js +450 -0
  12. package/lib/estudio/impacto.js +263 -0
  13. package/lib/estudio/index.js +854 -5
  14. package/lib/estudio/plano.js +5 -2
  15. package/lib/estudio/remotion.js +228 -23
  16. package/lib/estudio/slides.js +34 -30
  17. package/lib/local/cerebro.json +361 -180
  18. package/lib/local/entrada.js +18 -8
  19. package/lib/local/motor-cli.js +1 -1
  20. package/lib/offline.js +168 -0
  21. package/package.json +2 -3
  22. package/skills/design-de-verdade/SKILL.md +2 -0
  23. package/skills/motion-de-primeira/SKILL.md +1 -1
  24. package/skills/site-com-motion/SKILL.md +39 -0
  25. package/studio/narrar.py +111 -10
  26. package/studio/rostos.py +52 -0
  27. package/kits/acolhedor/index.html +0 -130
  28. package/kits/acolhedor/script.js +0 -25
  29. package/kits/acolhedor/style.css +0 -146
  30. package/kits/editorial/index.html +0 -115
  31. package/kits/editorial/script.js +0 -19
  32. package/kits/editorial/style.css +0 -112
  33. package/kits/landing/index.html +0 -162
  34. package/kits/landing/script.js +0 -199
  35. package/kits/landing/style.css +0 -219
  36. package/kits/premium/index.html +0 -83
  37. package/kits/premium/script.js +0 -11
  38. package/kits/premium/style.css +0 -87
  39. package/kits/vitrine/index.html +0 -108
  40. package/kits/vitrine/script.js +0 -20
  41. package/kits/vitrine/style.css +0 -117
  42. package/lib/kits.js +0 -206
package/kits/premium/index.html DELETED
@@ -1,83 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang='pt-BR'>
3
- <head>
4
- <meta charset='UTF-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6
- <!-- TROQUE: título e descrição com o nome e a promessa -->
7
- <title>Sua Marca, o que você faz</title>
8
- <meta name='description' content='Uma frase que diz o que o negócio faz e para quem.'>
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <!-- TROQUE (se quiser): as fontes. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
12
- <link href='https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Manrope:wght@400;500;600&display=swap' rel='stylesheet'>
13
- <link rel='stylesheet' href='style.css'>
14
- <script src='script.js' defer></script>
15
- </head>
16
- <body>
17
- <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
18
-
19
- <!-- TROQUE: o nome e os links -->
20
- <header class='topo'>
21
- <a href='#' class='marca'>Sua Marca</a>
22
- <nav class='menu' aria-label='Principal'>
23
- <a href='#trabalho'>O trabalho</a>
24
- <a href='#contato'>Agendar</a>
25
- </nav>
26
- </header>
27
-
28
- <main id='conteudo'>
29
- <!-- TROQUE: a frase de abertura (curta e calma) e a linha de baixo. O arco é o elemento marcante: não coloque mais nada em volta dele. -->
30
- <section class='abertura'>
31
- <div class='arco' id='arco' aria-hidden='true'><span class='arco-luz'></span></div>
32
- <h1>Uma frase calma que diz o que vocês fazem.</h1>
33
- <p class='abertura-texto'>Para quem é, e em que cidade. Uma linha só.</p>
34
- <a href='#contato' class='botao'>Agendar uma conversa</a>
35
- </section>
36
-
37
- <!-- TROQUE: o manifesto, um parágrafo que diz o que vocês acreditam e fazem diferente -->
38
- <section class='manifesto'>
39
- <p>Um parágrafo curto sobre o jeito de trabalhar: o cuidado que ninguém vê, o tempo que cada projeto leva e por que isso muda o resultado para quem contrata.</p>
40
- </section>
41
-
42
- <!-- TROQUE: três frentes de trabalho (títulos curtos, textos de duas linhas) -->
43
- <section id='trabalho' class='trabalho' aria-label='O trabalho'>
44
- <div class='frente'>
45
- <h2>Primeira frente</h2>
46
- <p>O que é, e o que a pessoa recebe no fim. Duas linhas no máximo.</p>
47
- </div>
48
- <div class='frente'>
49
- <h2>Segunda frente</h2>
50
- <p>O que é, e o que a pessoa recebe no fim. Duas linhas no máximo.</p>
51
- </div>
52
- <div class='frente'>
53
- <h2>Terceira frente</h2>
54
- <p>O que é, e o que a pessoa recebe no fim. Duas linhas no máximo.</p>
55
- </div>
56
- </section>
57
-
58
- <!-- TROQUE: uma frase de cliente (real; se não tiver, apague a seção) -->
59
- <section class='depoimento' aria-label='Um cliente'>
60
- <blockquote>
61
- <p>“Uma frase de cliente, curta, que fala do resultado e do cuidado.”</p>
62
- <footer>Nome do cliente, cidade</footer>
63
- </blockquote>
64
- </section>
65
-
66
- <!-- TROQUE: como agendar, o endereço e os contatos -->
67
- <section id='contato' class='contato'>
68
- <h2>Atendimento com hora marcada</h2>
69
- <div class='contato-grade'>
70
- <p>Rua Exemplo, 100<br>Sua Cidade</p>
71
- <p><a href='mailto:contato@suamarca.com.br'>contato@suamarca.com.br</a><br><a href='tel:+5500000000000'>(00) 0000-0000</a></p>
72
- <p>Segunda a sexta<br>das 10h às 19h</p>
73
- </div>
74
- <a href='https://wa.me/5500000000000' class='botao botao-cheio'>Agendar pelo WhatsApp</a>
75
- </section>
76
- </main>
77
-
78
- <!-- TROQUE: ano e nome -->
79
- <footer class='rodape'>
80
- <p>© 2026 Sua Marca</p>
81
- </footer>
82
- </body>
83
- </html>
package/kits/premium/script.js DELETED
@@ -1,11 +0,0 @@
1
- // Premium: um só movimento, na abertura. O arco sobe devagar quando a página
2
- // carrega, e nada mais se mexe: animação em toda seção tira o ar de calma.
3
- (function(){
4
- var d=document;
5
- d.documentElement.classList.add('js');
6
- var arco=d.getElementById('arco');
7
- if(!arco) return;
8
- // Dois quadros de espera: garante que o navegador pintou o estado inicial
9
- // antes de ligar a transição (senão ele pula direto para o fim).
10
- requestAnimationFrame(function(){ requestAnimationFrame(function(){ arco.classList.add('pronto'); }); });
11
- })();
package/kits/premium/style.css DELETED
@@ -1,87 +0,0 @@
1
- :root{
2
- /* ── A MARCA ───────────────────────────────────────────────────────
3
- Para mudar a cara da página inteira, troque SÓ estas linhas:
4
- --primaria a cor do arco e dos títulos (escura e sóbria)
5
- --destaque o fio de luz no arco e os detalhes (um metal: latão,
6
- cobre, prata)
7
- --apoio as linhas finas e o fundo do depoimento
8
- --fundo o fundo da página (claro e neutro)
9
- --fonte-titulo / --fonte-texto as duas fontes (e o link do
10
- Google Fonts no index.html)
11
- O resto do arquivo usa estas variáveis: não precisa mexer nele. */
12
- --primaria:#1f3a34;
13
- --destaque:#b8955a;
14
- --apoio:#dcd9d2;
15
- --fundo:#f4f4f1;
16
- --fonte-titulo:'Bodoni Moda',Georgia,serif;
17
- --fonte-texto:'Manrope',system-ui,sans-serif;
18
-
19
- --tinta:#1c1c1b;
20
- --suave:#66655f;
21
- }
22
-
23
- /* Premium: muito espaço vazio e um único elemento marcante (o arco).
24
- Tudo o mais é fino, calmo e centrado. O luxo aqui é o que NÃO tem. */
25
- *{margin:0;padding:0;box-sizing:border-box;}
26
- html{scroll-behavior:smooth;}
27
- body{font-family:var(--fonte-texto);font-size:1.02rem;line-height:1.75;color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased;}
28
- a{color:inherit;}
29
- :focus-visible{outline:2px solid var(--destaque);outline-offset:4px;}
30
- h1,h2{font-family:var(--fonte-titulo);font-weight:400;line-height:1.12;color:var(--primaria);letter-spacing:-.01em;}
31
- .pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--fundo);padding:8px 14px;z-index:10;}
32
- .pular:focus{left:8px;}
33
-
34
- .topo{display:flex;align-items:center;justify-content:space-between;padding:28px clamp(20px,5vw,64px);}
35
- .marca{font-family:var(--fonte-titulo);font-size:1.6rem;font-weight:500;text-decoration:none;color:var(--primaria);}
36
- .menu{display:flex;gap:32px;font-size:.95rem;}
37
- .menu a{text-decoration:none;color:var(--suave);transition:color .3s;}
38
- .menu a:hover{color:var(--tinta);}
39
-
40
- .botao{display:inline-block;padding:14px 32px;border:1px solid var(--primaria);color:var(--primaria);font:500 .98rem var(--fonte-texto);text-decoration:none;letter-spacing:.01em;transition:background .35s,color .35s;}
41
- .botao:hover{background:var(--primaria);color:var(--fundo);}
42
- .botao-cheio{background:var(--primaria);color:var(--fundo);}
43
- .botao-cheio:hover{background:transparent;color:var(--primaria);}
44
-
45
- /* O arco: uma janela alta, com um fio de metal por dentro e um sol baixo */
46
- .abertura{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,5vw,56px) 24px clamp(90px,12vw,160px);}
47
- .arco{position:relative;width:min(380px,70vw);aspect-ratio:3/4.2;border-radius:999px 999px 0 0;background:var(--primaria);overflow:hidden;margin-bottom:clamp(40px,6vw,72px);transform-origin:50% 100%;}
48
- .arco::before{content:'';position:absolute;inset:18px 18px 0;border:1px solid var(--destaque);border-bottom:0;border-radius:999px 999px 0 0;opacity:.8;}
49
- .arco-luz{position:absolute;left:50%;bottom:-18%;width:64%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--destaque),color-mix(in srgb,var(--destaque) 30%,var(--primaria)) 70%);opacity:.95;}
50
- .abertura h1{font-size:clamp(2.2rem,4.8vw,4.1rem);max-width:18ch;margin-bottom:22px;}
51
- .abertura-texto{color:var(--suave);font-size:1.1rem;margin-bottom:40px;}
52
-
53
- /* Entrada: só o arco sobe, uma vez, ao abrir a página */
54
- .js .arco{opacity:0;transform:scaleY(.86);}
55
- .js .arco.pronto{opacity:1;transform:none;transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.1,1);}
56
-
57
- .manifesto{padding:clamp(80px,12vw,160px) 24px;border-top:1px solid var(--apoio);}
58
- .manifesto p{max-width:30ch;margin:0 auto;text-align:center;font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.4;color:var(--tinta);}
59
-
60
- /* O trabalho: três colunas de texto com um fio em cima, sem caixa */
61
- .trabalho{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,80px);max-width:1160px;margin:0 auto;padding:clamp(60px,8vw,120px) clamp(24px,5vw,64px);}
62
- .frente{border-top:1px solid var(--destaque);padding-top:28px;}
63
- .frente h2{font-size:clamp(1.45rem,2vw,1.8rem);font-weight:400;margin-bottom:12px;}
64
- .frente p{color:var(--suave);max-width:34ch;}
65
-
66
- .depoimento{background:var(--apoio);padding:clamp(80px,11vw,150px) 24px;text-align:center;}
67
- .depoimento p{font-family:var(--fonte-titulo);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;max-width:28ch;margin:0 auto;color:var(--primaria);}
68
- .depoimento footer{margin-top:24px;color:var(--suave);font-size:.95rem;}
69
-
70
- .contato{text-align:center;padding:clamp(90px,12vw,160px) 24px;}
71
- .contato h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:48px;}
72
- .contato-grade{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:clamp(28px,6vw,96px);margin-bottom:56px;color:var(--suave);}
73
- .contato-grade a{text-decoration:none;border-bottom:1px solid var(--apoio);transition:border-color .3s;}
74
- .contato-grade a:hover{border-color:var(--destaque);}
75
-
76
- .rodape{border-top:1px solid var(--apoio);padding:28px;text-align:center;font-size:.9rem;color:var(--suave);}
77
-
78
- @media (max-width:760px){
79
- .trabalho{grid-template-columns:1fr;}
80
- .contato-grade{grid-template-columns:1fr;gap:20px;}
81
- .menu{gap:20px;}
82
- }
83
- @media (prefers-reduced-motion:reduce){
84
- html{scroll-behavior:auto;}
85
- *{transition:none!important;}
86
- .js .arco{opacity:1;transform:none;}
87
- }
package/kits/vitrine/index.html DELETED
@@ -1,108 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang='pt-BR'>
3
- <head>
4
- <meta charset='UTF-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6
- <!-- TROQUE: título e descrição com o nome e a oferta -->
7
- <title>Sua Marca, a oferta que chama</title>
8
- <meta name='description' content='Uma frase que diz o que é, quando e onde.'>
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <!-- TROQUE (se quiser): a fonte. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
12
- <link href='https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap' rel='stylesheet'>
13
- <link rel='stylesheet' href='style.css'>
14
- <script src='script.js' defer></script>
15
- </head>
16
- <body>
17
- <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
18
-
19
- <!-- TROQUE: o nome e o link do pedido (WhatsApp, loja, ingresso) -->
20
- <header class='topo'>
21
- <a href='#' class='marca'>Sua Marca</a>
22
- <a href='https://wa.me/5500000000000' class='botao botao-preto'>Quero o meu</a>
23
- </header>
24
-
25
- <main id='conteudo'>
26
- <!-- TROQUE: o título curto e barulhento (poucas palavras), o selo e a frase de apoio -->
27
- <section class='palco'>
28
- <h1>Uma frase curta que dá fome.</h1>
29
- <p class='selo'><span>Só nesta semana</span></p>
30
- <div class='palco-base'>
31
- <p class='palco-texto'>O que é, para quem é, e o motivo para pedir hoje. Duas frases, sem enrolar.</p>
32
- <a href='https://wa.me/5500000000000' class='botao botao-preto'>Fazer meu pedido</a>
33
- </div>
34
- </section>
35
-
36
- <!-- TROQUE: a data (no texto E no data-alvo, formato 2026-12-31T20:00), o lugar e o preço. Sem data? Apague o <p id='contagem'>. -->
37
- <section class='quando' aria-label='Quando e onde'>
38
- <div class='quando-data'>
39
- <p class='quando-rotulo'>Quando</p>
40
- <p class='quando-valor'>Sábado, 12 de dezembro</p>
41
- <p id='contagem' class='contagem' data-alvo='2026-12-12T19:00'></p>
42
- </div>
43
- <div class='quando-lugar'>
44
- <p class='quando-rotulo'>Onde</p>
45
- <p class='quando-valor'>Rua Exemplo, 100, Sua Cidade</p>
46
- </div>
47
- <div class='quando-preco'>
48
- <p class='quando-rotulo'>A partir de</p>
49
- <p class='quando-valor'>R$ 00</p>
50
- </div>
51
- </section>
52
-
53
- <!-- TROQUE: os produtos (ou atrações). O primeiro é a estrela e fica grande. Pode ter 4 a 6. -->
54
- <section id='cardapio' class='mosaico' aria-label='O que tem'>
55
- <article class='peca peca-estrela'>
56
- <div class='arte arte-circulos' aria-hidden='true'></div>
57
- <h2>O campeão da casa</h2>
58
- <p>Por que todo mundo pede este. Uma frase que dá vontade.</p>
59
- <p class='etiqueta'>R$ 00</p>
60
- </article>
61
- <article class='peca peca-azul'>
62
- <div class='arte arte-meia' aria-hidden='true'></div>
63
- <h3>Segundo item</h3>
64
- <p>Uma frase curta e gostosa.</p>
65
- <p class='etiqueta'>R$ 00</p>
66
- </article>
67
- <article class='peca peca-branca'>
68
- <div class='arte arte-listras' aria-hidden='true'></div>
69
- <h3>Terceiro item</h3>
70
- <p>Uma frase curta e gostosa.</p>
71
- <p class='etiqueta'>R$ 00</p>
72
- </article>
73
- <article class='peca peca-amarela'>
74
- <div class='arte arte-gota' aria-hidden='true'></div>
75
- <h3>Quarto item</h3>
76
- <p>Uma frase curta e gostosa.</p>
77
- <p class='etiqueta'>R$ 00</p>
78
- </article>
79
- <article class='peca peca-preta'>
80
- <div class='arte arte-estrela' aria-hidden='true'></div>
81
- <h3>Quinto item</h3>
82
- <p>Uma frase curta e gostosa.</p>
83
- <p class='etiqueta'>R$ 00</p>
84
- </article>
85
- </section>
86
-
87
- <!-- TROQUE: como pedir, em três verbos (é uma sequência de verdade) e uma frase -->
88
- <section class='passos'>
89
- <p class='passos-verbos'>Escolha. <span>Chame.</span> Aproveite.</p>
90
- <p class='passos-texto'>Uma frase que explica o caminho: onde pedir, em quanto tempo chega, como pagar.</p>
91
- </section>
92
-
93
- <!-- TROQUE: o último empurrão e os contatos -->
94
- <section id='pedir' class='final'>
95
- <h2>Bora?</h2>
96
- <p>O convite final, com a urgência verdadeira (acaba quando?).</p>
97
- <a href='https://wa.me/5500000000000' class='botao botao-preto'>Chamar no WhatsApp</a>
98
- <p class='final-redes'><a href='https://instagram.com/'>@suamarca</a> no Instagram</p>
99
- </section>
100
- </main>
101
-
102
- <!-- TROQUE: ano, nome e cidade -->
103
- <footer class='rodape'>
104
- <p>© 2026 Sua Marca, Sua Cidade</p>
105
- <a href='#'>Voltar ao topo</a>
106
- </footer>
107
- </body>
108
- </html>
package/kits/vitrine/script.js DELETED
@@ -1,20 +0,0 @@
1
- // Vitrine: a pressa de verdade é a data. O script conta quantos dias faltam
2
- // para o data-alvo e escreve em palavras ("Faltam 12 dias"), em vez de um
3
- // relógio piscando. Se a data passou ou está vazia, o selo some sozinho.
4
- (function(){
5
- var el=document.getElementById('contagem');
6
- if(!el) return;
7
- var alvo=new Date(el.getAttribute('data-alvo')||'');
8
- if(isNaN(alvo)) { el.textContent=''; return; }
9
- function escrever(){
10
- var ms=alvo-new Date();
11
- if(ms<=0){ el.textContent=''; return; }
12
- var dias=Math.floor(ms/864e5), horas=Math.floor(ms/36e5);
13
- if(dias>1) el.textContent='Faltam '+dias+' dias';
14
- else if(dias===1) el.textContent='É amanhã';
15
- else if(horas>=1) el.textContent='Faltam '+horas+(horas===1?' hora':' horas');
16
- else el.textContent='É agora';
17
- }
18
- escrever();
19
- setInterval(escrever,6e4);
20
- })();
package/kits/vitrine/style.css DELETED
@@ -1,117 +0,0 @@
1
- :root{
2
- /* ── A MARCA ───────────────────────────────────────────────────────
3
- Para mudar a cara da página inteira, troque SÓ estas linhas:
4
- --primaria o bloco de abertura e a peça estrela
5
- --destaque o selo, as etiquetas de preço e o bloco final
6
- --apoio a faixa de data e as peças de cor
7
- --fonte-titulo / --fonte-texto a fonte (e o link do Google
8
- Fonts no index.html)
9
- Cores vivas e fortes funcionam melhor aqui. O resto do arquivo usa
10
- estas variáveis: não precisa mexer nele. */
11
- --primaria:#ffd23f;
12
- --destaque:#ff4f8b;
13
- --apoio:#2d5bff;
14
- --fonte-titulo:'Bricolage Grotesque',system-ui,sans-serif;
15
- --fonte-texto:'Bricolage Grotesque',system-ui,sans-serif;
16
-
17
- --tinta:#141414;
18
- --branco:#ffffff;
19
- --lado:clamp(16px,3vw,40px);
20
- }
21
-
22
- /* Vitrine: blocos de cor chapada, tipo enorme e contorno grosso, como
23
- cartaz de rua. Nada de sombra suave nem vidro: tudo é plano e forte. */
24
- *{margin:0;padding:0;box-sizing:border-box;}
25
- html{scroll-behavior:smooth;}
26
- body{font-family:var(--fonte-texto);font-size:1.1rem;line-height:1.5;color:var(--tinta);background:var(--branco);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
27
- a{color:inherit;}
28
- :focus-visible{outline:4px solid var(--apoio);outline-offset:3px;}
29
- h1,h2,h3{font-family:var(--fonte-titulo);font-weight:800;line-height:.95;letter-spacing:-.035em;}
30
- .pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--branco);padding:8px 14px;z-index:10;}
31
- .pular:focus{left:8px;}
32
-
33
- .topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--lado);background:var(--primaria);border-bottom:3px solid var(--tinta);}
34
- .marca{font-family:var(--fonte-titulo);font-weight:800;font-size:1.6rem;letter-spacing:-.04em;text-decoration:none;}
35
-
36
- .botao{display:inline-block;padding:14px 26px;border:3px solid var(--tinta);border-radius:14px;background:var(--branco);color:var(--tinta);font:800 1.05rem var(--fonte-titulo);text-decoration:none;box-shadow:5px 5px 0 var(--tinta);transition:transform .15s,box-shadow .15s;}
37
- .botao:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tinta);}
38
- .botao:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--tinta);}
39
- .botao-preto{background:var(--tinta);color:var(--branco);box-shadow:5px 5px 0 var(--destaque);}
40
- .botao-preto:hover{box-shadow:7px 7px 0 var(--destaque);}
41
- .botao-preto:active{box-shadow:2px 2px 0 var(--destaque);}
42
-
43
- /* Palco: o título ocupa a largura toda, e o selo gira no canto */
44
- .palco{position:relative;background:var(--primaria);padding:clamp(40px,6vw,80px) var(--lado) clamp(48px,6vw,80px);border-bottom:3px solid var(--tinta);overflow:hidden;}
45
- .palco h1{font-size:clamp(3.4rem,12.5vw,13rem);max-width:10ch;position:relative;z-index:1;}
46
- .selo{position:absolute;right:clamp(16px,6vw,110px);top:clamp(24px,5vw,70px);width:clamp(120px,15vw,210px);aspect-ratio:1;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--destaque);font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(1rem,1.6vw,1.45rem);line-height:1.05;transform:rotate(-12deg);z-index:2;
47
- /* a borda serrilhada do selo: um polígono de 24 pontas */
48
- clip-path:polygon(50% 0%,56.5% 7.4%,65.4% 3.4%,68.8% 12.6%,78.6% 12.4%,78.3% 22.1%,87.6% 25%,84.1% 34.1%,92.1% 39.8%,86.4% 47.6%,92.1% 55.8%,84.1% 61%,87.6% 70%,78.3% 73%,78.6% 82.7%,68.8% 82.4%,65.4% 91.6%,56.5% 87.6%,50% 95%,43.5% 87.6%,34.6% 91.6%,31.2% 82.4%,21.4% 82.7%,21.7% 73%,12.4% 70%,15.9% 61%,7.9% 55.8%,13.6% 47.6%,7.9% 39.8%,15.9% 34.1%,12.4% 25%,21.7% 22.1%,21.4% 12.4%,31.2% 12.6%,34.6% 3.4%,43.5% 7.4%);}
49
- .selo span{max-width:8ch;}
50
- .palco-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,48px);}
51
- .palco-texto{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600;max-width:34ch;}
52
-
53
- /* Quando e onde: uma faixa de três colunas com filete preto entre elas */
54
- .quando{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;background:var(--apoio);color:var(--branco);border-bottom:3px solid var(--tinta);}
55
- .quando>div{padding:28px var(--lado);}
56
- .quando>div+div{border-left:3px solid var(--tinta);}
57
- .quando-rotulo{font-weight:600;opacity:.85;}
58
- .quando-valor{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.02em;margin-top:4px;}
59
- .contagem{margin-top:10px;display:inline-block;background:var(--primaria);color:var(--tinta);font-weight:800;padding:4px 12px;border-radius:999px;border:2px solid var(--tinta);}
60
- .contagem:empty{display:none;}
61
-
62
- /* Mosaico: peças de tamanhos e cores diferentes, e não cards iguais */
63
- .mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:3px;background:var(--tinta);border-bottom:3px solid var(--tinta);}
64
- .peca{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:28px;overflow:hidden;background:var(--branco);}
65
- .peca h2,.peca h3,.peca p{position:relative;z-index:1;}
66
- .peca h3{font-size:clamp(1.6rem,2.4vw,2.2rem);}
67
- .peca p{max-width:28ch;font-weight:600;}
68
- .peca-estrela{grid-column:span 2;grid-row:span 2;background:var(--destaque);}
69
- .peca-estrela h2{font-size:clamp(2.6rem,5.5vw,5.2rem);max-width:9ch;}
70
- .peca-estrela p{font-size:1.25rem;}
71
- .peca-azul{background:var(--apoio);color:var(--branco);}
72
- .peca-amarela{background:var(--primaria);}
73
- .peca-preta{background:var(--tinta);color:var(--branco);}
74
- .etiqueta{position:absolute!important;top:22px;right:22px;background:var(--branco);color:var(--tinta);font-family:var(--fonte-titulo);font-weight:800;font-size:1.3rem;padding:6px 14px;border:3px solid var(--tinta);border-radius:10px;transform:rotate(4deg);}
75
- .peca-estrela .etiqueta{font-size:2rem;padding:8px 18px;transform:rotate(-5deg);}
76
-
77
- /* As artes: formas geométricas no lugar da foto (o pedido pode não ter foto) */
78
- .arte{position:absolute;z-index:0;}
79
- .arte-circulos{right:-8%;top:10%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--primaria) 0 22%,transparent 22.5% 36%,var(--primaria) 36.5% 50%,transparent 50.5%);}
80
- .arte-meia{right:-30px;top:-30px;width:170px;aspect-ratio:1;border-radius:50%;background:var(--primaria);}
81
- .arte-listras{left:0;right:0;top:0;height:46%;background:repeating-linear-gradient(-45deg,var(--destaque) 0 16px,transparent 16px 32px);opacity:.9;}
82
- .arte-gota{right:24px;top:70px;width:110px;aspect-ratio:1;border-radius:50% 0 50% 50%;background:var(--destaque);transform:rotate(-45deg);}
83
- .arte-estrela{right:22px;top:64px;width:120px;aspect-ratio:1;background:var(--primaria);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
84
-
85
- /* Passos: três verbos em uma linha enorme */
86
- .passos{padding:clamp(56px,8vw,110px) var(--lado);border-bottom:3px solid var(--tinta);}
87
- .passos-verbos{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(2.6rem,9vw,8.5rem);line-height:.95;letter-spacing:-.04em;}
88
- .passos-verbos span{color:var(--apoio);}
89
- .passos-texto{margin-top:24px;font-size:1.3rem;font-weight:600;max-width:40ch;}
90
-
91
- .final{background:var(--destaque);padding:clamp(56px,8vw,110px) var(--lado);text-align:center;border-bottom:3px solid var(--tinta);}
92
- .final h2{font-size:clamp(4.5rem,16vw,14rem);}
93
- .final p{font-size:1.3rem;font-weight:600;margin:16px auto 28px;max-width:34ch;}
94
- .final .botao-preto{box-shadow:5px 5px 0 var(--primaria);}
95
- .final-redes{font-size:1.05rem!important;margin-top:28px!important;}
96
-
97
- .rodape{display:flex;justify-content:space-between;gap:16px;padding:22px var(--lado);background:var(--tinta);color:var(--branco);font-weight:600;}
98
-
99
- @media (max-width:960px){
100
- .mosaico{grid-template-columns:1fr 1fr;}
101
- .peca-estrela{grid-column:span 2;grid-row:span 1;min-height:380px;}
102
- }
103
- @media (max-width:640px){
104
- .quando{grid-template-columns:1fr;}
105
- .quando>div+div{border-left:0;border-top:3px solid var(--tinta);}
106
- .mosaico{grid-template-columns:1fr;}
107
- .peca-estrela,.peca-preta{grid-column:auto;}
108
- .peca{min-height:230px;}
109
- .peca-estrela{min-height:400px;padding-top:110px;}
110
- .selo{position:relative;right:auto;top:auto;width:116px;margin-top:22px;}
111
- .arte-circulos{width:46%;top:22%;right:-12%;}
112
- .palco{padding-bottom:40px;}
113
- .palco-base{flex-direction:column;align-items:flex-start;}
114
- .rodape{flex-direction:column;}
115
- .topo .botao{padding:10px 16px;font-size:.95rem;}
116
- }
117
- @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
package/lib/kits.js DELETED
@@ -1,206 +0,0 @@
1
- /**
2
- * kits.js — a IA recebe uma direção visual para se INSPIRAR, e não um molde.
3
- *
4
- * "A IA free fez essa página, ficou boa, mas quero que ela seja mais
5
- * rápida." · "Mas os sites vão ficar todos iguais?" · "Eu quero que tenha
6
- * modelo pra IA só se inspirar, não pra ela mudar só texto." (24/09/2026)
7
- *
8
- * ── A HISTÓRIA, EM TRÊS PASSOS ───────────────────────────────────────────
9
- * 1. Primeiro o kit era COPIADO para a pasta e o agente só trocava texto e
10
- * cor: rápido no plano grátis (1–2 mil tokens de saída em vez de ~9 mil),
11
- * mas todo site saía com o mesmo esqueleto.
12
- * 2. Viraram cinco direções com estruturas diferentes. Ainda eram moldes.
13
- * 3. Agora é INSPIRAÇÃO: nada é copiado. O agente recebe a ficha da direção
14
- * que combina com o negócio (paleta, fontes, layout, o elemento marcante,
15
- * o que evitar) e escreve a página dele. Custa mais saída que trocar
16
- * texto — o preço de cada site sair com a cara do seu negócio — e a
17
- * instrução manda escrever o CSS em partes para cada resposta caber na
18
- * cota.
19
- *
20
- * As páginas completas de kits/<nome>/ ficam como a prova de que cada
21
- * direção funciona: foram renderizadas e conferidas, e as fichas saíram delas.
22
- */
23
-
24
- 'use strict';
25
-
26
- const fs = require('fs');
27
- const path = require('path');
28
-
29
- const PASTA_KITS = path.join(__dirname, '..', 'kits');
30
-
31
- /* O pedido de landing. Estreito de propósito: "crie um app de tarefas" não é
32
- landing, e um kit errado é pior que kit nenhum. */
33
- const RE_LANDING = /\b(landing|lading|p[áa]gina (de vendas|de captura|inicial|institucional|de apresenta[çc][ãa]o|pr[ao]|do meu|da minha|da empresa|do neg[óo]cio)|site (institucional|da empresa|do meu|da minha|pr[ao] (minha|meu|a|o))|one ?page|home ?page)\b/i;
34
- // Pedido que não quer a cara do kit: nada de puxar o kit por cima disso.
35
- const RE_SEM_KIT = /\b(do zero|sem modelo|sem template|sem kit|react|next(\.?js)?|vue|svelte|angular|tailwind|wordpress)\b/i;
36
-
37
- /* ── INSPIRAÇÃO, NÃO MOLDE ────────────────────────────────────────────────
38
- * "Eu quero que tenha modelo pra IA só se INSPIRAR, não pra ela mudar só
39
- * texto." (24/09/2026)
40
- * Os kits eram copiados para a pasta e o agente só trocava texto e cor — e
41
- * todo site saía com o mesmo esqueleto. Agora nada é copiado: o agente recebe
42
- * uma FICHA da direção que combina com o negócio (paleta, fontes, ideia de
43
- * layout, o elemento marcante, o movimento, o que evitar) e escreve a página
44
- * DELE. A ficha é curta (~1,5 mil caracteres) para caber na cota grátis. As
45
- * páginas completas continuam em kits/<nome>/ como a prova de que cada
46
- * direção funciona — é delas que as fichas foram tiradas. */
47
- function instrucaoDoKit(kit) {
48
- return `INSPIRAÇÃO VISUAL (ponto de partida, NÃO é molde): direção "${kit.titulo}".\n${kit.ficha}\n\n`
49
- + 'Crie a página DESTE negócio do zero (index.html, style.css e, se precisar, script.js), com o conteúdo '
50
- + 'real do pedido. Use a direção acima como inspiração: pode e deve mudar a estrutura, as seções, as cores '
51
- + 'e as fontes para caber no negócio — duas páginas feitas com esta ficha não devem sair iguais. Não copie '
52
- + 'textos de exemplo e não invente fato que você não sabe. Antes de escrever, decida em 3 linhas o que '
53
- + 'será o elemento marcante desta página. Arquivo grande: escreva o CSS em partes (a base primeiro, os '
54
- + 'detalhes depois com edit_file), para cada resposta caber.';
55
- }
56
-
57
- /* Uma família de direções, e não uma só: "mas os sites vão ficar todos
58
- iguais?" (24/09/2026). Cada uma pede uma ESTRUTURA diferente. */
59
- const KITS = {
60
- landing: {
61
- nome: 'landing',
62
- titulo: 'escura e tecnológica',
63
- ficha: '- para: tecnologia, app, startup, barbearia, tatuagem, academia — negócio de noite ou de futuro.\n'
64
- + '- paleta: fundo quase preto azulado (#0b0b12), um azul profundo (#1e3fae), um laranja de destaque '
65
- + '(#f97316), um ciano de apoio (#1fb4cf).\n'
66
- + '- fontes: um sans geométrico e firme para tudo (ex.: Instrument Sans, Space Grotesk, Sora) e, se '
67
- + 'quiser, uma serifa só para um detalhe.\n'
68
- + '- layout: abertura de tela cheia centrada, com fundo vivo (rede de pontos ou brilho que segue o '
69
- + 'mouse, em canvas ou CSS); depois seções escuras largas.\n'
70
- + '- marcante: o fundo animado da abertura. O resto fica sóbrio.\n'
71
- + '- evite: fade em toda seção, números 01/02/03, rótulo em caixa alta sobre todo título.',
72
- },
73
- editorial: {
74
- nome: 'editorial',
75
- titulo: 'editorial clara',
76
- ficha: '- para: advocacia, consultoria, contabilidade, fotografia, curso, mentoria, agência.\n'
77
- + '- paleta: papel quase branco (#fcfcfb), tinta quase preta (#141414), UM azul forte (#1432c8) usado '
78
- + 'pouco, e um azul bem claro (#e7ebfb) para uma faixa.\n'
79
- + '- fontes: um título condensado e pesado (ex.: Archivo condensada, Oswald, Anton) + uma serifa de '
80
- + 'leitura para o texto (ex.: Newsreader, Source Serif, Literata).\n'
81
- + '- layout: tudo alinhado à ESQUERDA numa grade assimétrica (coluna estreita de rótulo + coluna larga '
82
- + 'de conteúdo); serviços em LINHAS separadas por filete, não em cards; um depoimento grande em itálico.\n'
83
- + '- marcante: o título da abertura, enorme e apertado, ocupando metade da tela.\n'
84
- + '- movimento: quase nenhum. Formulário só com a linha de baixo nos campos.',
85
- },
86
- acolhedor: {
87
- nome: 'acolhedor',
88
- titulo: 'acolhedora de bairro',
89
- ficha: '- para: padaria, confeitaria, salão, clínica, dentista, pet, escola, creche — o negócio da esquina.\n'
90
- + '- paleta: fundo creme quente (#fff9f2), um verde acolhedor (#2f7a5f), amarelo sol (#ffc247) e um '
91
- + 'coral (#f28b74). Troque pelo que combinar com o ramo.\n'
92
- + '- fontes: um título redondo e simpático (ex.: Fredoka, Baloo 2, Nunito ExtraBold) + um texto '
93
- + 'arredondado e legível (ex.: Nunito, Quicksand).\n'
94
- + '- layout: texto à esquerda e, à direita, uma ILUSTRAÇÃO feita só com CSS que lembra o negócio '
95
- + '(lojinha com toldo listrado, bolo, patinha, dente) — nada de imagem de fora; quadro de preços com '
96
- + 'pontilhado ligando nome e preço; falas de cliente em balões; botão de WhatsApp em destaque.\n'
97
- + '- marcante: um selo "Aberto agora, até as 18h" calculado pelo horário real (script.js).\n'
98
- + '- tudo arredondado (raios grandes), nada de fundo escuro.',
99
- },
100
- vitrine: {
101
- nome: 'vitrine',
102
- titulo: 'vitrine colorida',
103
- ficha: '- para: comida, pizzaria, hamburgueria, açaí, evento, festa, loja, lançamento de produto.\n'
104
- + '- paleta: cores chapadas e vivas em BLOCOS: amarelo (#ffd23f), rosa (#ff4f8b), azul elétrico '
105
- + '(#2d5bff), preto (#141414). Contorno grosso preto entre os blocos.\n'
106
- + '- fontes: um grotesco bem pesado e expressivo para títulos GIGANTES (ex.: Bricolage Grotesque, '
107
- + 'Archivo Black, Rubik) — pode ser a mesma família no texto.\n'
108
- + '- layout: cartaz de rua. Abertura em um bloco de cor com título que quase estoura a tela; faixa '
109
- + 'com quando/onde/preço; MOSAICO de produtos com tamanhos diferentes (um grande, vários pequenos), '
110
- + 'cada um com etiqueta de preço inclinada; chamada final enorme ("Bora?").\n'
111
- + '- marcante: um selo serrilhado girado ("Só nesta semana") e, se houver data, a contagem em '
112
- + 'palavras ("Faltam 12 dias").\n'
113
- + '- evite: cards iguais com sombra suave e degradê.',
114
- },
115
- premium: {
116
- nome: 'premium',
117
- titulo: 'minimalista premium',
118
- ficha: '- para: arquitetura, joalheria, imobiliária, hotel, spa, estética, vinho — serviço de alto padrão.\n'
119
- + '- paleta: fundo pedra clara (#f4f4f1), um verde muito escuro (#1f3a34), um dourado envelhecido '
120
- + '(#b8955a) só em fios e detalhes, e um cinza quente (#dcd9d2).\n'
121
- + '- fontes: uma serifa de alto contraste, fina e grande, para títulos (ex.: Bodoni Moda, Playfair '
122
- + 'Display, Cormorant) + um sans discreto e pequeno para o texto (ex.: Manrope, Inter).\n'
123
- + '- layout: tudo CENTRADO, com MUITO espaço vazio; poucas seções e curtas; três frentes de trabalho '
124
- + 'lado a lado só com um fio fino em cima; depoimento curto; contato com hora marcada.\n'
125
- + '- marcante: UM elemento só na abertura (ex.: um arco de cor escura com um fio dourado e uma luz), '
126
- + 'que se mexe uma vez ao abrir. Nada mais se mexe.\n'
127
- + '- botões finos, só contorno. Antes de terminar, tire um enfeite.',
128
- },
129
- };
130
- for (const kit of Object.values(KITS)) kit.instrucao = instrucaoDoKit(kit);
131
-
132
- /* Tira acento e caixa: "Clínica", "clinica" e "CLÍNICA" viram a mesma
133
- coisa, e o \b do JavaScript volta a funcionar (ele não entende "í"). */
134
- function normalizar(texto) {
135
- return String(texto || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
136
- }
137
-
138
- /* Pedido explícito de estilo vence o ramo do negócio: quem diz "estilo
139
- editorial" para a padaria quer a editorial. */
140
- const ESTILO_PEDIDO = [
141
- ['editorial', /\b(editorial|estilo (de )?revista|cara de revista|jornal[ií]stic[oa])\b/],
142
- ['acolhedor', /\b(acolhedor[a]?|aconchegante|fofo|fofa|amigavel|caseir[oa])\b/],
143
- ['vitrine', /\b(vitrine|colorid[oa]|vibrante|chamativ[oa]|divertid[oa]|bold|cartaz)\b/],
144
- ['premium', /\b(premium|minimalista|minimal|sofisticad[oa]|elegante|luxuos[oa]|de luxo|alto padrao)\b/],
145
- ['landing', /\b(escur[oa]|dark|futurista|tecnologic[oa]|neon)\b/],
146
- ];
147
-
148
- /* O ramo do negócio → a direção que combina. Ganha a palavra que aparece
149
- PRIMEIRO no pedido ("app da padaria" é sobre o app). */
150
- const RAMO = [
151
- ['acolhedor', /\b(padaria|confeitaria|doceria|salao|cabeleireir[oa]|manicure|clinica|dentista|odonto\w*|consultorio|pet ?shop|pet|veterinari[oa]|escola|creche|bercario|psicolog[oa]|fisioterap\w*|nutricionista|lavanderia|floricultura|mercadinho|costureira|artesanato)\b/],
152
- ['vitrine', /\b(evento|festa|show|festival|comida|lanchonete|lanche|hamburgueria|hamburguer|pizzaria|pizza|sorveteria|acai|food ?truck|delivery|loja|produto|lancamento|promocao|brecho|bar|cervejaria|churrasco|doces?)\b/],
153
- ['editorial', /\b(advocacia|advogad[oa]|consultoria|contabilidade|contador[a]?|jornal|revista|blog|podcast|fotograf[oa]|fotografia|escritor[a]?|livro|palestrante|mentoria|curso|agencia)\b/],
154
- ['premium', /\b(arquitetura|arquitet[oa]|joalheria|joias?|imobiliaria|imoveis|corretor[a]?|interiores|hotel|pousada|spa|vinho|vinicola|estetica|relojoaria|alfaiataria|perfumaria)\b/],
155
- ['landing', /\b(tech|startup|app|aplicativo|software|saas|ia|inteligencia artificial|plataforma|games?|barbearia|tattoo|tatuagem|estudio|academia|crossfit)\b/],
156
- ];
157
-
158
- /* Sem pista nenhuma, a escolha RODA pelo texto do pedido: o mesmo pedido cai
159
- sempre no mesmo kit (dá para reproduzir), mas dois pedidos diferentes não
160
- caem sempre no mesmo — que era exatamente a reclamação. */
161
- const ORDEM_RODIZIO = ['editorial', 'acolhedor', 'vitrine', 'premium', 'landing'];
162
- function hashDoPedido(texto) {
163
- let h = 5381;
164
- for (const ch of normalizar(texto).trim()) h = ((h * 33) ^ ch.codePointAt(0)) >>> 0;
165
- return h;
166
- }
167
-
168
- function primeiraPista(t, tabela) {
169
- let melhor = null;
170
- for (const [nome, re] of tabela) {
171
- const m = re.exec(t);
172
- if (m && (!melhor || m.index < melhor.pos)) melhor = { nome, pos: m.index };
173
- }
174
- return melhor && melhor.nome;
175
- }
176
-
177
- /** Qual direção visual combina com o pedido (sem as regras de quando usar kit). */
178
- function direcao(pedido) {
179
- const t = normalizar(pedido);
180
- return primeiraPista(t, ESTILO_PEDIDO)
181
- || primeiraPista(t, RAMO)
182
- || ORDEM_RODIZIO[hashDoPedido(pedido) % ORDEM_RODIZIO.length];
183
- }
184
-
185
- /* O kit é para quem NÃO consegue desenhar bem sozinho no tempo da cota. O
186
- motor forte (Claude Code, Codex, a chave do Claude ou do ChatGPT) desenha do
187
- zero com a skill design-de-verdade — e aí cada site sai com a cara dele, em
188
- vez de todos com a cara do kit. "Mas os sites vão ficar todos iguais?"
189
- (24/09/2026) */
190
- const FORTES = new Set(['claude', 'chatgpt']);
191
- function motorForte(provedorAtual) {
192
- return Boolean(provedorAtual && (provedorAtual.cli || FORTES.has(provedorAtual.id)));
193
- }
194
-
195
- /** Qual kit este pedido quer, ou null. A direção sai do negócio (ou do estilo pedido). */
196
- function escolher(pedido, { provedor = null } = {}) {
197
- // A ficha é inspiração, não molde: vale para qualquer motor. O forte usa
198
- // de partida junto da skill design-de-verdade; o grátis ganha uma direção
199
- // em vez de inventar do zero. (`provedor` fica para quem quiser distinguir.)
200
- void provedor;
201
- const t = String(pedido || '');
202
- if (!RE_LANDING.test(t) || RE_SEM_KIT.test(t)) return null;
203
- return KITS[direcao(t)];
204
- }
205
-
206
- module.exports = { KITS, PASTA_KITS, escolher, direcao, normalizar, motorForte, instrucaoDoKit };