@gemboss/website-ui 0.10.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/CHANGELOG.md +59 -0
- package/README.md +2 -2
- package/bin/lib/check.mjs +6 -2
- package/css/base.css +2 -1
- package/css/effects.css +1 -1
- package/css/header.css +335 -115
- package/css/tokens.css +22 -3
- package/demo/article.html +58 -70
- package/demo/blog.html +58 -70
- package/demo/brand-profiles.html +57 -27
- package/demo/footer.html +58 -70
- package/demo/forms.html +58 -70
- package/demo/header.html +58 -108
- package/demo/index.html +58 -70
- package/demo/spotlight.html +58 -71
- package/demo/theme-example.html +1 -1
- package/docs/components.md +17 -12
- package/docs/markup-contract.md +45 -19
- package/js/website.js +284 -41
- package/js/website.mjs +314 -42
- package/package.json +1 -1
- package/system.json +20 -5
- package/templates/header.html +47 -24
- package/templates/page.html +54 -20
- package/website.css +361 -121
- package/website.min.css +1 -1
package/demo/index.html
CHANGED
|
@@ -32,80 +32,35 @@
|
|
|
32
32
|
|
|
33
33
|
<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>
|
|
34
34
|
<header class="gw-header" data-gw-header>
|
|
35
|
-
<div class="gw-
|
|
35
|
+
<div class="gw-header__bar">
|
|
36
36
|
<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>
|
|
37
|
-
<nav class="gw-nav" aria-label="
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<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 & agents</b><i>Claude and Codex</i></span></a>
|
|
59
|
-
<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>
|
|
60
|
-
</div>
|
|
61
|
-
<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>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</li>
|
|
65
|
-
<li class="gw-nav__item">
|
|
66
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
67
|
-
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
68
|
-
<div class="gw-wrap gw-mega__grid">
|
|
69
|
-
<div class="gw-mega__col">
|
|
70
|
-
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
71
|
-
<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 & TikTok ads</b><i>A funnel for every ad angle</i></span></a>
|
|
72
|
-
<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>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="gw-mega__col">
|
|
75
|
-
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
76
|
-
<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>
|
|
77
|
-
<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 & AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
|
|
78
|
-
</div>
|
|
79
|
-
<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>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
84
|
-
<li class="gw-nav__item">
|
|
85
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
86
|
-
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
87
|
-
<div class="gw-wrap gw-mega__grid">
|
|
88
|
-
<div class="gw-mega__col">
|
|
89
|
-
<p class="gw-mega__heading">Learn</p>
|
|
90
|
-
<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>
|
|
91
|
-
<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>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="gw-mega__col">
|
|
94
|
-
<p class="gw-mega__heading">Company</p>
|
|
95
|
-
<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>
|
|
96
|
-
<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>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</li>
|
|
101
|
-
</ul>
|
|
102
|
-
</nav>
|
|
37
|
+
<nav class="gw-nav" aria-label="Primary">
|
|
38
|
+
<ul class="gw-nav__list">
|
|
39
|
+
<li class="gw-nav__item">
|
|
40
|
+
<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>
|
|
41
|
+
<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 & 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 & 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 & 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 & 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>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="gw-nav__item">
|
|
44
|
+
<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>
|
|
45
|
+
<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 & 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 & 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 & 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>
|
|
46
|
+
</li>
|
|
47
|
+
<li class="gw-nav__item">
|
|
48
|
+
<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>
|
|
49
|
+
<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 & 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 & 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 & 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 & 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 & 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 & 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>
|
|
50
|
+
</li>
|
|
51
|
+
<li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
52
|
+
<li class="gw-nav__item">
|
|
53
|
+
<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>
|
|
54
|
+
<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>
|
|
55
|
+
</li>
|
|
56
|
+
</ul>
|
|
57
|
+
</nav>
|
|
103
58
|
<div class="gw-header__actions">
|
|
104
59
|
<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>
|
|
105
60
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
106
|
-
<a class="gw-
|
|
61
|
+
<a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
|
|
107
62
|
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
108
|
-
<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="
|
|
63
|
+
<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>
|
|
109
64
|
</div>
|
|
110
65
|
</div>
|
|
111
66
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
@@ -145,7 +100,40 @@
|
|
|
145
100
|
</div>
|
|
146
101
|
</nav>
|
|
147
102
|
</div>
|
|
148
|
-
|
|
103
|
+
<!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
|
|
104
|
+
<template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
105
|
+
<template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
106
|
+
<template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
107
|
+
<template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
108
|
+
<template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
109
|
+
<template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
110
|
+
<template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
111
|
+
<template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
112
|
+
<template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
113
|
+
<template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
114
|
+
<template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
115
|
+
<template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
116
|
+
<template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
117
|
+
<template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
118
|
+
<template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
119
|
+
<template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
120
|
+
<template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
121
|
+
<template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
122
|
+
<template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
123
|
+
<template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
124
|
+
<template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
125
|
+
<template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
126
|
+
<template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
127
|
+
<template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
128
|
+
<template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
129
|
+
<template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
130
|
+
<template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
131
|
+
<template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
132
|
+
<template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
133
|
+
<template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
134
|
+
<template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
135
|
+
<template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
136
|
+
</header>
|
|
149
137
|
|
|
150
138
|
<main id="main">
|
|
151
139
|
<!-- hero -->
|
package/demo/spotlight.html
CHANGED
|
@@ -35,80 +35,35 @@
|
|
|
35
35
|
|
|
36
36
|
<div class="gw-announce" role="region" aria-label="Announcement">Kit demo: the spotlight, a light that follows the pointer on what you can click. <a href="index.html">Back to the full demo</a></div>
|
|
37
37
|
<header class="gw-header" data-gw-header>
|
|
38
|
-
<div class="gw-
|
|
38
|
+
<div class="gw-header__bar">
|
|
39
39
|
<a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><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><a class="gw-brand" href="spotlight.html#gempages" data-gw-show="brand:gempages" hidden><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
|
|
40
|
-
<nav class="gw-nav" aria-label="
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<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 & agents</b><i>Claude and Codex</i></span></a>
|
|
62
|
-
<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>
|
|
63
|
-
</div>
|
|
64
|
-
<a class="gw-mega__feature" data-gw-spot 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>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</li>
|
|
68
|
-
<li class="gw-nav__item">
|
|
69
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
70
|
-
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
71
|
-
<div class="gw-wrap gw-mega__grid">
|
|
72
|
-
<div class="gw-mega__col">
|
|
73
|
-
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
74
|
-
<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 & TikTok ads</b><i>A funnel for every ad angle</i></span></a>
|
|
75
|
-
<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>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="gw-mega__col">
|
|
78
|
-
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
79
|
-
<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>
|
|
80
|
-
<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 & AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
|
|
81
|
-
</div>
|
|
82
|
-
<a class="gw-mega__feature" data-gw-spot 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>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
</li>
|
|
86
|
-
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
87
|
-
<li class="gw-nav__item">
|
|
88
|
-
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
89
|
-
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
90
|
-
<div class="gw-wrap gw-mega__grid">
|
|
91
|
-
<div class="gw-mega__col">
|
|
92
|
-
<p class="gw-mega__heading">Learn</p>
|
|
93
|
-
<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>
|
|
94
|
-
<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>
|
|
95
|
-
</div>
|
|
96
|
-
<div class="gw-mega__col">
|
|
97
|
-
<p class="gw-mega__heading">Company</p>
|
|
98
|
-
<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>
|
|
99
|
-
<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>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</li>
|
|
104
|
-
</ul>
|
|
105
|
-
</nav>
|
|
40
|
+
<nav class="gw-nav" aria-label="Primary">
|
|
41
|
+
<ul class="gw-nav__list">
|
|
42
|
+
<li class="gw-nav__item">
|
|
43
|
+
<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>
|
|
44
|
+
<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 & 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 & 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 & 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 & 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" data-gw-spot=".gw-mega__art"><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>
|
|
45
|
+
</li>
|
|
46
|
+
<li class="gw-nav__item">
|
|
47
|
+
<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>
|
|
48
|
+
<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 & 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 & 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 & 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" data-gw-spot=".gw-mega__art"><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>
|
|
49
|
+
</li>
|
|
50
|
+
<li class="gw-nav__item">
|
|
51
|
+
<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>
|
|
52
|
+
<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 & 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 & 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 & 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 & 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 & 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 & 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>
|
|
53
|
+
</li>
|
|
54
|
+
<li><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
55
|
+
<li class="gw-nav__item">
|
|
56
|
+
<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>
|
|
57
|
+
<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>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</nav>
|
|
106
61
|
<div class="gw-header__actions">
|
|
107
62
|
<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>
|
|
108
63
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
109
|
-
<a class="gw-
|
|
64
|
+
<a class="gw-nav__link gw-header__link" href="https://gemboss.ai/contact">Book a demo</a>
|
|
110
65
|
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
111
|
-
<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="
|
|
66
|
+
<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>
|
|
112
67
|
</div>
|
|
113
68
|
</div>
|
|
114
69
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
@@ -148,7 +103,40 @@
|
|
|
148
103
|
</div>
|
|
149
104
|
</nav>
|
|
150
105
|
</div>
|
|
151
|
-
|
|
106
|
+
<!-- the menu rows' previews (data-gw-preview), cloned by the script on desktop -->
|
|
107
|
+
<template id="gw-pv-ab"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
108
|
+
<template id="gw-pv-about"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
109
|
+
<template id="gw-pv-answer"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
110
|
+
<template id="gw-pv-beauty"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
111
|
+
<template id="gw-pv-careers"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
112
|
+
<template id="gw-pv-chart"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
113
|
+
<template id="gw-pv-chat"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
114
|
+
<template id="gw-pv-community"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
115
|
+
<template id="gw-pv-creator"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
116
|
+
<template id="gw-pv-docs"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
117
|
+
<template id="gw-pv-electronics"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
118
|
+
<template id="gw-pv-email"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
119
|
+
<template id="gw-pv-fashion"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
120
|
+
<template id="gw-pv-food"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
121
|
+
<template id="gw-pv-founders"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
122
|
+
<template id="gw-pv-funnel"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
123
|
+
<template id="gw-pv-integrations"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
124
|
+
<template id="gw-pv-mcp"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
125
|
+
<template id="gw-pv-mosaic"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
126
|
+
<template id="gw-pv-offer"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
127
|
+
<template id="gw-pv-ops"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
128
|
+
<template id="gw-pv-page"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
129
|
+
<template id="gw-pv-payout"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
130
|
+
<template id="gw-pv-posts"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
131
|
+
<template id="gw-pv-robot"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
132
|
+
<template id="gw-pv-sections"><img src="assets/post-theme.svg" alt="" decoding="async"></template>
|
|
133
|
+
<template id="gw-pv-shield"><img src="assets/post-voice.svg" alt="" decoding="async"></template>
|
|
134
|
+
<template id="gw-pv-store"><img src="assets/article-hero.svg" alt="" decoding="async"></template>
|
|
135
|
+
<template id="gw-pv-stores"><img src="assets/post-headless.svg" alt="" decoding="async"></template>
|
|
136
|
+
<template id="gw-pv-tasks"><img src="assets/post-motion.svg" alt="" decoding="async"></template>
|
|
137
|
+
<template id="gw-pv-wellness"><img src="assets/post-output.svg" alt="" decoding="async"></template>
|
|
138
|
+
<template id="gw-pv-window"><img src="assets/post-speed.svg" alt="" decoding="async"></template>
|
|
139
|
+
</header>
|
|
152
140
|
|
|
153
141
|
<main id="main">
|
|
154
142
|
<section class="gw-section" aria-labelledby="spot-h">
|
|
@@ -239,7 +227,6 @@
|
|
|
239
227
|
<p>A headless storefront on the Shopify you already run.</p>
|
|
240
228
|
<span class="gw-link gw-link--arrow">See the storefront builder</span>
|
|
241
229
|
</a>
|
|
242
|
-
<a class="gw-mega__feature" href="https://gemboss.ai/engine" data-gw-spot><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>
|
|
243
230
|
</div>
|
|
244
231
|
</div>
|
|
245
232
|
</section>
|
package/demo/theme-example.html
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
43
43
|
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
44
44
|
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
45
|
-
<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="
|
|
45
|
+
<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>
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
48
|
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
package/docs/components.md
CHANGED
|
@@ -326,19 +326,24 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
|
|
|
326
326
|
|
|
327
327
|
## Header
|
|
328
328
|
|
|
329
|
+
Since 0.11.0 the header is gemboss.ai's, 1:1: every value and every motion measured against the live site, pixel by
|
|
330
|
+
pixel, at 320 to 1920px, light and dark, every menu open, rows hovered, the keyboard's focus, the phone menu at each
|
|
331
|
+
level. A brand changes what it fills in and the tokens (colours, the Stage, the radius profile), never these values.
|
|
332
|
+
|
|
329
333
|
| class | for |
|
|
330
334
|
|---|---|
|
|
331
335
|
| `.gw-announce` | optional one-sentence bar above the header, with one link |
|
|
332
336
|
| `.gw-header` (`data-gw-header`) | the sticky, flat 64px bar with one hairline; `.is-scrolled` darkens the hairline |
|
|
333
|
-
| `.gw-header--float` | with `.gw-header`, a brand's header profile: from
|
|
334
|
-
| `.gw-header__bar` | the row inside
|
|
335
|
-
| `.gw-brand`, `__mark`, `__name` | logo (
|
|
336
|
-
| `.gw-nav`, `__list`, `__item`, `__trigger`, `__link` | the desktop nav (from
|
|
337
|
-
| `.gw-mega`, `__grid`, `__col`, `__heading`, `__link`, `
|
|
338
|
-
| `.gw-header__actions` |
|
|
339
|
-
| `.gw-header__signin` | with `.gw-nav__link`:
|
|
337
|
+
| `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1081px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar up to 1080px; solid under `prefers-reduced-transparency` |
|
|
338
|
+
| `.gw-header__bar` | the row inside: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), 32px between its parts |
|
|
339
|
+
| `.gw-brand`, `__mark`, `__name` | logo (34px, its corners clipped at 8px) and name, linking home; a 44px row up to 768px |
|
|
340
|
+
| `.gw-nav`, `__list`, `__item`, `__trigger`, `__chev`, `__link` | the desktop nav (from 1081px), 14px weight 500, 0.005em tighter; `__trigger` is a section's link that opens its mega panel (its 12px `__chev` turns while open), `__link` a plain link; the current page (`aria-current="page"`) or section (`aria-current` on a trigger) in the accent's strong ink, weight 600 |
|
|
341
|
+
| `.gw-mega` (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`), `__body`, `__grid`, `__col`, `__heading`, `__link`, `__aside`, `__card`, `__art`, `__card-text`, `__go`, `__foot`, `__foot-start`, `__foot-end`, `__cta`, `__new` | 0.11.0, gemboss.ai's mega menu: a panel on one surface that morphs between panels (the popover radius, raised shadow), a caret at the open name, a pill under the hovered name, a highlight under the hovered row; columns of rows (a name and one line), the pictures beside them (`__aside`: the panel's own `__card`, a row's preview from its `<template>`), each picture on the Stage (`__art`: the deep iris ground, `--gw-stage-*`); an optional strip under it. The page behind dims and blurs (`.gw-scrim`). Script: `docs/markup-contract.md` |
|
|
342
|
+
| `.gw-header__actions` | Sign in, a second text action, Start free, the menu button (4px apart; the button 8px further) |
|
|
343
|
+
| `.gw-header__signin` | with `.gw-nav__link`: shown from 1081px (it moves into the mobile menu) |
|
|
344
|
+
| `.gw-header__link` | 0.11.0: with `.gw-nav__link`, a second text action (Book a demo), shown from 1181px, the first to go when the bar is tight |
|
|
340
345
|
| `.gw-theme-toggle` | icon button (`data-gw-theme-toggle`), 40px, 44px on touch |
|
|
341
|
-
| `.gw-menu-toggle`, `__open`, `__close` | the menu button
|
|
346
|
+
| `.gw-menu-toggle`, `__open`, `__close` | the menu button up to 1080px: 42px (44px on touch), one strong hairline on the surface, the card radius of the profile, ink while open; it shows `__open` or `__close` from `aria-expanded` |
|
|
342
347
|
| `.gw-mobile-menu` | the full-height sheet under the bar (`hidden` until opened); `html.is-menu-open` locks the page |
|
|
343
348
|
| `.gw-mobile-menu__group` | a `<details>` group with a `<summary>` row |
|
|
344
349
|
| `.gw-mobile-menu__list`, `__link` | the links inside a group, 44px rows |
|
|
@@ -349,8 +354,8 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
|
|
|
349
354
|
| `.gw-mobile-menu__heading`, `__icon`, `__all` | 0.8.0, optional in a level: a muted heading over a run of links; a 32px icon tile before a link's `<b>` name and `<i>` line; the last link, to the section's own page, in the accent with its arrow |
|
|
350
355
|
| `.gw-lang` (`data-gw-lang`, `hidden`), `__btn`, `__short`, `__menu`, `__link` | 0.8.0, optional: the language switcher (below): a ghost button with the globe and the current language's code, its list of the other languages |
|
|
351
356
|
|
|
352
|
-
Header
|
|
353
|
-
menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
|
|
357
|
+
Header actions: the primary button shows from 561px, the second text action from 1181px, Sign in from 1081px; below
|
|
358
|
+
that they live in the mobile menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
|
|
354
359
|
|
|
355
360
|
### Drill-down mobile menu (0.8.0)
|
|
356
361
|
|
|
@@ -395,7 +400,7 @@ it shows only where the page has another language and stays hidden everywhere el
|
|
|
395
400
|
</div>
|
|
396
401
|
```
|
|
397
402
|
|
|
398
|
-
- Two copies: one in `.gw-header__actions` (drawn from
|
|
403
|
+
- Two copies: one in `.gw-header__actions` (drawn from 1081px), one in the mobile menu's actions (its list opens
|
|
399
404
|
upward), each with its own list `id`. Keep `hidden` on both and the list empty: the script fills them.
|
|
400
405
|
- The head is the source: one `<link rel="alternate" hreflang="…" href="…">` per language the page has (its own
|
|
401
406
|
included), and `x-default` if you like (it is not listed). A `title` on a link names that language in the list.
|
|
@@ -848,7 +853,7 @@ else:
|
|
|
848
853
|
|---|---|
|
|
849
854
|
| a plan card (its one `.gw-btn` is the action) | `<div class="gw-plan" data-gw-spot>…<a class="gw-btn" href="/signup">…</a>…</div>` |
|
|
850
855
|
| a link card | `<a class="gw-card gw-card--link" href="/mcp" data-gw-spot>…</a>` |
|
|
851
|
-
|
|
|
856
|
+
| a mega menu's card (its Stage lights) | `<a class="gw-mega__card" href="/engine" data-gw-spot=".gw-mega__art">…</a>` |
|
|
852
857
|
| the primary button of a night band | `<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>` inside `.gw-band--night` |
|
|
853
858
|
| an inner element only (the art of a card) | `<a class="gw-card gw-card--link" href="/engine" data-gw-spot=".gp-card-art"><span class="gp-card-art" aria-hidden="true"></span>…</a>` |
|
|
854
859
|
|