@gemboss/website-ui 0.7.0 → 0.9.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/AGENTS.md +18 -3
- package/CHANGELOG.md +129 -0
- package/README.md +8 -8
- package/bin/lib/check.mjs +72 -1
- package/css/effects.css +71 -0
- package/css/header.css +176 -0
- package/css/tokens.css +7 -0
- package/demo/header.html +356 -0
- package/demo/index.html +2 -0
- package/demo/spotlight.html +291 -0
- package/docs/components.md +116 -4
- package/docs/markup-contract.md +135 -5
- package/docs/theming.md +9 -2
- package/js/website.js +168 -4
- package/js/website.mjs +208 -4
- package/package.json +1 -1
- package/skill/SKILL.md +6 -0
- package/system.json +13 -1
- package/templates/header.html +34 -6
- package/website.css +256 -1
- package/website.min.css +1 -1
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!-- Kit demo (0.9.0): the spotlight, data-gw-spot (docs/components.md, Spotlight), on what it is for: plan cards, link
|
|
3
|
+
cards, the mega menu's feature card (open Product, or see it below) and the primary button of a night band. Move a
|
|
4
|
+
mouse over them; on a phone nothing changes. The switch shows the same page for a GemPages-style brand: soft corners,
|
|
5
|
+
the accent button and the GemPages accent of docs/theming.md, so the light turns blue by itself. A real site picks
|
|
6
|
+
its profiles once, on <html> (docs/theming.md); here a small demo script sets them when the switch moves. Words and
|
|
7
|
+
prices from gemboss.ai; "Example brand" is not GemPages. -->
|
|
8
|
+
<html lang="en">
|
|
9
|
+
<head>
|
|
10
|
+
<meta charset="utf-8">
|
|
11
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
12
|
+
<title>Spotlight · website UI kit</title>
|
|
13
|
+
<meta name="description" content="The kit's spotlight: a soft light in the brand's accent that follows the pointer on plan cards, link cards, the feature card and the button of a night band.">
|
|
14
|
+
<script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
|
|
15
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
16
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
17
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
|
|
18
|
+
<link rel="stylesheet" href="../website.css">
|
|
19
|
+
<!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
|
|
20
|
+
<style id="demo-gempages" media="not all">
|
|
21
|
+
:root {
|
|
22
|
+
--gw-accent-light: #3c67ff;
|
|
23
|
+
--gw-accent-strong-light: #2f52d6;
|
|
24
|
+
--gw-accent-soft-light: #eaefff;
|
|
25
|
+
--gw-on-accent-light: #ffffff;
|
|
26
|
+
--gw-accent-dark: #7c9bff;
|
|
27
|
+
--gw-accent-strong-dark: #a9beff;
|
|
28
|
+
--gw-accent-soft-dark: #16213d;
|
|
29
|
+
--gw-on-accent-dark: #0d0d12;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
32
|
+
</head>
|
|
33
|
+
<body class="gw-page">
|
|
34
|
+
<a class="gw-skip" href="#main">Skip to content</a>
|
|
35
|
+
|
|
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
|
+
<header class="gw-header" data-gw-header>
|
|
38
|
+
<div class="gw-wrap gw-header__bar">
|
|
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="Main">
|
|
41
|
+
<ul class="gw-nav__list">
|
|
42
|
+
<li class="gw-nav__item">
|
|
43
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
|
|
44
|
+
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
45
|
+
<div class="gw-wrap gw-mega__grid">
|
|
46
|
+
<div class="gw-mega__col">
|
|
47
|
+
<p class="gw-mega__heading">Build</p>
|
|
48
|
+
<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>
|
|
49
|
+
<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>
|
|
50
|
+
<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>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="gw-mega__col">
|
|
53
|
+
<p class="gw-mega__heading">Grow</p>
|
|
54
|
+
<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 & personalization</b><i>You promote the winner</i></span></a>
|
|
55
|
+
<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 & upsells</b><i>Bundles, gifts, bumps</i></span></a>
|
|
56
|
+
<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 & data</b><i>First-party, yours</i></span></a>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="gw-mega__col">
|
|
59
|
+
<p class="gw-mega__heading">Connect</p>
|
|
60
|
+
<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>
|
|
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>
|
|
106
|
+
<div class="gw-header__actions">
|
|
107
|
+
<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
|
+
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
109
|
+
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
110
|
+
<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="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>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
115
|
+
<nav class="gw-wrap" aria-label="Main, mobile">
|
|
116
|
+
<details class="gw-mobile-menu__group">
|
|
117
|
+
<summary>Product</summary>
|
|
118
|
+
<ul class="gw-mobile-menu__list">
|
|
119
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
|
|
120
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
|
|
121
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests & personalization</a></li>
|
|
122
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers & upsells</a></li>
|
|
123
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
|
|
124
|
+
</ul>
|
|
125
|
+
</details>
|
|
126
|
+
<details class="gw-mobile-menu__group">
|
|
127
|
+
<summary>Use cases</summary>
|
|
128
|
+
<ul class="gw-mobile-menu__list">
|
|
129
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google & TikTok ads</a></li>
|
|
130
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
|
|
131
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents & AI search</a></li>
|
|
132
|
+
</ul>
|
|
133
|
+
</details>
|
|
134
|
+
<a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
|
|
135
|
+
<details class="gw-mobile-menu__group">
|
|
136
|
+
<summary>Resources</summary>
|
|
137
|
+
<ul class="gw-mobile-menu__list">
|
|
138
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
|
|
139
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
|
|
140
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
|
|
141
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
|
|
142
|
+
</ul>
|
|
143
|
+
</details>
|
|
144
|
+
<div class="gw-mobile-menu__actions">
|
|
145
|
+
<a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
146
|
+
<a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
|
|
147
|
+
<a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
148
|
+
</div>
|
|
149
|
+
</nav>
|
|
150
|
+
</div>
|
|
151
|
+
</header>
|
|
152
|
+
|
|
153
|
+
<main id="main">
|
|
154
|
+
<section class="gw-section" aria-labelledby="spot-h">
|
|
155
|
+
<div class="gw-wrap">
|
|
156
|
+
<div class="gw-section__head">
|
|
157
|
+
<p class="gw-label">Spotlight, 0.9.0</p>
|
|
158
|
+
<h1 id="spot-h"><span class="gw-dim">A light where you can click.</span> Nowhere else.</h1>
|
|
159
|
+
<p class="gw-lead">Move a mouse over a plan, a card or the button at the end: a soft light in the brand's accent follows it. Headings and words stay still. On a phone nothing changes, and with reduced motion the light stays in the middle.</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="gw-segmented" role="radiogroup" aria-label="Brand" data-gw-segmented="brand">
|
|
162
|
+
<button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
|
|
163
|
+
<button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
|
|
164
|
+
</div>
|
|
165
|
+
<p class="gw-note" data-gw-show="brand:gemboss">GemBoss: tight corners, the ink button, the iris accent. The words and prices are gemboss.ai's.</p>
|
|
166
|
+
<p class="gw-note" data-gw-show="brand:gempages" hidden>A GemPages-style brand: soft corners, the accent button and GemPages' blue. The light is the brand's accent, so it turns blue by itself. Example brand, not GemPages' page.</p>
|
|
167
|
+
</div>
|
|
168
|
+
</section>
|
|
169
|
+
|
|
170
|
+
<!-- plan cards: each a card with one action, lit as a whole -->
|
|
171
|
+
<section class="gw-section gw-section--soft" aria-labelledby="plans-h">
|
|
172
|
+
<div class="gw-wrap">
|
|
173
|
+
<div class="gw-section__head">
|
|
174
|
+
<p class="gw-label">Plan cards</p>
|
|
175
|
+
<h2 id="plans-h"><span class="gw-dim">One plan, one action.</span> The whole card lights.</h2>
|
|
176
|
+
<p class="gw-lead">Each card holds exactly one button, so the light on the card points at it.</p>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="gw-pricing">
|
|
179
|
+
<div class="gw-plan" data-gw-spot>
|
|
180
|
+
<h3>Starter</h3>
|
|
181
|
+
<p>Find your first winning angle.</p>
|
|
182
|
+
<p class="gw-plan__price">$49 <small>/ month</small></p>
|
|
183
|
+
<p>Billed monthly through Shopify</p>
|
|
184
|
+
<a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
|
|
185
|
+
<ul class="gw-list--check">
|
|
186
|
+
<li>10,000 funnel sessions a month</li>
|
|
187
|
+
<li>3 funnels live at once</li>
|
|
188
|
+
<li>2 A/B tests at once</li>
|
|
189
|
+
<li>50 AI credits a month</li>
|
|
190
|
+
</ul>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="gw-plan gw-plan--featured" data-gw-spot>
|
|
193
|
+
<span class="gw-badge gw-badge--accent">Recommended for $10k–50k</span>
|
|
194
|
+
<h3>Growth</h3>
|
|
195
|
+
<p>Test new angles every week.</p>
|
|
196
|
+
<p class="gw-plan__price">$149 <small>/ month</small></p>
|
|
197
|
+
<p>Billed monthly through Shopify</p>
|
|
198
|
+
<a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
|
|
199
|
+
<ul class="gw-list--check">
|
|
200
|
+
<li>50,000 funnel sessions a month</li>
|
|
201
|
+
<li>15 funnels live at once</li>
|
|
202
|
+
<li>5 A/B tests at once</li>
|
|
203
|
+
<li>200 AI credits a month</li>
|
|
204
|
+
</ul>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="gw-plan" data-gw-spot>
|
|
207
|
+
<h3>Scale</h3>
|
|
208
|
+
<p>Run many angles at once.</p>
|
|
209
|
+
<p class="gw-plan__price">$399 <small>/ month</small></p>
|
|
210
|
+
<p>Billed monthly through Shopify</p>
|
|
211
|
+
<a class="gw-btn gw-btn--secondary gw-btn--block" href="https://admin.gemboss.ai/signup">Start 14-day free trial</a>
|
|
212
|
+
<ul class="gw-list--check">
|
|
213
|
+
<li>200,000 funnel sessions a month</li>
|
|
214
|
+
<li>Unlimited funnels live at once</li>
|
|
215
|
+
<li>20 A/B tests at once</li>
|
|
216
|
+
<li>500 AI credits a month</li>
|
|
217
|
+
</ul>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
<!-- link cards and the mega menu's feature card: each one link -->
|
|
224
|
+
<section class="gw-section" aria-labelledby="cards-h">
|
|
225
|
+
<div class="gw-wrap">
|
|
226
|
+
<div class="gw-section__head">
|
|
227
|
+
<p class="gw-label">Cards</p>
|
|
228
|
+
<h2 id="cards-h"><span class="gw-dim">A card that is one link.</span> The light says so.</h2>
|
|
229
|
+
<p class="gw-lead">Two link cards, and the feature card of the Product menu: the Stage, a night ground where the light is stronger.</p>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="gw-grid--3">
|
|
232
|
+
<a class="gw-card gw-card--link" href="https://gemboss.ai/funnel" data-gw-spot>
|
|
233
|
+
<h3>Funnel builder</h3>
|
|
234
|
+
<p>A funnel for every angle, from the ad to the second order.</p>
|
|
235
|
+
<span class="gw-link gw-link--arrow">See the funnel builder</span>
|
|
236
|
+
</a>
|
|
237
|
+
<a class="gw-card gw-card--link" href="https://gemboss.ai/ai-store-builder" data-gw-spot>
|
|
238
|
+
<h3>Storefront builder</h3>
|
|
239
|
+
<p>A headless storefront on the Shopify you already run.</p>
|
|
240
|
+
<span class="gw-link gw-link--arrow">See the storefront builder</span>
|
|
241
|
+
</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
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<!-- night band: only the primary button lights -->
|
|
248
|
+
<section class="gw-section gw-band--night" aria-labelledby="cta-h">
|
|
249
|
+
<div class="gw-wrap gw-cta">
|
|
250
|
+
<h2 id="cta-h">Put the engine to work on your next launch.</h2>
|
|
251
|
+
<p class="gw-lead">Start with one product. GemBoss drafts the angles, the pages and the first test, and waits for your OK.</p>
|
|
252
|
+
<div class="gw-actions">
|
|
253
|
+
<a class="gw-btn" href="https://admin.gemboss.ai/signup" data-gw-spot>Start free</a>
|
|
254
|
+
<a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/contact">Book a demo</a>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</section>
|
|
258
|
+
</main>
|
|
259
|
+
|
|
260
|
+
<footer class="gw-footer">
|
|
261
|
+
<div class="gw-wrap">
|
|
262
|
+
<div class="gw-footer__bottom">
|
|
263
|
+
<span><span data-gw-show="brand:gemboss">© 2026 GemBoss. All rights reserved.</span><span data-gw-show="brand:gempages" hidden>© 2026 Example brand. Sample text.</span></span>
|
|
264
|
+
<ul aria-label="Legal">
|
|
265
|
+
<li><a href="https://gemboss.ai/privacy">Privacy</a></li>
|
|
266
|
+
<li><a href="https://gemboss.ai/terms">Terms</a></li>
|
|
267
|
+
</ul>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
</footer>
|
|
271
|
+
|
|
272
|
+
<script src="../js/website.js" defer></script>
|
|
273
|
+
<script>
|
|
274
|
+
// demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html>, and its
|
|
275
|
+
// accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages opens it so.
|
|
276
|
+
(function () {
|
|
277
|
+
var root = document.documentElement, accent = document.getElementById('demo-gempages');
|
|
278
|
+
function brand(b) {
|
|
279
|
+
var gp = b === 'gempages';
|
|
280
|
+
if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
|
|
281
|
+
else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
|
|
282
|
+
accent.media = gp ? 'all' : 'not all';
|
|
283
|
+
}
|
|
284
|
+
document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
|
|
285
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
286
|
+
if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
|
|
287
|
+
});
|
|
288
|
+
})();
|
|
289
|
+
</script>
|
|
290
|
+
</body>
|
|
291
|
+
</html>
|
package/docs/components.md
CHANGED
|
@@ -36,7 +36,7 @@ Don't remove the skip link, and don't leave out `id="main"`.
|
|
|
36
36
|
|
|
37
37
|
`js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
|
|
38
38
|
the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control, the
|
|
39
|
-
busy button, an article's contents list and the scroll box of its tables (0.5.0),
|
|
39
|
+
busy button, an article's contents list and the scroll box of its tables (0.5.0), the footer's folds (0.7.0), the mobile menu's drill-down and the language switcher (0.8.0), and the spotlight (0.9.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
|
|
40
40
|
preview) is wired by calling `init` on it, as often as needed: an element is wired once.
|
|
41
41
|
|
|
42
42
|
```js
|
|
@@ -51,7 +51,7 @@ import { init } from '@gemboss/website-ui/website.mjs';
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
`destroy(root)` takes it back when a framework unmounts. The Next.js recipe, the `data-gw-ready` mark and the
|
|
54
|
-
events (`gw:mega`, `gw:theme`, `gw:segmented`, `gw:toc`) are in `docs/markup-contract.md`, "Script".
|
|
54
|
+
events (`gw:mega`, `gw:theme`, `gw:segmented`, `gw:toc`, `gw:menu`) are in `docs/markup-contract.md`, "Script".
|
|
55
55
|
|
|
56
56
|
Don't: wire a kit part with your own script (a click handler on a trigger, a class toggled by hand), or load two
|
|
57
57
|
copies of the script and expect both to work (the first owns the page).
|
|
@@ -343,10 +343,67 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
|
|
|
343
343
|
| `.gw-mobile-menu__group` | a `<details>` group with a `<summary>` row |
|
|
344
344
|
| `.gw-mobile-menu__list`, `__link` | the links inside a group, 44px rows |
|
|
345
345
|
| `.gw-mobile-menu__top` | a top-level row without a group (Pricing) |
|
|
346
|
-
| `.gw-mobile-menu__actions` | the buttons and Sign in at the end of the sheet |
|
|
346
|
+
| `.gw-mobile-menu__actions` | the buttons and Sign in at the end of the sheet; in the drill-down menu, a bar that stays at the bottom of the sheet |
|
|
347
|
+
| `.gw-mobile-menu[data-gw-menu="drill"]` | 0.8.0, optional: the drill-down menu (below) |
|
|
348
|
+
| `.gw-mobile-menu__head`, `__back`, `__title` | 0.8.0: a level's head, Back and the level's title (`tabindex="-1"`, the focus lands there); drawn only for the open level |
|
|
349
|
+
| `.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
|
+
| `.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 |
|
|
347
351
|
|
|
348
352
|
Header buttons: the secondary one shows from 768px, the primary one from 480px; below that they live in the mobile
|
|
349
|
-
menu. Full markup: `templates/header.html`.
|
|
353
|
+
menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
|
|
354
|
+
|
|
355
|
+
### Drill-down mobile menu (0.8.0)
|
|
356
|
+
|
|
357
|
+
gemboss.ai's phone menu: the top level lists the sections in big rows; a tap on one shows its level alone, with Back
|
|
358
|
+
and its title; the actions stay in a bar at the bottom of the sheet while the list scrolls. Put `data-gw-menu="drill"`
|
|
359
|
+
on the `.gw-mobile-menu` and a head in each group; everything else is the 0.7.0 menu.
|
|
360
|
+
|
|
361
|
+
```html
|
|
362
|
+
<details class="gw-mobile-menu__group">
|
|
363
|
+
<summary>Product</summary>
|
|
364
|
+
<div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">Product</h2></div>
|
|
365
|
+
<p class="gw-mobile-menu__heading">Build</p>
|
|
366
|
+
<ul class="gw-mobile-menu__list">
|
|
367
|
+
<li><a class="gw-mobile-menu__link" href="/funnel"><span class="gw-mobile-menu__icon" aria-hidden="true">svg</span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a></li>
|
|
368
|
+
</ul>
|
|
369
|
+
<a class="gw-mobile-menu__all" href="/product">All of Product</a>
|
|
370
|
+
</details>
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
- The actions bar (`.gw-mobile-menu__actions`): the language switcher (optional) and Sign in on the first line (two
|
|
374
|
+
things at most: the first on the left, the last on the right), the two buttons as `gw-btn--lg gw-btn--block` under it.
|
|
375
|
+
Words in the page's language, Back included.
|
|
376
|
+
- The script moves the focus to the title as a level opens and back to the section on Back, closes the sheet on
|
|
377
|
+
Escape from anywhere, keeps Tab inside the open sheet and its toggle, and fires `gw:menu` (`{ open, level }`). A level
|
|
378
|
+
slides in (none under reduced motion). Without the script the groups open in place, as in 0.7.0.
|
|
379
|
+
- When to use it: a site whose sections hold more than a handful of links each (gemboss.ai: four sections, six to
|
|
380
|
+
twelve links). A site with a few links per section can keep the 0.7.0 menu.
|
|
381
|
+
|
|
382
|
+
Don't: a level without its head (`check`: `menu-markup`); Back in English on a translated page; a level that only
|
|
383
|
+
repeats the section's own page; your own script on the summaries.
|
|
384
|
+
|
|
385
|
+
### Language switcher (0.8.0)
|
|
386
|
+
|
|
387
|
+
The header's language button, as gemboss.ai's: the globe and the current language's code; its list links to the same
|
|
388
|
+
page in the other languages, each named in its own language. It reads the page's `<link rel="alternate" hreflang>`, so
|
|
389
|
+
it shows only where the page has another language and stays hidden everywhere else.
|
|
390
|
+
|
|
391
|
+
```html
|
|
392
|
+
<div class="gw-lang" data-gw-lang hidden>
|
|
393
|
+
<button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu" data-gw-label-language="Language"><svg aria-hidden="true">globe</svg><span class="gw-lang__short"></span></button>
|
|
394
|
+
<ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
|
|
395
|
+
</div>
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
- Two copies: one in `.gw-header__actions` (drawn from 1080px), one in the mobile menu's actions (its list opens
|
|
399
|
+
upward), each with its own list `id`. Keep `hidden` on both and the list empty: the script fills them.
|
|
400
|
+
- The head is the source: one `<link rel="alternate" hreflang="…" href="…">` per language the page has (its own
|
|
401
|
+
included), and `x-default` if you like (it is not listed). A `title` on a link names that language in the list.
|
|
402
|
+
- `data-gw-label-language` is the word for "Language" in the page's language ("Ngôn ngữ", "语言").
|
|
403
|
+
|
|
404
|
+
Don't: links typed into the list, a switcher shown by the markup, a translation's `<link rel="alternate">` without
|
|
405
|
+
`hreflang` (`check`: `lang-markup`); a flag for a language; a switcher that saves a choice the page's address does not
|
|
406
|
+
carry.
|
|
350
407
|
|
|
351
408
|
Don't: a floating, rounded or blurred header of your own (the one floating header is `.gw-header--float`, chosen
|
|
352
409
|
for the whole site); more than five top-level items; a second filled button in the bar; a
|
|
@@ -776,6 +833,61 @@ not make public with the review; masonry or a carousel that moves by itself.
|
|
|
776
833
|
Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
|
|
777
834
|
the first screen, and don't animate anything but `transform` and `opacity`.
|
|
778
835
|
|
|
836
|
+
### Spotlight `data-gw-spot` (0.9.0)
|
|
837
|
+
|
|
838
|
+
A soft light in the brand's accent that follows a mouse over a thing you click (Chris, 25/10/2026). Put
|
|
839
|
+
`data-gw-spot` on the `<a href>` or the `<button>` itself, or on a card that holds exactly one of them, and nowhere
|
|
840
|
+
else:
|
|
841
|
+
|
|
842
|
+
| where | markup |
|
|
843
|
+
|---|---|
|
|
844
|
+
| 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>` |
|
|
845
|
+
| a link card | `<a class="gw-card gw-card--link" href="/mcp" data-gw-spot>…</a>` |
|
|
846
|
+
| the mega menu's feature card (the Stage) | `<a class="gw-mega__feature" href="/engine" data-gw-spot>…</a>` |
|
|
847
|
+
| the primary button of a night band | `<a class="gw-btn" href="/signup" data-gw-spot>Start free</a>` inside `.gw-band--night` |
|
|
848
|
+
| 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>` |
|
|
849
|
+
|
|
850
|
+
What it does: on hover the light grows from where the pointer comes in (0.55s, an expo-out ease), then trails the
|
|
851
|
+
pointer a little (18% of the way each frame) and goes out when it leaves. It sits under the words, in the element's own
|
|
852
|
+
corners, and moves nothing. It is `--gw-accent` (22% on a card, 38% on a button, 40% on the Stage's night ground), the
|
|
853
|
+
`-dark` family in dark mode and night bands, so another brand's page lights in its own accent by itself. While a thing
|
|
854
|
+
is lit, its muted words read `--gw-ink-2`, so they keep 4.5:1 at the light's middle; they turn back once the light has
|
|
855
|
+
gone. Nothing moves for it, and nothing in your markup changes.
|
|
856
|
+
|
|
857
|
+
- Opt-in, element by element: a page without `data-gw-spot` does not change. Use it on the parts above, and more only
|
|
858
|
+
where it is a link or a button; one lit thing per card.
|
|
859
|
+
- Pointer devices only: nothing changes on a phone or a tablet without a mouse.
|
|
860
|
+
- Keyboard focus shows the same light in the middle, as large as on hover: on the focused link or button, and on a card
|
|
861
|
+
whose one action has the focus.
|
|
862
|
+
- Reduced motion: the light stands still in the middle and appears at once (the muted words with it); the script
|
|
863
|
+
follows no pointer.
|
|
864
|
+
- A browser without `@property` or `color-mix()` shows no light at all (nothing half drawn).
|
|
865
|
+
- The script wires it like every other part (`data-gw-ready="spot"`, `init`/`destroy`) and puts `.gw-spot` on the
|
|
866
|
+
element that carries the light, with the pointer's place in `--gw-spot-x` and `--gw-spot-y`. No event. Its values are
|
|
867
|
+
tokens (`system.json` `motion.spot`: `--gw-spot-radius`, `-radius-action`, `-strength`, `-strength-action`,
|
|
868
|
+
`-strength-stage`, `-ms`, `-ease`).
|
|
869
|
+
|
|
870
|
+
Don't: put it on a heading, a paragraph, a list of text or a section (`check` reports `spot-target`), or on a card
|
|
871
|
+
with no action or with two; light words, or a heading, with a gradient or the accent (still forbidden: a heading
|
|
872
|
+
that glows under the pointer was looked at and turned down); a light of more than one colour, or a colour of your own;
|
|
873
|
+
write `.gw-spot` or `--gw-spot-*` yourself, or follow the pointer with your own script.
|
|
874
|
+
|
|
875
|
+
## Additions to the markup contract in 0.9.0
|
|
876
|
+
|
|
877
|
+
The spotlight: the `data-gw-spot` hook (empty, or a selector for an inner element), the script's `spot` part
|
|
878
|
+
(`data-gw-ready="spot"`) and its `.gw-spot` class on the element that carries the light, with `--gw-spot-x` and
|
|
879
|
+
`--gw-spot-y` on it. Tokens: `--gw-spot-radius`, `--gw-spot-radius-action`, `--gw-spot-strength`,
|
|
880
|
+
`--gw-spot-strength-action`, `--gw-spot-strength-stage`, `--gw-spot-ms`, `--gw-spot-ease`. No event. No markup or
|
|
881
|
+
class of 0.8.0 changes.
|
|
882
|
+
|
|
883
|
+
## Additions to the markup contract in 0.8.0
|
|
884
|
+
|
|
885
|
+
The drill-down mobile menu: `data-gw-menu="drill"` on `.gw-mobile-menu`, `.gw-mobile-menu__head` (`__back`, `__title`),
|
|
886
|
+
`.gw-mobile-menu__heading`, `__icon`, `__all`, the script's `.is-drill`, `.is-drilled` and `.is-back` on the sheet and
|
|
887
|
+
its `--gw-menu-top`. The language switcher: `.gw-lang` (`data-gw-lang`, `__btn`, `__short`, `__menu`, `__link`) and the
|
|
888
|
+
script's `lang` part. One event, `gw:menu` (`{ open, level }`), on every mobile menu. No markup or class of 0.7.0
|
|
889
|
+
changes: the 0.7.0 header still works and looks the same.
|
|
890
|
+
|
|
779
891
|
## Additions to the markup contract in 0.7.0
|
|
780
892
|
|
|
781
893
|
The footer of gemboss.ai: `.gw-footer__fold` (a `<details>` in a `.gw-footer__col` or a `.gw-footer__family`, its
|