@gemboss/website-ui 0.9.0 → 0.11.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.
package/css/tokens.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --gw-space-120: 120px;
42
42
  --gw-space-section: clamp(56px, 38px + 5vw, 110px);
43
43
  --gw-radius-0: 0;
44
+ --gw-radius-2: 2px;
44
45
  --gw-radius-4: 4px;
45
46
  --gw-radius-6: 6px;
46
47
  --gw-radius-8: 8px;
@@ -57,6 +58,7 @@
57
58
  --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
58
59
  --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
59
60
  --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
61
+ --gw-shadow-lift: 0 16px 32px -12px rgba(4,5,26,.72), 0 4px 8px -2px rgba(4,5,26,.36);
60
62
  --gw-wrap: 1120px;
61
63
  --gw-wrap-narrow: 780px;
62
64
  --gw-gutter: 22px;
@@ -80,6 +82,12 @@
80
82
  --gw-wash-violet: #7c8af7;
81
83
  --gw-wash-sky: #43b0ff;
82
84
  --gw-wash-mint: #1fcf9f;
85
+ --gw-stage-glow: rgba(139, 147, 255, 0.5);
86
+ --gw-stage-glow-2: rgba(86, 97, 245, 0.34);
87
+ --gw-stage-top: #1d2058;
88
+ --gw-stage-bottom: #0d0f2e;
89
+ --gw-stage-dot: rgba(255, 255, 255, 0.1);
90
+ --gw-stage-ink: #ffffff;
83
91
  /* accent primitives: the only colours a brand overrides (docs/theming.md) */
84
92
  --gw-accent-light: #5661f5;
85
93
  --gw-accent-strong-light: #3a44de;
@@ -94,7 +102,7 @@
94
102
  --gw-surface: #ffffff;
95
103
  --gw-ink: #1b1c1e;
96
104
  --gw-ink-2: #3b3d42;
97
- --gw-muted: #686b71;
105
+ --gw-muted: #6a6d73;
98
106
  --gw-line: #e5e7ea;
99
107
  --gw-line-strong: #d5d8dd;
100
108
  --gw-line-control: #85888e;
@@ -116,6 +124,7 @@
116
124
  --gw-night-2: #141722;
117
125
  --gw-on-night: #e3e4e8;
118
126
  --gw-on-night-muted: #9aa3ff;
127
+ --gw-scrim: rgba(12, 14, 18, 0.12);
119
128
  }
120
129
  @media (prefers-color-scheme: dark) {
121
130
  :root:not([data-theme="light"]) {
@@ -129,7 +138,7 @@
129
138
  --gw-line: #2a2b33;
130
139
  --gw-line-strong: #383944;
131
140
  --gw-line-control: #6a6d78;
132
- --gw-action: #f2f3f5;
141
+ --gw-action: #e3e4e8;
133
142
  --gw-action-hover: #ffffff;
134
143
  --gw-on-action: #0d0d12;
135
144
  --gw-accent: var(--gw-accent-dark);
@@ -147,6 +156,10 @@
147
156
  --gw-night-2: #12141c;
148
157
  --gw-on-night: #e3e4e8;
149
158
  --gw-on-night-muted: #9aa3ff;
159
+ --gw-scrim: rgba(0, 0, 0, 0.35);
160
+ --gw-shadow: 0 1px 0 rgba(0,0,0,.3);
161
+ --gw-shadow-sm: 0 1px 0 rgba(0,0,0,.25);
162
+ --gw-shadow-raised: 0 4px 16px rgba(0,0,0,.5);
150
163
  }
151
164
  }
152
165
  :root[data-theme="dark"] {
@@ -160,7 +173,7 @@
160
173
  --gw-line: #2a2b33;
161
174
  --gw-line-strong: #383944;
162
175
  --gw-line-control: #6a6d78;
163
- --gw-action: #f2f3f5;
176
+ --gw-action: #e3e4e8;
164
177
  --gw-action-hover: #ffffff;
165
178
  --gw-on-action: #0d0d12;
166
179
  --gw-accent: var(--gw-accent-dark);
@@ -178,6 +191,10 @@
178
191
  --gw-night-2: #12141c;
179
192
  --gw-on-night: #e3e4e8;
180
193
  --gw-on-night-muted: #9aa3ff;
194
+ --gw-scrim: rgba(0, 0, 0, 0.35);
195
+ --gw-shadow: 0 1px 0 rgba(0,0,0,.3);
196
+ --gw-shadow-sm: 0 1px 0 rgba(0,0,0,.25);
197
+ --gw-shadow-raised: 0 4px 16px rgba(0,0,0,.5);
181
198
  }
