@gemboss/website-ui 0.0.0-stage → 0.1.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.
Files changed (42) hide show
  1. package/AGENTS.md +174 -0
  2. package/CHANGELOG.md +19 -0
  3. package/README.md +117 -2
  4. package/bin/gemboss-website.mjs +78 -0
  5. package/bin/lib/check.mjs +642 -0
  6. package/bin/lib/gap.mjs +189 -0
  7. package/bin/lib/init.mjs +99 -0
  8. package/bin/lib/upgrade.mjs +155 -0
  9. package/bin/lib/util.mjs +147 -0
  10. package/css/base.css +107 -0
  11. package/css/components.css +236 -0
  12. package/css/footer.css +53 -0
  13. package/css/header.css +231 -0
  14. package/css/layout.css +59 -0
  15. package/css/sections.css +173 -0
  16. package/css/tokens.css +198 -0
  17. package/demo/index.html +629 -0
  18. package/demo/theme-example.html +133 -0
  19. package/docs/components.md +299 -0
  20. package/docs/markup-contract.md +115 -0
  21. package/docs/philosophy.md +69 -0
  22. package/docs/theming.md +95 -0
  23. package/js/website.js +149 -0
  24. package/package.json +50 -4
  25. package/skill/SKILL.md +48 -0
  26. package/system.json +120 -0
  27. package/templates/footer.html +40 -0
  28. package/templates/header.html +60 -0
  29. package/templates/page.html +134 -0
  30. package/templates/sections/cta.html +15 -0
  31. package/templates/sections/faq.html +24 -0
  32. package/templates/sections/features.html +32 -0
  33. package/templates/sections/hero.html +25 -0
  34. package/templates/sections/logos.html +15 -0
  35. package/templates/sections/pricing.html +39 -0
  36. package/templates/sections/quote.html +13 -0
  37. package/templates/sections/showcase.html +24 -0
  38. package/templates/sections/split.html +25 -0
  39. package/templates/sections/stats.html +26 -0
  40. package/templates/sections/steps.html +17 -0
  41. package/website.css +1064 -0
  42. package/website.min.css +1 -0
