@gemboss/website-ui 0.7.0 → 0.8.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 +13 -3
- package/CHANGELOG.md +69 -0
- package/README.md +8 -8
- package/bin/lib/check.mjs +53 -1
- package/css/header.css +176 -0
- package/demo/header.html +356 -0
- package/demo/index.html +1 -0
- package/docs/components.md +69 -4
- package/docs/markup-contract.md +102 -5
- package/docs/theming.md +3 -2
- package/js/website.js +118 -4
- package/js/website.mjs +145 -4
- package/package.json +1 -1
- package/skill/SKILL.md +4 -0
- package/templates/header.html +34 -6
- package/website.css +177 -1
- package/website.min.css +1 -1
package/demo/header.html
ADDED
|
@@ -0,0 +1,356 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!-- Kit demo (0.8.0): the header of gemboss.ai built from templates/header.html, with both 0.8.0 options on: the mobile
|
|
3
|
+
menu drills down (data-gw-menu="drill"), and the language switcher lists the translations named by the
|
|
4
|
+
<link rel="alternate" hreflang> below. The words, sections, links and icons are gemboss.ai's (partials/header.html).
|
|
5
|
+
The three languages are this one page (?hl=vi, ?hl=zh-Hans: a demo script sets <html lang> before the kit's script
|
|
6
|
+
runs, the words stay English); a real site links to its translated pages. The switch on the page shows the same
|
|
7
|
+
header for a GemPages-style brand: soft corners, the accent button, the floating header from 1080px, the GemPages
|
|
8
|
+
accent of docs/theming.md. A real site picks its profiles once, on <html> and the header (docs/theming.md). -->
|
|
9
|
+
<html lang="en">
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8">
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
13
|
+
<title>Header · GemBoss</title>
|
|
14
|
+
<meta name="description" content="The kit's header as gemboss.ai has it on a phone: a menu that drills down into each section with a bar of actions that stays at the bottom, and the language switch.">
|
|
15
|
+
<script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
|
|
16
|
+
<script>try{var hl=new URLSearchParams(location.search).get('hl');if(hl==='vi'||hl==='zh-Hans')document.documentElement.lang=hl}catch(e){}</script>
|
|
17
|
+
<link rel="alternate" hreflang="en" href="header.html">
|
|
18
|
+
<link rel="alternate" hreflang="vi" href="header.html?hl=vi">
|
|
19
|
+
<link rel="alternate" hreflang="zh-Hans" href="header.html?hl=zh-Hans">
|
|
20
|
+
<link rel="alternate" hreflang="x-default" href="header.html">
|
|
21
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
22
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
23
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
|
|
24
|
+
<link rel="stylesheet" href="../website.css">
|
|
25
|
+
<style>
|
|
26
|
+
/* demo layout only: space above the switch, its note and the buttons */
|
|
27
|
+
.demo-mt { margin-top: 16px; }
|
|
28
|
+
.demo-mt-lg { margin-top: 32px; }
|
|
29
|
+
</style>
|
|
30
|
+
<!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
|
|
31
|
+
<style id="demo-gempages" media="not all">
|
|
32
|
+
:root {
|
|
33
|
+
--gw-accent-light: #3c67ff;
|
|
34
|
+
--gw-accent-strong-light: #2f52d6;
|
|
35
|
+
--gw-accent-soft-light: #eaefff;
|
|
36
|
+
--gw-on-accent-light: #ffffff;
|
|
37
|
+
--gw-accent-dark: #7c9bff;
|
|
38
|
+
--gw-accent-strong-dark: #a9beff;
|
|
39
|
+
--gw-accent-soft-dark: #16213d;
|
|
40
|
+
--gw-on-accent-dark: #0d0d12;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
<body class="gw-page">
|
|
45
|
+
<a class="gw-skip" href="#main">Skip to content</a>
|
|
46
|
+
|
|
47
|
+
<div class="gw-announce" role="region" aria-label="Announcement">The GemBoss community is live. <a href="https://community.gemboss.ai">Join founders building brand-true stores</a></div>
|
|
48
|
+
<header class="gw-header" data-gw-header>
|
|
49
|
+
<div class="gw-wrap gw-header__bar">
|
|
50
|
+
<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="header.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>
|
|
51
|
+
<nav class="gw-nav" aria-label="Main">
|
|
52
|
+
<ul class="gw-nav__list">
|
|
53
|
+
<li class="gw-nav__item">
|
|
54
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
|
|
55
|
+
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
56
|
+
<div class="gw-wrap gw-mega__grid">
|
|
57
|
+
<div class="gw-mega__col">
|
|
58
|
+
<p class="gw-mega__heading">Build</p>
|
|
59
|
+
<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>
|
|
60
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
|
|
61
|
+
<a class="gw-mega__link" href="https://gemboss.ai/page-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"><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>
|
|
62
|
+
<a class="gw-mega__link" href="https://gemboss.ai/custom-theme"><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="M12 2l9 5-9 5-9-5 9-5z"/><path d="M3 12l9 5 9-5"/></svg></span><span><b>Custom theme</b><i>60 sections that convert</i></span></a>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="gw-mega__col">
|
|
65
|
+
<p class="gw-mega__heading">Grow</p>
|
|
66
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ab-testing"><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>
|
|
67
|
+
<a class="gw-mega__link" href="https://gemboss.ai/offers"><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>
|
|
68
|
+
<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>
|
|
69
|
+
<a class="gw-mega__link" href="https://gemboss.ai/product"><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>Operator</b><i>What to change next</i></span></a>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="gw-mega__col">
|
|
72
|
+
<p class="gw-mega__heading">Connect</p>
|
|
73
|
+
<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>
|
|
74
|
+
<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>
|
|
75
|
+
<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>
|
|
76
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-visibility"><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="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span><span><b>AI search visibility</b><i>Be in the answer</i></span></a>
|
|
77
|
+
</div>
|
|
78
|
+
<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>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</li>
|
|
82
|
+
<li class="gw-nav__item">
|
|
83
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
84
|
+
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
85
|
+
<div class="gw-wrap gw-mega__grid">
|
|
86
|
+
<div class="gw-mega__col">
|
|
87
|
+
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
88
|
+
<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>
|
|
89
|
+
<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>
|
|
90
|
+
<a class="gw-mega__link" href="https://gemboss.ai/affiliate-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"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><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>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="gw-mega__col">
|
|
93
|
+
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
94
|
+
<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>
|
|
95
|
+
<a class="gw-mega__link" href="https://gemboss.ai/#personalize"><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 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg></span><span><b>Personalized by audience</b><i>Sections by source, device, returning</i></span></a>
|
|
96
|
+
<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>
|
|
97
|
+
</div>
|
|
98
|
+
<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>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</li>
|
|
102
|
+
<li class="gw-nav__item">
|
|
103
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-solutions" data-gw-mega="gw-mega-solutions">Solutions</button>
|
|
104
|
+
<div class="gw-mega" id="gw-mega-solutions" hidden>
|
|
105
|
+
<div class="gw-wrap gw-mega__grid">
|
|
106
|
+
<div class="gw-mega__col">
|
|
107
|
+
<p class="gw-mega__heading">By industry</p>
|
|
108
|
+
<a class="gw-mega__link" href="https://gemboss.ai/beauty-skincare"><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="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/></svg></span><span><b>Beauty & skincare</b><i>Ingredients and routines</i></span></a>
|
|
109
|
+
<a class="gw-mega__link" href="https://gemboss.ai/wellness-supplements"><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="M5 19c0-8 6-14 15-14 0 9-6 15-14 15"/><path d="M5 19l7-7"/></svg></span><span><b>Wellness & supplements</b><i>Claims done right</i></span></a>
|
|
110
|
+
<a class="gw-mega__link" href="https://gemboss.ai/fashion-apparel"><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 4 3 7l2 4 3-1v10h8V10l3 1 2-4-5-3c0 2-1.8 3-4 3S8 6 8 4z"/></svg></span><span><b>Fashion & apparel</b><i>Fit, drops, returns</i></span></a>
|
|
111
|
+
<a class="gw-mega__link" href="https://gemboss.ai/home-food"><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 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg></span><span><b>Home & food</b><i>Taste and texture</i></span></a>
|
|
112
|
+
<a class="gw-mega__link" href="https://gemboss.ai/electronics"><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="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span><span><b>Consumer electronics</b><i>Specs that sell</i></span></a>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="gw-mega__col">
|
|
115
|
+
<p class="gw-mega__heading">By team</p>
|
|
116
|
+
<a class="gw-mega__link" href="https://gemboss.ai/solutions#teams"><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="M7 11V6a2 2 0 0 1 4 0v5M11 10V4a2 2 0 0 1 4 0v6M15 10V6a2 2 0 0 1 4 0v8a7 7 0 0 1-7 7h-1a7 7 0 0 1-6-3.4L3 14a2 2 0 0 1 3.4-2z"/></svg></span><span><b>Founders</b><i>No dev team needed</i></span></a>
|
|
117
|
+
<a class="gw-mega__link" href="https://gemboss.ai/solutions#teams"><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>Growth leads</b><i>Test more, guess less</i></span></a>
|
|
118
|
+
<a class="gw-mega__link" href="https://gemboss.ai/partners"><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="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></span><span><b>Media buyers & agencies</b><i>Bring your clients</i></span></a>
|
|
119
|
+
<a class="gw-mega__link" href="https://gemboss.ai/klaviyo-agencies"><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>Email & Klaviyo agencies</b><i>Own the page after the send</i></span></a>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="gw-mega__col">
|
|
122
|
+
<p class="gw-mega__heading">For bigger brands</p>
|
|
123
|
+
<a class="gw-mega__link" href="https://gemboss.ai/enterprise"><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 21h18M5 21V7l7-4 7 4v14M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg></span><span><b>Enterprise</b><i>More stores, more control</i></span></a>
|
|
124
|
+
<a class="gw-mega__link" href="https://gemboss.ai/managed"><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="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><span><b>Managed service</b><i>A team runs it for you</i></span></a>
|
|
125
|
+
<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>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</li>
|
|
130
|
+
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
131
|
+
<li class="gw-nav__item">
|
|
132
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
133
|
+
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
134
|
+
<div class="gw-wrap gw-mega__grid">
|
|
135
|
+
<div class="gw-mega__col">
|
|
136
|
+
<p class="gw-mega__heading">Learn</p>
|
|
137
|
+
<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>
|
|
138
|
+
<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>
|
|
139
|
+
<a class="gw-mega__link" href="https://community.gemboss.ai"><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="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><span><b>Community</b><i>Brands building with GemBoss</i></span></a>
|
|
140
|
+
<a class="gw-mega__link" href="https://gemboss.ai/download"><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="5" width="16" height="11" rx="2"/><path d="M2 19h20"/></svg></span><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="gw-mega__col">
|
|
143
|
+
<p class="gw-mega__heading">Company</p>
|
|
144
|
+
<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>
|
|
145
|
+
<a class="gw-mega__link" href="https://gemboss.ai/careers"><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="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></span><span><b>Careers</b><i>Join the team</i></span></a>
|
|
146
|
+
<a class="gw-mega__link" href="https://gemboss.ai/company#security"><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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span><span><b>Security</b><i>How data stays safe</i></span></a>
|
|
147
|
+
<a class="gw-mega__link" href="https://gemboss.ai/affiliates"><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="M14.5 9.5c-.4-.9-1.3-1.5-2.5-1.5-1.5 0-2.5.8-2.5 2s1 1.7 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1.2 0-2.1-.6-2.5-1.5M12 6.5V8m0 8v1.5"/></svg></span><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a>
|
|
148
|
+
<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>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</li>
|
|
153
|
+
</ul>
|
|
154
|
+
</nav>
|
|
155
|
+
<div class="gw-header__actions">
|
|
156
|
+
<div class="gw-lang" data-gw-lang hidden>
|
|
157
|
+
<button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
|
|
158
|
+
<ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
|
|
159
|
+
</div>
|
|
160
|
+
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
161
|
+
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
162
|
+
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
163
|
+
<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>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="gw-mobile-menu" id="gw-mobile-menu" data-gw-menu="drill" hidden>
|
|
167
|
+
<nav class="gw-wrap" aria-label="Main, mobile">
|
|
168
|
+
<details class="gw-mobile-menu__group">
|
|
169
|
+
<summary>Product</summary>
|
|
170
|
+
<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>
|
|
171
|
+
<p class="gw-mobile-menu__heading">Build</p>
|
|
172
|
+
<ul class="gw-mobile-menu__list">
|
|
173
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel"><span class="gw-mobile-menu__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></li>
|
|
174
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mobile-menu__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></li>
|
|
175
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/page-builder"><span class="gw-mobile-menu__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></li>
|
|
176
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/custom-theme"><span class="gw-mobile-menu__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="M12 2l9 5-9 5-9-5 9-5z"/><path d="M3 12l9 5 9-5"/></svg></span><span><b>Custom theme</b><i>60 sections that convert</i></span></a></li>
|
|
177
|
+
</ul>
|
|
178
|
+
<p class="gw-mobile-menu__heading">Grow</p>
|
|
179
|
+
<ul class="gw-mobile-menu__list">
|
|
180
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ab-testing"><span class="gw-mobile-menu__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></li>
|
|
181
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/offers"><span class="gw-mobile-menu__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></li>
|
|
182
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/data"><span class="gw-mobile-menu__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></li>
|
|
183
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/product"><span class="gw-mobile-menu__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>Operator</b><i>What to change next</i></span></a></li>
|
|
184
|
+
</ul>
|
|
185
|
+
<p class="gw-mobile-menu__heading">Connect</p>
|
|
186
|
+
<ul class="gw-mobile-menu__list">
|
|
187
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations"><span class="gw-mobile-menu__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></li>
|
|
188
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/mcp"><span class="gw-mobile-menu__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></li>
|
|
189
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready"><span class="gw-mobile-menu__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></li>
|
|
190
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-visibility"><span class="gw-mobile-menu__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="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span><span><b>AI search visibility</b><i>Be in the answer</i></span></a></li>
|
|
191
|
+
</ul>
|
|
192
|
+
<a class="gw-mobile-menu__all" href="https://gemboss.ai/product">All of Product</a>
|
|
193
|
+
</details>
|
|
194
|
+
<details class="gw-mobile-menu__group">
|
|
195
|
+
<summary>Use cases</summary>
|
|
196
|
+
<div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">Use cases</h2></div>
|
|
197
|
+
<p class="gw-mobile-menu__heading">Adaptive funnels</p>
|
|
198
|
+
<ul class="gw-mobile-menu__list">
|
|
199
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads"><span class="gw-mobile-menu__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></li>
|
|
200
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mobile-menu__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></li>
|
|
201
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/affiliate-landing-pages"><span class="gw-mobile-menu__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="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><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></li>
|
|
202
|
+
</ul>
|
|
203
|
+
<p class="gw-mobile-menu__heading">Adaptive storefront</p>
|
|
204
|
+
<ul class="gw-mobile-menu__list">
|
|
205
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mobile-menu__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></li>
|
|
206
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/#personalize"><span class="gw-mobile-menu__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 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg></span><span><b>Personalized by audience</b><i>Sections by source, device, returning</i></span></a></li>
|
|
207
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready"><span class="gw-mobile-menu__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></li>
|
|
208
|
+
</ul>
|
|
209
|
+
<a class="gw-mobile-menu__all" href="https://gemboss.ai/meta-ads">All of Use cases</a>
|
|
210
|
+
</details>
|
|
211
|
+
<details class="gw-mobile-menu__group">
|
|
212
|
+
<summary>Solutions</summary>
|
|
213
|
+
<div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">Solutions</h2></div>
|
|
214
|
+
<p class="gw-mobile-menu__heading">By industry</p>
|
|
215
|
+
<ul class="gw-mobile-menu__list">
|
|
216
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/beauty-skincare"><span class="gw-mobile-menu__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="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/></svg></span><span><b>Beauty & skincare</b><i>Ingredients and routines</i></span></a></li>
|
|
217
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/wellness-supplements"><span class="gw-mobile-menu__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="M5 19c0-8 6-14 15-14 0 9-6 15-14 15"/><path d="M5 19l7-7"/></svg></span><span><b>Wellness & supplements</b><i>Claims done right</i></span></a></li>
|
|
218
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/fashion-apparel"><span class="gw-mobile-menu__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 4 3 7l2 4 3-1v10h8V10l3 1 2-4-5-3c0 2-1.8 3-4 3S8 6 8 4z"/></svg></span><span><b>Fashion & apparel</b><i>Fit, drops, returns</i></span></a></li>
|
|
219
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/home-food"><span class="gw-mobile-menu__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 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg></span><span><b>Home & food</b><i>Taste and texture</i></span></a></li>
|
|
220
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/electronics"><span class="gw-mobile-menu__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="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span><span><b>Consumer electronics</b><i>Specs that sell</i></span></a></li>
|
|
221
|
+
</ul>
|
|
222
|
+
<p class="gw-mobile-menu__heading">By team</p>
|
|
223
|
+
<ul class="gw-mobile-menu__list">
|
|
224
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/solutions#teams"><span class="gw-mobile-menu__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="M7 11V6a2 2 0 0 1 4 0v5M11 10V4a2 2 0 0 1 4 0v6M15 10V6a2 2 0 0 1 4 0v8a7 7 0 0 1-7 7h-1a7 7 0 0 1-6-3.4L3 14a2 2 0 0 1 3.4-2z"/></svg></span><span><b>Founders</b><i>No dev team needed</i></span></a></li>
|
|
225
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/solutions#teams"><span class="gw-mobile-menu__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>Growth leads</b><i>Test more, guess less</i></span></a></li>
|
|
226
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/partners"><span class="gw-mobile-menu__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="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></span><span><b>Media buyers & agencies</b><i>Bring your clients</i></span></a></li>
|
|
227
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/klaviyo-agencies"><span class="gw-mobile-menu__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>Email & Klaviyo agencies</b><i>Own the page after the send</i></span></a></li>
|
|
228
|
+
</ul>
|
|
229
|
+
<p class="gw-mobile-menu__heading">For bigger brands</p>
|
|
230
|
+
<ul class="gw-mobile-menu__list">
|
|
231
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/enterprise"><span class="gw-mobile-menu__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 21h18M5 21V7l7-4 7 4v14M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg></span><span><b>Enterprise</b><i>More stores, more control</i></span></a></li>
|
|
232
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/managed"><span class="gw-mobile-menu__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="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><span><b>Managed service</b><i>A team runs it for you</i></span></a></li>
|
|
233
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact"><span class="gw-mobile-menu__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>Talk to sales</b><i>A build and a test plan, not a deck</i></span></a></li>
|
|
234
|
+
</ul>
|
|
235
|
+
<a class="gw-mobile-menu__all" href="https://gemboss.ai/solutions">All of Solutions</a>
|
|
236
|
+
</details>
|
|
237
|
+
<a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
|
|
238
|
+
<details class="gw-mobile-menu__group">
|
|
239
|
+
<summary>Resources</summary>
|
|
240
|
+
<div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">Resources</h2></div>
|
|
241
|
+
<p class="gw-mobile-menu__heading">Learn</p>
|
|
242
|
+
<ul class="gw-mobile-menu__list">
|
|
243
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog"><span class="gw-mobile-menu__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></li>
|
|
244
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs"><span class="gw-mobile-menu__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></li>
|
|
245
|
+
<li><a class="gw-mobile-menu__link" href="https://community.gemboss.ai"><span class="gw-mobile-menu__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="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 4a4 4 0 0 1 0 8"/></svg></span><span><b>Community</b><i>Brands building with GemBoss</i></span></a></li>
|
|
246
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/download"><span class="gw-mobile-menu__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="5" width="16" height="11" rx="2"/><path d="M2 19h20"/></svg></span><span><b>Desktop app</b><i>GemBoss on your Mac</i></span></a></li>
|
|
247
|
+
</ul>
|
|
248
|
+
<p class="gw-mobile-menu__heading">Company</p>
|
|
249
|
+
<ul class="gw-mobile-menu__list">
|
|
250
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company"><span class="gw-mobile-menu__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></li>
|
|
251
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/careers"><span class="gw-mobile-menu__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="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></span><span><b>Careers</b><i>Join the team</i></span></a></li>
|
|
252
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company#security"><span class="gw-mobile-menu__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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span><span><b>Security</b><i>How data stays safe</i></span></a></li>
|
|
253
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/affiliates"><span class="gw-mobile-menu__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="M14.5 9.5c-.4-.9-1.3-1.5-2.5-1.5-1.5 0-2.5.8-2.5 2s1 1.7 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1.2 0-2.1-.6-2.5-1.5M12 6.5V8m0 8v1.5"/></svg></span><span><b>Affiliate program</b><i>Earn on the stores you bring</i></span></a></li>
|
|
254
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact"><span class="gw-mobile-menu__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></li>
|
|
255
|
+
</ul>
|
|
256
|
+
<a class="gw-mobile-menu__all" href="https://gemboss.ai/blog">All of Resources</a>
|
|
257
|
+
</details>
|
|
258
|
+
<div class="gw-mobile-menu__actions">
|
|
259
|
+
<div class="gw-lang" data-gw-lang hidden>
|
|
260
|
+
<button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu-mobile" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
|
|
261
|
+
<ul class="gw-lang__menu" id="gw-lang-menu-mobile" hidden></ul>
|
|
262
|
+
</div>
|
|
263
|
+
<a class="gw-btn gw-btn--lg gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
264
|
+
<a class="gw-btn gw-btn--secondary gw-btn--lg gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
|
|
265
|
+
<a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
266
|
+
</div>
|
|
267
|
+
</nav>
|
|
268
|
+
</div>
|
|
269
|
+
</header>
|
|
270
|
+
|
|
271
|
+
<main id="main">
|
|
272
|
+
<section class="gw-section">
|
|
273
|
+
<div class="gw-wrap">
|
|
274
|
+
<div class="gw-section__head">
|
|
275
|
+
<p class="gw-label">Header, 0.8.0</p>
|
|
276
|
+
<h1><span class="gw-dim">The header of gemboss.ai.</span> A phone menu that drills down, and the language switch.</h1>
|
|
277
|
+
<p class="gw-lead">Narrow the window below 1080px and open the menu: each section opens on its own level with Back, and the actions stay at the bottom. The globe lists the page's other languages.</p>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="gw-segmented demo-mt-lg" role="radiogroup" aria-label="Header of" data-gw-segmented="brand">
|
|
280
|
+
<button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
|
|
281
|
+
<button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
|
|
282
|
+
</div>
|
|
283
|
+
<p class="gw-note demo-mt" data-gw-show="brand:gemboss">GemBoss: tight corners, the ink button, the flat bar. The words are gemboss.ai's.</p>
|
|
284
|
+
<p class="gw-note demo-mt" data-gw-show="brand:gempages" hidden>A GemPages-style brand: soft corners, the accent button in GemPages' blue, the floating header from 1080px. Example brand, not GemPages' page.</p>
|
|
285
|
+
<div class="gw-actions demo-mt-lg">
|
|
286
|
+
<a class="gw-btn" href="index.html">See every component</a>
|
|
287
|
+
<a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/">Compare with gemboss.ai</a>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
</section>
|
|
291
|
+
|
|
292
|
+
<section class="gw-section gw-section--soft" aria-labelledby="try-h">
|
|
293
|
+
<div class="gw-wrap">
|
|
294
|
+
<div class="gw-section__head">
|
|
295
|
+
<p class="gw-label">Try it on a phone</p>
|
|
296
|
+
<h2 id="try-h">Four things to check</h2>
|
|
297
|
+
</div>
|
|
298
|
+
<ol class="gw-steps">
|
|
299
|
+
<li><h3>Open a section</h3><p>Tap Product: its level slides in with Back and its title, and the focus moves to the title.</p></li>
|
|
300
|
+
<li><h3>Go back</h3><p>Tap Back: the sections slide back and the focus returns to Product.</p></li>
|
|
301
|
+
<li><h3>Scroll a long level</h3><p>The bar with Sign in, Start free and Book a demo stays at the bottom of the menu.</p></li>
|
|
302
|
+
<li><h3>Switch the language</h3><p>The globe shows this page's language. Its list links to the other two, each named in its own words.</p></li>
|
|
303
|
+
</ol>
|
|
304
|
+
</div>
|
|
305
|
+
</section>
|
|
306
|
+
|
|
307
|
+
<section class="gw-section" aria-labelledby="keys-h">
|
|
308
|
+
<div class="gw-wrap gw-wrap--narrow">
|
|
309
|
+
<div class="gw-section__head">
|
|
310
|
+
<p class="gw-label">Keyboard</p>
|
|
311
|
+
<h2 id="keys-h">Every part works without a mouse</h2>
|
|
312
|
+
</div>
|
|
313
|
+
<ul class="gw-list--check">
|
|
314
|
+
<li>In the open menu, Tab and Shift+Tab stay inside it, and Escape closes it.</li>
|
|
315
|
+
<li>Enter on a section opens its level; Back returns to the section you came from.</li>
|
|
316
|
+
<li>On the globe, the arrow keys open the list and move through it; Escape closes it.</li>
|
|
317
|
+
</ul>
|
|
318
|
+
</div>
|
|
319
|
+
</section>
|
|
320
|
+
</main>
|
|
321
|
+
|
|
322
|
+
<footer class="gw-footer">
|
|
323
|
+
<div class="gw-wrap">
|
|
324
|
+
<div class="gw-footer__bottom">
|
|
325
|
+
<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>
|
|
326
|
+
<ul aria-label="Legal">
|
|
327
|
+
<li><a href="https://gemboss.ai/privacy">Privacy</a></li>
|
|
328
|
+
<li><a href="https://gemboss.ai/terms">Terms</a></li>
|
|
329
|
+
</ul>
|
|
330
|
+
<button class="gw-theme-toggle gw-footer__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>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</footer>
|
|
334
|
+
|
|
335
|
+
<script src="../js/website.js" defer></script>
|
|
336
|
+
<script>
|
|
337
|
+
// demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html> and the
|
|
338
|
+
// header, and its accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages
|
|
339
|
+
// opens it so.
|
|
340
|
+
(function () {
|
|
341
|
+
var root = document.documentElement, accent = document.getElementById('demo-gempages');
|
|
342
|
+
function brand(b) {
|
|
343
|
+
var gp = b === 'gempages';
|
|
344
|
+
if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
|
|
345
|
+
else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
|
|
346
|
+
document.querySelector('.gw-header').classList.toggle('gw-header--float', gp);
|
|
347
|
+
accent.media = gp ? 'all' : 'not all';
|
|
348
|
+
}
|
|
349
|
+
document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
|
|
350
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
351
|
+
if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
|
|
352
|
+
});
|
|
353
|
+
})();
|
|
354
|
+
</script>
|
|
355
|
+
</body>
|
|
356
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -586,6 +586,7 @@ npx gemboss-website check --fix-list</code></pre>
|
|
|
586
586
|
<p class="demo-mt">The whole page for a blog post, with breadcrumbs, the meta row, contents and callouts: <a href="article.html">an article</a>, and <a href="blog.html">the blog index</a> with its post list.</p>
|
|
587
587
|
<p class="demo-mt">Fields in every state, the footer newsletter, a testimonial wall and the rating badge: <a href="forms.html">forms and ratings</a>.</p>
|
|
588
588
|
<p class="demo-mt">The footer as gemboss.ai has it, with Ask AI links, columns that fold on a phone, family rows and the wordmark: <a href="footer.html">the full footer</a>.</p>
|
|
589
|
+
<p class="demo-mt">The header as gemboss.ai has it on a phone, with a menu that drills down into each section and the language switch: <a href="header.html">the header</a>.</p>
|
|
589
590
|
</div>
|
|
590
591
|
</section>
|
|
591
592
|
|
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), and the mobile menu's drill-down and the language switcher (0.8.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,14 @@ 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
|
+
## Additions to the markup contract in 0.8.0
|
|
837
|
+
|
|
838
|
+
The drill-down mobile menu: `data-gw-menu="drill"` on `.gw-mobile-menu`, `.gw-mobile-menu__head` (`__back`, `__title`),
|
|
839
|
+
`.gw-mobile-menu__heading`, `__icon`, `__all`, the script's `.is-drill`, `.is-drilled` and `.is-back` on the sheet and
|
|
840
|
+
its `--gw-menu-top`. The language switcher: `.gw-lang` (`data-gw-lang`, `__btn`, `__short`, `__menu`, `__link`) and the
|
|
841
|
+
script's `lang` part. One event, `gw:menu` (`{ open, level }`), on every mobile menu. No markup or class of 0.7.0
|
|
842
|
+
changes: the 0.7.0 header still works and looks the same.
|
|
843
|
+
|
|
779
844
|
## Additions to the markup contract in 0.7.0
|
|
780
845
|
|
|
781
846
|
The footer of gemboss.ai: `.gw-footer__fold` (a `<details>` in a `.gw-footer__col` or a `.gw-footer__family`, its
|