@jaimevalasek/aioson 1.5.1 → 1.6.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 (131) hide show
  1. package/README.md +6 -0
  2. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  3. package/docs/design-previews/aurora-command-ui.html +682 -0
  4. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  5. package/docs/design-previews/bold-editorial-ui.html +717 -0
  6. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  7. package/docs/design-previews/clean-saas-ui.html +549 -0
  8. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  9. package/docs/design-previews/cognitive-core-ui.html +463 -0
  10. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  11. package/docs/design-previews/glassmorphism-ui.html +886 -0
  12. package/docs/design-previews/index.html +699 -0
  13. package/docs/design-previews/interface-design-website.html +1187 -0
  14. package/docs/design-previews/interface-design.html +513 -0
  15. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  16. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  17. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  18. package/docs/design-previews/premium-command-center-ui.html +552 -0
  19. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  20. package/docs/design-previews/warm-craft-ui.html +739 -0
  21. package/docs/en/cli-reference.md +20 -9
  22. package/docs/pt/README.md +7 -0
  23. package/docs/pt/agent-sharding.md +132 -0
  24. package/docs/pt/agentes.md +8 -2
  25. package/docs/pt/busca-de-contexto.md +129 -0
  26. package/docs/pt/cache-de-contexto.md +156 -0
  27. package/docs/pt/comandos-cli.md +28 -0
  28. package/docs/pt/design-hybrid-forge.md +107 -0
  29. package/docs/pt/inicio-rapido.md +54 -3
  30. package/docs/pt/inteligencia-adaptativa.md +324 -0
  31. package/docs/pt/monitor-de-contexto.md +104 -0
  32. package/docs/pt/recuperacao-de-sessao.md +125 -0
  33. package/docs/pt/sandbox.md +125 -0
  34. package/docs/pt/skills.md +98 -6
  35. package/package.json +1 -1
  36. package/src/agent-loader.js +280 -0
  37. package/src/cli.js +94 -0
  38. package/src/commands/agent-loader.js +85 -0
  39. package/src/commands/context-cache.js +90 -0
  40. package/src/commands/context-monitor.js +92 -0
  41. package/src/commands/context-search.js +66 -0
  42. package/src/commands/design-hybrid-options.js +385 -0
  43. package/src/commands/health.js +214 -0
  44. package/src/commands/init.js +54 -13
  45. package/src/commands/install.js +52 -13
  46. package/src/commands/learning-evolve.js +355 -0
  47. package/src/commands/live.js +34 -0
  48. package/src/commands/recovery.js +43 -0
  49. package/src/commands/sandbox.js +37 -0
  50. package/src/commands/setup-context.js +22 -2
  51. package/src/commands/setup.js +178 -0
  52. package/src/commands/skill.js +79 -32
  53. package/src/commands/tool-registry-cmd.js +232 -0
  54. package/src/commands/update.js +7 -0
  55. package/src/constants.js +9 -0
  56. package/src/context-cache.js +159 -0
  57. package/src/context-search.js +326 -0
  58. package/src/design-variation-catalog.js +503 -0
  59. package/src/i18n/messages/en.js +32 -2
  60. package/src/i18n/messages/es.js +30 -2
  61. package/src/i18n/messages/fr.js +30 -2
  62. package/src/i18n/messages/pt-BR.js +32 -2
  63. package/src/install-animation.js +260 -0
  64. package/src/install-profile.js +143 -0
  65. package/src/install-wizard.js +474 -0
  66. package/src/installer.js +38 -10
  67. package/src/parser.js +7 -1
  68. package/src/recovery-context-session.js +154 -0
  69. package/src/runtime-store.js +97 -1
  70. package/src/sandbox.js +177 -0
  71. package/src/tool-executor.js +94 -0
  72. package/src/updater.js +11 -3
  73. package/template/.aioson/agents/analyst.md +58 -3
  74. package/template/.aioson/agents/architect.md +38 -0
  75. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  76. package/template/.aioson/agents/dev.md +103 -0
  77. package/template/.aioson/agents/deyvin.md +57 -0
  78. package/template/.aioson/agents/pm.md +58 -0
  79. package/template/.aioson/agents/product.md +28 -0
  80. package/template/.aioson/agents/qa.md +79 -0
  81. package/template/.aioson/agents/setup.md +65 -3
  82. package/template/.aioson/agents/sheldon.md +107 -6
  83. package/template/.aioson/agents/tester.md +156 -0
  84. package/template/.aioson/config.md +15 -0
  85. package/template/.aioson/context/forensics/.gitkeep +0 -0
  86. package/template/.aioson/context/seeds/seed-example.md +27 -0
  87. package/template/.aioson/context/user-profile.md +42 -0
  88. package/template/.aioson/locales/en/agents/setup.md +33 -1
  89. package/template/.aioson/locales/es/agents/setup.md +33 -1
  90. package/template/.aioson/locales/fr/agents/setup.md +33 -1
  91. package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
  92. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  93. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  94. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  95. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  96. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  97. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  98. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  99. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  100. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  101. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  102. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  103. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  104. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  105. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  106. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  107. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  108. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  109. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  110. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  111. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  112. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  113. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  114. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  115. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  116. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  117. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  118. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  119. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  120. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  121. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  122. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  123. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  124. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  125. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  126. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  127. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  128. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  129. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  130. package/template/AGENTS.md +23 -1
  131. package/template/CLAUDE.md +1 -0