@@ -0,0 +1,134 @@
1
+ <!doctype html>
2
+ <!--
3
+ Page skeleton: start every new page from this file.
4
+ Serve website.css and website.js from node_modules/@gemboss/website-ui/ at the [/kit] path below (copy or route them),
5
+ then link the site's own CSS after the kit. Fill the header and footer once, in a shared partial.
6
+ One <h1> per page (in the hero), sections in the order the page needs, then delete every unused part.
7
+ Replace every [bracketed] placeholder. No lorem ipsum, no invented facts.
8
+ -->
9
+ <html lang="en">
10
+ <head>
11
+ <meta charset="utf-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1">
13
+ <title>[Page title] · [Brand]</title>
14
+ <meta name="description" content="[One sentence, under 160 characters, on what this page offers the reader.]">
15
+ <link rel="icon" href="[/favicon.svg]" type="image/svg+xml">
16
+ <!-- the stored theme, applied before first paint (website.js keeps it in localStorage "gw-theme") -->
17
+ <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
18
+ <link rel="preconnect" href="https://fonts.googleapis.com">
19
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
21
+ <link rel="stylesheet" href="[/kit]/website.css">
22
+ <link rel="stylesheet" href="[/assets]/site.css">
23
+ </head>
24
+ <body class="gw-page">
25
+ <a class="gw-skip" href="#main">Skip to content</a>
26
+
27
+ <div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
28
+ <header class="gw-header" data-gw-header>
29
+ <div class="gw-wrap gw-header__bar">
30
+ <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
31
+ <nav class="gw-nav" aria-label="Main">
32
+ <ul class="gw-nav__list">
33
+ <li class="gw-nav__item">
34
+ <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">[Product menu item]</button>
35
+ <div class="gw-mega" id="gw-mega-product" hidden>
36
+ <div class="gw-wrap gw-mega__grid">
37
+ <div class="gw-mega__col">
38
+ <p class="gw-mega__heading">[Group]</p>
39
+ <a class="gw-mega__link" href="[/page]"><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 title]</b><i>[One line on what it does]</i></span></a>
40
+ <a class="gw-mega__link" href="[/page]"><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>[Page title]</b><i>[One line on what it does]</i></span></a>
41
+ </div>
42
+ <div class="gw-mega__col">
43
+ <p class="gw-mega__heading">[Group]</p>
44
+ <a class="gw-mega__link" href="[/page]"><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>[Page title]</b><i>[One line on what it does]</i></span></a>
45
+ </div>
46
+ <a class="gw-mega__feature" href="[/page]"><b>[Feature title]</b><i>[One line on why to open it]</i><span class="gw-link gw-link--arrow">[Where it goes]</span></a>
47
+ </div>
48
+ </div>
49
+ </li>
50
+ <li class="gw-nav__item"><a class="gw-nav__link" href="[/pricing]">[Pricing]</a></li>
51
+ </ul>
52
+ </nav>
53
+ <div class="gw-header__actions">
54
+ <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>
55
+ <a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
56
+ <a class="gw-btn gw-btn--secondary gw-btn--sm" href="[/contact]">[Book a demo]</a>
57
+ <a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
58
+ <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>
59
+ </div>
60
+ </div>
61
+ <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
62
+ <nav class="gw-wrap" aria-label="Main, mobile">
63
+ <details class="gw-mobile-menu__group">
64
+ <summary>[Product menu item]</summary>
65
+ <ul class="gw-mobile-menu__list">
66
+ <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
67
+ <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
68
+ </ul>
69
+ </details>
70
+ <a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
71
+ <div class="gw-mobile-menu__actions">
72
+ <a class="gw-btn gw-btn--block" href="[sign-up URL]">[Start free]</a>
73
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="[/contact]">[Book a demo]</a>
74
+ <a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
75
+ </div>
76
+ </nav>
77
+ </div>
78
+ </header>
79
+
80
+ <main id="main">
81
+ <!-- sections from templates/sections/: hero first, then proof, features, a split or showcase, FAQ, CTA -->
82
+ <section class="gw-hero">
83
+ <div class="gw-hero__wash" aria-hidden="true"></div>
84
+ <div class="gw-wrap">
85
+ <p class="gw-label">[Short label]</p>
86
+ <h1><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h1>
87
+ <p class="gw-lead">[One or two lines on what it does for the reader.]</p>
88
+ <div class="gw-actions">
89
+ <a class="gw-btn" href="[link]">[Primary action]</a>
90
+ <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
91
+ </div>
92
+ </div>
93
+ </section>
94
+ </main>
95
+
96
+ <footer class="gw-footer">
97
+ <div class="gw-wrap">
98
+ <div class="gw-footer__grid">
99
+ <div class="gw-footer__brand">
100
+ <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
101
+ <p>[One sentence on what the brand does for the reader.]</p>
102
+ </div>
103
+ <nav class="gw-footer__col" aria-label="[Column heading]">
104
+ <h2 class="gw-footer__heading">[Column heading]</h2>
105
+ <ul>
106
+ <li><a href="[/page]">[Page title]</a></li>
107
+ <li><a href="[/page]">[Page title]</a></li>
108
+ <li><a href="[/page]">[Page title]</a></li>
109
+ </ul>
110
+ </nav>
111
+ <nav class="gw-footer__col" aria-label="[Column heading]">
112
+ <h2 class="gw-footer__heading">[Column heading]</h2>
113
+ <ul>
114
+ <li><a href="[/page]">[Page title]</a></li>
115
+ <li><a href="[/page]">[Page title]</a></li>
116
+ </ul>
117
+ </nav>
118
+ </div>
119
+ <div class="gw-footer__bottom">
120
+ <span>© [Year] [Company]. All rights reserved.</span>
121
+ <ul aria-label="Legal">
122
+ <li><a href="[/privacy]">Privacy</a></li>
123
+ <li><a href="[/terms]">Terms</a></li>
124
+ </ul>
125
+ <ul aria-label="Social">
126
+ <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
127
+ </ul>
128
+ </div>
129
+ </div>
130
+ </footer>
131
+
132
+ <script src="[/kit]/website.js" defer></script>
133
+ </body>
134
+ </html>
@@ -0,0 +1,15 @@
1
+ <!--
2
+ CTA: the closing call to action, the last section before the footer. One headline, one line, the same primary
3
+ action as the hero. Put it in a night band (the closing CTA does not count toward the three night bands; never right after another night band)
4
+ or in .gw-section--soft. Limits: one .gw-btn and at most one secondary; no forms that collect nothing.
5
+ -->
6
+ <section class="gw-section gw-band--night">
7
+ <div class="gw-wrap gw-cta">
8
+ <h2>[Headline: the outcome, one more time]</h2>
9
+ <p class="gw-lead">[One line on the first step.]</p>
10
+ <div class="gw-actions">
11
+ <a class="gw-btn" href="[link]">[Primary action]</a>
12
+ <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
13
+ </div>
14
+ </div>
15
+ </section>
@@ -0,0 +1,24 @@
1
+ <!--
2
+ FAQ: the questions a reader really asks before they act, answered in two to four sentences each, with the same
3
+ facts as the rest of the site. Native details/summary: no script. Limits: four to eight questions, questions as
4
+ the reader would ask them, no marketing claims hidden in answers. Mark it up as FAQPage JSON-LD only if every
5
+ answer is visible on the page.
6
+ -->
7
+ <section class="gw-section">
8
+ <div class="gw-wrap gw-wrap--narrow">
9
+ <div class="gw-section__head">
10
+ <p class="gw-label">FAQ</p>
11
+ <h2>[Headline, e.g. Good to know]</h2>
12
+ </div>
13
+ <div class="gw-faq">
14
+ <details class="gw-faq__item">
15
+ <summary>[A question the reader asks?]</summary>
16
+ <p>[The answer in two to four sentences.]</p>
17
+ </details>
18
+ <details class="gw-faq__item">
19
+ <summary>[A question the reader asks?]</summary>
20
+ <p>[The answer.]</p>
21
+ </details>
22
+ </div>
23
+ </div>
24
+ </section>
@@ -0,0 +1,32 @@
1
+ <!--
2
+ Features: what the product does, three to six short items in a grid (.gw-grid--3, or --2 / --4).
3
+ Each: a 20px stroke icon (aria-hidden), a title of two to five words, one or two lines. Say what it does today,
4
+ not a promise. Add .gw-card to each .gw-feature only when the section background is soft and they need a frame.
5
+ Limits: one section head, no buttons inside the items (one action under the grid at most).
6
+ -->
7
+ <section class="gw-section gw-section--soft">
8
+ <div class="gw-wrap">
9
+ <div class="gw-section__head">
10
+ <p class="gw-label">[Short label]</p>
11
+ <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
12
+ <p class="gw-lead">[One or two lines.]</p>
13
+ </div>
14
+ <div class="gw-features gw-grid--3">
15
+ <div class="gw-feature">
16
+ <span class="gw-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>
17
+ <h3>[Feature title]</h3>
18
+ <p>[One or two lines on what it does for the reader.]</p>
19
+ </div>
20
+ <div class="gw-feature">
21
+ <span class="gw-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>
22
+ <h3>[Feature title]</h3>
23
+ <p>[One or two lines.]</p>
24
+ </div>
25
+ <div class="gw-feature">
26
+ <span class="gw-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>
27
+ <h3>[Feature title]</h3>
28
+ <p>[One or two lines.]</p>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </section>
@@ -0,0 +1,25 @@
1
+ <!--
2
+ Hero: the first screen of a page, and the only place for the <h1>. Use once per page, at the top of <main>.
3
+ Variants: .gw-hero--center (centred, for short promises), .gw-hero--compact (subpages: less height, h2-sized h1).
4
+ Add .gw-band--night for a dark hero (it counts as one of the page's three night bands).
5
+ Limits: a short label, a two-part headline (muted first sentence, ink second), at most two lines under it,
6
+ one .gw-btn and one secondary action. The optional window holds a real product screen (img with alt, width, height)
7
+ or a mock-up that says "Illustrative" when its numbers are not real. Never tuck the hero under the header.
8
+ -->
9
+ <section class="gw-hero">
10
+ <div class="gw-hero__wash" aria-hidden="true"></div>
11
+ <div class="gw-wrap">
12
+ <p class="gw-label">[Short label]</p>
13
+ <h1><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h1>
14
+ <p class="gw-lead">[One or two lines on what it does for the reader.]</p>
15
+ <div class="gw-actions">
16
+ <a class="gw-btn" href="[link]">[Primary action]</a>
17
+ <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
18
+ </div>
19
+ <p class="gw-note">[One short reassurance, e.g. the trial terms. Delete if there is none.]</p>
20
+ <div class="gw-window">
21
+ <div class="gw-window__bar">[Where this screen lives, e.g. the app section]</div>
22
+ <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1200]" height="[750]"></div>
23
+ </div>
24
+ </div>
25
+ </section>
@@ -0,0 +1,15 @@
1
+ <!--
2
+ Logos: a proof strip right under the hero. Real customers or partners only, each logo used with permission,
3
+ or the brand's own product wordmarks. Never a made-up brand, never "as seen in" without the source.
4
+ Limits: one short line above, four to eight logos, all at the same height (28px), in their single-colour version.
5
+ -->
6
+ <section class="gw-logos" aria-label="[What these logos are, e.g. Customers]">
7
+ <div class="gw-wrap">
8
+ <p>[One short line, e.g. Trusted by]</p>
9
+ <ul>
10
+ <li><img src="[/img/logo-1.svg]" alt="[Company name]" width="[112]" height="28"></li>
11
+ <li><img src="[/img/logo-2.svg]" alt="[Company name]" width="[112]" height="28"></li>
12
+ <li>[Wordmark as text]</li>
13
+ </ul>
14
+ </div>
15
+ </section>
@@ -0,0 +1,39 @@
1
+ <!--
2
+ Pricing: plan cards with the brand's real plan names and prices, exactly as billed. A missing price is [PRICE]
3
+ and a question to the person, never a guess. One plan may be .gw-plan--featured (an accent hairline, never a fill)
4
+ and only that one gets the filled .gw-btn; the others get .gw-btn--secondary.
5
+ Limits: two to four plans, four to six lines per plan, the same lines in the same order on every plan.
6
+ -->
7
+ <section class="gw-section">
8
+ <div class="gw-wrap">
9
+ <div class="gw-section__head gw-section__head--center">
10
+ <p class="gw-label">Pricing</p>
11
+ <h2>[Headline about how pricing works]</h2>
12
+ <p class="gw-lead">[One line: trial, billing, what every plan includes.]</p>
13
+ </div>
14
+ <div class="gw-pricing">
15
+ <div class="gw-plan">
16
+ <h3>[Plan]</h3>
17
+ <p>[Who it is for, in one line]</p>
18
+ <p class="gw-plan__price">[PRICE] <small>/ month</small></p>
19
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="[link]">[Action]</a>
20
+ <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
21
+ </div>
22
+ <div class="gw-plan gw-plan--featured">
23
+ <span class="gw-badge gw-badge--accent">[Why this one, e.g. Recommended for …]</span>
24
+ <h3>[Plan]</h3>
25
+ <p>[Who it is for]</p>
26
+ <p class="gw-plan__price">[PRICE] <small>/ month</small></p>
27
+ <a class="gw-btn gw-btn--block" href="[link]">[Action]</a>
28
+ <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
29
+ </div>
30
+ <div class="gw-plan">
31
+ <h3>[Plan]</h3>
32
+ <p>[Who it is for]</p>
33
+ <p class="gw-plan__price">[PRICE] <small>/ month</small></p>
34
+ <a class="gw-btn gw-btn--secondary gw-btn--block" href="[link]">[Action]</a>
35
+ <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </section>
@@ -0,0 +1,13 @@
1
+ <!--
2
+ Quote: one testimonial from a real customer who agreed to be quoted, word for word, with their real name, role
3
+ and company. Never write a quote for someone, never "a happy customer", never a stock photo as the face.
4
+ No real quote yet? Leave this section out. Limits: one quote per section, under 40 words.
5
+ -->
6
+ <section class="gw-section gw-section--soft">
7
+ <div class="gw-wrap">
8
+ <figure class="gw-quote">
9
+ <blockquote><p>[The customer's exact words.]</p></blockquote>
10
+ <figcaption><b>[Full name]</b>, [role], [company]</figcaption>
11
+ </figure>
12
+ </div>
13
+ </section>
@@ -0,0 +1,24 @@
1
+ <!--
2
+ Showcase: a night band with one large product screen and two or three points under it. Use for the one feature
3
+ the page is about. It counts as a night band: at most three per page, never two in a row.
4
+ Limits: centred head (label, h2, two lines), one window (a real screen or an "Illustrative" mock-up),
5
+ two or three points (.gw-features in .gw-grid--3 or --2), at most one action pair.
6
+ -->
7
+ <section class="gw-section gw-band--night gw-showcase">
8
+ <div class="gw-wrap">
9
+ <div class="gw-section__head gw-section__head--center">
10
+ <p class="gw-label">[Short label]</p>
11
+ <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
12
+ <p class="gw-lead">[One or two lines.]</p>
13
+ </div>
14
+ <div class="gw-window">
15
+ <div class="gw-window__bar">[Where this screen lives]</div>
16
+ <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1600]" height="[1000]" loading="lazy"></div>
17
+ </div>
18
+ <div class="gw-features gw-grid--3">
19
+ <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
20
+ <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
21
+ <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
22
+ </div>
23
+ </div>
24
+ </section>
@@ -0,0 +1,25 @@
1
+ <!--
2
+ Split: one idea told in words beside a figure (a real screen, or a drawn mock-up of the product).
3
+ .gw-split--reverse puts the figure on the left on wide screens; on phones the words always come first.
4
+ Alternate --reverse between consecutive splits. Limits: label, h2, at most two lines, a check list of three to
5
+ five items, one action (a link or one button). The figure is a .gw-window or a <figure> with alt text.
6
+ -->
7
+ <section class="gw-section">
8
+ <div class="gw-wrap gw-split">
9
+ <div>
10
+ <p class="gw-label">[Short label]</p>
11
+ <h2>[Headline: the outcome for the reader]</h2>
12
+ <p class="gw-lead">[One or two lines on how.]</p>
13
+ <ul class="gw-list--check">
14
+ <li>[What it does, in one line]</li>
15
+ <li>[What it does, in one line]</li>
16
+ <li>[What it does, in one line]</li>
17
+ </ul>
18
+ <div class="gw-actions"><a class="gw-link gw-link--arrow" href="[link]">[Where the link goes]</a></div>
19
+ </div>
20
+ <div class="gw-window">
21
+ <div class="gw-window__bar">[Where this screen lives]</div>
22
+ <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1200]" height="[900]" loading="lazy"></div>
23
+ </div>
24
+ </div>
25
+ </section>
@@ -0,0 +1,26 @@
1
+ <!--
2
+ Stats: three or four facts in a row. Every number needs a source the reader can check (a page, a report, a date),
3
+ written in .gw-stats__source under it. No rounded-up guesses, no "up to", no number you cannot point to:
4
+ without a source, write [NUMBER] and ask. Units go in the value ("2.1 s"), the meaning in the label.
5
+ -->
6
+ <section class="gw-section gw-section--tight">
7
+ <div class="gw-wrap">
8
+ <ul class="gw-stats">
9
+ <li class="gw-stats__item">
10
+ <p class="gw-stats__value">[NUMBER]</p>
11
+ <p class="gw-stats__label">[What it measures, in a few words]</p>
12
+ <p class="gw-stats__source">[Source: where and when it was measured]</p>
13
+ </li>
14
+ <li class="gw-stats__item">
15
+ <p class="gw-stats__value">[NUMBER]</p>
16
+ <p class="gw-stats__label">[What it measures]</p>
17
+ <p class="gw-stats__source">[Source]</p>
18
+ </li>
19
+ <li class="gw-stats__item">
20
+ <p class="gw-stats__value">[NUMBER]</p>
21
+ <p class="gw-stats__label">[What it measures]</p>
22
+ <p class="gw-stats__source">[Source]</p>
23
+ </li>
24
+ </ul>
25
+ </div>
26
+ </section>
@@ -0,0 +1,17 @@
1
+ <!--
2
+ Steps: how it works, three or four numbered steps in order (the numbers come from the <ol>, do not type them).
3
+ Each step: a title of one to three words, one line. Limits: no more than four, no buttons inside the steps.
4
+ -->
5
+ <section class="gw-section">
6
+ <div class="gw-wrap">
7
+ <div class="gw-section__head">
8
+ <p class="gw-label">How it works</p>
9
+ <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
10
+ </div>
11
+ <ol class="gw-steps">
12
+ <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
13
+ <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
14
+ <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
15
+ </ol>
16
+ </div>
17
+ </section>