@jaimevalasek/aioson 1.6.0 → 1.7.2

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 (275) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/README.md +729 -232
  3. package/docs/design-previews/pt.squarespace.com-homepage.html +889 -0
  4. package/docs/integrations/sdlc-genius-boundary.md +76 -0
  5. package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
  6. package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
  7. package/docs/integrations/sdlc-genius-review-samples.md +86 -0
  8. package/docs/pt/README.md +3 -0
  9. package/docs/pt/agentes.md +1 -0
  10. package/docs/pt/comandos-cli.md +888 -2
  11. package/docs/pt/design-hybrid-forge.md +255 -6
  12. package/docs/pt/devlog-pipeline.md +270 -0
  13. package/docs/pt/fluxo-artefatos.md +178 -0
  14. package/docs/pt/hooks-session-guard.md +454 -0
  15. package/docs/pt/monitor-de-contexto.md +59 -5
  16. package/docs/pt/sdd-automation-scripts.md +557 -0
  17. package/docs/pt/site-forge.md +309 -0
  18. package/docs/pt/spec-learnings-pipeline.md +265 -0
  19. package/package.json +1 -1
  20. package/src/a2a/client.js +165 -0
  21. package/src/a2a/server.js +223 -0
  22. package/src/cli.js +235 -1
  23. package/src/commands/agent-audit.js +397 -0
  24. package/src/commands/agent-export-skill.js +229 -0
  25. package/src/commands/artifact-validate.js +189 -0
  26. package/src/commands/brief-gen.js +405 -0
  27. package/src/commands/brief-validate.js +65 -0
  28. package/src/commands/classify.js +256 -0
  29. package/src/commands/context-compact.js +49 -0
  30. package/src/commands/context-health.js +175 -0
  31. package/src/commands/context-monitor.js +71 -0
  32. package/src/commands/context-trim.js +177 -0
  33. package/src/commands/detect-test-runner.js +55 -0
  34. package/src/commands/devlog-export-brains.js +27 -0
  35. package/src/commands/devlog-process.js +292 -0
  36. package/src/commands/devlog-watch.js +131 -0
  37. package/src/commands/feature-close.js +165 -0
  38. package/src/commands/gate-check.js +228 -0
  39. package/src/commands/hooks-emit.js +253 -0
  40. package/src/commands/hooks-install.js +347 -0
  41. package/src/commands/learning-auto-promote.js +195 -0
  42. package/src/commands/learning-evolve.js +18 -9
  43. package/src/commands/learning-export.js +103 -0
  44. package/src/commands/learning-rollback.js +164 -0
  45. package/src/commands/live.js +25 -1
  46. package/src/commands/pattern-detect.js +33 -0
  47. package/src/commands/preflight-context.js +30 -0
  48. package/src/commands/preflight.js +208 -0
  49. package/src/commands/pulse-update.js +130 -0
  50. package/src/commands/runner-daemon.js +274 -0
  51. package/src/commands/runner-plan.js +70 -0
  52. package/src/commands/runner-queue-from-plan.js +166 -0
  53. package/src/commands/runner-queue.js +189 -0
  54. package/src/commands/runner-run.js +129 -0
  55. package/src/commands/runtime.js +47 -1
  56. package/src/commands/self-implement-loop.js +256 -0
  57. package/src/commands/session-guard.js +218 -0
  58. package/src/commands/sizing.js +165 -0
  59. package/src/commands/skill.js +65 -0
  60. package/src/commands/spec-checkpoint.js +177 -0
  61. package/src/commands/spec-status.js +79 -0
  62. package/src/commands/spec-sync.js +190 -0
  63. package/src/commands/spec-tasks.js +288 -0
  64. package/src/commands/squad-autorun.js +1220 -0
  65. package/src/commands/squad-bus.js +217 -0
  66. package/src/commands/squad-card.js +149 -0
  67. package/src/commands/squad-daemon.js +134 -0
  68. package/src/commands/squad-dependency-graph.js +164 -0
  69. package/src/commands/squad-review.js +106 -0
  70. package/src/commands/squad-scaffold.js +55 -0
  71. package/src/commands/squad-tool-register.js +157 -0
  72. package/src/commands/state-save.js +122 -0
  73. package/src/commands/update.js +2 -0
  74. package/src/commands/verify-gate.js +572 -0
  75. package/src/commands/workflow-execute.js +241 -0
  76. package/src/constants.js +22 -0
  77. package/src/install-profile.js +2 -2
  78. package/src/install-wizard.js +3 -2
  79. package/src/installer.js +6 -0
  80. package/src/lib/health-check.js +158 -0
  81. package/src/lib/hook-protocol.js +76 -0
  82. package/src/mcp/apps/squad-dashboard/app.js +163 -0
  83. package/src/mcp/apps/squad-dashboard/index.html +261 -0
  84. package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
  85. package/src/mcp/resources/squad-state.js +130 -0
  86. package/src/preflight-engine.js +443 -0
  87. package/src/runner/cascade.js +97 -0
  88. package/src/runner/cli-launcher.js +109 -0
  89. package/src/runner/plan-importer.js +63 -0
  90. package/src/runner/queue-store.js +159 -0
  91. package/src/runtime-store.js +61 -3
  92. package/src/squad/agent-teams-adapter.js +264 -0
  93. package/src/squad/brief-validator.js +350 -0
  94. package/src/squad/bus-bridge.js +140 -0
  95. package/src/squad/context-compactor.js +265 -0
  96. package/src/squad/cross-ai-synthesizer.js +250 -0
  97. package/src/squad/hooks-generator.js +196 -0
  98. package/src/squad/inter-squad-events.js +175 -0
  99. package/src/squad/intra-bus.js +345 -0
  100. package/src/squad/learning-extractor.js +213 -0
  101. package/src/squad/pattern-detector.js +365 -0
  102. package/src/squad/preflight-context.js +296 -0
  103. package/src/squad/recovery-context.js +242 -71
  104. package/src/squad/reflection.js +365 -0
  105. package/src/squad/squad-scaffold.js +177 -0
  106. package/src/squad/state-manager.js +310 -0
  107. package/src/squad/task-decomposer.js +652 -0
  108. package/src/squad/verify-gate.js +303 -0
  109. package/src/updater.js +4 -5
  110. package/src/worker-runner.js +186 -1
  111. package/template/.aioson/agents/analyst.md +62 -1
  112. package/template/.aioson/agents/architect.md +61 -1
  113. package/template/.aioson/agents/copywriter.md +463 -0
  114. package/template/.aioson/agents/design-hybrid-forge.md +14 -0
  115. package/template/.aioson/agents/dev.md +271 -25
  116. package/template/.aioson/agents/deyvin.md +67 -8
  117. package/template/.aioson/agents/discovery-design-doc.md +44 -0
  118. package/template/.aioson/agents/genome.md +14 -0
  119. package/template/.aioson/agents/neo.md +83 -2
  120. package/template/.aioson/agents/orache.md +50 -4
  121. package/template/.aioson/agents/orchestrator.md +197 -1
  122. package/template/.aioson/agents/pm.md +35 -0
  123. package/template/.aioson/agents/product.md +50 -5
  124. package/template/.aioson/agents/profiler-enricher.md +14 -0
  125. package/template/.aioson/agents/profiler-forge.md +14 -0
  126. package/template/.aioson/agents/profiler-researcher.md +14 -0
  127. package/template/.aioson/agents/qa.md +273 -21
  128. package/template/.aioson/agents/setup.md +96 -10
  129. package/template/.aioson/agents/sheldon.md +131 -6
  130. package/template/.aioson/agents/site-forge.md +1753 -0
  131. package/template/.aioson/agents/squad.md +352 -0
  132. package/template/.aioson/agents/tester.md +53 -0
  133. package/template/.aioson/agents/ux-ui.md +203 -4
  134. package/template/.aioson/brains/README.md +128 -0
  135. package/template/.aioson/brains/_index.json +16 -0
  136. package/template/.aioson/brains/scripts/query.js +103 -0
  137. package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
  138. package/template/.aioson/config.md +143 -13
  139. package/template/.aioson/constitution.md +33 -0
  140. package/template/.aioson/context/project-pulse.md +34 -0
  141. package/template/.aioson/docs/LAYERS.md +79 -0
  142. package/template/.aioson/docs/README.md +76 -0
  143. package/template/.aioson/docs/example-external-api-context.md +72 -0
  144. package/template/.aioson/genomes/copywriting.md +204 -0
  145. package/template/.aioson/locales/en/agents/architect.md +17 -0
  146. package/template/.aioson/locales/en/agents/dev.md +79 -13
  147. package/template/.aioson/locales/en/agents/orache.md +6 -0
  148. package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
  149. package/template/.aioson/locales/en/agents/product.md +50 -0
  150. package/template/.aioson/locales/en/agents/sheldon.md +115 -0
  151. package/template/.aioson/locales/en/agents/squad.md +14 -0
  152. package/template/.aioson/locales/en/agents/tester.md +6 -0
  153. package/template/.aioson/locales/es/agents/analyst.md +2 -0
  154. package/template/.aioson/locales/es/agents/architect.md +19 -0
  155. package/template/.aioson/locales/es/agents/dev.md +64 -4
  156. package/template/.aioson/locales/es/agents/deyvin.md +2 -0
  157. package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
  158. package/template/.aioson/locales/es/agents/genome.md +2 -0
  159. package/template/.aioson/locales/es/agents/neo.md +2 -0
  160. package/template/.aioson/locales/es/agents/orache.md +2 -0
  161. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  162. package/template/.aioson/locales/es/agents/pair.md +2 -0
  163. package/template/.aioson/locales/es/agents/pm.md +2 -0
  164. package/template/.aioson/locales/es/agents/product.md +52 -0
  165. package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
  166. package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
  167. package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
  168. package/template/.aioson/locales/es/agents/qa.md +2 -0
  169. package/template/.aioson/locales/es/agents/setup.md +2 -0
  170. package/template/.aioson/locales/es/agents/sheldon.md +117 -0
  171. package/template/.aioson/locales/es/agents/squad.md +16 -0
  172. package/template/.aioson/locales/es/agents/tester.md +9 -0
  173. package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
  174. package/template/.aioson/locales/fr/agents/analyst.md +2 -0
  175. package/template/.aioson/locales/fr/agents/architect.md +19 -0
  176. package/template/.aioson/locales/fr/agents/dev.md +64 -4
  177. package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
  178. package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
  179. package/template/.aioson/locales/fr/agents/genome.md +2 -0
  180. package/template/.aioson/locales/fr/agents/neo.md +2 -0
  181. package/template/.aioson/locales/fr/agents/orache.md +2 -0
  182. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  183. package/template/.aioson/locales/fr/agents/pair.md +2 -0
  184. package/template/.aioson/locales/fr/agents/pm.md +2 -0
  185. package/template/.aioson/locales/fr/agents/product.md +52 -0
  186. package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
  187. package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
  188. package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
  189. package/template/.aioson/locales/fr/agents/qa.md +2 -0
  190. package/template/.aioson/locales/fr/agents/setup.md +2 -0
  191. package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
  192. package/template/.aioson/locales/fr/agents/squad.md +16 -0
  193. package/template/.aioson/locales/fr/agents/tester.md +9 -0
  194. package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
  195. package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
  196. package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
  197. package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
  198. package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
  199. package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
  200. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
  201. package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
  202. package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
  203. package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
  204. package/template/.aioson/locales/pt-BR/agents/setup.md +101 -18
  205. package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
  206. package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
  207. package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
  208. package/template/.aioson/rules/README.md +69 -0
  209. package/template/.aioson/rules/data-format-convention.md +136 -0
  210. package/template/.aioson/rules/example-monetary-values.md +30 -0
  211. package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +2 -0
  213. package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
  214. package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
  215. package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
  216. package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
  217. package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
  218. package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
  219. package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
  220. package/template/.aioson/skills/marketing/references/anti-patterns.md +254 -0
  221. package/template/.aioson/skills/marketing/references/fascinations.md +192 -0
  222. package/template/.aioson/skills/marketing/references/five-acts.md +248 -0
  223. package/template/.aioson/skills/marketing/references/market-intelligence.md +198 -0
  224. package/template/.aioson/skills/marketing/references/offer-structure.md +203 -0
  225. package/template/.aioson/skills/marketing/references/one-belief.md +149 -0
  226. package/template/.aioson/skills/marketing/references/patterns.md +218 -0
  227. package/template/.aioson/skills/marketing/references/pms-research.md +193 -0
  228. package/template/.aioson/skills/marketing/vsl-craft.md +385 -0
  229. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +1 -0
  230. package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
  231. package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
  232. package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
  233. package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
  234. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +35 -0
  235. package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
  236. package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
  237. package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
  238. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +4 -1
  239. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +15 -0
  240. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +32 -0
  241. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +20 -0
  242. package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
  243. package/template/.aioson/skills/static/context-budget-guide.md +46 -0
  244. package/template/.aioson/skills/static/harness-sensors.md +74 -0
  245. package/template/.aioson/skills/static/landing-page-deploy.md +192 -0
  246. package/template/.aioson/skills/static/landing-page-forge.md +730 -0
  247. package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
  248. package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
  249. package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
  250. package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
  251. package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
  252. package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
  253. package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
  254. package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
  255. package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
  256. package/template/.aioson/skills/static/threejs-patterns.md +929 -0
  257. package/template/.aioson/skills/static/ui-ux-modern.md +1 -0
  258. package/template/.aioson/skills/static/web-research-cache.md +112 -0
  259. package/template/.aioson/tasks/implementation-plan.md +21 -1
  260. package/template/.aioson/tasks/squad-create.md +22 -0
  261. package/template/.aioson/tasks/squad-design.md +30 -0
  262. package/template/.aioson/templates/squads/digital-marketing-agency/template.json +96 -0
  263. package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
  264. package/template/.claude/commands/aioson/agent/orache.md +5 -0
  265. package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
  266. package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
  267. package/template/AGENTS.md +55 -3
  268. package/template/CLAUDE.md +31 -0
  269. package/template/OPENCODE.md +4 -0
  270. package/template/researchs/.gitkeep +0 -0
  271. package/template/.aioson/skills/design-system/components/SKILL.md:Zone.Identifier +0 -0
  272. package/template/.aioson/skills/design-system/dashboards/SKILL.md:Zone.Identifier +0 -0
  273. package/template/.aioson/skills/design-system/foundations/SKILL.md:Zone.Identifier +0 -0
  274. package/template/.aioson/skills/design-system/motion/SKILL.md:Zone.Identifier +0 -0
  275. package/template/.aioson/skills/design-system/patterns/SKILL.md:Zone.Identifier +0 -0