182
199
  :root[data-theme="light"] {
183
200
  color-scheme: light;
@@ -186,7 +203,7 @@
186
203
  --gw-surface: #ffffff;
187
204
  --gw-ink: #1b1c1e;
188
205
  --gw-ink-2: #3b3d42;
189
- --gw-muted: #686b71;
206
+ --gw-muted: #6a6d73;
190
207
  --gw-line: #e5e7ea;
191
208
  --gw-line-strong: #d5d8dd;
192
209
  --gw-line-control: #85888e;
@@ -208,6 +225,7 @@
208
225
  --gw-night-2: #141722;
209
226
  --gw-on-night: #e3e4e8;
210
227
  --gw-on-night-muted: #9aa3ff;
228
+ --gw-scrim: rgba(12, 14, 18, 0.12);
211
229
  }
212
230
  /* night band: the dark palette inside, on the night ground, in both themes */
213
231
  .gw-band--night, .gw-showcase {
@@ -221,7 +239,7 @@
221
239
  --gw-line: #2a2b33;
222
240
  --gw-line-strong: #383944;
223
241
  --gw-line-control: #6a6d78;
224
- --gw-action: #f2f3f5;
242
+ --gw-action: #e3e4e8;
225
243
  --gw-action-hover: #ffffff;
226
244
  --gw-on-action: #0d0d12;
227
245
  --gw-accent: var(--gw-accent-dark);
@@ -235,6 +253,7 @@
235
253
  --gw-danger: #ff6b5a;
236
254
  --gw-danger-soft: #2e1714;
237
255
  --gw-on-danger: #0d0d12;
256
+ --gw-scrim: rgba(0, 0, 0, 0.35);
238
257
  }
