@kaikybrofc/omnizap-system 2.2.8 → 2.2.10

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 (33) hide show
  1. package/README.md +1 -1
  2. package/docs/seo/omnizap-seo-playbook-br-2026-02-28.md +194 -0
  3. package/docs/seo/satellite-page-template.md +89 -0
  4. package/docs/seo/satellite-pages-phase1.json +486 -0
  5. package/package.json +3 -1
  6. package/public/api-docs/index.html +78 -22
  7. package/public/bot-whatsapp-para-grupo/index.html +276 -0
  8. package/public/bot-whatsapp-sem-programar/index.html +276 -0
  9. package/public/comandos/index.html +413 -0
  10. package/public/como-automatizar-avisos-no-whatsapp/index.html +276 -0
  11. package/public/como-criar-comandos-whatsapp/index.html +276 -0
  12. package/public/como-evitar-spam-no-whatsapp/index.html +276 -0
  13. package/public/como-moderar-grupo-whatsapp/index.html +276 -0
  14. package/public/como-organizar-comunidade-whatsapp/index.html +276 -0
  15. package/public/css/github-project-panel.css +8 -8
  16. package/public/css/stickers-admin.css +31 -31
  17. package/public/css/styles.css +17 -16
  18. package/public/index.html +701 -1181
  19. package/public/js/apps/apiDocsApp.js +39 -6
  20. package/public/js/apps/homeApp.js +157 -410
  21. package/public/js/apps/stickersApp.js +42 -0
  22. package/public/licenca/index.html +9 -9
  23. package/public/login/index.html +26 -22
  24. package/public/melhor-bot-whatsapp-para-grupos/index.html +276 -0
  25. package/public/sitemap.xml +45 -0
  26. package/public/stickers/create/index.html +7 -6
  27. package/public/stickers/index.html +72 -5
  28. package/public/termos-de-uso/index.html +10 -10
  29. package/public/user/index.html +25 -21
  30. package/scripts/generate-seo-satellite-pages.mjs +434 -0
  31. package/server/controllers/stickerCatalogController.js +341 -700
  32. package/kaikybrofc-omnizap-system-2.2.7.tgz +0 -0
  33. package/kaikybrofc-omnizap-system-2.2.8.tgz +0 -0
package/public/index.html CHANGED
@@ -3,154 +3,150 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>OmniZap System | Plataforma Open Source de Automação WhatsApp</title>
7
- <meta name="description" content="OmniZap System: infraestrutura open source para bots e automação WhatsApp em escala, com API, observabilidade, gestão de grupos e arquitetura pronta para produção." />
8
- <meta name="keywords" content="omnizap, automação whatsapp, api whatsapp, bot whatsapp open source, infraestrutura bot, saas whatsapp, observabilidade, gestão de grupos" />
6
+ <title>OmniZap Bot para WhatsApp | Adicione e use em 1 minuto</title>
7
+ <meta name="description" content="Adicione o OmniZap no seu grupo e comece em segundos. Bot pronto para organizar mensagens, moderar spam e automatizar tarefas sem configuração técnica." />
8
+ <meta name="keywords" content="bot whatsapp pronto, automação de grupos, moderação whatsapp, bot para comunidade, omnizap" />
9
9
  <meta name="author" content="OmniZap System" />
10
10
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
11
- <meta name="theme-color" content="#0b1020" />
11
+ <meta name="theme-color" content="#0f172a" />
12
12
  <link rel="canonical" href="https://omnizap.shop/" />
13
13
  <link rel="icon" type="image/png" href="/assets/images/brand-icon-192.png" />
14
14
  <link rel="apple-touch-icon" href="/assets/images/brand-icon-192.png" />
15
- <link rel="sitemap" type="application/xml" href="https://omnizap.shop/sitemap.xml" />
16
- <link rel="me" href="https://github.com/Kaikygr/omnizap-system" />
17
- <link rel="me" href="https://wa.me/?text=iniciar" />
18
15
 
19
16
  <meta property="og:type" content="website" />
20
17
  <meta property="og:locale" content="pt_BR" />
21
18
  <meta property="og:site_name" content="OmniZap System" />
22
- <meta property="og:title" content="OmniZap System | Plataforma Open Source de Automação WhatsApp" />
23
- <meta property="og:description" content="Infraestrutura técnica para bots WhatsApp com API, observabilidade e arquitetura modular pronta para produção." />
19
+ <meta property="og:title" content="Adicione o bot ao seu grupo e deixe ele fazer o resto" />
20
+ <meta property="og:description" content="Automação automática, organização de mensagens e recursos inteligentes prontos para usar em grupos WhatsApp." />
24
21
  <meta property="og:url" content="https://omnizap.shop/" />
25
22
  <meta property="og:image" content="https://omnizap.shop/assets/images/hero-banner-1280.jpg" />
26
- <meta property="og:image:alt" content="Banner OmniZap System com identidade visual tecnológica" />
23
+ <meta property="og:image:alt" content="OmniZap Bot em funcionamento em grupos WhatsApp" />
27
24
 
28
25
  <meta name="twitter:card" content="summary_large_image" />
29
- <meta name="twitter:title" content="OmniZap System" />
30
- <meta name="twitter:description" content="Plataforma open source de automação WhatsApp com API, telemetria e stack de produção." />
26
+ <meta name="twitter:title" content="OmniZap Bot para WhatsApp" />
27
+ <meta name="twitter:description" content="Você adiciona. Ele organiza. Bot pronto para grupos e comunidades." />
31
28
  <meta name="twitter:image" content="https://omnizap.shop/assets/images/hero-banner-1280.jpg" />
32
-
33
- <link
34
- rel="preload"
35
- as="image"
36
- href="/assets/images/hero-banner-720.webp"
37
- imagesrcset="/assets/images/hero-banner-720.webp 720w, /assets/images/hero-banner-1280.webp 1280w"
38
- imagesizes="(max-width: 860px) 92vw, 1150px"
39
- fetchpriority="high"
40
- />
29
+ <script type="application/ld+json">
30
+ {
31
+ "@context": "https://schema.org",
32
+ "@type": "FAQPage",
33
+ "mainEntity": [
34
+ {
35
+ "@type": "Question",
36
+ "name": "Preciso configurar algo técnico para usar o OmniZap?",
37
+ "acceptedAnswer": {
38
+ "@type": "Answer",
39
+ "text": "Não. Você só adiciona o bot ao grupo, autoriza e ele já começa a funcionar com recursos automáticos."
40
+ }
41
+ },
42
+ {
43
+ "@type": "Question",
44
+ "name": "Em quanto tempo o bot começa a funcionar?",
45
+ "acceptedAnswer": {
46
+ "@type": "Answer",
47
+ "text": "Normalmente em menos de 1 minuto após a adição e autorização no grupo."
48
+ }
49
+ },
50
+ {
51
+ "@type": "Question",
52
+ "name": "O OmniZap funciona para grupos e comunidades?",
53
+ "acceptedAnswer": {
54
+ "@type": "Answer",
55
+ "text": "Sim. O OmniZap foi criado para facilitar moderação, avisos e organização em grupos e comunidades no WhatsApp."
56
+ }
57
+ },
58
+ {
59
+ "@type": "Question",
60
+ "name": "Posso usar stickers junto com o bot?",
61
+ "acceptedAnswer": {
62
+ "@type": "Answer",
63
+ "text": "Sim. Os stickers fazem parte do ecossistema OmniZap e podem ser usados como recurso extra para engajamento."
64
+ }
65
+ },
66
+ {
67
+ "@type": "Question",
68
+ "name": "Preciso entender API para começar?",
69
+ "acceptedAnswer": {
70
+ "@type": "Answer",
71
+ "text": "Não para uso comum. A área de API existe para casos avançados de integração, mas o uso padrão é pronto e simples."
72
+ }
73
+ },
74
+ {
75
+ "@type": "Question",
76
+ "name": "Quantos comandos o OmniZap possui?",
77
+ "acceptedAnswer": {
78
+ "@type": "Answer",
79
+ "text": "Você pode acessar mais de 50 comandos ativos no seu grupo digitando /menu."
80
+ }
81
+ },
82
+ {
83
+ "@type": "Question",
84
+ "name": "Onde posso ver a documentação técnica?",
85
+ "acceptedAnswer": {
86
+ "@type": "Answer",
87
+ "text": "A documentação técnica está em https://omnizap.shop/api-docs/."
88
+ }
89
+ }
90
+ ]
91
+ }
92
+ </script>
41
93
 
42
94
  <link rel="preconnect" href="https://fonts.googleapis.com" />
43
95
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
44
- <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap" />
45
96
  <link
46
97
  rel="stylesheet"
47
- href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap"
48
- media="print"
49
- onload="this.media='all'"
98
+ href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap"
50
99
  />
51
- <noscript>
52
- <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap" rel="stylesheet" />
53
- </noscript>
54
- <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
55
100
  <link
56
101
  rel="stylesheet"
57
102
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
58
- media="print"
59
- onload="this.media='all'"
60
103
  />
61
- <noscript>
62
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" />
63
- </noscript>
64
- <link rel="preload" as="style" href="/css/github-project-panel.css?v=20260226c" />
65
- <link
66
- rel="stylesheet"
67
- href="/css/github-project-panel.css?v=20260226c"
68
- media="print"
69
- onload="this.media='all'"
70
- />
71
- <noscript>
72
- <link href="/css/github-project-panel.css?v=20260226c" rel="stylesheet" />
73
- </noscript>
74
-
75
- <script type="application/ld+json">
76
- {
77
- "@context": "https://schema.org",
78
- "@type": "SoftwareApplication",
79
- "name": "OmniZap System",
80
- "applicationCategory": "BusinessApplication",
81
- "operatingSystem": "Linux, Windows, macOS",
82
- "url": "https://omnizap.shop/",
83
- "description": "Plataforma open source de automação WhatsApp com API, observabilidade, gestão de grupos e arquitetura modular para produção.",
84
- "offers": {
85
- "@type": "Offer",
86
- "price": "0",
87
- "priceCurrency": "USD"
88
- }
89
- }
90
- </script>
91
- <script type="application/ld+json">
92
- {
93
- "@context": "https://schema.org",
94
- "@type": "Organization",
95
- "name": "OmniZap System",
96
- "url": "https://omnizap.shop/",
97
- "logo": "https://omnizap.shop/assets/images/brand-icon-192.png",
98
- "sameAs": [
99
- "https://github.com/Kaikygr/omnizap-system",
100
- "https://wa.me/?text=iniciar"
101
- ]
102
- }
103
- </script>
104
104
 
105
105
  <style>
106
106
  :root {
107
- --bg: #0b1020;
108
- --bg-2: #121a2f;
109
- --card: #141e36cc;
110
- --line: #2a3b60;
111
- --text: #e6edf7;
112
- --muted: #9fb0cc;
113
- --primary: #22c55e;
114
- --primary-2: #38bdf8;
115
- --warn: #f59e0b;
116
- --radius: 16px;
107
+ --bg: #0f172a;
108
+ --bg-2: #111827;
109
+ --panel: #1e293bd9;
110
+ --line: rgba(255, 255, 255, 0.05);
111
+ --text: #f8fafc;
112
+ --muted: #94a3b8;
113
+ --accent: #2563eb;
114
+ --accent-2: #7c3aed;
115
+ --cta: #22c55e;
116
+ --cta-hover: #16a34a;
117
+ --radius: 18px;
117
118
  }
118
119
 
119
120
  * { box-sizing: border-box; }
120
-
121
121
  html, body { margin: 0; padding: 0; }
122
122
 