package/docs/design-previews/pt.squarespace.com-homepage.html ADDED
@@ -0,0 +1,889 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Design Preview — pt.squarespace.com skill</title>
7
+ <style>
8
+ /* ============================================================
9
+ DESIGN TOKENS — pt.squarespace.com skill
10
+ source: template/.aioson/skills/design/pt.squarespace.com/
11
+ images: media-www.sqspcdn.com (reference only — replace before publish)
12
+ ============================================================ */
13
+ :root {
14
+ --bg-base: rgb(255, 255, 255);
15
+ --bg-surface: rgb(245, 245, 244);
16
+ --bg-elevated: rgb(223, 221, 216);
17
+ --bg-inverse: rgb(0, 0, 0);
18
+ --bg-charcoal: rgb(26, 26, 26);
19
+ --bg-teal: rgb(30, 76, 65);
20
+
21
+ --text-primary: rgb(0, 0, 0);
22
+ --text-muted: rgb(137, 137, 137);
23
+ --text-inverse: rgb(255, 255, 255);
24
+ --text-light-gray: rgb(221, 221, 221);
25
+
26
+ --accent: rgb(30, 76, 65);
27
+ --accent-hover: rgb(50, 50, 50);
28
+ --border: rgb(221, 221, 221);
29
+ --border-dark: rgb(50, 50, 50);
30
+
31
+ --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
32
+ --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
33
+
34
+ --text-xs: 12px;
35
+ --text-sm: 14px;
36
+ --text-base: 16px;
37
+ --text-lg: 20px;
38
+ --text-xl: 26px;
39
+ --text-2xl: 34px;
40
+ --text-3xl: 42px;
41
+
42
+ --font-light: 300;
43
+ --font-normal: 400;
44
+ --font-medium: 500;
45
+ --font-semibold: 600;
46
+ --font-bold: 700;
47
+
48
+ --leading-tight: 1.2;
49
+ --leading-normal: 1.5;
50
+ --leading-relaxed: 1.75;
51
+
52
+ --tracking-tight: -0.02em;
53
+ --tracking-wide: 0.05em;
54
+
55
+ --space-1: 4px;
56
+ --space-2: 8px;
57
+ --space-3: 12px;
58
+ --space-4: 16px;
59
+ --space-5: 24px;
60
+ --space-6: 32px;
61
+ --space-8: 48px;
62
+ --space-10: 64px;
63
+ --space-12: 96px;
64
+ --space-16: 128px;
65
+ --section-padding-y: 80px;
66
+ --section-padding-x: 24px;
67
+ --hero-padding-y: 120px;
68
+
69
+ --radius-none: 0px;
70
+ --radius-full: 9999px;
71
+
72
+ --shadow-sm: none;
73
+
74
+ --ease-default: cubic-bezier(0.455, 0.03, 0.515, 0.955);
75
+ --ease-out: ease-out;
76
+ --transition-fast: 100ms;
77
+ --transition-base: 200ms;
78
+ --transition-medium: 300ms;
79
+ --transition-slow: 400ms;
80
+ --transition-all: all var(--transition-medium) var(--ease-default);
81
+ --transition-colors: color var(--transition-base) var(--ease-default),
82
+ background-color var(--transition-base) var(--ease-default);
83
+
84
+ --container-max: 1200px;
85
+ --container-narrow: 800px;
86
+ --grid-gap: 32px;
87
+ }
88
+
89
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
90
+
91
+ body {
92
+ font-family: var(--font-body);
93
+ font-size: var(--text-base);
94
+ color: var(--text-primary);
95
+ background: var(--bg-base);
96
+ -webkit-font-smoothing: antialiased;
97
+ }
98
+
99
+ a { text-decoration: none; color: inherit; }
100
+
101
+ @media (prefers-reduced-motion: reduce) {
102
+ *, *::before, *::after {
103
+ animation-duration: 0.01ms !important;
104
+ transition-duration: 0.01ms !important;
105
+ }
106
+ }
107
+
108
+ /* ============================================================ LAYOUT */
109
+ .container {
110
+ max-width: var(--container-max);
111
+ margin: 0 auto;
112
+ padding: 0 var(--section-padding-x);
113
+ }
114
+ .container--narrow {
115
+ max-width: var(--container-narrow);
116
+ margin: 0 auto;
117
+ padding: 0 var(--section-padding-x);
118
+ }
119
+
120
+ /* ============================================================ NAV */
121
+ .nav {
122
+ position: fixed;
123
+ top: 0; left: 0; right: 0;
124
+ z-index: 200;
125
+ background: transparent;
126
+ transition: background-color var(--transition-base) var(--ease-default);
127
+ }
128
+ .nav.scrolled {
129
+ background: var(--bg-base);
130
+ border-bottom: 1px solid var(--border);
131
+ }
132
+ .nav__inner {
133
+ max-width: var(--container-max);
134
+ margin: 0 auto;
135
+ padding: var(--space-4) var(--section-padding-x);
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: space-between;
139
+ }
140
+ .nav__logo {
141
+ font-family: var(--font-display);
142
+ font-size: var(--text-base);
143
+ font-weight: var(--font-semibold);
144
+ color: var(--text-inverse);
145
+ letter-spacing: var(--tracking-wide);
146
+ transition: var(--transition-colors);
147
+ }
148
+ .nav.scrolled .nav__logo { color: var(--text-primary); }
149
+
150
+ .nav__links {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: var(--space-6);
154
+ list-style: none;
155
+ }
156
+ .nav__links a {
157
+ font-size: var(--text-sm);
158
+ color: var(--text-inverse);
159
+ transition: var(--transition-colors);
160
+ }
161
+ .nav.scrolled .nav__links a { color: var(--text-primary); }
162
+ .nav__links a:hover { color: var(--text-muted); }
163
+
164
+ .nav__actions { display: flex; align-items: center; gap: var(--space-4); }
165
+
166
+ .btn {
167
+ font-family: var(--font-display);
168
+ font-size: var(--text-sm);
169
+ font-weight: var(--font-medium);
170
+ padding: var(--space-3) var(--space-5);
171
+ border-radius: var(--radius-none);
172
+ border: none;
173
+ cursor: pointer;
174
+ display: inline-flex;
175
+ align-items: center;
176
+ transition: var(--transition-all);
177
+ }
178
+ .btn--ghost-light { background: transparent; color: var(--text-inverse); }
179
+ .btn--ghost-light:hover { color: var(--text-light-gray); }
180
+ .nav.scrolled .btn--ghost-light { color: var(--text-primary); }
181
+ .nav.scrolled .btn--ghost-light:hover { color: var(--text-muted); }
182
+ .btn--primary-light { background: var(--bg-base); color: var(--text-primary); }
183
+ .btn--primary-light:hover { background: var(--bg-elevated); }
184
+ .btn--primary-dark { background: var(--bg-inverse); color: var(--text-inverse); }
185
+ .btn--primary-dark:hover { background: var(--bg-charcoal); }
186
+ .btn--primary-teal { background: var(--bg-teal); color: var(--text-inverse); }
187
+ .btn--primary-teal:hover { background: var(--accent-hover); }
188
+
189
+ /* ============================================================ HERO */
190
+ .hero {
191
+ position: relative;
192
+ min-height: 100vh;
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ text-align: center;
197
+ padding: var(--hero-padding-y) var(--section-padding-x);
198
+ overflow: hidden;
199
+ }
200
+ .hero__bg {
201
+ position: absolute;
202
+ inset: 0;
203
+ background-image: url('https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/plants/20260206-01/template-500w.jpg');
204
+ background-size: cover;
205
+ background-position: center;
206
+ filter: brightness(0.45);
207
+ z-index: 0;
208
+ }
209
+ .hero__content {
210
+ position: relative;
211
+ z-index: 1;
212
+ max-width: 700px;
213
+ opacity: 0;
214
+ transform: translateY(20px);
215
+ animation: fadeInUp var(--transition-slow) var(--ease-out) 0.2s forwards;
216
+ }
217
+ .hero__headline {
218
+ font-family: var(--font-display);
219
+ font-size: var(--text-3xl);
220
+ font-weight: var(--font-light);
221
+ color: var(--text-inverse);
222
+ line-height: var(--leading-tight);
223
+ letter-spacing: var(--tracking-tight);
224
+ margin-bottom: var(--space-5);
225
+ }
226
+ .hero__sub {
227
+ font-family: var(--font-display);
228
+ font-size: var(--text-xl);
229
+ font-weight: var(--font-normal);
230
+ color: var(--text-inverse);
231
+ line-height: var(--leading-normal);
232
+ margin-bottom: var(--space-8);
233
+ opacity: 0.85;
234
+ }
235
+ .hero__cta-group { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
236
+ .hero__note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
237
+
238
+ /* Hero slideshow thumbnails */
239
+ .hero__slides {
240
+ position: absolute;
241
+ bottom: var(--space-8);
242
+ left: 50%;
243
+ transform: translateX(-50%);
244
+ z-index: 2;
245
+ display: flex;
246
+ gap: var(--space-2);
247
+ }
248
+ .hero__slide-thumb {
249
+ width: 64px;
250
+ height: 48px;
251
+ object-fit: cover;
252
+ cursor: pointer;
253
+ opacity: 0.6;
254
+ border: 2px solid transparent;
255
+ transition: opacity var(--transition-base) var(--ease-default), border-color var(--transition-base) var(--ease-default);
256
+ }
257
+ .hero__slide-thumb:hover,
258
+ .hero__slide-thumb.active {
259
+ opacity: 1;
260
+ border-color: var(--text-inverse);
261
+ }
262
+
263
+ /* ============================================================ SECTIONS */
264
+ .section {
265
+ padding: var(--section-padding-y) var(--section-padding-x);
266
+ }
267
+ .section--surface { background: var(--bg-surface); }
268
+ .section--dark { background: var(--bg-inverse); }
269
+ .section--teal { background: var(--bg-teal); }
270
+ .section--elevated { background: var(--bg-elevated); }
271
+ .section--charcoal { background: var(--bg-charcoal); }
272
+
273
+ .section__heading {
274
+ font-family: var(--font-display);
275
+ font-size: var(--text-xl);
276
+ font-weight: var(--font-normal);
277
+ color: var(--text-primary);
278
+ line-height: var(--leading-normal);
279
+ margin-bottom: var(--space-3);
280
+ }
281
+ .section__heading--inverse { color: var(--text-inverse); }
282
+ .section__sub { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); }
283
+ .section__sub--inverse { color: var(--text-light-gray); }
284
+
285
+ /* ============================================================ FEATURE GRID */
286
+ .feature-grid {
287
+ display: grid;
288
+ grid-template-columns: repeat(3, 1fr);
289
+ gap: var(--grid-gap);
290
+ }
291
+ .feature-card__img {
292
+ width: 100%;
293
+ height: 200px;
294
+ object-fit: cover;
295
+ display: block;
296
+ margin-bottom: var(--space-4);
297
+ }
298
+ .feature-card__title {
299
+ font-family: var(--font-display);
300
+ font-size: var(--text-base);
301
+ font-weight: var(--font-semibold);
302
+ color: var(--text-primary);
303
+ margin-bottom: var(--space-2);
304
+ }
305
+ .feature-card__desc {
306
+ font-size: var(--text-sm);
307
+ color: var(--text-muted);
308
+ line-height: var(--leading-relaxed);
309
+ }
310
+
311
+ /* ============================================================ SPLIT */
312
+ .split {
313
+ display: grid;
314
+ grid-template-columns: 1fr 1fr;
315
+ gap: var(--space-12);
316
+ align-items: center;
317
+ }
318
+ .split__label {
319
+ font-size: var(--text-xs);
320
+ font-weight: var(--font-medium);
321
+ color: var(--text-muted);
322
+ letter-spacing: var(--tracking-wide);
323
+ text-transform: uppercase;
324
+ margin-bottom: var(--space-4);
325
+ }
326
+ .split__heading {
327
+ font-family: var(--font-display);
328
+ font-size: var(--text-xl);
329
+ font-weight: var(--font-normal);
330
+ color: var(--text-primary);
331
+ line-height: var(--leading-normal);
332
+ margin-bottom: var(--space-5);
333
+ }
334
+ .split__body {
335
+ font-size: var(--text-base);
336
+ color: var(--text-muted);
337
+ line-height: var(--leading-relaxed);
338
+ margin-bottom: var(--space-6);
339
+ }
340
+
341
+ /* Card carousel grid */
342
+ .card-carousel {
343
+ display: grid;
344
+ grid-template-columns: 1fr 1fr;
345
+ gap: var(--space-2);
346
+ }
347
+ .card-carousel__item {
348
+ position: relative;
349
+ overflow: hidden;
350
+ height: 160px;
351
+ }
352
+ .card-carousel__item img {
353
+ width: 100%;
354
+ height: 100%;
355
+ object-fit: cover;
356
+ display: block;
357
+ }
358
+ .card-carousel__label {
359
+ position: absolute;
360
+ bottom: var(--space-2);
361
+ left: var(--space-2);
362
+ font-size: var(--text-xs);
363
+ font-weight: var(--font-medium);
364
+ color: var(--text-inverse);
365
+ background: rgba(0,0,0,0.55);
366
+ padding: 2px var(--space-2);
367
+ }
368
+
369
+ /* ============================================================ STATS */
370
+ .stats {
371
+ text-align: center;
372
+ }
373
+ .stats__headshots {
374
+ display: flex;
375
+ justify-content: center;
376
+ margin-bottom: var(--space-8);
377
+ }
378
+ .stats__headshot {
379
+ width: 56px;
380
+ height: 56px;
381
+ border-radius: var(--radius-full);
382
+ object-fit: cover;
383
+ border: 2px solid var(--bg-inverse);
384
+ }
385
+ .stats__headshot + .stats__headshot { margin-left: -12px; }
386
+
387
+ .stats__grid {
388
+ display: grid;
389
+ grid-template-columns: repeat(3, 1fr);
390
+ gap: var(--grid-gap);
391
+ }
392
+ .stat__number {
393
+ font-family: var(--font-display);
394
+ font-size: var(--text-2xl);
395
+ font-weight: var(--font-bold);
396
+ color: var(--text-inverse);
397
+ line-height: var(--leading-tight);
398
+ }
399
+ .stat__label { font-size: var(--text-sm); color: var(--text-light-gray); margin-top: var(--space-2); }
400
+
401
+ /* ============================================================ SHOWCASE */
402
+ .showcase-grid {
403
+ display: grid;
404
+ grid-template-columns: repeat(3, 1fr);
405
+ gap: var(--grid-gap);
406
+ }
407
+ .showcase-item {
408
+ position: relative;
409
+ overflow: hidden;
410
+ cursor: pointer;
411
+ }
412
+ .showcase-item img {
413
+ width: 100%;
414
+ height: 260px;
415
+ object-fit: cover;
416
+ display: block;
417
+ transition: transform var(--transition-medium) var(--ease-default);
418
+ }
419
+ .showcase-item:hover img { transform: scale(1.03); }
420
+ .showcase-item__overlay {
421
+ position: absolute;
422
+ inset: 0;
423
+ background: rgba(0,0,0,0);
424
+ transition: background var(--transition-medium) var(--ease-default);
425
+ }
426
+ .showcase-item:hover .showcase-item__overlay { background: rgba(0,0,0,0.25); }
427
+ .showcase-item__label {
428
+ position: absolute;
429
+ bottom: var(--space-4);
430
+ left: var(--space-4);
431
+ font-size: var(--text-sm);
432
+ font-weight: var(--font-medium);
433
+ color: var(--text-inverse);
434
+ background: rgba(0,0,0,0.5);
435
+ padding: 2px var(--space-2);
436
+ }
437
+
438
+ /* ============================================================ DOMAIN SEARCH */
439
+ .domain-search { text-align: center; }
440
+ .domain-search__heading {
441
+ font-family: var(--font-display);
442
+ font-size: var(--text-xl);
443
+ font-weight: var(--font-normal);
444
+ color: var(--text-primary);
445
+ margin-bottom: var(--space-5);
446
+ }
447
+ .domain-search__form {
448
+ display: flex;
449
+ max-width: 500px;
450
+ margin: 0 auto;
451
+ }
452
+ .input {
453
+ font-family: var(--font-body);
454
+ font-size: var(--text-base);
455
+ color: var(--text-primary);
456
+ background: var(--bg-base);
457
+ border: 1px solid var(--border);
458
+ border-radius: var(--radius-none);
459
+ padding: var(--space-3) var(--space-4);
460
+ flex: 1;
461
+ outline: none;
462
+ transition: border-color var(--transition-base) var(--ease-default);
463
+ }
464
+ .input:focus { border-color: var(--text-primary); }
465
+ .input::placeholder { color: var(--text-muted); }
466
+
467
+ /* ============================================================ CTA SECTION */
468
+ .cta-section {
469
+ text-align: center;
470
+ padding: var(--section-padding-y) var(--section-padding-x);
471
+ position: relative;
472
+ overflow: hidden;
473
+ }
474
+ .cta-section__bg {
475
+ position: absolute;
476
+ inset: 0;
477
+ background-image: url('https://media-www.sqspcdn.com/images/pages/homepage-2025/get-started/entrypoint-bg-500w.png');
478
+ background-size: cover;
479
+ background-position: center;
480
+ filter: brightness(0.3);
481
+ z-index: 0;
482
+ }
483
+ .cta-section__content { position: relative; z-index: 1; }
484
+ .cta-section__heading {
485
+ font-family: var(--font-display);
486
+ font-size: var(--text-xl);
487
+ font-weight: var(--font-normal);
488
+ color: var(--text-inverse);
489
+ margin-bottom: var(--space-4);
490
+ }
491
+ .cta-section__sub { font-size: var(--text-base); color: var(--text-light-gray); margin-bottom: var(--space-8); }
492
+
493
+ /* Templates row */
494
+ .cta-section__templates {
495
+ display: flex;
496
+ justify-content: center;
497
+ gap: var(--space-3);
498
+ margin-bottom: var(--space-8);
499
+ }
500
+ .cta-section__template-thumb {
501
+ width: 160px;
502
+ height: 110px;
503
+ object-fit: cover;
504
+ opacity: 0.8;
505
+ border: 1px solid rgba(255,255,255,0.2);
506
+ transition: opacity var(--transition-base) var(--ease-default);
507
+ }
508
+ .cta-section__template-thumb:hover { opacity: 1; }
509
+
510
+ /* ============================================================ FOOTER */
511
+ .footer { background: var(--bg-inverse); padding: var(--space-16) var(--section-padding-x) var(--space-10); }
512
+ .footer__grid {
513
+ max-width: var(--container-max);
514
+ margin: 0 auto;
515
+ display: grid;
516
+ grid-template-columns: repeat(4, 1fr);
517
+ gap: var(--grid-gap);
518
+ padding-bottom: var(--space-10);
519
+ border-bottom: 1px solid var(--border-dark);
520
+ }
521
+ .footer__col-title {
522
+ font-family: var(--font-display);
523
+ font-size: var(--text-sm);
524
+ font-weight: var(--font-medium);
525
+ color: var(--text-inverse);
526
+ margin-bottom: var(--space-5);
527
+ }
528
+ .footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
529
+ .footer__links a {
530
+ font-size: var(--text-sm);
531
+ color: var(--text-light-gray);
532
+ transition: color var(--transition-base) var(--ease-default);
533
+ }
534
+ .footer__links a:hover { color: var(--text-muted); }
535
+ .footer__legal {
536
+ max-width: var(--container-max);
537
+ margin: var(--space-6) auto 0;
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: space-between;
541
+ flex-wrap: wrap;
542
+ gap: var(--space-4);
543
+ }
544
+ .footer__copyright { font-size: var(--text-xs); color: var(--text-muted); }
545
+ .footer__legal-links { display: flex; gap: var(--space-5); list-style: none; }
546
+ .footer__legal-links a { font-size: var(--text-xs); color: var(--text-muted); transition: color var(--transition-base) var(--ease-default); }
547
+ .footer__legal-links a:hover { color: var(--text-light-gray); }
548
+
549
+ /* ============================================================ ANIMATIONS */
550
+ @keyframes fadeInUp {
551
+ from { opacity: 0; transform: translateY(20px); }
552
+ to { opacity: 1; transform: translateY(0); }
553
+ }
554
+ .fade-in {
555
+ opacity: 0;
556
+ transform: translateY(16px);
557
+ transition: opacity var(--transition-slow) var(--ease-out),
558
+ transform var(--transition-slow) var(--ease-out);
559
+ }
560
+ .fade-in.visible { opacity: 1; transform: translateY(0); }
561
+
562
+ /* ============================================================ RESPONSIVE */
563
+ @media (max-width: 768px) {
564
+ .nav__links { display: none; }
565
+ .hero__headline { font-size: 32px; }
566
+ .hero__sub { font-size: var(--text-lg); }
567
+ .feature-grid { grid-template-columns: 1fr 1fr; }
568
+ .split { grid-template-columns: 1fr; }
569
+ .stats__grid { grid-template-columns: 1fr 1fr 1fr; }
570
+ .showcase-grid { grid-template-columns: 1fr 1fr; }
571
+ .footer__grid { grid-template-columns: 1fr 1fr; }
572
+ .cta-section__templates { flex-wrap: wrap; }
573
+ }
574
+ @media (max-width: 390px) {
575
+ .hero__headline { font-size: 28px; }
576
+ .hero__cta-group { flex-direction: column; }
577
+ .hero__slides { display: none; }
578
+ .feature-grid { grid-template-columns: 1fr; }
579
+ .card-carousel { grid-template-columns: 1fr; }
580
+ .stats__grid { grid-template-columns: 1fr; }
581
+ .showcase-grid { grid-template-columns: 1fr; }
582
+ .footer__grid { grid-template-columns: 1fr; }
583
+ .domain-search__form { flex-direction: column; }
584
+ }
585
+ </style>
586
+ </head>
587
+ <body>
588
+
589
+ <!-- NAV -->
590
+ <nav class="nav" id="nav">
591
+ <div class="nav__inner">
592
+ <a href="#" class="nav__logo">Squarespace</a>
593
+ <ul class="nav__links">
594
+ <li><a href="#">Produtos</a></li>
595
+ <li><a href="#">Soluções</a></li>
596
+ <li><a href="#">Recursos</a></li>
597
+ <li><a href="#">Preços</a></li>
598
+ </ul>
599
+ <div class="nav__actions">
600
+ <button class="btn btn--ghost-light">Entrar</button>
601
+ <button class="btn btn--primary-light">Começar</button>
602
+ </div>
603
+ </div>
604
+ </nav>
605
+
606
+ <!-- HERO — hero-plants background from assets-list.json -->
607
+ <section class="hero">
608
+ <div class="hero__bg"></div>
609
+ <div class="hero__content">
610
+ <h1 class="hero__headline">Um site faz acontecer</h1>
611
+ <p class="hero__sub">Comece de graça. Não precisa de cartão de crédito.</p>
612
+ <div class="hero__cta-group">
613
+ <button class="btn btn--primary-light">Comece já</button>
614
+ </div>
615
+ <p class="hero__note">Experimente grátis por 14 dias</p>
616
+ </div>
617
+ <!-- Hero slide thumbnails — showcase design vocabulary -->
618
+ <div class="hero__slides">
619
+ <img class="hero__slide-thumb active"
620
+ src="https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/plants/20260206-01/template-500w.jpg"
621
+ alt="Plants template" onclick="switchHero(this, 'plants')">
622
+ <img class="hero__slide-thumb"
623
+ src="https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/piano/20260206-01/template-500w.jpg"
624
+ alt="Piano template" onclick="switchHero(this, 'piano')">
625
+ <img class="hero__slide-thumb"
626
+ src="https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/barber/20260206-01/template-500w.jpg"
627
+ alt="Barber template" onclick="switchHero(this, 'barber')">
628
+ <img class="hero__slide-thumb"
629
+ src="https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/ceramics/20260206-01/template-500w.jpg"
630
+ alt="Ceramics template" onclick="switchHero(this, 'ceramics')">
631
+ </div>
632
+ </section>
633
+
634
+ <!-- FEATURES — grow-your-business section (6 items) -->
635
+ <section class="section section--surface fade-in">
636
+ <div class="container">
637
+ <div style="text-align:center; margin-bottom: var(--space-10)">
638
+ <h2 class="section__heading">Expanda sua empresa</h2>
639
+ <p class="section__sub">Tudo o que você precisa para criar, gerenciar e fazer crescer o seu site em uma única plataforma.</p>
640
+ </div>
641
+ <div class="feature-grid">
642
+ <div>
643
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/services-mobile-500w.jpg" alt="Ferramentas profissionais">
644
+ <h3 class="feature-card__title">Ferramentas profissionais</h3>
645
+ <p class="feature-card__desc">Tudo o que você precisa para gerenciar seu negócio online.</p>
646
+ </div>
647
+ <div>
648
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/online-store-mobile-500w.jpg" alt="E-commerce completo">
649
+ <h3 class="feature-card__title">E-commerce completo</h3>
650
+ <p class="feature-card__desc">Venda produtos e aceite pagamentos de forma integrada.</p>
651
+ </div>
652
+ <div>
653
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/invoicing-mobile-500w.jpg" alt="Faturamento simples">
654
+ <h3 class="feature-card__title">Faturamento simples</h3>
655
+ <p class="feature-card__desc">Crie faturas profissionais e acompanhe pagamentos.</p>
656
+ </div>
657
+ <div>
658
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/scheduling-mobile-500w.jpg" alt="Agendamento online">
659
+ <h3 class="feature-card__title">Agendamento online</h3>
660
+ <p class="feature-card__desc">Permita que clientes agendem diretamente no seu site.</p>
661
+ </div>
662
+ <div>
663
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/blog-mobile-500w.jpg" alt="Blog integrado">
664
+ <h3 class="feature-card__title">Blog integrado</h3>
665
+ <p class="feature-card__desc">Publique conteúdo e atraia visitantes com SEO otimizado.</p>
666
+ </div>
667
+ <div>
668
+ <img class="feature-card__img" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/grow-your-business/portfolio-mobile-500w.jpg" alt="Portfolio visual">
669
+ <h3 class="feature-card__title">Portfolio visual</h3>
670
+ <p class="feature-card__desc">Mostre seu trabalho com galerias elegantes e responsivas.</p>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </section>
675
+
676
+ <!-- PLATFORM — card carousel (one-platform) -->
677
+ <section class="section section--elevated fade-in">
678
+ <div class="container">
679
+ <div class="split">
680
+ <div class="split__content">
681
+ <p class="split__label">Uma plataforma</p>
682
+ <h2 class="split__heading">Tudo que você precisa, em um só lugar</h2>
683
+ <p class="split__body">Do design à venda, do domínio ao marketing — gerencie tudo sem precisar de múltiplas ferramentas ou plugins.</p>
684
+ <button class="btn btn--primary-dark">Ver planos</button>
685
+ </div>
686
+ <div class="card-carousel">
687
+ <div class="card-carousel__item">
688
+ <img src="https://media-www.sqspcdn.com/images/components/card-carousel/website-editing-500w.jpg" alt="Editor de sites">
689
+ <span class="card-carousel__label">Editor de sites</span>
690
+ </div>
691
+ <div class="card-carousel__item">
692
+ <img src="https://media-www.sqspcdn.com/images/components/card-carousel/email-campaigns-500w.jpg" alt="Email marketing">
693
+ <span class="card-carousel__label">Email marketing</span>
694
+ </div>
695
+ <div class="card-carousel__item">
696
+ <img src="https://media-www.sqspcdn.com/images/components/card-carousel/analytics-500w.jpg" alt="Analytics">
697
+ <span class="card-carousel__label">Analytics</span>
698
+ </div>
699
+ <div class="card-carousel__item">
700
+ <img src="https://media-www.sqspcdn.com/images/components/card-carousel/payment-500w.jpg" alt="Pagamentos">
701
+ <span class="card-carousel__label">Pagamentos</span>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </section>
707
+
708
+ <!-- CTA — get-started section with template thumbnails -->
709
+ <section class="cta-section section fade-in">
710
+ <div class="cta-section__bg"></div>
711
+ <div class="cta-section__content container--narrow">
712
+ <h2 class="cta-section__heading">Comece com um template</h2>
713
+ <p class="cta-section__sub">Escolha entre centenas de templates criados por designers profissionais.</p>
714
+ <div class="cta-section__templates">
715
+ <img class="cta-section__template-thumb" src="https://media-www.sqspcdn.com/images/mpp-starting-points/en/rotate-500w.jpg" alt="Template Rotate">
716
+ <img class="cta-section__template-thumb" src="https://media-www.sqspcdn.com/images/mpp-starting-points/en/reseda-500w.jpg" alt="Template Reseda">
717
+ <img class="cta-section__template-thumb" src="https://media-www.sqspcdn.com/images/mpp-starting-points/en/altaloma-500w.jpg" alt="Template Altaloma">
718
+ </div>
719
+ <button class="btn btn--primary-light">Ver todos os templates</button>
720
+ </div>
721
+ </section>
722
+
723
+ <!-- DOMAIN SEARCH -->
724
+ <section class="section section--elevated fade-in">
725
+ <div class="container">
726
+ <div class="domain-search">
727
+ <h2 class="domain-search__heading">Encontre seu domínio perfeito</h2>
728
+ <div class="domain-search__form">
729
+ <input type="text" class="input" placeholder="Digite seu domínio (ex: minhaloja.com)">
730
+ <button class="btn btn--primary-dark">Buscar</button>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </section>
735
+
736
+ <!-- STATS — customers-served with headshots -->
737
+ <section class="section section--dark fade-in">
738
+ <div class="container">
739
+ <div class="stats">
740
+ <div class="stats__headshots">
741
+ <img class="stats__headshot" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/customers-served/headshot-1-500w.jpg" alt="Cliente 1">
742
+ <img class="stats__headshot" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/customers-served/headshot-2-500w.jpg" alt="Cliente 2">
743
+ <img class="stats__headshot" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/customers-served/headshot-3-500w.jpg" alt="Cliente 3">
744
+ <img class="stats__headshot" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/customers-served/headshot-4-500w.jpg" alt="Cliente 4">
745
+ <img class="stats__headshot" src="https://media-www.sqspcdn.com/images/pages/homepage-2025/customers-served/headshot-5-500w.jpg" alt="Cliente 5">
746
+ </div>
747
+ <div class="stats__grid">
748
+ <div>
749
+ <p class="stat__number">50M+</p>
750
+ <p class="stat__label">websites criados</p>
751
+ </div>
752
+ <div>
753
+ <p class="stat__number">1M+</p>
754
+ <p class="stat__label">utilizadores ativos</p>
755
+ </div>
756
+ <div>
757
+ <p class="stat__number">180+</p>
758
+ <p class="stat__label">países</p>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </section>
764
+
765
+ <!-- SHOWCASE — made-with-sqsp -->
766
+ <section class="section section--charcoal fade-in">
767
+ <div class="container">
768
+ <div style="text-align:center; margin-bottom: var(--space-10)">
769
+ <h2 class="section__heading section__heading--inverse">Feito com Squarespace</h2>
770
+ <p class="section__sub section__sub--inverse">Veja alguns dos incríveis sites criados com o Squarespace.</p>
771
+ </div>
772
+ <div class="showcase-grid">
773
+ <div class="showcase-item">
774
+ <img src="https://media-www.sqspcdn.com/images/pages/showcase-2025/stretchsquared-500w.jpg" alt="Stretch Squared">
775
+ <div class="showcase-item__overlay"></div>
776
+ <span class="showcase-item__label">Stretch Squared</span>
777
+ </div>
778
+ <div class="showcase-item">
779
+ <img src="https://media-www.sqspcdn.com/images/pages/showcase-2025/franklygoodcoffee-500w.jpg" alt="Frankly Good Coffee">
780
+ <div class="showcase-item__overlay"></div>
781
+ <span class="showcase-item__label">Frankly Good Coffee</span>
782
+ </div>
783
+ <div class="showcase-item">
784
+ <img src="https://media-www.sqspcdn.com/images/pages/showcase-2025/fieldtheory-500w.jpg" alt="Field Theory">
785
+ <div class="showcase-item__overlay"></div>
786
+ <span class="showcase-item__label">Field Theory</span>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </section>
791
+
792
+ <!-- FINAL CTA — teal + conversion bg -->
793
+ <section class="section section--teal cta-section fade-in">
794
+ <div class="container--narrow">
795
+ <div class="cta-section__content">
796
+ <h2 class="cta-section__heading">Pronto para criar seu site?</h2>
797
+ <p class="cta-section__sub">Junte-se a milhões que já constroem presença online com o Squarespace.</p>
798
+ <button class="btn btn--primary-light">Criar meu site</button>
799
+ </div>
800
+ </div>
801
+ </section>
802
+
803
+ <!-- FOOTER -->
804
+ <footer class="footer">
805
+ <div class="footer__grid">
806
+ <div>
807
+ <p class="footer__col-title">Produtos</p>
808
+ <ul class="footer__links">
809
+ <li><a href="#">Site</a></li>
810
+ <li><a href="#">E-commerce</a></li>
811
+ <li><a href="#">Blog</a></li>
812
+ <li><a href="#">Portfolio</a></li>
813
+ <li><a href="#">Domínios</a></li>
814
+ </ul>
815
+ </div>
816
+ <div>
817
+ <p class="footer__col-title">Soluções</p>
818
+ <ul class="footer__links">
819
+ <li><a href="#">Pequenas empresas</a></li>
820
+ <li><a href="#">Freelancers</a></li>
821
+ <li><a href="#">Restaurantes</a></li>
822
+ <li><a href="#">Músicos</a></li>
823
+ <li><a href="#">Fotógrafos</a></li>
824
+ </ul>
825
+ </div>
826
+ <div>
827
+ <p class="footer__col-title">Recursos</p>
828
+ <ul class="footer__links">
829
+ <li><a href="#">Templates</a></li>
830
+ <li><a href="#">Central de ajuda</a></li>
831
+ <li><a href="#">Blog</a></li>
832
+ <li><a href="#">Comunidade</a></li>
833
+ <li><a href="#">Webinars</a></li>
834
+ </ul>
835
+ </div>
836
+ <div>
837
+ <p class="footer__col-title">Empresa</p>
838
+ <ul class="footer__links">
839
+ <li><a href="#">Sobre nós</a></li>
840
+ <li><a href="#">Carreiras</a></li>
841
+ <li><a href="#">Imprensa</a></li>
842
+ <li><a href="#">Parceiros</a></li>
843
+ <li><a href="#">Contato</a></li>
844
+ </ul>
845
+ </div>
846
+ </div>
847
+ <div class="footer__legal">
848
+ <p class="footer__copyright">© 2026 Squarespace, Inc. Todos os direitos reservados.</p>
849
+ <ul class="footer__legal-links">
850
+ <li><a href="#">Privacidade</a></li>
851
+ <li><a href="#">Termos de uso</a></li>
852
+ <li><a href="#">Acessibilidade</a></li>
853
+ <li><a href="#">Cookies</a></li>
854
+ </ul>
855
+ </div>
856
+ </footer>
857
+
858
+ <script>
859
+ // Nav scroll: transparent → solid at 50px
860
+ const nav = document.getElementById('nav');
861
+ window.addEventListener('scroll', () => {
862
+ nav.classList.toggle('scrolled', window.scrollY > 50);
863
+ });
864
+
865
+ // Scroll-triggered reveals
866
+ const observer = new IntersectionObserver((entries) => {
867
+ entries.forEach(entry => {
868
+ if (entry.isIntersecting) entry.target.classList.add('visible');
869
+ });
870
+ }, { threshold: 0.1 });
871
+ document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
872
+
873
+ // Hero slide switcher
874
+ const heroBg = document.querySelector('.hero__bg');
875
+ const slideMap = {
876
+ plants: 'https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/plants/20260206-01/template-500w.jpg',
877
+ piano: 'https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/piano/20260206-01/template-500w.jpg',
878
+ barber: 'https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/barber/20260206-01/template-500w.jpg',
879
+ ceramics: 'https://media-www.sqspcdn.com/images/pages/homepage-2025/hero/slides/ceramics/20260206-01/template-500w.jpg',
880
+ };
881
+ function switchHero(thumb, key) {
882
+ document.querySelectorAll('.hero__slide-thumb').forEach(t => t.classList.remove('active'));
883
+ thumb.classList.add('active');
884
+ heroBg.style.backgroundImage = `url('${slideMap[key]}')`;
885
+ }
886
+ </script>
887
+
888
+ </body>
889
+ </html>