package/docs/design-previews/warm-craft-ui-website.html ADDED
@@ -0,0 +1,684 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>TEMPO — Productivity Landing / Warm Craft UI Preview</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #F8F6F3;
15
+ --surface: #FFFFFF;
16
+ --nav-bg: #FDFCFA;
17
+ --nav-border: #E8E5E0;
18
+ --accent: #E07A5F;
19
+ --accent-light: rgba(224, 122, 95, 0.10);
20
+ --accent-mid: rgba(224, 122, 95, 0.20);
21
+ --text-head: #2D3436;
22
+ --text-body: #4A5568;
23
+ --text-muted: #8896A6;
24
+ --warm-shadow: rgba(120, 80, 60, 0.08);
25
+ --warm-shadow-md: rgba(120, 80, 60, 0.12);
26
+ --strip-bg: #F3F1ED;
27
+ }
28
+
29
+ html { scroll-behavior: smooth; }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ background: var(--bg);
34
+ color: var(--text-body);
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ .container {
39
+ max-width: 1120px;
40
+ margin: 0 auto;
41
+ padding: 0 28px;
42
+ }
43
+
44
+ /* === NAV === */
45
+ nav {
46
+ background: var(--nav-bg);
47
+ border-bottom: 1px solid var(--nav-border);
48
+ position: sticky;
49
+ top: 0;
50
+ z-index: 100;
51
+ }
52
+ .nav-inner {
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: space-between;
56
+ height: 66px;
57
+ max-width: 1120px;
58
+ margin: 0 auto;
59
+ padding: 0 28px;
60
+ }
61
+ .logo {
62
+ font-family: 'Source Serif 4', Georgia, serif;
63
+ font-size: 1.5rem;
64
+ font-weight: 700;
65
+ color: var(--text-head);
66
+ letter-spacing: -0.02em;
67
+ }
68
+ .logo-dot {
69
+ color: var(--accent);
70
+ }
71
+ .nav-links {
72
+ display: flex;
73
+ gap: 34px;
74
+ list-style: none;
75
+ }
76
+ .nav-links a {
77
+ text-decoration: none;
78
+ color: var(--text-body);
79
+ font-size: 0.9rem;
80
+ font-weight: 500;
81
+ transition: color 0.2s;
82
+ }
83
+ .nav-links a:hover { color: var(--accent); }
84
+ .btn-accent {
85
+ background: var(--accent);
86
+ color: #fff;
87
+ border: none;
88
+ border-radius: 14px;
89
+ padding: 10px 22px;
90
+ font-size: 0.88rem;
91
+ font-weight: 600;
92
+ cursor: pointer;
93
+ font-family: 'Inter', sans-serif;
94
+ box-shadow: 0 4px 12px rgba(224,122,95,0.28);
95
+ transition: transform 0.15s, box-shadow 0.15s;
96
+ }
97
+ .btn-accent:hover {
98
+ transform: translateY(-1px);
99
+ box-shadow: 0 6px 18px rgba(224,122,95,0.36);
100
+ }
101
+ .btn-soft {
102
+ background: var(--surface);
103
+ color: var(--text-head);
104
+ border: 1.5px solid var(--nav-border);
105
+ border-radius: 14px;
106
+ padding: 10px 22px;
107
+ font-size: 0.88rem;
108
+ font-weight: 600;
109
+ cursor: pointer;
110
+ font-family: 'Inter', sans-serif;
111
+ box-shadow: 0 2px 8px var(--warm-shadow);
112
+ transition: border-color 0.2s, box-shadow 0.2s;
113
+ }
114
+ .btn-soft:hover {
115
+ border-color: var(--accent);
116
+ box-shadow: 0 2px 12px var(--warm-shadow-md);
117
+ }
118
+
119
+ /* === HERO === */
120
+ .hero {
121
+ padding: 100px 0 80px;
122
+ position: relative;
123
+ overflow: hidden;
124
+ text-align: center;
125
+ }
126
+ /* Subtle dot pattern */
127
+ .hero::before {
128
+ content: '';
129
+ position: absolute;
130
+ inset: 0;
131
+ background-image: radial-gradient(circle, rgba(120,80,60,0.07) 1.5px, transparent 1.5px);
132
+ background-size: 28px 28px;
133
+ pointer-events: none;
134
+ z-index: 0;
135
+ }
136
+ .hero-content { position: relative; z-index: 1; }
137
+ .hero-badge {
138
+ display: inline-flex;
139
+ align-items: center;
140
+ gap: 8px;
141
+ background: var(--surface);
142
+ border: 1px solid var(--nav-border);
143
+ border-radius: 100px;
144
+ padding: 6px 16px 6px 8px;
145
+ font-size: 0.8rem;
146
+ font-weight: 500;
147
+ color: var(--text-muted);
148
+ margin-bottom: 32px;
149
+ box-shadow: 0 2px 8px var(--warm-shadow);
150
+ }
151
+ .badge-icon {
152
+ width: 22px; height: 22px;
153
+ background: var(--accent-light);
154
+ border-radius: 100px;
155
+ display: flex; align-items: center; justify-content: center;
156
+ font-size: 0.75rem;
157
+ }
158
+ .hero h1 {
159
+ font-family: 'Source Serif 4', Georgia, serif;
160
+ font-size: clamp(44px, 6vw, 58px);
161
+ font-weight: 600;
162
+ color: var(--text-head);
163
+ line-height: 1.18;
164
+ letter-spacing: -0.02em;
165
+ margin: 0 auto 22px;
166
+ max-width: 680px;
167
+ }
168
+ .hero h1 strong {
169
+ font-weight: 700;
170
+ color: var(--accent);
171
+ }
172
+ .hero-sub {
173
+ font-family: 'Source Serif 4', Georgia, serif;
174
+ font-size: 1.15rem;
175
+ color: var(--text-muted);
176
+ max-width: 520px;
177
+ line-height: 1.75;
178
+ margin: 0 auto 38px;
179
+ font-weight: 400;
180
+ font-style: italic;
181
+ }
182
+ .hero-ctas {
183
+ display: flex;
184
+ gap: 14px;
185
+ flex-wrap: wrap;
186
+ margin-bottom: 48px;
187
+ align-items: center;
188
+ justify-content: center;
189
+ }
190
+ .hero-ctas .btn-accent { padding: 14px 30px; font-size: 0.95rem; }
191
+ .hero-ctas .btn-soft { padding: 14px 30px; font-size: 0.95rem; }
192
+ .social-proof {
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ gap: 12px;
197
+ }
198
+ .avatars {
199
+ display: flex;
200
+ }
201
+ .avatar {
202
+ width: 32px; height: 32px;
203
+ border-radius: 50%;
204
+ border: 2px solid var(--bg);
205
+ font-size: 0.75rem;
206
+ display: flex; align-items: center; justify-content: center;
207
+ font-weight: 600;
208
+ color: #fff;
209
+ margin-left: -8px;
210
+ }
211
+ .avatar:first-child { margin-left: 0; }
212
+ .social-text {
213
+ font-size: 0.82rem;
214
+ color: var(--text-muted);
215
+ font-weight: 500;
216
+ }
217
+ .social-text strong { color: var(--text-body); font-weight: 600; }
218
+
219
+ /* === FEATURES === */
220
+ .features-section {
221
+ padding: 100px 0;
222
+ }
223
+ .section-eyebrow {
224
+ font-size: 0.8rem;
225
+ font-weight: 600;
226
+ text-transform: uppercase;
227
+ letter-spacing: 0.1em;
228
+ color: var(--accent);
229
+ margin-bottom: 12px;
230
+ text-align: center;
231
+ }
232
+ .section-title {
233
+ font-family: 'Source Serif 4', Georgia, serif;
234
+ font-size: clamp(28px, 4vw, 40px);
235
+ font-weight: 600;
236
+ color: var(--text-head);
237
+ letter-spacing: -0.02em;
238
+ margin-bottom: 14px;
239
+ line-height: 1.2;
240
+ text-align: center;
241
+ }
242
+ .section-sub {
243
+ font-size: 1rem;
244
+ color: var(--text-muted);
245
+ text-align: center;
246
+ max-width: 480px;
247
+ line-height: 1.70;
248
+ margin-bottom: 56px;
249
+ }
250
+ .features-grid {
251
+ display: grid;
252
+ grid-template-columns: repeat(3, 1fr);
253
+ gap: 24px;
254
+ }
255
+ .feature-card {
256
+ background: var(--surface);
257
+ border-radius: 20px;
258
+ box-shadow: 0 4px 20px var(--warm-shadow);
259
+ padding: 36px 28px;
260
+ transition: transform 0.2s, box-shadow 0.2s;
261
+ }
262
+ .feature-card:hover {
263
+ transform: translateY(-3px);
264
+ box-shadow: 0 8px 28px var(--warm-shadow-md);
265
+ }
266
+ .feature-icon-wrap {
267
+ width: 52px; height: 52px;
268
+ background: var(--accent-light);
269
+ border-radius: 14px;
270
+ display: flex; align-items: center; justify-content: center;
271
+ font-size: 1.5rem;
272
+ margin-bottom: 20px;
273
+ }
274
+ .feature-title {
275
+ font-family: 'Source Serif 4', Georgia, serif;
276
+ font-size: 1.1rem;
277
+ font-weight: 600;
278
+ color: var(--text-head);
279
+ margin-bottom: 10px;
280
+ letter-spacing: -0.01em;
281
+ }
282
+ .feature-desc {
283
+ font-size: 0.88rem;
284
+ color: var(--text-muted);
285
+ line-height: 1.70;
286
+ }
287
+
288
+ /* === TESTIMONIALS === */
289
+ .testimonials-section {
290
+ background: var(--strip-bg);
291
+ padding: 96px 0;
292
+ }
293
+ .testimonials-grid {
294
+ display: grid;
295
+ grid-template-columns: 1fr 1fr;
296
+ gap: 24px;
297
+ margin-top: 52px;
298
+ }
299
+ .testimonial-card {
300
+ background: var(--surface);
301
+ border-radius: 20px;
302
+ box-shadow: 0 4px 20px var(--warm-shadow);
303
+ padding: 36px 32px;
304
+ }
305
+ .quote {
306
+ font-family: 'Source Serif 4', Georgia, serif;
307
+ font-size: 1.05rem;
308
+ font-style: italic;
309
+ color: var(--text-head);
310
+ line-height: 1.75;
311
+ margin-bottom: 24px;
312
+ font-weight: 400;
313
+ }
314
+ .quote::before {
315
+ content: '\201C';
316
+ color: var(--accent);
317
+ font-size: 2rem;
318
+ font-family: 'Source Serif 4', Georgia, serif;
319
+ line-height: 0;
320
+ vertical-align: -0.5rem;
321
+ margin-right: 2px;
322
+ }
323
+ .testimonial-author {
324
+ display: flex;
325
+ align-items: center;
326
+ gap: 12px;
327
+ }
328
+ .author-avatar {
329
+ width: 40px; height: 40px;
330
+ border-radius: 50%;
331
+ display: flex; align-items: center; justify-content: center;
332
+ font-size: 0.85rem;
333
+ font-weight: 700;
334
+ color: #fff;
335
+ flex-shrink: 0;
336
+ }
337
+ .author-name {
338
+ font-size: 0.88rem;
339
+ font-weight: 600;
340
+ color: var(--text-head);
341
+ margin-bottom: 2px;
342
+ }
343
+ .author-role {
344
+ font-size: 0.78rem;
345
+ color: var(--text-muted);
346
+ }
347
+
348
+ /* === PRICING === */
349
+ .pricing-section {
350
+ padding: 100px 0;
351
+ }
352
+ .pricing-grid {
353
+ display: grid;
354
+ grid-template-columns: repeat(3, 1fr);
355
+ gap: 20px;
356
+ margin-top: 56px;
357
+ }
358
+ .pricing-card {
359
+ background: var(--surface);
360
+ border-radius: 20px;
361
+ box-shadow: 0 4px 20px var(--warm-shadow);
362
+ overflow: hidden;
363
+ transition: transform 0.2s, box-shadow 0.2s;
364
+ }
365
+ .pricing-card:hover {
366
+ transform: translateY(-3px);
367
+ box-shadow: 0 8px 28px var(--warm-shadow-md);
368
+ }
369
+ .pricing-card.featured {
370
+ box-shadow: 0 8px 32px rgba(224,122,95,0.18);
371
+ }
372
+ .pricing-card-header {
373
+ padding: 28px;
374
+ border-bottom: 1px solid var(--nav-border);
375
+ }
376
+ .pricing-card.featured .pricing-card-header {
377
+ background: var(--accent);
378
+ border-bottom: none;
379
+ }
380
+ .pricing-card.featured .pricing-name,
381
+ .pricing-card.featured .pricing-price,
382
+ .pricing-card.featured .pricing-period { color: #fff; }
383
+ .pricing-name {
384
+ font-family: 'Source Serif 4', Georgia, serif;
385
+ font-size: 1rem;
386
+ font-weight: 600;
387
+ color: var(--text-head);
388
+ margin-bottom: 10px;
389
+ letter-spacing: -0.01em;
390
+ }
391
+ .pricing-price {
392
+ font-size: 2rem;
393
+ font-weight: 700;
394
+ color: var(--text-head);
395
+ letter-spacing: -0.03em;
396
+ }
397
+ .pricing-period {
398
+ font-size: 0.82rem;
399
+ color: var(--text-muted);
400
+ font-weight: 400;
401
+ }
402
+ .pricing-body { padding: 28px; }
403
+ .pricing-features {
404
+ list-style: none;
405
+ margin-bottom: 24px;
406
+ display: flex;
407
+ flex-direction: column;
408
+ gap: 10px;
409
+ }
410
+ .pricing-features li {
411
+ font-size: 0.88rem;
412
+ color: var(--text-muted);
413
+ display: flex;
414
+ align-items: flex-start;
415
+ gap: 8px;
416
+ }
417
+ .check {
418
+ color: var(--accent);
419
+ font-weight: 700;
420
+ flex-shrink: 0;
421
+ margin-top: 1px;
422
+ }
423
+
424
+ /* === CTA SECTION === */
425
+ .cta-section {
426
+ background: var(--accent);
427
+ padding: 96px 0;
428
+ text-align: center;
429
+ }
430
+ .cta-section .section-title {
431
+ color: #fff;
432
+ max-width: 560px;
433
+ margin: 0 auto 16px;
434
+ }
435
+ .cta-sub {
436
+ color: rgba(255,255,255,0.80);
437
+ font-size: 1rem;
438
+ margin-bottom: 36px;
439
+ }
440
+ .btn-white {
441
+ background: #fff;
442
+ color: var(--accent);
443
+ border: none;
444
+ border-radius: 14px;
445
+ padding: 14px 32px;
446
+ font-size: 0.95rem;
447
+ font-weight: 700;
448
+ cursor: pointer;
449
+ font-family: 'Inter', sans-serif;
450
+ box-shadow: 0 4px 16px rgba(0,0,0,0.15);
451
+ transition: transform 0.15s, box-shadow 0.15s;
452
+ }
453
+ .btn-white:hover {
454
+ transform: translateY(-1px);
455
+ box-shadow: 0 8px 24px rgba(0,0,0,0.20);
456
+ }
457
+
458
+ /* === FOOTER === */
459
+ footer {
460
+ background: #F0EDE8;
461
+ border-top: 1px solid var(--nav-border);
462
+ padding: 48px 0;
463
+ }
464
+ .footer-inner {
465
+ max-width: 1120px;
466
+ margin: 0 auto;
467
+ padding: 0 28px;
468
+ display: flex;
469
+ justify-content: space-between;
470
+ align-items: center;
471
+ flex-wrap: wrap;
472
+ gap: 20px;
473
+ }
474
+ .footer-logo {
475
+ font-family: 'Source Serif 4', Georgia, serif;
476
+ font-size: 1.2rem;
477
+ font-weight: 700;
478
+ color: var(--text-head);
479
+ }
480
+ .footer-links {
481
+ display: flex;
482
+ gap: 28px;
483
+ flex-wrap: wrap;
484
+ }
485
+ .footer-links a {
486
+ font-size: 0.82rem;
487
+ color: var(--text-muted);
488
+ text-decoration: none;
489
+ font-weight: 500;
490
+ transition: color 0.2s;
491
+ }
492
+ .footer-links a:hover { color: var(--accent); }
493
+ .footer-copy {
494
+ font-size: 0.78rem;
495
+ color: var(--text-muted);
496
+ }
497
+
498
+ @media (max-width: 768px) {
499
+ .features-grid, .testimonials-grid, .pricing-grid { grid-template-columns: 1fr; }
500
+ .nav-links { display: none; }
501
+ }
502
+ </style>
503
+ </head>
504
+ <body>
505
+
506
+ <!-- NAV -->
507
+ <nav>
508
+ <div class="nav-inner">
509
+ <div class="logo">Tempo<span class="logo-dot">.</span></div>
510
+ <ul class="nav-links">
511
+ <li><a href="#">Features</a></li>
512
+ <li><a href="#">Pricing</a></li>
513
+ <li><a href="#">Blog</a></li>
514
+ <li><a href="#">About</a></li>
515
+ </ul>
516
+ <button class="btn-accent">Try Tempo Free</button>
517
+ </div>
518
+ </nav>
519
+
520
+ <!-- HERO -->
521
+ <section class="hero">
522
+ <div class="container">
523
+ <div class="hero-content">
524
+ <div class="hero-badge">
525
+ <span class="badge-icon">🌿</span>
526
+ New — Async video messages now in Tempo
527
+ </div>
528
+ <h1>Work at your own pace.<br /><strong>Together.</strong></h1>
529
+ <p class="hero-sub">Tempo replaces the chaos of real-time chat with thoughtful async communication — so your team can do deep work and still stay aligned.</p>
530
+ <div class="hero-ctas">
531
+ <button class="btn-accent">Start for free</button>
532
+ <button class="btn-soft">Watch 2-min demo</button>
533
+ </div>
534
+ <div class="social-proof">
535
+ <div class="avatars">
536
+ <div class="avatar" style="background: #E07A5F;">A</div>
537
+ <div class="avatar" style="background: #81B29A;">M</div>
538
+ <div class="avatar" style="background: #F2CC8F;">S</div>
539
+ <div class="avatar" style="background: #3D405B;">R</div>
540
+ <div class="avatar" style="background: #D4A5A5;">K</div>
541
+ </div>
542
+ <span class="social-text">Trusted by <strong>50,000+ teams</strong> worldwide</span>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </section>
547
+
548
+ <!-- FEATURES -->
549
+ <section class="features-section">
550
+ <div class="container">
551
+ <div class="section-eyebrow">Why Tempo</div>
552
+ <h2 class="section-title">Built for how humans<br />actually think</h2>
553
+ <p class="section-sub">Deep work requires uninterrupted time. Tempo gives your team the tools to communicate richly without the constant ping.</p>
554
+ <div class="features-grid">
555
+ <div class="feature-card">
556
+ <div class="feature-icon-wrap">🌊</div>
557
+ <div class="feature-title">Async by Design</div>
558
+ <p class="feature-desc">Write messages, record short videos, or share context docs — your teammates reply when they're in the right headspace, not when the notification fires.</p>
559
+ </div>
560
+ <div class="feature-card">
561
+ <div class="feature-icon-wrap">🧭</div>
562
+ <div class="feature-title">Focus Timelines</div>
563
+ <p class="feature-desc">Set your working hours and focus windows. Tempo intelligently surfaces what needs your attention, ordered by importance — never by recency alone.</p>
564
+ </div>
565
+ <div class="feature-card">
566
+ <div class="feature-icon-wrap">✍️</div>
567
+ <div class="feature-title">Rich Context Threads</div>
568
+ <p class="feature-desc">Every conversation stays contextual. Attach files, link tasks, embed designs, and write in a beautiful editor — all in one thread, always findable.</p>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ <!-- TESTIMONIALS -->
575
+ <section class="testimonials-section">
576
+ <div class="container">
577
+ <div class="section-eyebrow">What teams say</div>
578
+ <h2 class="section-title">Work has never felt<br />this calm before</h2>
579
+ <div class="testimonials-grid">
580
+ <div class="testimonial-card">
581
+ <p class="quote">Tempo changed our entire culture. We went from 600 Slack messages a day to thoughtful, well-written updates that everyone actually reads. Deep work is back.</p>
582
+ <div class="testimonial-author">
583
+ <div class="author-avatar" style="background: #E07A5F;">SR</div>
584
+ <div>
585
+ <div class="author-name">Sofia Reyes</div>
586
+ <div class="author-role">Head of Product, Brightly</div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ <div class="testimonial-card">
591
+ <p class="quote">Our distributed team spans 9 time zones. Tempo is the first tool that actually respects that. Nobody has to be online at the same time to stay in sync anymore.</p>
592
+ <div class="testimonial-author">
593
+ <div class="author-avatar" style="background: #81B29A;">MK</div>
594
+ <div>
595
+ <div class="author-name">Marcus Klein</div>
596
+ <div class="author-role">Engineering Lead, Cortex</div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <!-- PRICING -->
605
+ <section class="pricing-section">
606
+ <div class="container">
607
+ <div class="section-eyebrow">Simple Pricing</div>
608
+ <h2 class="section-title">One price. No surprises.</h2>
609
+ <div class="pricing-grid">
610
+ <div class="pricing-card">
611
+ <div class="pricing-card-header">
612
+ <div class="pricing-name">Starter</div>
613
+ <div class="pricing-price">$0 <span class="pricing-period">/ free forever</span></div>
614
+ </div>
615
+ <div class="pricing-body">
616
+ <ul class="pricing-features">
617
+ <li><span class="check">✓</span> Up to 5 teammates</li>
618
+ <li><span class="check">✓</span> 90-day message history</li>
619
+ <li><span class="check">✓</span> Basic video messages</li>
620
+ <li><span class="check">✓</span> 5GB file storage</li>
621
+ </ul>
622
+ <button class="btn-soft" style="width:100%">Get started free</button>
623
+ </div>
624
+ </div>
625
+ <div class="pricing-card featured">
626
+ <div class="pricing-card-header">
627
+ <div class="pricing-name">Team</div>
628
+ <div class="pricing-price">$9 <span class="pricing-period">/ seat / month</span></div>
629
+ </div>
630
+ <div class="pricing-body">
631
+ <ul class="pricing-features">
632
+ <li><span class="check" style="color: var(--accent)">✓</span> Unlimited teammates</li>
633
+ <li><span class="check" style="color: var(--accent)">✓</span> Unlimited history</li>
634
+ <li><span class="check" style="color: var(--accent)">✓</span> Focus timelines</li>
635
+ <li><span class="check" style="color: var(--accent)">✓</span> Priority + integrations</li>
636
+ </ul>
637
+ <button class="btn-accent" style="width:100%">Start 14-day trial</button>
638
+ </div>
639
+ </div>
640
+ <div class="pricing-card">
641
+ <div class="pricing-card-header">
642
+ <div class="pricing-name">Enterprise</div>
643
+ <div class="pricing-price">Custom</div>
644
+ </div>
645
+ <div class="pricing-body">
646
+ <ul class="pricing-features">
647
+ <li><span class="check">✓</span> SSO + SCIM</li>
648
+ <li><span class="check">✓</span> Dedicated support</li>
649
+ <li><span class="check">✓</span> SLA guarantee</li>
650
+ <li><span class="check">✓</span> On-prem option</li>
651
+ </ul>
652
+ <button class="btn-soft" style="width:100%">Talk to sales</button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </section>
658
+
659
+ <!-- CTA SECTION -->
660
+ <section class="cta-section">
661
+ <div class="container">
662
+ <h2 class="section-title" style="font-family: 'Source Serif 4', Georgia, serif;">Your team deserves<br />to breathe.</h2>
663
+ <p class="cta-sub">Start with Tempo free. No credit card required.</p>
664
+ <button class="btn-white">Get started — it's free</button>
665
+ </div>
666
+ </section>
667
+
668
+ <!-- FOOTER -->
669
+ <footer>
670
+ <div class="footer-inner">
671
+ <div class="footer-logo">Tempo.</div>
672
+ <div class="footer-links">
673
+ <a href="#">Features</a>
674
+ <a href="#">Pricing</a>
675
+ <a href="#">Privacy</a>
676
+ <a href="#">Terms</a>
677
+ <a href="#">Blog</a>
678
+ </div>
679
+ <div class="footer-copy">© 2025 Tempo, Inc. All rights reserved.</div>
680
+ </div>
681
+ </footer>
682
+
683
+ </body>
684
+ </html>