@gemboss/website-ui 0.0.0-stage → 0.2.0

package/templates/sections/split.html

@@ -0,0 +1,27 @@
+<!--
+  Split: one idea told in words beside a figure (a real screen, or a drawn mock-up of the product).
+  .gw-split--reverse puts the figure on the left on wide screens; on phones the words always come first.
+  Alternate --reverse between consecutive splits. Limits: label, h2, at most two lines, a check list of three to
+  five items, one action (a link or one button). The figure is a .gw-window or a <figure> with alt text; numbers in
+  a window that are not real get the caption "Illustrative data.", real ones their source.
+-->
+<section class="gw-section">
+  <div class="gw-wrap gw-split">
+    <div>
+      <p class="gw-label">[Short label]</p>
+      <h2>[Headline: the outcome for the reader]</h2>
+      <p class="gw-lead">[One or two lines on how.]</p>
+      <ul class="gw-list--check">
+        <li>[What it does, in one line]</li>
+        <li>[What it does, in one line]</li>
+        <li>[What it does, in one line]</li>
+      </ul>
+      <div class="gw-actions"><a class="gw-link gw-link--arrow" href="[link]">[Where the link goes]</a></div>
+    </div>
+    <div class="gw-window">
+      <div class="gw-window__bar">[Where this screen lives]</div>
+      <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1200]" height="[900]" loading="lazy"></div>
+      <p class="gw-window__caption">[Illustrative data. Or the source of the numbers. Delete when the screen shows no numbers.]</p>
+    </div>
+  </div>
+</section>

package/templates/sections/stats.html

@@ -0,0 +1,26 @@
+<!--
+  Stats: three or four facts in a row. Every number needs a source the reader can check (a page, a report, a date),
+  written in .gw-stats__source under it. No rounded-up guesses, no "up to", no number you cannot point to:
+  without a source, write [NUMBER] and ask. Units go in the value ("2.1 s"), the meaning in the label.
+-->
+<section class="gw-section gw-section--tight">
+  <div class="gw-wrap">
+    <ul class="gw-stats">
+      <li class="gw-stats__item">
+        <p class="gw-stats__value">[NUMBER]</p>
+        <p class="gw-stats__label">[What it measures, in a few words]</p>
+        <p class="gw-stats__source">[Source: where and when it was measured]</p>
+      </li>
+      <li class="gw-stats__item">
+        <p class="gw-stats__value">[NUMBER]</p>
+        <p class="gw-stats__label">[What it measures]</p>
+        <p class="gw-stats__source">[Source]</p>
+      </li>
+      <li class="gw-stats__item">
+        <p class="gw-stats__value">[NUMBER]</p>
+        <p class="gw-stats__label">[What it measures]</p>
+        <p class="gw-stats__source">[Source]</p>
+      </li>
+    </ul>
+  </div>
+</section>

package/templates/sections/steps.html

@@ -0,0 +1,17 @@
+<!--
+  Steps: how it works, three or four numbered steps in order (the numbers come from the <ol>, do not type them).
+  Each step: a title of one to three words, one line. Limits: no more than four, no buttons inside the steps.
+-->
+<section class="gw-section">
+  <div class="gw-wrap">
+    <div class="gw-section__head">
+      <p class="gw-label">How it works</p>
+      <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
+    </div>
+    <ol class="gw-steps">
+      <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
+      <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
+      <li><h3>[Step]</h3><p>[One line on what happens.]</p></li>
+    </ol>
+  </div>
+</section>