123
123
  body {
124
124
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
125
125
  color: var(--text);
126
126
  background:
127
- radial-gradient(58rem 24rem at -8% -12%, #22c55e26, transparent 60%),
128
- radial-gradient(58rem 24rem at 112% -10%, #38bdf822, transparent 58%),
127
+ radial-gradient(58rem 22rem at -10% -8%, #2563eb24, transparent 60%),
128
+ radial-gradient(62rem 26rem at 112% -12%, #7c3aed22, transparent 58%),
129
129
  linear-gradient(165deg, var(--bg), var(--bg-2));
130
130
  min-height: 100vh;
131
131
  }
132
132
 
133
- .container { width: min(1150px, 92vw); margin: 0 auto; }
133
+ .container { width: min(1120px, 92vw); margin: 0 auto; }
134
134
 
135
135
  .top {
136
136
  position: sticky;
137
137
  top: 0;
138
- z-index: 10;
138
+ z-index: 20;
139
139
  backdrop-filter: blur(10px);
140
- background: #0c1221cc;
141
- border-bottom: 1px solid #223250;
140
+ background: #090f1fcf;
141
+ border-bottom: 1px solid #203250;
142
142
  }
143
143
 
144
144
  .top-inner {
145
145
  display: flex;
146
146
  align-items: center;
147
147
  justify-content: space-between;
148
- gap: 16px;
149
- padding: 14px 0;
150
- }
151
-
152
- .top-head {
153
- display: contents;
148
+ gap: 14px;
149
+ padding: 12px 0;
154
150
  }
155
151
 
156
152
  .brand {
@@ -159,88 +155,30 @@
159
155
  gap: 10px;
160
156
  font-family: "Sora", sans-serif;
161
157
  font-weight: 700;
162
- letter-spacing: .2px;
158
+ text-decoration: none;
159
+ color: var(--text);
160
+ letter-spacing: 0.2px;
163
161
  }
164
162
 
165
- .brand-logo {
163
+ .brand img {
166
164
  width: 30px;
167
165
  height: 30px;
168
166
  border-radius: 50%;
169
167
  object-fit: cover;
170
- border: 1px solid #2f4368;
171
- box-shadow: 0 2px 10px #00000033;
172
- flex: 0 0 auto;
173
- }
174
-
175
- .nav { display: flex; gap: 10px; flex-wrap: wrap; }
176
-
177
- .nav-user-chip {
178
- display: inline-flex;
179
- align-items: center;
180
- gap: 8px;
181
- padding: 6px 10px 6px 6px;
182
- max-width: 270px;
183
- border-color: #3f5f8f;
184
- background: linear-gradient(120deg, #132544d6, #10203ad6);
185
- }
186
-
187
- .nav-user-avatar-bubble {
188
- display: inline-flex;
189
- width: 30px;
190
- height: 30px;
191
- border-radius: 999px;
192
- border: 1px solid #4a6fa4;
193
- background: #132340;
194
- box-shadow: 0 0 0 2px #1a2e4b, 0 0 16px #6aaaf236;
195
- overflow: hidden;
196
- flex: 0 0 auto;
197
- }
198
-
199
- .nav-user-photo {
200
- width: 100%;
201
- height: 100%;
202
- object-fit: cover;
203
- display: block;
168
+ border: 1px solid #365585;
204
169
  }
205
170
 
206
- .nav-user-name-bubble {
207
- display: inline-flex;
208
- align-items: center;
209
- gap: 6px;
210
- min-width: 0;
211
- padding: 4px 8px;
212
- border-radius: 999px;
213
- border: 1px solid #34547f;
214
- background: #12213ac9;
215
- }
216
-
217
- .nav-user-icon {
218
- font-size: 12px;
219
- color: #9bc6f5;
220
- flex: 0 0 auto;
221
- }
222
-
223
- .nav-user-name {
224
- font-size: 12px;
225
- font-weight: 700;
226
- color: #dbe8fb;
227
- white-space: nowrap;
228
- overflow: hidden;
229
- text-overflow: ellipsis;
230
- }
171
+ .nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
231
172
 
232
- .nav-toggle {
233
- display: none;
234
- width: 42px;
235
- height: 42px;
236
- border-radius: 10px;
173
+ .nav-toggle {
174
+ display: none;
175
+ width: 40px;
176
+ height: 40px;
177
+ border-radius: 11px;
237
178
  border: 1px solid var(--line);
238
- background: #111a2d;
179
+ background: #101a30;
239
180
  color: var(--text);
240
- align-items: center;
241
- justify-content: center;
242
- font-size: 21px;
243
- line-height: 1;
181
+ font-size: 20px;
244
182
  cursor: pointer;
245
183
  }
246
184
 
@@ -248,842 +186,505 @@
248
186
  text-decoration: none;
249
187
  color: var(--text);
250
188
  border: 1px solid var(--line);
251
- background: #111a2d;
252
- padding: 10px 14px;
189
+ background: #121c31;
253
190
  border-radius: 12px;
254
- font-weight: 600;
255
- transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
256
- }
257
-
258
- .icon-inline {
259
- margin-right: 8px;
260
- color: #8ec5ff;
261
- font-size: .95em;
262
- text-shadow: 0 0 18px #69aef35c;
263
- }
264
-
265
- .btn .icon-inline {
266
- margin-right: 6px;
267
- color: inherit;
191
+ padding: 10px 14px;
192
+ font-size: 14px;
193
+ font-weight: 700;
194
+ display: inline-flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ gap: 7px;
198
+ transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
199
+ cursor: pointer;
268
200
  }
269
201
 
270
- .btn:hover { transform: translateY(-1px); border-color: #3f567f; }
271
-
272
- .btn.primary {
273
- color: #042511;
274
- border-color: transparent;
275
- background: linear-gradient(90deg, var(--primary), #16a34a);
276
- box-shadow: 0 8px 22px #22c55e33;
277
- }
278
-
279
- @media (max-width: 860px) {
280
- .top-inner {
281
- flex-direction: column;
282
- align-items: stretch;
283
- gap: 12px;
284
- }
285
-
286
- .top-head {
287
- display: flex;
288
- align-items: center;
289
- justify-content: space-between;
290
- gap: 10px;
291
- }
292
-
293
- .brand {
294
- text-align: left;
295
- font-size: 22px;
296
- line-height: 1.1;
297
- }
298
-
299
- .nav-toggle {
300
- display: inline-flex;
301
- flex: 0 0 auto;
302
- }
303
-
304
- .nav {
305
- display: none;
306
- width: 100%;
307
- grid-template-columns: 1fr;
308
- gap: 8px;
309
- }
310
-
311
- .nav.open {
312
- display: grid;
313
- }
314
-
315
- body.home-authenticated .top-inner {
316
- flex-direction: row;
317
- align-items: center;
318
- justify-content: space-between;
319
- gap: 10px;
320
- }
321
-
322
- body.home-authenticated .top-head {
323
- flex: 1 1 auto;
324
- }
325
-
326
- body.home-authenticated #nav-toggle {
327
- display: none;
328
- }
329
-
330
- body.home-authenticated #main-nav {
331
- display: flex;
332
- width: auto;
333
- grid-template-columns: none;
334
- gap: 8px;
335
- flex-wrap: nowrap;
336
- }
337
-
338
- body.home-authenticated #main-nav .btn:not(#nav-auth-link) {
339
- display: none;
340
- }
341
-
342
- .btn {
343
- width: 100%;
344
- text-align: center;
345
- padding: 10px 10px;
346
- border-radius: 10px;
347
- }
348
-
349
- .nav-user-chip {
350
- justify-content: flex-start;
351
- }
352
-
353
- body.home-authenticated #main-nav #nav-auth-link.nav-user-chip {
354
- width: 44px;
355
- min-width: 44px;
356
- max-width: 44px;
357
- height: 44px;
358
- padding: 4px;
359
- border-radius: 999px;
360
- justify-content: center;
361
- justify-self: auto;
362
- align-self: auto;
363
- background: linear-gradient(120deg, #132544f0, #10203af0);
364
- }
365
-
366
- body.home-authenticated #main-nav #nav-auth-link.nav-user-chip .nav-user-name-bubble {
367
- display: none;
368
- }
369
-
370
- body.home-authenticated #main-nav #nav-auth-link.nav-user-chip .nav-user-avatar-bubble {
371
- width: 34px;
372
- height: 34px;
373
- border: 1px solid #4a6fa4;
374
- box-shadow: 0 0 0 1px #1a2e4b, 0 0 12px #6aaaf236;
375
- }
376
-
377
- body.home-authenticated #main-nav #nav-scheduler-link {
378
- display: none;
379
- }
202
+ .btn:hover { transform: translateY(-1px); border-color: #4f6f9f; }
380
203
 
204
+ .btn.primary {
205
+ color: #0f172a;
206
+ border-color: transparent;
207
+ background: var(--cta);
208
+ box-shadow: 0 10px 24px #22c55e30;
381
209
  }
382
210
 
383
- @media (max-width: 420px) {
384
- .top-inner {
385
- padding: 12px 0;
386
- }
211
+ .btn.primary:hover { background: var(--cta-hover); }
387
212
 
388
- .brand {
389
- font-size: 19px;
390
- }
391
-
392
- .btn {
393
- font-size: 15px;
394
- padding: 9px 8px;
395
- }
213
+ .btn.secondary {
214
+ border-color: #2563eb;
215
+ background: transparent;
216
+ color: #2563eb;
396
217
  }
397
218
 
398
219
  .hero {
399
- margin: 38px 0 14px;
400
- position: relative;
220
+ margin-top: 28px;
221
+ border: 1px solid rgba(255, 255, 255, 0.05);
222
+ border-radius: 28px;
223
+ background: linear-gradient(150deg, #111827ed, #1e293bed);
224
+ box-shadow: 0 22px 52px #02091770;
225
+ padding: clamp(18px, 3.2vw, 36px);
226
+ display: grid;
227
+ grid-template-columns: 1.08fr .92fr;
228
+ gap: 22px;
229
+ align-items: center;
401
230
  overflow: hidden;
402
- isolation: isolate;
403
- border: 1px solid #334869;
404
- border-radius: 24px;
405
- background: linear-gradient(150deg, #0f1a31ee, #101d35f0);
406
- box-shadow: 0 18px 48px #040c1f7a, inset 0 1px 0 #b7d3ff14;
407
- padding: clamp(16px, 3vw, 34px);
231
+ position: relative;
408
232
  }
409
233
 
410
234
  .hero::before {
411
235
  content: "";
412
236
  position: absolute;
413
- inset: -30% auto auto -25%;
414
- width: 430px;
415
- height: 430px;
237
+ width: 320px;
238
+ height: 320px;
416
239
  border-radius: 50%;
417
- background: radial-gradient(circle, #30d27d3a 0%, #30d27d00 72%);
240
+ right: -120px;
241
+ top: -120px;
242
+ background: radial-gradient(circle, #2563eb3a 0%, #2563eb00 72%);
418
243
  pointer-events: none;
419
- z-index: -1;
420
- }
421
-
422
- .hero::after {
423
- content: "";
424
- position: absolute;
425
- inset: auto -18% -28% auto;
426
- width: 420px;
427
- height: 420px;
428
- border-radius: 50%;
429
- background: radial-gradient(circle, #45b8ff30 0%, #45b8ff00 68%);
430
- pointer-events: none;
431
- z-index: -1;
432
- }
433
-
434
- .hero-banner-frame {
435
- display: block;
436
- margin-bottom: 15px;
437
- }
438
-
439
- .hero-banner {
440
- display: block;
441
- width: 100%;
442
- height: auto;
443
- aspect-ratio: 1280 / 544;
444
- max-height: 238px;
445
- object-fit: cover;
446
- border-radius: 16px;
447
- border: 1px solid #3a5279;
448
- box-shadow: 0 12px 30px #00000052;
449
- filter: saturate(1.06) contrast(1.03);
450
- transition: transform 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
451
- }
452
-
453
- .hero-banner:hover {
454
- transform: translateY(-2px);
455
- border-color: #5876a7;
456
- box-shadow: 0 16px 34px #00000066;
457
244
  }
458
245
 
459
246
  .eyebrow {
460
247
  display: inline-flex;
461
248
  align-items: center;
462
- gap: 6px;
463
- border: 1px solid #3d5a85;
249
+ border: 1px solid #46679d;
464
250
  border-radius: 999px;
465
- padding: 7px 13px;
466
- color: #c2d5f4;
251
+ padding: 6px 12px;
467
252
  font-size: 12px;
468
- font-weight: 700;
469
- letter-spacing: .35px;
253
+ font-weight: 800;
254
+ letter-spacing: .28px;
470
255
  text-transform: uppercase;
471
- background: #14233f8c;
472
- backdrop-filter: blur(7px);
256
+ color: #cbe1ff;
257
+ background: #16274a96;
258
+ margin-bottom: 10px;
473
259
  }
474
260
 
475
261
  .hero h1 {
262
+ margin: 0;
476
263
  font-family: "Sora", sans-serif;
477
- margin: 11px 0 9px;
478
- font-size: clamp(28px, 4.2vw, 46px);
264
+ font-size: clamp(30px, 4.2vw, 50px);
479
265
  line-height: 1.04;
480
266
  letter-spacing: -0.02em;
481
- max-width: 900px;
482
- font-weight: 700;
483
- background: linear-gradient(90deg, #eef5ff 0%, #8ed4ff 43%, #67e0b0 100%);
267
+ background: linear-gradient(92deg, #f3f8ff 0%, #60a5fa 45%, #a78bfa 100%);
484
268
  -webkit-background-clip: text;
485
269
  background-clip: text;
486
270
  color: transparent;
271
+ max-width: 640px;
487
272
  }
488
273
 
489
- .lead {
490
- margin: 0;
491
- max-width: 720px;
492
- color: #bfd0e8;
493
- font-size: clamp(15px, 1.8vw, 18px);
494
- line-height: 1.6;
274
+ .hero p {
275
+ margin: 14px 0 0;
276
+ color: #c1d3ed;
277
+ font-size: clamp(15px, 1.8vw, 19px);
278
+ line-height: 1.62;
279
+ max-width: 620px;
495
280
  font-weight: 500;
496
281
  }
497
282
 
498
283
  .hero-cta {
284
+ margin-top: 18px;
499
285
  display: flex;
500
- gap: 11px;
501
286
  flex-wrap: wrap;
502
- margin-top: 18px;
287
+ gap: 10px;
503
288
  }
504
289
 
505
- .hero-cta .btn {
506
- border-radius: 14px;
507
- transition: transform 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out, filter 200ms ease-in-out;
290
+ .mockup {
291
+ border: 1px solid #3c5d95;
292
+ border-radius: 22px;
293
+ background: #091226cf;
294
+ padding: 12px;
295
+ box-shadow: inset 0 1px 0 #7fb5ff17;
508
296
  }
509
297
 
510
- .hero-cta .btn:hover,
511
- .hero-cta .btn:focus-visible {
512
- transform: translateY(-2px) scale(1.03);
513
- box-shadow: 0 12px 24px #060d1f5c;
514
- border-color: #49628c;
298
+ .mockup-head {
299
+ display: flex;
300
+ justify-content: space-between;
301
+ align-items: center;
302
+ margin-bottom: 10px;
303
+ color: #acc4e8;
304
+ font-size: 12px;
305
+ font-weight: 700;
515
306
  }
516
307
 
517
- .hero-cta .btn.primary:hover,
518
- .hero-cta .btn.primary:focus-visible {
519
- box-shadow: 0 14px 30px #2bcf763d;
520
- filter: saturate(1.06);
308
+ .chat {
309
+ display: grid;
310
+ gap: 10px;
311
+ max-height: 360px;
312
+ overflow: hidden;
521
313
  }
522
314
 
523
- .hero-stats {
524
- margin-top: 24px;
525
- display: grid;
526
- grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
527
- gap: 12px;
315
+ .msg {
316
+ max-width: 88%;
317
+ padding: 10px 11px;
318
+ border-radius: 14px;
319
+ line-height: 1.45;
320
+ font-size: 13px;
321
+ border: 1px solid #2d456f;
322
+ background: #152542;
323
+ color: #d8e7ff;
528
324
  }
529
325
 
530
- .hero-proof {
531
- margin-top: 18px;
532
- display: grid;
533
- gap: 12px;
534
- grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
326
+ .msg.user {
327
+ margin-left: auto;
328
+ background: #1b2f52;
329
+ border-color: #41679f;
535
330
  }
536
331
 
537
- .proof-card {
538
- border: 1px solid #38527b80;
539
- border-radius: 18px;
540
- padding: 12px;
541
- background: linear-gradient(150deg, #12203a7d, #0d182e8a);
542
- backdrop-filter: blur(9px);
543
- min-height: 116px;
544
- transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;
332
+ .msg.bot {
333
+ margin-right: auto;
334
+ border-color: #2c7f64;
335
+ background: #0f2d25;
336
+ color: #d9ffec;
545
337
  }
546
338
 
547
- .proof-card:hover {
548
- transform: translateY(-2px);
549
- border-color: #5678adad;
550
- box-shadow: 0 14px 26px #03091552;
339
+ .proof-grid {
340
+ margin-top: 16px;
341
+ display: grid;
342
+ grid-template-columns: repeat(3, minmax(0, 1fr));
343
+ gap: 10px;
344
+ }
345
+
346
+ .proof {
347
+ border: 1px solid #39557f;
348
+ border-radius: 14px;
349
+ background: #12203b94;
350
+ padding: 11px;
551
351
  }
552
352
 
553
- .proof-value {
353
+ .proof strong {
554
354
  display: block;
555
355
  font-family: "Sora", sans-serif;
556
- font-size: clamp(22px, 2.4vw, 26px);
557
- line-height: 1.08;
558
- color: #edf6ff;
559
- letter-spacing: -0.02em;
356
+ font-size: clamp(20px, 2.2vw, 24px);
357
+ color: #eff6ff;
560
358
  }
561
359
 
562
- .proof-label {
360
+ .proof span {
563
361
  display: block;
564
- margin-top: 4px;
565
- color: #a7bbd9;
362
+ margin-top: 3px;
566
363
  font-size: 12px;
364
+ color: #aac0df;
567
365
  font-weight: 600;
568
- letter-spacing: 0.01em;
569
- text-transform: uppercase;
570
- }
571
-
572
- #proof-system {
573
- display: inline-flex;
574
- align-items: center;
575
- gap: 8px;
576
- margin-top: 8px;
577
- border: 1px solid #4f6d98;
578
- border-radius: 999px;
579
- background: #12233fba;
580
- padding: 6px 10px;
581
- min-height: 34px;
582
- font-size: 14px;
583
- line-height: 1;
584
- color: #ffefcf;
585
- text-transform: capitalize;
586
- }
587
-
588
- #proof-system::before {
589
- content: "";
590
- width: 8px;
591
- height: 8px;
592
- border-radius: 50%;
593
- background: #f59e0b;
594
- box-shadow: 0 0 0 0 #f59e0b4d;
595
- animation: pulse-status 1.8s infinite;
596
- flex: 0 0 auto;
597
- }
598
-
599
- .proof-card[data-status="online"] {
600
- border-color: #23895796;
601
- box-shadow: inset 0 0 0 1px #2389573b;
602
- }
603
-
604
- .proof-card[data-status="degraded"],
605
- .proof-card[data-status="connecting"] {
606
- border-color: #9f742f99;
607
- box-shadow: inset 0 0 0 1px #9f742f3a;
608
- }
609
-
610
- .proof-card[data-status="offline"] {
611
- border-color: #943535a3;
612
- box-shadow: inset 0 0 0 1px #94353540;
613
- }
614
-
615
- .proof-card[data-status="online"] #proof-system {
616
- border-color: #2b9761;
617
- background: #0f2a208c;
618
- color: #ddffe9;
619
- }
620
-
621
- .proof-card[data-status="online"] #proof-system::before {
622
- background: #22c55e;
623
- box-shadow: 0 0 0 0 #22c55e5c;
624
- }
625
-
626
- .proof-card[data-status="degraded"] #proof-system,
627
- .proof-card[data-status="connecting"] #proof-system {
628
- border-color: #a87b35;
629
- background: #35261096;
630
- color: #ffefcf;
631
- }
632
-
633
- .proof-card[data-status="degraded"] #proof-system::before,
634
- .proof-card[data-status="connecting"] #proof-system::before {
635
- background: #f59e0b;
636
- box-shadow: 0 0 0 0 #f59e0b5e;
637
- }
638
-
639
- .proof-card[data-status="offline"] #proof-system {
640
- border-color: #a63c3c;
641
- background: #34161699;
642
- color: #ffdede;
643
- }
644
-
645
- .proof-card[data-status="offline"] #proof-system::before {
646
- background: #ef4444;
647
- box-shadow: 0 0 0 0 #ef44446b;
648
- }
649
-
650
- .market-preview {
651
- margin: 20px 0 10px;
652
- border: 1px solid #334b7391;
653
- border-radius: 20px;
654
- background: linear-gradient(150deg, #0f1a328f, #0e1a308f);
655
- backdrop-filter: blur(8px);
656
- padding: clamp(14px, 2vw, 18px);
657
- box-shadow: 0 16px 34px #02081659;
658
366
  }
659
367
 
660
- .market-preview-head {
661
- display: flex;
662
- align-items: center;
663
- justify-content: space-between;
664
- gap: 10px;
665
- margin-bottom: 14px;
666
- flex-wrap: wrap;
368
+ .section {
369
+ margin-top: 34px;
370
+ border: 1px solid #304b76;
371
+ border-radius: 22px;
372
+ background: linear-gradient(150deg, #111f39bf, #0f1c33bf);
373
+ padding: clamp(16px, 2.8vw, 26px);
667
374
  }
668
375
 
669
- .market-preview-title {
376
+ .section h2 {
670
377
  margin: 0;
671
378
  font-family: "Sora", sans-serif;
672
- font-size: 19px;
379
+ font-size: clamp(24px, 2.8vw, 34px);
380
+ letter-spacing: -0.02em;
673
381
  }
674
382
 
675
- .market-preview-status {
676
- color: #9db3d3;
677
- font-size: 13px;
678
- font-weight: 600;
383
+ .section p.lead {
384
+ margin: 10px 0 0;
385
+ color: var(--muted);
386
+ font-size: 15px;
387
+ line-height: 1.6;
388
+ max-width: 760px;
679
389
  }
680
390
 
681
- .market-preview-grid {
391
+ .steps,
392
+ .features,
393
+ .audience,
394
+ .benefits {
395
+ margin-top: 16px;
682
396
  display: grid;
683
- gap: 14px;
684
- grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
685
- }
686
-
687
- .market-pack {
688
- position: relative;
689
- display: block;
690
- aspect-ratio: 1 / 1;
691
- border: 1px solid #3b5683a3;
692
- border-radius: 18px;
693
- overflow: hidden;
694
- background: #0b1427;
695
- text-decoration: none;
696
- color: inherit;
697
- box-shadow: 0 10px 24px #0208174a;
698
- transition: transform 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
699
- }
700
-
701
- .market-pack::after {
702
- content: "";
703
- position: absolute;
704
- inset: 0;
705
- background: linear-gradient(180deg, #08112400 30%, #091527d4 92%);
706
- opacity: 0.7;
707
- pointer-events: none;
708
- transition: opacity 200ms ease-in-out;
709
- }
710
-
711
- .market-pack:hover {
712
- transform: translateY(-2px) scale(1.01);
713
- border-color: #6388c0;
714
- box-shadow: 0 16px 30px #02081763;
715
- }
716
-
717
- .market-pack:hover::after { opacity: 0.92; }
718
-
719
- .market-pack-thumb {
720
- position: absolute;
721
- inset: 0;
722
- width: 100%;
723
- height: 100%;
724
- object-fit: cover;
725
- background: radial-gradient(circle at 20% 20%, #426aa633, #0a1222);
726
- transition: transform 200ms ease-in-out;
727
- }
728
-
729
- .market-pack:hover .market-pack-thumb { transform: scale(1.06); }
730
-
731
- .market-pack-body {
732
- position: absolute;
733
- left: 10px;
734
- right: 10px;
735
- bottom: 10px;
736
- border: 1px solid #4a668f8a;
737
- border-radius: 12px;
738
- background: #0d1a30b8;
739
- backdrop-filter: blur(9px);
740
- padding: 9px 10px;
741
- transform: translateY(4px);
742
- transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
743
- z-index: 3;
744
- }
745
-
746
- .market-pack:hover .market-pack-body {
747
- transform: translateY(0);
748
- border-color: #6388c0;
749
- }
750
-
751
- .market-pack-name {
752
- margin: 0;
753
- font-size: 13px;
754
- font-weight: 700;
755
- color: #e8f2ff;
756
- line-height: 1.25;
757
- min-height: 30px;
758
- text-shadow: 0 2px 12px #04080f73;
759
- }
760
-
761
- .market-pack-meta {
762
- margin-top: 4px;
763
- color: #b2c5e2;
764
- font-size: 12px;
397
+ gap: 12px;
398
+ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
765
399
  }
766
400
 
767
- .market-pack-tag {
768
- position: absolute;
769
- left: 10px;
770
- top: 10px;
771
- z-index: 4;
772
- border: 1px solid #2aa16e99;
773
- border-radius: 999px;
774
- background: #103425bd;
775
- color: #ccffdf;
776
- font-size: 10px;
777
- line-height: 1;
778
- font-weight: 800;
779
- letter-spacing: 0.06em;
780
- padding: 6px 8px;
781
- text-transform: uppercase;
782
- backdrop-filter: blur(6px);
401
+ .card {
402
+ border: 1px solid rgba(255, 255, 255, 0.05);
403
+ border-radius: 16px;
404
+ background: #1e293bb8;
405
+ padding: 14px;
406
+ transition: transform .18s ease, border-color .18s ease;
783
407
  }
784
408
 
785
- .market-pack.is-loading {
786
- pointer-events: none;
787
- }
409
+ .card:hover { transform: translateY(-2px); border-color: #5d84bf; }
788
410
 
789
- .market-pack-skeleton-thumb {
790
- position: absolute;
791
- inset: 0;
792
- width: 100%;
793
- height: 100%;
794
- background: linear-gradient(90deg, #27416780, #3d629380, #27416780);
795
- background-size: 200% 100%;
796
- animation: skeleton-shimmer 1.1s linear infinite;
411
+ .card h3 {
412
+ margin: 0 0 6px;
413
+ font-size: 17px;
414
+ color: #f3f8ff;
415
+ display: flex;
416
+ gap: 8px;
417
+ align-items: center;
797
418
  }
798
419
 
799
- .market-pack-skeleton-body {
800
- position: absolute;
801
- left: 10px;
802
- right: 10px;
803
- bottom: 10px;
804
- border: 1px solid #415f8c8c;
805
- border-radius: 12px;
806
- background: #101d34bf;
807
- backdrop-filter: blur(8px);
808
- padding: 9px 10px;
809
- display: grid;
810
- gap: 6px;
811
- z-index: 3;
420
+ .card p {
421
+ margin: 0;
422
+ color: #bed0ea;
423
+ font-size: 14px;
424
+ line-height: 1.56;
812
425
  }
813
426
 
814
- .market-pack-skeleton-line {
815
- height: 9px;
816
- border-radius: 999px;
817
- background: linear-gradient(90deg, #3859877a, #5c86be7a, #3859877a);
818
- background-size: 220% 100%;
819
- animation: skeleton-shimmer 1.1s linear infinite;
427
+ .benefit-item {
428
+ border: 1px solid #2d7a5f;
429
+ border-radius: 16px;
430
+ background: #102f26a8;
431
+ padding: 13px;
432
+ color: #ddffee;
433
+ font-weight: 700;
434
+ font-size: 15px;
435
+ display: flex;
436
+ align-items: center;
437
+ gap: 8px;
820
438
  }
821
439
 
822
- .market-pack-skeleton-line.short {
823
- width: 66%;
440
+ .faq-list {
441
+ margin-top: 16px;
442
+ display: grid;
443
+ gap: 10px;
824
444
  }
825
445
 
826
- .reveal {
827
- opacity: 0;
828
- transform: translateY(12px);
829
- transition: opacity .48s ease, transform .48s ease;
446
+ .guides-grid {
447
+ margin-top: 16px;
448
+ display: grid;
449
+ gap: 10px;
450
+ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
830
451
  }
831
452
 
832
- .reveal.in-view {
833
- opacity: 1;
834
- transform: translateY(0);
453
+ .guide-link {
454
+ display: block;
455
+ text-decoration: none;
456
+ border: 1px solid rgba(255, 255, 255, 0.05);
457
+ border-radius: 14px;
458
+ background: #1e293bb8;
459
+ padding: 12px;
460
+ color: #ecf3ff;
461
+ font-weight: 800;
462
+ line-height: 1.4;
463
+ transition: transform .18s ease, border-color .18s ease;
835
464
  }
836
465
 
837
- .chip {
838
- border: 1px solid #3a557d;
839
- border-radius: 16px;
840
- padding: 11px 13px;
841
- background: linear-gradient(145deg, #11203a8a, #0e1a3185);
842
- backdrop-filter: blur(7px);
843
- color: #c9daf2;
844
- font-size: 14px;
845
- transition: transform 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
466
+ .guide-link span {
467
+ display: block;
468
+ margin-top: 4px;
469
+ color: #bed0ea;
470
+ font-weight: 600;
471
+ font-size: 13px;
846
472
  }
847
473
 
848
- .chip:hover {
474
+ .guide-link:hover {
849
475
  transform: translateY(-2px);
850
- border-color: #5d81ba;
851
- box-shadow: 0 12px 22px #040a183f;
852
- }
853
-
854
- .section-title {
855
- margin: 34px 0 12px;
856
- font-family: "Sora", sans-serif;
857
- font-size: 24px;
858
- letter-spacing: -0.01em;
476
+ border-color: #5d84bf;
859
477
  }
860
478
 
861
- .grid {
479
+ .commands-grid {
480
+ margin-top: 16px;
862
481
  display: grid;
863
482
  gap: 12px;
864
483
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
865
484
  }
866
485
 
867
- .card {
868
- border: 1px solid #36517a8f;
486
+ .command-card {
487
+ border: 1px solid rgba(255, 255, 255, 0.05);
869
488
  border-radius: 16px;
870
- background: linear-gradient(150deg, #12213a8f, #101b308f);
871
- backdrop-filter: blur(7px);
872
- padding: 16px;
873
- animation: rise .55s ease-out;
874
- transition: transform 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), background 200ms cubic-bezier(.4, 0, .2, 1);
489
+ background: #1e293bb8;
490
+ padding: 13px;
875
491
  }
876
492
 
877
- .card:hover {
878
- transform: translateY(-2px);
879
- border-color: #5c81bb;
880
- background: linear-gradient(150deg, #14264196, #11203a96);
881
- box-shadow: 0 14px 28px #02081657;
493
+ .command-card h3 {
494
+ margin: 0 0 8px;
495
+ color: #f0f7ff;
496
+ font-size: 16px;
497
+ letter-spacing: -0.01em;
882
498
  }
883
499
 
884
- .card h3 { margin: 0 0 8px; font-size: 18px; color: #eaf4ff; }
885
- .card p { margin: 0; color: #b2c4df; line-height: 1.56; }
886
-
887
- .card h3 .icon-inline { color: #8dd6ff; }
888
-
889
- .api {
890
- margin-top: 14px;
891
- border: 1px solid #2c4067;
892
- border-radius: 14px;
893
- overflow: hidden;
894
- background: #0c1529;
500
+ .command-list {
501
+ margin: 0;
502
+ padding: 0;
503
+ list-style: none;
504
+ display: grid;
505
+ gap: 7px;
895
506
  }
896
507
 
897
- .api-head {
898
- padding: 10px 14px;
899
- border-bottom: 1px solid #26395d;
900
- color: #b8c8e2;
901
- font-size: 13px;
902
- font-weight: 700;
903
- text-transform: uppercase;
904
- letter-spacing: .35px;
508
+ .command-list li {
509
+ color: #bdd0eb;
510
+ font-size: 14px;
511
+ line-height: 1.5;
905
512
  }
906
513
 
907
- pre {
908
- margin: 0;
909
- padding: 14px;
910
- overflow: auto;
911
- color: #d3f7e0;
912
- font-size: 13px;
913
- line-height: 1.55;
914
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
514
+ .command-list code {
515
+ display: inline-block;
516
+ margin-right: 6px;
517
+ padding: 2px 6px;
518
+ border: 1px solid rgba(255, 255, 255, 0.08);
519
+ border-radius: 7px;
520
+ background: #111827;
521
+ color: #f8fafc;
522
+ font-size: 12px;
523
+ font-weight: 800;
524
+ letter-spacing: 0.02em;
915
525
  }
916
526
 
917
- .final-cta {
918
- margin: 26px 0;
919
- padding: 24px;
920
- border-radius: 18px;
921
- border: 1px solid #476ca3;
922
- background: linear-gradient(135deg, #132244, #12305a);
923
- box-shadow: 0 16px 30px #03081757, inset 0 1px 0 #98c7ff22;
527
+ .commands-actions {
528
+ margin-top: 14px;
924
529
  display: flex;
530
+ flex-wrap: wrap;
531
+ gap: 10px;
925
532
  align-items: center;
926
533
  justify-content: space-between;
927
- gap: 14px;
928
- flex-wrap: wrap;
929
534
  }
930
535
 
931
- .rank-panel {
932
- margin-top: 16px;
933
- border: 1px solid #3d5b8980;
934
- border-radius: 18px;
935
- background: linear-gradient(160deg, #101b32e9, #12213fe6);
936
- box-shadow: 0 15px 28px #03091652;
937
- padding: 16px;
536
+ .commands-actions p {
537
+ margin: 0;
538
+ color: #c2d4ee;
539
+ font-size: 14px;
540
+ font-weight: 700;
938
541
  }
939
542
 
940
- .github-spotlight {
941
- margin-top: 10px;
942
- border-color: #4a6ea8;
943
- box-shadow: 0 18px 34px #04102366;
543
+ .faq-item {
544
+ border: 1px solid rgba(255, 255, 255, 0.05);
545
+ border-radius: 14px;
546
+ background: #1e293bb8;
547
+ padding: 0 12px;
944
548
  }
945
549
 
946
- .rank-title {
947
- margin: 0 0 10px;
948
- font-family: "Sora", sans-serif;
949
- font-size: 22px;
550
+ .faq-item summary {
551
+ cursor: pointer;
552
+ list-style: none;
553
+ font-weight: 800;
554
+ color: #ecf3ff;
555
+ padding: 13px 0;
556
+ font-size: 15px;
950
557
  }
951
558
 
952
- .rank-meta {
953
- margin: 0 0 10px;
954
- color: #9fb0cc;
955
- font-size: 14px;
956
- }
559
+ .faq-item summary::-webkit-details-marker { display: none; }
957
560
 
958
- .rank-list {
561
+ .faq-item p {
959
562
  margin: 0;
960
- padding: 0;
961
- list-style: none;
962
- display: grid;
963
- gap: 8px;
563
+ color: #bed0ea;
564
+ font-size: 14px;
565
+ line-height: 1.58;
566
+ padding: 0 0 13px;
964
567
  }
965
568
 
966
- .rank-item {
967
- border: 1px solid #3a57829e;
968
- border-radius: 12px;
969
- padding: 10px 12px;
970
- background: #0f1a31cc;
971
- display: flex;
972
- justify-content: space-between;
973
- gap: 8px;
974
- align-items: center;
975
- min-width: 0;
976
- transition: transform 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), background 200ms cubic-bezier(.4, 0, .2, 1);
569
+ .faq-item a {
570
+ color: #2563eb;
571
+ text-decoration: none;
572
+ border-bottom: 1px dashed #2563eb;
977
573
  }
978
574
 
979
- .rank-item:hover {
980
- transform: translateY(-1px);
981
- border-color: #6289c2;
982
- background: #12203bcc;
575
+ .final-cta {
576
+ margin: 34px 0 26px;
577
+ border: 1px solid #3f5f92;
578
+ border-radius: 24px;
579
+ background: linear-gradient(145deg, #14284b, #12335f);
580
+ padding: clamp(18px, 2.8vw, 32px);
581
+ box-shadow: 0 20px 40px #02091766;
582
+ text-align: center;
983
583
  }
984
584
 
985
- .rank-item:nth-child(1),
986
- .rank-item:nth-child(2),
987
- .rank-item:nth-child(3) {
988
- border-color: #4f73aa;
989
- background: linear-gradient(120deg, #132644b8, #11223db8);
585
+ .final-cta h2 {
586
+ margin: 0;
587
+ font-family: "Sora", sans-serif;
588
+ font-size: clamp(26px, 3vw, 38px);
589
+ letter-spacing: -0.02em;
990
590
  }
991
591
 
992
- .rank-item:nth-child(1) {
993
- box-shadow: inset 0 0 0 1px #7da7eb3d;
592
+ .final-cta p {
593
+ margin: 10px auto 0;
594
+ max-width: 620px;
595
+ color: #c5d8f4;
994
596
  }
995
597
 
996
- .rank-item:nth-child(2) {
997
- box-shadow: inset 0 0 0 1px #6b94d83d;
598
+ .final-actions {
599
+ margin-top: 16px;
600
+ display: flex;
601
+ justify-content: center;
602
+ flex-wrap: wrap;
603
+ gap: 10px;
998
604
  }
999
605
 
1000
- .rank-item:nth-child(3) {
1001
- box-shadow: inset 0 0 0 1px #5a84c83d;
606
+ footer {
607
+ border-top: 1px solid #223653;
608
+ padding: 22px 0 30px;
609
+ color: #93a9c9;
610
+ font-size: 13px;
1002
611
  }
1003
612
 
1004
- .rank-user {
1005
- display: inline-flex;
613
+ .foot {
614
+ display: flex;
615
+ flex-wrap: wrap;
616
+ justify-content: space-between;
1006
617
  align-items: center;
1007
- gap: 10px;
1008
- flex: 1 1 auto;
1009
- min-width: 0;
1010
- max-width: 100%;
618
+ gap: 12px;
1011
619
  }
1012
620
 
1013
- .rank-avatar {
1014
- width: 34px;
1015
- height: 34px;
1016
- border-radius: 50%;
1017
- object-fit: cover;
1018
- border: 1px solid #40649a;
1019
- background: #14243f;
1020
- box-shadow: 0 0 0 2px #1b304f, 0 0 18px #5aa3ff35;
1021
- flex: 0 0 auto;
621
+ .foot-links {
622
+ display: flex;
623
+ flex-wrap: wrap;
624
+ gap: 8px;
1022
625
  }
1023
626
 
1024
- .rank-name {
1025
- color: #dce7f9;
1026
- font-weight: 700;
1027
- font-size: 14px;
1028
- max-width: 100%;
1029
- white-space: nowrap;
1030
- overflow: hidden;
1031
- text-overflow: ellipsis;
1032
- overflow-wrap: anywhere;
627
+ .foot a {
628
+ color: #9bc4f5;
629
+ text-decoration: none;
630
+ border: 1px solid #304b75;
631
+ border-radius: 10px;
632
+ padding: 7px 10px;
633
+ background: #101a2f;
1033
634
  }
1034
635
 
1035
- .rank-value {
1036
- color: #9fb0cc;
1037
- font-size: 13px;
1038
- text-align: right;
1039
- white-space: nowrap;
1040
- min-width: 0;
1041
- flex: 0 0 auto;
636
+ .nav-user-chip {
637
+ display: inline-flex;
638
+ align-items: center;
639
+ gap: 8px;
640
+ padding: 6px 10px 6px 6px;
641
+ max-width: 270px;
642
+ border-color: #3f5f8f;
643
+ background: linear-gradient(120deg, #132544d6, #10203ad6);
1042
644
  }
1043
645
 
1044
- .final-cta p { margin: 0; color: #c2d0e5; }
1045
-
1046
- .final-cta .btn.primary {
1047
- padding: 12px 18px;
1048
- font-size: 15px;
1049
- box-shadow: 0 12px 24px #22c55e3d;
646
+ .nav-user-avatar-bubble {
647
+ display: inline-flex;
648
+ width: 30px;
649
+ height: 30px;
650
+ border-radius: 999px;
651
+ border: 1px solid #4a6fa4;
652
+ background: #132340;
653
+ box-shadow: 0 0 0 2px #1a2e4b, 0 0 16px #6aaaf236;
654
+ overflow: hidden;
655
+ flex: 0 0 auto;
1050
656
  }
1051
657
 
1052
- footer {
1053
- border-top: 1px solid #243452;
1054
- padding: 24px 0 30px;
1055
- color: #8fa6c7;
1056
- font-size: 14px;
1057
- }
658
+ .nav-user-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
1058
659
 
1059
- .foot-grid {
1060
- display: grid;
1061
- grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
1062
- gap: 14px;
660
+ .nav-user-name-bubble {
661
+ display: inline-flex;
662
+ align-items: center;
663
+ gap: 6px;
664
+ min-width: 0;
665
+ padding: 4px 8px;
666
+ border-radius: 999px;
667
+ border: 1px solid #34547f;
668
+ background: #12213ac9;
1063
669
  }
1064
670
 
1065
- .foot-col h4 {
1066
- margin: 0 0 8px;
1067
- color: #d3dff2;
1068
- font-size: 14px;
1069
- font-weight: 700;
1070
- }
671
+ .nav-user-icon { font-size: 12px; color: #9bc6f5; flex: 0 0 auto; }
1071
672
 
1072
- .foot-col a {
1073
- display: block;
1074
- color: #93abcb;
1075
- text-decoration: none;
1076
- margin: 4px 0;
673
+ .nav-user-name {
674
+ font-size: 12px;
675
+ font-weight: 700;
676
+ color: #dbe8fb;
677
+ white-space: nowrap;
678
+ overflow: hidden;
679
+ text-overflow: ellipsis;
1077
680
  }
1078
681
 
1079
- .foot-col a:hover { color: #d3e3fb; }
1080
-
1081
682
  .wpp-float {
1082
683
  position: fixed;
1083
- right: 18px;
1084
- bottom: 18px;
1085
- width: 58px;
1086
- height: 58px;
684
+ right: 16px;
685
+ bottom: 16px;
686
+ width: 56px;
687
+ height: 56px;
1087
688
  border-radius: 999px;
1088
689
  border: 1px solid #2fb86f;
1089
690
  background: linear-gradient(135deg, #25d366, #1ea952);
@@ -1094,97 +695,46 @@
1094
695
  box-shadow: 0 10px 25px #25d3664d;
1095
696
  text-decoration: none;
1096
697
  z-index: 30;
1097
- font-size: 27px;
698
+ font-size: 28px;
1098
699
  line-height: 1;
1099
700
  transition: transform .2s ease, box-shadow .2s ease;
1100
701
  }
1101
702
 
1102
- .wpp-float i {
1103
- font-size: 30px;
1104
- }
1105
-
1106
703
  .wpp-float:hover {
1107
704
  transform: translateY(-2px);
1108
705
  box-shadow: 0 14px 30px #25d36666;
1109
706
  }
1110
707
 
1111
- @media (max-width: 520px) {
1112
- .rank-item {
1113
- flex-direction: column;
1114
- align-items: stretch;
1115
- gap: 6px;
1116
- }
1117
-
1118
- .rank-user {
1119
- max-width: 100%;
1120
- }
1121
-
1122
- .rank-name {
1123
- white-space: normal;
1124
- display: -webkit-box;
1125
- -webkit-line-clamp: 2;
1126
- -webkit-box-orient: vertical;
1127
- }
1128
-
1129
- .rank-value {
1130
- white-space: normal;
1131
- text-align: left;
1132
- padding-left: 44px;
1133
- }
1134
-
1135
- .hero-banner {
1136
- max-height: 140px;
708
+ @media (max-width: 920px) {
709
+ .hero {
710
+ grid-template-columns: 1fr;
711
+ gap: 18px;
1137
712
  }
1138
713
 
1139
- .wpp-float {
1140
- width: 54px;
1141
- height: 54px;
1142
- right: 14px;
1143
- bottom: 14px;
1144
- font-size: 25px;
714
+ .top-inner {
715
+ flex-direction: column;
716
+ align-items: stretch;
1145
717
  }
1146
718
 
1147
- .wpp-float i {
1148
- font-size: 27px;
719
+ .top-head {
720
+ display: flex;
721
+ justify-content: space-between;
722
+ align-items: center;
1149
723
  }
1150
- }
1151
724
 
1152
- @keyframes pulse-status {
1153
- 0% {
1154
- transform: scale(1);
1155
- opacity: 1;
1156
- }
1157
- 50% {
1158
- transform: scale(1.18);
1159
- opacity: 0.72;
1160
- }
1161
- 100% {
1162
- transform: scale(1);
1163
- opacity: 1;
1164
- }
1165
- }
725
+ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
1166
726
 
1167
- @keyframes skeleton-shimmer {
1168
- 0% {
1169
- background-position: 100% 0;
1170
- }
1171
- 100% {
1172
- background-position: -100% 0;
727
+ .nav {
728
+ display: none;
729
+ width: 100%;
730
+ grid-template-columns: 1fr;
731
+ gap: 8px;
1173
732
  }
1174
- }
1175
733
 
1176
- @keyframes rise {
1177
- from { opacity: 0; transform: translateY(6px); }
1178
- to { opacity: 1; transform: translateY(0); }
1179
- }
734
+ .nav.open { display: grid; }
1180
735
 
1181
- @media (prefers-reduced-motion: reduce) {
1182
- * {
1183
- animation-duration: 0.01ms !important;
1184
- animation-iteration-count: 1 !important;
1185
- transition-duration: 0.01ms !important;
1186
- scroll-behavior: auto !important;
1187
- }
736
+ .btn { width: 100%; }
737
+ .proof-grid { grid-template-columns: 1fr; }
1188
738
  }
1189
739
  </style>
1190
740
  </head>
@@ -1192,283 +742,269 @@
1192
742
  <header class="top">
1193
743
  <div class="container top-inner">
1194
744
  <div class="top-head">
1195
- <div class="brand">
1196
- <img
1197
- class="brand-logo"
1198
- src="/assets/images/brand-logo-128.webp"
1199
- alt="OmniZap"
1200
- loading="eager"
1201
- width="30"
1202
- height="30"
1203
- decoding="async"
1204
- />
1205
- <span>OmniZap System</span>
1206
- </div>
1207
- <button
1208
- id="nav-toggle"
1209
- class="nav-toggle"
1210
- type="button"
1211
- aria-expanded="false"
1212
- aria-controls="main-nav"
1213
- aria-label="Abrir menu"
1214
- >☰</button>
745
+ <a class="brand" href="/" aria-label="OmniZap Home">
746
+ <img src="/assets/images/brand-logo-128.webp" alt="OmniZap" width="30" height="30" decoding="async" />
747
+ <span>OmniZap Bot</span>
748
+ </a>
749
+ <button id="nav-toggle" class="nav-toggle" type="button" aria-expanded="false" aria-controls="main-nav" aria-label="Abrir menu">☰</button>
1215
750
  </div>
1216
- <nav id="main-nav" class="nav">
1217
- <a id="nav-scheduler-link" class="btn" href="/api-docs/"><i class="fa-solid fa-code icon-inline" aria-hidden="true"></i>API</a>
1218
- <a id="nav-auth-link" class="btn" href="/login/"><i class="fa-solid fa-right-to-bracket icon-inline" aria-hidden="true"></i>Login</a>
1219
- <a class="btn" href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener"><i class="fa-brands fa-github icon-inline" aria-hidden="true"></i>GitHub</a>
751
+
752
+ <nav id="main-nav" class="nav" aria-label="Navegação principal">
753
+ <a class="btn" href="#como-funciona">Como funciona</a>
754
+ <a class="btn" href="#recursos">Recursos</a>
755
+ <a class="btn" href="#comandos">Comandos</a>
756
+ <a class="btn" href="#para-quem">Para quem</a>
757
+ <a class="btn" href="/stickers/">Stickers</a>
758
+ <a class="btn" href="#guias">Guias</a>
759
+ <a class="btn" href="#faq">FAQ</a>
760
+ <a id="nav-scheduler-link" class="btn" href="#beneficios">Benefícios</a>
761
+ <a id="nav-auth-link" class="btn" href="/login/"><i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i>Entrar</a>
1220
762
  </nav>
1221
763
  </div>
1222
764
  </header>
1223
765
 
1224
766
  <main class="container">
1225
- <section class="hero">
1226
- <picture class="hero-banner-frame">
1227
- <source
1228
- type="image/webp"
1229
- srcset="/assets/images/hero-banner-720.webp 720w, /assets/images/hero-banner-1280.webp 1280w"
1230
- sizes="(max-width: 860px) 92vw, 1150px"
1231
- />
1232
- <img
1233
- class="hero-banner"
1234
- src="/assets/images/hero-banner-720.webp"
1235
- srcset="/assets/images/hero-banner-720.webp 720w, /assets/images/hero-banner-1280.webp 1280w"
1236
- sizes="(max-width: 860px) 92vw, 1150px"
1237
- alt="Banner OmniZap System"
1238
- width="1280"
1239
- height="544"
1240
- loading="eager"
1241
- fetchpriority="high"
1242
- decoding="async"
1243
- />
1244
- </picture>
1245
- <span class="eyebrow">Plataforma Open Source de Automação WhatsApp</span>
1246
- <h1>Infraestrutura completa para bots, automação e gestão de WhatsApp em escala.</h1>
1247
- <p class="lead">Foco em API, observabilidade, gestão de grupos, mídia, comandos automatizados e arquitetura pronta para produção.</p>
1248
- <div class="hero-cta">
1249
- <a class="btn primary" href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener"><i class="fa-brands fa-github icon-inline" aria-hidden="true"></i>Ver no GitHub</a>
1250
- <a class="btn" href="/api-docs/"><i class="fa-solid fa-book icon-inline" aria-hidden="true"></i>Documentação da API</a>
1251
- <a id="hero-login-cta" class="btn" href="/login/"><i class="fa-solid fa-right-to-bracket icon-inline" aria-hidden="true"></i>Login</a>
1252
- <a class="btn" href="/stickers/"><i class="fa-solid fa-icons icon-inline" aria-hidden="true"></i>Ir para Stickers</a>
1253
- <a class="btn" href="#infra-arquitetura"><i class="fa-solid fa-diagram-project icon-inline" aria-hidden="true"></i>Ver Arquitetura</a>
767
+ <section class="hero" aria-labelledby="hero-title">
768
+ <div>
769
+ <span class="eyebrow">Bot pronto para grupos WhatsApp</span>
770
+ <h1 id="hero-title">Adicione o bot ao seu grupo e deixe ele fazer o resto.</h1>
771
+ <p>Automação automática, organização de mensagens e recursos inteligentes prontos para usar. Sem configuração técnica. Sem programação. Sem complicação.</p>
772
+
773
+ <div class="hero-cta">
774
+ <a class="btn primary" data-add-bot-cta href="/login/"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i>Adicionar ao Meu Grupo</a>
775
+ <a class="btn secondary" href="#recursos"><i class="fa-solid fa-sparkles" aria-hidden="true"></i>Ver Recursos</a>
776
+ <a id="hero-login-cta" class="btn" href="/login/"><i class="fa-solid fa-user" aria-hidden="true"></i>Entrar</a>
777
+ </div>
778
+
779
+ <div class="proof-grid" aria-label="Prova social">
780
+ <article class="proof">
781
+ <strong id="proof-packs">--</strong>
782
+ <span>rotinas e respostas prontas</span>
783
+ </article>
784
+ <article class="proof">
785
+ <strong id="proof-stickers">--</strong>
786
+ <span>stickers disponíveis</span>
787
+ </article>
788
+ <article class="proof">
789
+ <strong id="proof-groups">--</strong>
790
+ <span>grupos ativos com o bot</span>
791
+ </article>
792
+ </div>
1254
793
  </div>
1255
- <section class="hero-proof">
1256
- <article class="proof-card">
1257
- <span id="proof-packs" class="proof-value">--</span>
1258
- <span class="proof-label">packs no módulo stickers</span>
794
+
795
+ <aside class="mockup" aria-label="Exemplo de conversa com bot no grupo">
796
+ <div class="mockup-head">
797
+ <span>Comunidade OmniZap</span>
798
+ <span id="proof-status">bot online</span>
799
+ </div>
800
+ <div class="chat">
801
+ <div class="msg user">Pessoal, os links estão bagunçando o grupo 😅</div>
802
+ <div class="msg bot">✅ Pronto! Ativei moderação automática. Links suspeitos agora são bloqueados.</div>
803
+ <div class="msg user">Consegue mandar aviso de reunião amanhã às 9h?</div>
804
+ <div class="msg bot">📣 Aviso agendado para todo o grupo. Também vou lembrar 15 minutos antes.</div>
805
+ <div class="msg user">Top! E os comandos?</div>
806
+ <div class="msg bot">🤖 Já estão ativos. Digite /menu e veja mais de 50 comandos no seu grupo.</div>
807
+ </div>
808
+ </aside>
809
+ </section>
810
+
811
+ <section id="como-funciona" class="section" aria-labelledby="como-funciona-title">
812
+ <h2 id="como-funciona-title">Como funciona</h2>
813
+ <p class="lead">Ultra simples: três passos e o grupo já começa a rodar com automação.</p>
814
+ <div class="steps">
815
+ <article class="card">
816
+ <h3><span>1️⃣</span> Clique em adicionar</h3>
817
+ <p>Toque no botão e abra a conversa com o bot no WhatsApp.</p>
818
+ </article>
819
+ <article class="card">
820
+ <h3><span>2️⃣</span> Autorize no grupo</h3>
821
+ <p>Adicione o OmniZap no grupo ou comunidade em poucos toques.</p>
822
+ </article>
823
+ <article class="card">
824
+ <h3><span>3️⃣</span> Pronto. Já funciona</h3>
825
+ <p>Moderação, avisos e respostas automáticas começam imediatamente.</p>
1259
826
  </article>
1260
- <article class="proof-card">
1261
- <span id="proof-stickers" class="proof-value">--</span>
1262
- <span class="proof-label">stickers indexados</span>
827
+ </div>
828
+ </section>
829
+
830
+ <section id="recursos" class="section" aria-labelledby="recursos-title">
831
+ <h2 id="recursos-title">O que o bot faz por você</h2>
832
+ <p class="lead">Tudo focado em resultado no grupo, sem linguagem técnica.</p>
833
+ <div class="features">
834
+ <article class="card">
835
+ <h3>🤖 Responde automaticamente</h3>
836
+ <p>Respostas rápidas para dúvidas repetidas e comandos prontos para o dia a dia.</p>
1263
837
  </article>
1264
- <article class="proof-card">
1265
- <span id="proof-downloads" class="proof-value">--</span>
1266
- <span class="proof-label">aberturas do catálogo</span>
838
+ <article class="card">
839
+ <h3>📌 Organiza o grupo</h3>
840
+ <p>Ajuda a manter conversas úteis e reduz o caos de mensagens perdidas.</p>
1267
841
  </article>
1268
- <article class="proof-card">
1269
- <span id="proof-users" class="proof-value">--</span>
1270
- <span class="proof-label">usuários monitorados</span>
842
+ <article class="card">
843
+ <h3>🛑 Moderação inteligente</h3>
844
+ <p>Bloqueia spam e comportamentos problemáticos para proteger sua comunidade.</p>
1271
845
  </article>
1272
- <article class="proof-card">
1273
- <span id="proof-groups" class="proof-value">--</span>
1274
- <span class="proof-label">grupos monitorados</span>
846
+ <article class="card">
847
+ <h3>📣 Envia avisos automáticos</h3>
848
+ <p>Agenda recados e lembretes para que ninguém perca informações importantes.</p>
1275
849
  </article>
1276
- <article class="proof-card">
1277
- <span id="proof-system" class="proof-value">--</span>
1278
- <span class="proof-label">status do sistema</span>
850
+ <article class="card">
851
+ <h3>🎉 Recursos extras integrados</h3>
852
+ <p>Stickers, interações e utilidades prontas para aumentar o engajamento do grupo.</p>
1279
853
  </article>
1280
- </section>
1281
- </section>
1282
-
1283
- <h2 class="section-title"><i class="fa-solid fa-circle-info icon-inline" aria-hidden="true"></i>Sobre o Sistema</h2>
1284
- <section class="grid">
1285
- <article class="card">
1286
- <h3><i class="fa-solid fa-circle-info icon-inline" aria-hidden="true"></i>Visão Geral</h3>
1287
- <p>O OmniZap é uma plataforma open source para operação de bots e automações WhatsApp com base técnica orientada a produção.</p>
1288
- </article>
1289
- <article class="card">
1290
- <h3><i class="fa-solid fa-users-gear icon-inline" aria-hidden="true"></i>Para Quem É</h3>
1291
- <p>Projetado para devs, equipes de produto, empresas e operadores SaaS que precisam de automação confiável em alto volume.</p>
1292
- </article>
1293
- <article class="card">
1294
- <h3><i class="fa-solid fa-microchip icon-inline" aria-hidden="true"></i>Diferencial Técnico</h3>
1295
- <p>Camadas de observabilidade, fila de escrita, reconciliação LID/JID e serviços modulares para reduzir risco operacional.</p>
1296
- </article>
1297
- <article class="card">
1298
- <h3><i class="fa-solid fa-cubes-stacked icon-inline" aria-hidden="true"></i>Estrutura Modular</h3>
1299
- <p>Domínios de comando isolados por módulos, facilitando manutenção, evolução incremental e integração com novos recursos.</p>
1300
- </article>
1301
- </section>
1302
-
1303
- <h2 id="infra-arquitetura" class="section-title"><i class="fa-solid fa-sitemap icon-inline" aria-hidden="true"></i>Infraestrutura e Arquitetura</h2>
1304
- <section class="grid">
1305
- <article class="card">
1306
- <h3><i class="fa-solid fa-server icon-inline" aria-hidden="true"></i>Camada de Execução</h3>
1307
- <p>Node.js com Baileys para conexão com WhatsApp, controle de sessão, recuperação e reconexão resiliente.</p>
1308
- </article>
1309
- <article class="card">
1310
- <h3><i class="fa-solid fa-database icon-inline" aria-hidden="true"></i>Persistência</h3>
1311
- <p>MySQL com schema evolutivo, fila de escrita e proteção de consistência para chats, mensagens e metadados.</p>
1312
- </article>
1313
- <article class="card">
1314
- <h3><i class="fa-solid fa-layer-group icon-inline" aria-hidden="true"></i>Módulos de Domínio</h3>
1315
- <p>Administração de grupos, mídia, IA, stickers, ranking e utilitários operam como blocos independentes.</p>
1316
- </article>
1317
- <article class="card">
1318
- <h3><i class="fa-solid fa-shield-halved icon-inline" aria-hidden="true"></i>Operação em Produção</h3>
1319
- <p>Logs estruturados, limites de retry e fluxo de monitoramento para suportar crescimento com previsibilidade.</p>
1320
- </article>
1321
- </section>
1322
-
1323
- <h2 class="section-title"><i class="fa-solid fa-plug-circle-bolt icon-inline" aria-hidden="true"></i>API e Integrações</h2>
1324
- <section class="grid">
1325
- <article class="card">
1326
- <h3><i class="fa-solid fa-code-branch icon-inline" aria-hidden="true"></i>Endpoints Públicos</h3>
1327
- <p>APIs HTTP para catálogo, ranking, status do sistema e dados de descoberta consumíveis por frontends e integrações.</p>
1328
- </article>
1329
- <article class="card">
1330
- <h3><i class="fa-solid fa-link icon-inline" aria-hidden="true"></i>Integração com Serviços</h3>
1331
- <p>Fluxos preparados para conectar monitoramento, pipelines de conteúdo, serviços de IA e rotinas externas.</p>
1332
- </article>
1333
- <article class="card">
1334
- <h3><i class="fa-solid fa-key icon-inline" aria-hidden="true"></i>Governança de Acesso</h3>
1335
- <p>Rotas técnicas e documentação organizada para facilitar controle de consumo e expansão por ambiente.</p>
1336
- </article>
1337
- <article class="card">
1338
- <h3><i class="fa-solid fa-gear icon-inline" aria-hidden="true"></i>Pronto para SaaS</h3>
1339
- <p>Base adequada para produtos multi-módulo com evolução incremental sem reescrever o núcleo do sistema.</p>
1340
- </article>
1341
- </section>
1342
-
1343
- <h2 class="section-title"><i class="fa-solid fa-gauge-high icon-inline" aria-hidden="true"></i>Status e Telemetria do Sistema</h2>
1344
- <section class="hero-stats">
1345
- <div class="chip" id="metric-host-cpu">CPU host: carregando...</div>
1346
- <div class="chip" id="metric-host-memory">RAM host: carregando...</div>
1347
- <div class="chip" id="metric-process-uptime">Uptime processo: carregando...</div>
1348
- <div class="chip" id="metric-observability">Observabilidade: carregando...</div>
1349
- </section>
1350
-
1351
- <section class="rank-panel">
1352
- <h2 class="rank-title"><i class="fa-solid fa-ranking-star icon-inline" aria-hidden="true"></i>Painel de atividade recente</h2>
1353
- <p class="rank-meta" id="rank-summary">Carregando ranking global...</p>
1354
- <ul class="rank-list" id="rank-list">
1355
- <li class="rank-item"><span class="rank-name">Carregando...</span><span class="rank-value">--</span></li>
1356
- </ul>
854
+ </div>
1357
855
  </section>
1358
856
 
1359
- <h2 class="section-title"><i class="fa-solid fa-laptop-code icon-inline" aria-hidden="true"></i>Stack Tecnológica</h2>
1360
- <section class="grid">
1361
- <article class="card">
1362
- <h3><i class="fa-brands fa-node-js icon-inline" aria-hidden="true"></i>Node.js + Baileys</h3>
1363
- <p>Runtime principal de mensageria, orquestração de eventos e automações operacionais de WhatsApp.</p>
1364
- </article>
1365
- <article class="card">
1366
- <h3><i class="fa-solid fa-database icon-inline" aria-hidden="true"></i>MySQL + Migrations</h3>
1367
- <p>Persistência transacional com versionamento de schema para manter evolução segura do sistema.</p>
1368
- </article>
1369
- <article class="card">
1370
- <h3><i class="fa-solid fa-chart-column icon-inline" aria-hidden="true"></i>Observabilidade</h3>
1371
- <p>Métricas e endpoints operacionais compatíveis com Prometheus, Grafana e monitoramento de latência.</p>
1372
- </article>
1373
- <article class="card">
1374
- <h3><i class="fa-solid fa-layer-group icon-inline" aria-hidden="true"></i>Frontend Web</h3>
1375
- <p>Painéis web para catálogo, documentação e administração, consumindo os mesmos serviços de API.</p>
1376
- </article>
857
+ <section id="comandos" class="section" aria-labelledby="comandos-title">
858
+ <h2 id="comandos-title">⚡ Veja tudo que o bot pode fazer no seu grupo</h2>
859
+ <p class="lead">Comandos simples que resolvem tarefas reais do dia a dia.</p>
860
+ <div class="commands-grid">
861
+ <article class="command-card">
862
+ <h3>🛡️ Moderação</h3>
863
+ <ul class="command-list">
864
+ <li><code>/ban</code>Remove membros problemáticos</li>
865
+ <li><code>/captcha</code>Proteção contra bots</li>
866
+ <li><code>/setgroup</code>Ativa modo restrito</li>
867
+ <li><code>/welcome</code>Boas-vindas automáticas</li>
868
+ <li><code>/farewell</code>Aviso quando alguém sai</li>
869
+ </ul>
870
+ </article>
871
+ <article class="command-card">
872
+ <h3>🎨 Figurinhas</h3>
873
+ <ul class="command-list">
874
+ <li><code>/sticker</code>Cria figurinha</li>
875
+ <li><code>/stickertext</code>Figurinha com texto</li>
876
+ <li><code>/pack create</code>Cria pack de stickers</li>
877
+ <li><code>/pack send</code>Envia pack no grupo</li>
878
+ <li><code>/toimg</code>Converte figurinha em imagem</li>
879
+ </ul>
880
+ </article>
881
+ <article class="command-card">
882
+ <h3>🎮 Engajamento</h3>
883
+ <ul class="command-list">
884
+ <li><code>/ranking</code>Ranking do grupo</li>
885
+ <li><code>/rankingglobal</code>Ranking global</li>
886
+ <li><code>/dado</code>Jogo de dados</li>
887
+ <li><code>/quote</code>Cita mensagem com estilo</li>
888
+ <li><code>/user perfil</code>Resumo do perfil</li>
889
+ </ul>
890
+ </article>
891
+ <article class="command-card">
892
+ <h3>🎵 Mídia</h3>
893
+ <ul class="command-list">
894
+ <li><code>/play</code>Toca música</li>
895
+ <li><code>/playvid</code>Toca vídeo</li>
896
+ <li><code>/tiktok</code>Baixa vídeo do TikTok</li>
897
+ <li><code>/down</code>Faz download de mídia</li>
898
+ <li><code>/menu</code>Atalho para todos os comandos</li>
899
+ </ul>
900
+ </article>
901
+ <article class="command-card">
902
+ <h3>🤖 Utilidades inteligentes</h3>
903
+ <ul class="command-list">
904
+ <li><code>/menu ia</code>Recursos de IA</li>
905
+ <li><code>/autorequests</code>Respostas automáticas</li>
906
+ <li><code>/noticias</code>Notícias no grupo</li>
907
+ <li><code>/metadata</code>Informações técnicas</li>
908
+ <li><code>/ping</code>Status do bot</li>
909
+ </ul>
910
+ </article>
911
+ </div>
912
+ <div class="commands-actions">
913
+ <p>+ dezenas de outros comandos disponíveis para sua operação.</p>
914
+ <a class="btn secondary" href="/comandos/">Ver lista completa</a>
915
+ </div>
1377
916
  </section>
1378
917
 
1379
- <h2 class="section-title"><i class="fa-brands fa-github icon-inline" aria-hidden="true"></i>Projeto Open Source no GitHub</h2>
1380
- <section class="rank-panel github-spotlight">
1381
- <p class="rank-meta">Indicadores públicos do repositório: stars, forks, issues, releases e evolução contínua do projeto.</p>
1382
- <div
1383
- id="github-project-panel-root"
1384
- data-owner="kaikybrofc"
1385
- data-repo="omnizap-system"
1386
- data-endpoint="/api/sticker-packs/project-summary"
1387
- ></div>
918
+ <section id="para-quem" class="section" aria-labelledby="para-quem-title">
919
+ <h2 id="para-quem-title">Para quem é</h2>
920
+ <p class="lead">Se você administra pessoas em grupo, o OmniZap foi feito para você.</p>
921
+ <div class="audience">
922
+ <article class="card"><h3>👥 Donos de comunidade</h3><p>Mantenha regras e organização sem esforço manual constante.</p></article>
923
+ <article class="card"><h3>🎬 Criadores de conteúdo</h3><p>Gerencie audiência e comunicados com mais consistência.</p></article>
924
+ <article class="card"><h3>📚 Grupos de estudo</h3><p>Centralize avisos e reduza distrações para manter foco.</p></article>
925
+ <article class="card"><h3>🛍️ Lojas online</h3><p>Automatize atendimento inicial e mensagens recorrentes.</p></article>
926
+ <article class="card"><h3>🏢 Equipes internas</h3><p>Padronize comunicação e acompanhe rotinas com agilidade.</p></article>
927
+ </div>
1388
928
  </section>
1389
929
 
1390
- <h2 class="section-title"><i class="fa-solid fa-code icon-inline" aria-hidden="true"></i>Bloco Técnico</h2>
1391
- <section class="api">
1392
- <div class="api-head"><i class="fa-solid fa-flask-vial icon-inline" aria-hidden="true"></i>Referência rápida de integração</div>
1393
- <pre><code># Autenticação (exemplo via header)
1394
- Authorization: Bearer &lt;token-de-acesso&gt;
1395
-
1396
- # Health check da API
1397
- GET /api/sticker-packs?limit=1
1398
-
1399
- # Endpoints úteis
1400
- GET /api/sticker-packs?visibility=public&limit=24&offset=0
1401
- GET /api/sticker-packs/global-ranking-summary
1402
- GET /api/sticker-packs/system-summary
1403
- GET /api/sticker-packs/orphan-stickers?limit=120&offset=0
1404
- GET /api/sticker-packs/:packKey
1405
- GET /data/stickers/:owner/:file.webp
1406
-
1407
- # Consumo via curl
1408
- curl -sS https://omnizap.shop/api/sticker-packs/system-summary | jq</code></pre>
930
+ <section id="beneficios" class="section" aria-labelledby="beneficios-title">
931
+ <h2 id="beneficios-title">Benefícios imediatos</h2>
932
+ <p class="lead">Você adiciona. Ele organiza.</p>
933
+ <div class="benefits">
934
+ <article class="benefit-item">✅ Economiza tempo da equipe</article>
935
+ <article class="benefit-item">✅ Evita spam e bagunça</article>
936
+ <article class="benefit-item">✅ Mantém o grupo organizado</article>
937
+ <article class="benefit-item">✅ Deixa sua comunidade mais profissional</article>
938
+ </div>
1409
939
  </section>
1410
940
 
1411
- <h2 class="section-title"><i class="fa-solid fa-icons icon-inline" aria-hidden="true"></i>Módulo de Catálogo e Stickers</h2>
1412
- <section class="market-preview">
1413
- <div class="market-preview-head">
1414
- <h2 class="market-preview-title"><i class="fa-solid fa-fire icon-inline" aria-hidden="true"></i>Packs em destaque do módulo stickers</h2>
1415
- <span id="hero-preview-status" class="market-preview-status">Carregando dados do módulo...</span>
941
+ <section id="guias" class="section" aria-labelledby="guias-title">
942
+ <h2 id="guias-title">Guias rápidos para seu grupo crescer organizado</h2>
943
+ <p class="lead">Conteúdo satélite para resolver dores reais de operação e reforçar sua estratégia de comunidade.</p>
944
+ <div class="guides-grid">
945
+ <a class="guide-link" href="/bot-whatsapp-para-grupo/">Bot para grupo de WhatsApp<span>Guia de entrada rápida</span></a>
946
+ <a class="guide-link" href="/como-moderar-grupo-whatsapp/">Como moderar grupo no WhatsApp<span>Fluxo prático sem sobrecarga</span></a>
947
+ <a class="guide-link" href="/como-evitar-spam-no-whatsapp/">Como evitar spam no WhatsApp<span>Proteja o grupo com menos esforço</span></a>
948
+ <a class="guide-link" href="/como-organizar-comunidade-whatsapp/">Como organizar comunidade no WhatsApp<span>Estrutura para escala com qualidade</span></a>
949
+ <a class="guide-link" href="/como-automatizar-avisos-no-whatsapp/">Como automatizar avisos no WhatsApp<span>Recados certos no momento certo</span></a>
950
+ <a class="guide-link" href="/como-criar-comandos-whatsapp/">Como criar comandos no WhatsApp<span>Padronize respostas e rotinas</span></a>
951
+ <a class="guide-link" href="/melhor-bot-whatsapp-para-grupos/">Melhor bot para grupos<span>Comparativo orientado a resultado</span></a>
952
+ <a class="guide-link" href="/bot-whatsapp-sem-programar/">Bot para WhatsApp sem programar<span>Automação sem setup técnico</span></a>
1416
953
  </div>
1417
- <div id="hero-pack-preview" class="market-preview-grid"></div>
1418
954
  </section>
1419
955
 
1420
- <section class="grid">
1421
- <article class="card">
1422
- <h3><i class="fa-solid fa-puzzle-piece icon-inline" aria-hidden="true"></i>Módulo Secundário</h3>
1423
- <p>O catálogo de stickers é um recurso da plataforma, integrado ao núcleo de API e operação do OmniZap.</p>
1424
- </article>
1425
- <article class="card">
1426
- <h3><i class="fa-solid fa-globe icon-inline" aria-hidden="true"></i>Packs Públicos</h3>
1427
- <p>Listagem com busca e ordenação para navegar por coleções compartilhadas e abrir detalhes de cada pack.</p>
1428
- </article>
1429
- <article class="card">
1430
- <h3><i class="fa-solid fa-share-nodes icon-inline" aria-hidden="true"></i>Compartilhamento Direto</h3>
1431
- <p>Cada pack possui link dedicado para distribuição rápida no WhatsApp e integração com fluxos de comunidade.</p>
1432
- </article>
1433
- <article class="card">
1434
- <h3><i class="fa-solid fa-box-open icon-inline" aria-hidden="true"></i>Curadoria Operacional</h3>
1435
- <p>Área para organizar figurinhas sem pack, manter qualidade do acervo e apoiar fluxos de conteúdo do bot.</p>
1436
- </article>
956
+ <section id="faq" class="section" aria-labelledby="faq-title">
957
+ <h2 id="faq-title">Perguntas frequentes</h2>
958
+ <p class="lead">Tudo que você precisa para começar sem complicação.</p>
959
+ <div class="faq-list">
960
+ <details class="faq-item">
961
+ <summary>Preciso configurar algo técnico para usar o OmniZap?</summary>
962
+ <p>Não. Você adiciona o bot ao grupo, autoriza e ele já começa a funcionar com recursos automáticos.</p>
963
+ </details>
964
+ <details class="faq-item">
965
+ <summary>Em quanto tempo o bot começa a funcionar?</summary>
966
+ <p>Normalmente em menos de 1 minuto após a adição e autorização no grupo.</p>
967
+ </details>
968
+ <details class="faq-item">
969
+ <summary>O OmniZap funciona para grupos e comunidades?</summary>
970
+ <p>Sim. O OmniZap foi criado para facilitar moderação, avisos e organização em grupos e comunidades no WhatsApp.</p>
971
+ </details>
972
+ <details class="faq-item">
973
+ <summary>Posso usar stickers junto com o bot?</summary>
974
+ <p>Sim. Os stickers fazem parte do ecossistema OmniZap e podem ser usados como recurso extra para engajamento. Veja o catálogo em <a href="/stickers/">/stickers/</a>.</p>
975
+ </details>
976
+ <details class="faq-item">
977
+ <summary>Preciso entender API para começar?</summary>
978
+ <p>Não para uso comum. A área de API existe para integrações avançadas e pode ser acessada em <a href="/api-docs/">/api-docs/</a>.</p>
979
+ </details>
980
+ <details class="faq-item">
981
+ <summary>Quantos comandos o OmniZap possui?</summary>
982
+ <p>Você pode acessar mais de 50 comandos ativos no seu grupo digitando <strong>/menu</strong> ou consultando a página <a href="/comandos/">/comandos/</a>.</p>
983
+ </details>
984
+ </div>
1437
985
  </section>
1438
986
 
1439
- <section class="final-cta">
1440
- <p><strong>Pronto para produção.</strong><br />Acesse o repositório, consulte a API e implemente o OmniZap na sua stack de automação.</p>
1441
- <a class="btn primary" href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener"><i class="fa-brands fa-github icon-inline" aria-hidden="true"></i>Iniciar no GitHub</a>
987
+ <section class="final-cta" aria-labelledby="cta-final-title">
988
+ <h2 id="cta-final-title">Seu grupo mais organizado em menos de 1 minuto.</h2>
989
+ <p>Sem setup técnico. Sem curva de aprendizado. Clique e comece agora.</p>
990
+ <div class="final-actions">
991
+ <a class="btn primary" data-add-bot-cta href="/login/"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i>Adicionar Bot Agora</a>
992
+ <a id="final-login-cta" class="btn" href="/login/"><i class="fa-solid fa-user" aria-hidden="true"></i>Entrar</a>
993
+ </div>
1442
994
  </section>
1443
995
  </main>
1444
996
 
1445
997
  <footer>
1446
- <div class="container foot-grid">
1447
- <div class="foot-col">
1448
- <h4><i class="fa-solid fa-cube icon-inline" aria-hidden="true"></i>Produto</h4>
1449
- <a href="/"><i class="fa-solid fa-house icon-inline" aria-hidden="true"></i>Home</a>
1450
- <a href="/login/"><i class="fa-solid fa-right-to-bracket icon-inline" aria-hidden="true"></i>Login</a>
1451
- <a href="/stickers/"><i class="fa-solid fa-icons icon-inline" aria-hidden="true"></i>Stickers</a>
1452
- <a href="/stickers/create/"><i class="fa-solid fa-plus icon-inline" aria-hidden="true"></i>Criar Pack</a>
1453
- <a href="/api-docs/"><i class="fa-solid fa-book icon-inline" aria-hidden="true"></i>API Docs</a>
1454
- <a href="/termos-de-uso/"><i class="fa-solid fa-file-contract icon-inline" aria-hidden="true"></i>Termos de Uso</a>
1455
- <a href="/licenca/"><i class="fa-solid fa-scale-balanced icon-inline" aria-hidden="true"></i>Licença</a>
1456
- </div>
1457
- <div class="foot-col">
1458
- <h4><i class="fa-solid fa-diagram-project icon-inline" aria-hidden="true"></i>Projeto</h4>
1459
- <a href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener"><i class="fa-brands fa-github icon-inline" aria-hidden="true"></i>GitHub</a>
1460
- <a href="/api/sticker-packs?limit=1"><i class="fa-solid fa-heart-pulse icon-inline" aria-hidden="true"></i>Health API</a>
1461
- </div>
1462
- <div class="foot-col">
1463
- <h4><i class="fa-solid fa-server icon-inline" aria-hidden="true"></i>Stack</h4>
1464
- <a href="#"><i class="fa-brands fa-node-js icon-inline" aria-hidden="true"></i>Node.js</a>
1465
- <a href="#"><i class="fa-solid fa-database icon-inline" aria-hidden="true"></i>MySQL</a>
1466
- <a href="#"><i class="fa-solid fa-chart-column icon-inline" aria-hidden="true"></i>Prometheus/Grafana</a>
1467
- </div>
1468
- <div class="foot-col">
1469
- <h4><i class="fa-solid fa-robot icon-inline" aria-hidden="true"></i>OmniZap</h4>
1470
- <div>OmniZap System - 2026</div>
1471
- </div>
998
+ <div class="container foot">
999
+ <div>OmniZap System 2026 · Bot pronto para grupos WhatsApp</div>
1000
+ <nav class="foot-links" aria-label="Links de rodapé">
1001
+ <a href="/termos-de-uso/">Termos</a>
1002
+ <a href="/licenca/">Licença</a>
1003
+ <a href="/stickers/">Stickers</a>
1004
+ <a href="/comandos/">Comandos</a>
1005
+ <a href="/api-docs/">Para desenvolvedores</a>
1006
+ <a href="https://github.com/Kaikygr/omnizap-system" target="_blank" rel="noreferrer noopener">Open Source</a>
1007
+ </nav>
1472
1008
  </div>
1473
1009
  </footer>
1474
1010
 
@@ -1478,27 +1014,11 @@ curl -sS https://omnizap.shop/api/sticker-packs/system-summary | jq</code></pre>
1478
1014
  href="#"
1479
1015
  target="_blank"
1480
1016
  rel="noreferrer noopener"
1481
- aria-label="Falar com o bot no WhatsApp"
1482
- title="Falar com o bot"
1017
+ aria-label="Adicionar bot no WhatsApp"
1018
+ title="Adicionar bot"
1483
1019
  hidden
1484
1020
  ><i class="fa-brands fa-whatsapp" aria-hidden="true"></i></a>
1485
1021
 
1486
- <script type="module" src="/js/apps/homeApp.js?v=20260228-perf-lcp1"></script>
1487
- <script type="module">
1488
- const loadGithubPanel = () =>
1489
- import('/js/github-panel/index.js?v=20260228-perf-lcp1').catch(() => {});
1490
-
1491
- if (typeof window.requestIdleCallback === 'function') {
1492
- window.requestIdleCallback(() => {
1493
- void loadGithubPanel();
1494
- }, { timeout: 4000 });
1495
- } else {
1496
- window.addEventListener('load', () => {
1497
- window.setTimeout(() => {
1498
- void loadGithubPanel();
1499
- }, 900);
1500
- }, { once: true });
1501
- }
1502
- </script>
1022
+ <script type="module" src="/js/apps/homeApp.js?v=20260228-home-ready-bot-v1"></script>
1503
1023
  </body>
1504
1024
  </html>