239
258
  /* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
240
259
  :root[data-gw-action="accent"],
package/demo/article.html CHANGED
@@ -16,80 +16,35 @@
16
16
 
17
17
  <div class="gw-announce" role="region" aria-label="Announcement">GemBoss is built by the team behind GemPages. <a href="https://feedback.gemboss.ai/changelog" rel="noopener">What's new on the changelog</a></div>
18
18
  <header class="gw-header" data-gw-header>
19
- <div class="gw-wrap gw-header__bar">
19
+ <div class="gw-header__bar">
20
20
  <a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
21
- <nav class="gw-nav" aria-label="Main">
22
- <ul class="gw-nav__list">
23
- <li class="gw-nav__item">
24
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
25
- <div class="gw-mega" id="gw-mega-product" hidden>
26
- <div class="gw-wrap gw-mega__grid">
27
- <div class="gw-mega__col">
28
- <p class="gw-mega__heading">Build</p>
29
- <a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
30
- <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
31
- <a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
32
- </div>
33
- <div class="gw-mega__col">
34
- <p class="gw-mega__heading">Grow</p>
35
- <a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a>
36
- <a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a>
37
- <a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a>
38
- </div>
39
- <div class="gw-mega__col">
40
- <p class="gw-mega__heading">Connect</p>
41
- <a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
42
- <a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a>
43
- <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
44
- </div>
45
- <a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
46
- </div>
47
- </div>
48
- </li>
49
- <li class="gw-nav__item">
50
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
51
- <div class="gw-mega" id="gw-mega-usecases" hidden>
52
- <div class="gw-wrap gw-mega__grid">
53
- <div class="gw-mega__col">
54
- <p class="gw-mega__heading">Adaptive funnels</p>
55
- <a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google &amp; TikTok ads</b><i>A funnel for every ad angle</i></span></a>
56
- <a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
57
- </div>
58
- <div class="gw-mega__col">
59
- <p class="gw-mega__heading">Adaptive storefront</p>
60
- <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
61
- <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents &amp; AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
62
- </div>
63
- <a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
64
- </div>
65
- </div>
66
- </li>
67
- <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
68
- <li class="gw-nav__item">
69
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
70
- <div class="gw-mega" id="gw-mega-resources" hidden>
71
- <div class="gw-wrap gw-mega__grid">
72
- <div class="gw-mega__col">
73
- <p class="gw-mega__heading">Learn</p>
74
- <a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
75
- <a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
76
- </div>
77
- <div class="gw-mega__col">
78
- <p class="gw-mega__heading">Company</p>
79
- <a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
80
- <a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
81
- </div>
82
- </div>
83
- </div>
84
- </li>
85
- </ul>
86
- </nav>
21
+ <nav class="gw-nav" aria-label="Primary">
22
+ <ul class="gw-nav__list">
23
+ <li class="gw-nav__item">
24
+ <a class="gw-nav__trigger" href="https://gemboss.ai/product" aria-expanded="false" aria-controls="gw-mega-product">Product <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
25
+ <div class="gw-mega" id="gw-mega-product" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Build</span><a class="gw-mega__link" href="https://gemboss.ai/funnel" data-gw-preview="gw-pv-funnel"><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/page-builder" data-gw-preview="gw-pv-page"><span><b>Page builder</b><i>Ask, watch, publish</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/custom-theme" data-gw-preview="gw-pv-sections"><span><b>Custom theme</b><i>60 sections that convert</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Grow</span><a class="gw-mega__link" href="https://gemboss.ai/ab-testing" data-gw-preview="gw-pv-ab"><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/offers" data-gw-preview="gw-pv-offer"><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/data" data-gw-preview="gw-pv-chart"><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/product" data-gw-preview="gw-pv-ops"><span><b>Operator</b><i>What to change next</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Connect</span><a class="gw-mega__link" href="https://gemboss.ai/integrations" data-gw-preview="gw-pv-integrations"><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/mcp" data-gw-preview="gw-pv-mcp"><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-visibility" data-gw-preview="gw-pv-answer"><span><b>AI search visibility</b><i>Be in the answer</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/engine"><span class="gw-mega__art"><img src="assets/post-headless.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-mega__go">See the engine →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a><a href="https://gemboss.ai/product">Everything in the product</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
26
+ </li>
27
+ <li class="gw-nav__item">
28
+ <a class="gw-nav__trigger" href="https://gemboss.ai/meta-ads" aria-expanded="false" aria-controls="gw-mega-usecases">Use cases <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
29
+ <div class="gw-mega" id="gw-mega-usecases" style="--gw-mega-w:1000px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive funnels</span><a class="gw-mega__link" href="https://gemboss.ai/meta-ads" data-gw-preview="feature"><span><b>Meta, Google &amp; TikTok ads </b><i>A funnel for every ad angle</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages" data-gw-preview="gw-pv-email"><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliate-landing-pages" data-gw-preview="gw-pv-creator"><span><b>Affiliates &amp; creators <span class="gw-badge gw-badge--warning">Early access</span></b><i>Put the creator on the page</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive storefront</span><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Headless storefront </b><i>Your whole Shopify store, on GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/#personalize" data-gw-preview="gw-pv-ab"><span><b>Personalized by audience </b><i>Sections by source, device, returning</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>AI agents &amp; AI search </b><i>Readable by AI, shoppable by agents</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/meta-ads"><span class="gw-mega__art"><img src="assets/post-motion.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-mega__go">See the ad-to-page path →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/engine">How the engine works</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
30
+ </li>
31
+ <li class="gw-nav__item">
32
+ <a class="gw-nav__trigger" href="https://gemboss.ai/solutions" aria-expanded="false" aria-controls="gw-mega-solutions">Solutions <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
33
+ <div class="gw-mega" id="gw-mega-solutions" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">By industry</span><a class="gw-mega__link" href="https://gemboss.ai/beauty-skincare" data-gw-preview="gw-pv-beauty"><img src="/assets/img/thumbs/th-menu-beauty.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Beauty &amp; skincare</b><i>Ingredients and routines</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/wellness-supplements" data-gw-preview="gw-pv-wellness"><img src="/assets/img/thumbs/th-menu-wellness.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Wellness &amp; supplements</b><i>Claims done right</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/fashion-apparel" data-gw-preview="gw-pv-fashion"><img src="/assets/img/thumbs/th-menu-fashion.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Fashion &amp; apparel</b><i>Fit, drops, returns</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/home-food" data-gw-preview="gw-pv-food"><img src="/assets/img/thumbs/th-menu-food.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Home &amp; food</b><i>Taste and texture</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/electronics" data-gw-preview="gw-pv-electronics"><img src="/assets/img/thumbs/th-menu-electronics.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Consumer electronics</b><i>Specs that sell</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">By team</span><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-founders"><span><b>Founders</b><i>No dev team needed</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-ab"><span><b>Growth leads</b><i>Test more, guess less</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/partners" data-gw-preview="gw-pv-stores"><span><b>Media buyers &amp; agencies</b><i>Bring your clients</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-agencies" data-gw-preview="gw-pv-email"><span><b>Email &amp; Klaviyo agencies</b><i>Own the page after the send</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">For bigger brands</span><a class="gw-mega__link" href="https://gemboss.ai/enterprise" data-gw-preview="gw-pv-mosaic"><span><b>Enterprise</b><i>More stores, more control</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/managed" data-gw-preview="gw-pv-tasks"><span><b>Managed service</b><i>A team runs it for you</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a></div></div><div class="gw-mega__aside" aria-hidden="true"></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/solutions">See all solutions</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Talk to sales <span aria-hidden="true">→</span></a></div></div></div>
34
+ </li>
35
+ <li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
36
+ <li class="gw-nav__item">
37
+ <a class="gw-nav__trigger" href="https://gemboss.ai/blog" aria-expanded="false" aria-controls="gw-mega-resources">Resources <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
38
+ <div class="gw-mega" id="gw-mega-resources" style="--gw-mega-w:920px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Learn</span><a class="gw-mega__link" href="https://gemboss.ai/blog" data-gw-preview="gw-pv-posts"><span><b>Blog</b><i>Playbooks and guides</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/docs" data-gw-preview="gw-pv-docs"><span><b>Docs</b><i>Guides and MCP tools</i></span></a><a class="gw-mega__link" href="https://community.gemboss.ai" rel="noopener" data-gw-preview="gw-pv-community"><span><b>Community <span class="ext" aria-hidden="true">↗</span></b><i>Brands building with GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/download" data-gw-preview="gw-pv-window"><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Company</span><a class="gw-mega__link" href="https://gemboss.ai/company" data-gw-preview="gw-pv-about"><span><b>About</b><i>Why we build it</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/careers" data-gw-preview="gw-pv-careers"><span><b>Careers</b><i>Join the team</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/company#security" data-gw-preview="gw-pv-shield"><span><b>Security</b><i>How data stays safe</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliates" data-gw-preview="gw-pv-payout"><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Contact</b><i>Talk to a human</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://news.gemboss.ai/ext" rel="noopener"><span class="gw-mega__art"><img src="assets/post-output.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Shopify and AI news, every new tab</b><i>A free daily briefing for DTC brands. No account needed.</i><span class="gw-mega__go">Get the extension ↗</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a></div><div class="gw-mega__foot-end"></div></div></div>
39
+ </li>
40
+ </ul>
41
+ </nav>
87
42
  <div class="gw-header__actions">
88
43
  <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
89
44
  <a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
90
- <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
45
+ <a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
91
46
  <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
92
- <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
47
+ <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
93
48
  </div>
94
49
  </div>
95
50
  <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
@@ -129,7 +84,40 @@
129
84
  </div>
130
85
  </nav>
131
86
  </div>
132
- </header>
87
+ <!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
88
+ <template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
89
+ <template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
90
+ <template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
91
+ <template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
92
+ <template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
93
+ <template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
94
+ <template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
95
+ <template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
96
+ <template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
97
+ <template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
98
+ <template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
99
+ <template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
100
+ <template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
101
+ <template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
102
+ <template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
103
+ <template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
104
+ <template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
105
+ <template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
106
+ <template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
107
+ <template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
108
+ <template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
109
+ <template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
110
+ <template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
111
+ <template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
112
+ <template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
113
+ <template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
114
+ <template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
115
+ <template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
116
+ <template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
117
+ <template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
118
+ <template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
119
+ <template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
120
+ </header>
133
121
 
134
122
  <main id="main">
135
123
  <article class="gw-wrap gw-article">
package/demo/blog.html CHANGED
@@ -16,80 +16,35 @@
16
16
 
17
17
  <div class="gw-announce" role="region" aria-label="Announcement">GemBoss is built by the team behind GemPages. <a href="https://feedback.gemboss.ai/changelog" rel="noopener">What's new on the changelog</a></div>
18
18
  <header class="gw-header" data-gw-header>
19
- <div class="gw-wrap gw-header__bar">
19
+ <div class="gw-header__bar">
20
20
  <a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
21
- <nav class="gw-nav" aria-label="Main">
22
- <ul class="gw-nav__list">
23
- <li class="gw-nav__item">
24
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
25
- <div class="gw-mega" id="gw-mega-product" hidden>
26
- <div class="gw-wrap gw-mega__grid">
27
- <div class="gw-mega__col">
28
- <p class="gw-mega__heading">Build</p>
29
- <a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
30
- <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
31
- <a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
32
- </div>
33
- <div class="gw-mega__col">
34
- <p class="gw-mega__heading">Grow</p>
35
- <a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a>
36
- <a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a>
37
- <a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a>
38
- </div>
39
- <div class="gw-mega__col">
40
- <p class="gw-mega__heading">Connect</p>
41
- <a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
42
- <a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a>
43
- <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
44
- </div>
45
- <a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
46
- </div>
47
- </div>
48
- </li>
49
- <li class="gw-nav__item">
50
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
51
- <div class="gw-mega" id="gw-mega-usecases" hidden>
52
- <div class="gw-wrap gw-mega__grid">
53
- <div class="gw-mega__col">
54
- <p class="gw-mega__heading">Adaptive funnels</p>
55
- <a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google &amp; TikTok ads</b><i>A funnel for every ad angle</i></span></a>
56
- <a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
57
- </div>
58
- <div class="gw-mega__col">
59
- <p class="gw-mega__heading">Adaptive storefront</p>
60
- <a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
61
- <a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents &amp; AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
62
- </div>
63
- <a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
64
- </div>
65
- </div>
66
- </li>
67
- <li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
68
- <li class="gw-nav__item">
69
- <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
70
- <div class="gw-mega" id="gw-mega-resources" hidden>
71
- <div class="gw-wrap gw-mega__grid">
72
- <div class="gw-mega__col">
73
- <p class="gw-mega__heading">Learn</p>
74
- <a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
75
- <a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
76
- </div>
77
- <div class="gw-mega__col">
78
- <p class="gw-mega__heading">Company</p>
79
- <a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
80
- <a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
81
- </div>
82
- </div>
83
- </div>
84
- </li>
85
- </ul>
86
- </nav>
21
+ <nav class="gw-nav" aria-label="Primary">
22
+ <ul class="gw-nav__list">
23
+ <li class="gw-nav__item">
24
+ <a class="gw-nav__trigger" href="https://gemboss.ai/product" aria-expanded="false" aria-controls="gw-mega-product">Product <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
25
+ <div class="gw-mega" id="gw-mega-product" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Build</span><a class="gw-mega__link" href="https://gemboss.ai/funnel" data-gw-preview="gw-pv-funnel"><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/page-builder" data-gw-preview="gw-pv-page"><span><b>Page builder</b><i>Ask, watch, publish</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/custom-theme" data-gw-preview="gw-pv-sections"><span><b>Custom theme</b><i>60 sections that convert</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Grow</span><a class="gw-mega__link" href="https://gemboss.ai/ab-testing" data-gw-preview="gw-pv-ab"><span><b>Tests &amp; personalization</b><i>You promote the winner</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/offers" data-gw-preview="gw-pv-offer"><span><b>Offers &amp; upsells</b><i>Bundles, gifts, bumps</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/data" data-gw-preview="gw-pv-chart"><span><b>Analytics &amp; data</b><i>First-party, yours</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/product" data-gw-preview="gw-pv-ops"><span><b>Operator</b><i>What to change next</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Connect</span><a class="gw-mega__link" href="https://gemboss.ai/integrations" data-gw-preview="gw-pv-integrations"><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/mcp" data-gw-preview="gw-pv-mcp"><span><b>MCP &amp; agents</b><i>Claude and Codex</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/ai-visibility" data-gw-preview="gw-pv-answer"><span><b>AI search visibility</b><i>Be in the answer</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/engine"><span class="gw-mega__art"><img src="assets/post-headless.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-mega__go">See the engine →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a><a href="https://gemboss.ai/product">Everything in the product</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
26
+ </li>
27
+ <li class="gw-nav__item">
28
+ <a class="gw-nav__trigger" href="https://gemboss.ai/meta-ads" aria-expanded="false" aria-controls="gw-mega-usecases">Use cases <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
29
+ <div class="gw-mega" id="gw-mega-usecases" style="--gw-mega-w:1000px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive funnels</span><a class="gw-mega__link" href="https://gemboss.ai/meta-ads" data-gw-preview="feature"><span><b>Meta, Google &amp; TikTok ads </b><i>A funnel for every ad angle</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages" data-gw-preview="gw-pv-email"><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliate-landing-pages" data-gw-preview="gw-pv-creator"><span><b>Affiliates &amp; creators <span class="gw-badge gw-badge--warning">Early access</span></b><i>Put the creator on the page</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Adaptive storefront</span><a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder" data-gw-preview="gw-pv-store"><span><b>Headless storefront </b><i>Your whole Shopify store, on GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/#personalize" data-gw-preview="gw-pv-ab"><span><b>Personalized by audience </b><i>Sections by source, device, returning</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/agent-ready" data-gw-preview="gw-pv-robot"><span><b>AI agents &amp; AI search </b><i>Readable by AI, shoppable by agents</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://gemboss.ai/meta-ads"><span class="gw-mega__art"><img src="assets/post-motion.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-mega__go">See the ad-to-page path →</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/engine">How the engine works</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Book a demo <span aria-hidden="true">→</span></a></div></div></div>
30
+ </li>
31
+ <li class="gw-nav__item">
32
+ <a class="gw-nav__trigger" href="https://gemboss.ai/solutions" aria-expanded="false" aria-controls="gw-mega-solutions">Solutions <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
33
+ <div class="gw-mega" id="gw-mega-solutions" style="--gw-mega-w:1120px;--gw-mega-pv:380px" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">By industry</span><a class="gw-mega__link" href="https://gemboss.ai/beauty-skincare" data-gw-preview="gw-pv-beauty"><img src="/assets/img/thumbs/th-menu-beauty.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Beauty &amp; skincare</b><i>Ingredients and routines</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/wellness-supplements" data-gw-preview="gw-pv-wellness"><img src="/assets/img/thumbs/th-menu-wellness.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Wellness &amp; supplements</b><i>Claims done right</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/fashion-apparel" data-gw-preview="gw-pv-fashion"><img src="/assets/img/thumbs/th-menu-fashion.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Fashion &amp; apparel</b><i>Fit, drops, returns</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/home-food" data-gw-preview="gw-pv-food"><img src="/assets/img/thumbs/th-menu-food.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Home &amp; food</b><i>Taste and texture</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/electronics" data-gw-preview="gw-pv-electronics"><img src="/assets/img/thumbs/th-menu-electronics.webp" width="160" height="108" alt="" loading="lazy" decoding="async"><span><b>Consumer electronics</b><i>Specs that sell</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">By team</span><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-founders"><span><b>Founders</b><i>No dev team needed</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/solutions#teams" data-gw-preview="gw-pv-ab"><span><b>Growth leads</b><i>Test more, guess less</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/partners" data-gw-preview="gw-pv-stores"><span><b>Media buyers &amp; agencies</b><i>Bring your clients</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/klaviyo-agencies" data-gw-preview="gw-pv-email"><span><b>Email &amp; Klaviyo agencies</b><i>Own the page after the send</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">For bigger brands</span><a class="gw-mega__link" href="https://gemboss.ai/enterprise" data-gw-preview="gw-pv-mosaic"><span><b>Enterprise</b><i>More stores, more control</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/managed" data-gw-preview="gw-pv-tasks"><span><b>Managed service</b><i>A team runs it for you</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a></div></div><div class="gw-mega__aside" aria-hidden="true"></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://gemboss.ai/solutions">See all solutions</a></div><div class="gw-mega__foot-end"><a class="gw-mega__cta" href="https://gemboss.ai/contact">Talk to sales <span aria-hidden="true">→</span></a></div></div></div>
34
+ </li>
35
+ <li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
36
+ <li class="gw-nav__item">
37
+ <a class="gw-nav__trigger" href="https://gemboss.ai/blog" aria-expanded="false" aria-controls="gw-mega-resources">Resources <svg aria-hidden="true" class="gw-nav__chev" width="12" height="12" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
38
+ <div class="gw-mega" id="gw-mega-resources" style="--gw-mega-w:920px;--gw-mega-pv:400px;--gw-mega-cols:2" hidden><div class="gw-mega__body"><div class="gw-mega__grid"><div class="gw-mega__col"><span class="gw-mega__heading">Learn</span><a class="gw-mega__link" href="https://gemboss.ai/blog" data-gw-preview="gw-pv-posts"><span><b>Blog</b><i>Playbooks and guides</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/docs" data-gw-preview="gw-pv-docs"><span><b>Docs</b><i>Guides and MCP tools</i></span></a><a class="gw-mega__link" href="https://community.gemboss.ai" rel="noopener" data-gw-preview="gw-pv-community"><span><b>Community <span class="ext" aria-hidden="true">↗</span></b><i>Brands building with GemBoss</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/download" data-gw-preview="gw-pv-window"><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a></div><div class="gw-mega__col"><span class="gw-mega__heading">Company</span><a class="gw-mega__link" href="https://gemboss.ai/company" data-gw-preview="gw-pv-about"><span><b>About</b><i>Why we build it</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/careers" data-gw-preview="gw-pv-careers"><span><b>Careers</b><i>Join the team</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/company#security" data-gw-preview="gw-pv-shield"><span><b>Security</b><i>How data stays safe</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/affiliates" data-gw-preview="gw-pv-payout"><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a><a class="gw-mega__link" href="https://gemboss.ai/contact" data-gw-preview="gw-pv-chat"><span><b>Contact</b><i>Talk to a human</i></span></a></div></div><div class="gw-mega__aside"><a class="gw-mega__card" href="https://news.gemboss.ai/ext" rel="noopener"><span class="gw-mega__art"><img src="assets/post-output.svg" alt="" decoding="async"></span><span class="gw-mega__card-text"><b>Shopify and AI news, every new tab</b><i>A free daily briefing for DTC brands. No account needed.</i><span class="gw-mega__go">Get the extension ↗</span></span></a></div></div><div class="gw-mega__foot"><div class="gw-mega__foot-start"><a href="https://feedback.gemboss.ai/changelog" rel="noopener"><span class="gw-mega__new">New</span> What's new on the changelog <span aria-hidden="true">↗</span></a></div><div class="gw-mega__foot-end"></div></div></div>
39
+ </li>
40
+ </ul>
41
+ </nav>
87
42
  <div class="gw-header__actions">
88
43
  <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
89
44
  <a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
90
- <a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
45
+ <a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
91
46
  <a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
92
- <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
47
+ <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
93
48
  </div>
94
49
  </div>
95
50
  <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
@@ -129,7 +84,40 @@
129
84
  </div>
130
85
  </nav>
131
86
  </div>
132
- </header>
87
+ <!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
88
+ <template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
89
+ <template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
90
+ <template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
91
+ <template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
92
+ <template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
93
+ <template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
94
+ <template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
95
+ <template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
96
+ <template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
97
+ <template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
98
+ <template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
99
+ <template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
100
+ <template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
101
+ <template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
102
+ <template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
103
+ <template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
104
+ <template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
105
+ <template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
106
+ <template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
107
+ <template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
108
+ <template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
109
+ <template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
110
+ <template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
111
+ <template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
112
+ <template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
113
+ <template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
114
+ <template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
115
+ <template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
116
+ <template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
117
+ <template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
118
+ <template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
119
+ <template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
120
+ </header>
133
121
 
134
122
  <main id="main">
135
123
  <section class="gw-hero gw-hero--compact" aria-labelledby="blog-h">