@gemboss/website-ui 0.5.0 → 0.7.0

package/skill/SKILL.md

@@ -20,6 +20,14 @@ the kit and its rules are how the page ends up looking designed. Compose from th
    - An article page (a blog post, a guide) is `KIT/templates/sections/article.html`: breadcrumbs, the meta row, a
      contents list from the article's h2s, the prose, callouts, the FAQ last. Never a callout told by its colour
      alone (it keeps its label: Note, Tip, Warning). The blog index is `KIT/templates/sections/post-list.html`.
+   - A form asks as little as it can: one field beats a form, a form keeps two or three fields
+     (`KIT/templates/sections/form.html`; one field and its button: `.gw-form-inline`). Label above, the error in
+     words under it with `aria-invalid="true"`; the page decides when, the kit draws it.
+   - Ratings and testimonials (`KIT/templates/sections/testimonials.html`): only real ones, each linked to the page it
+     comes from, the reviewer's words exactly; stars carry their value in words (`aria-label="4.9 out of 5"`).
+   - The footer is `KIT/templates/footer.html` (the footer of gemboss.ai), filled once in the site's shared partial:
+     fill its rows (columns, family rows, words), delete the optional parts you do not use (Ask AI, newsletter, family
+     rows, theme toggle, wordmark), never invent a footer part. Columns fold on phones by themselves (`<details>`).
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.

package/system.json

@@ -11,6 +11,7 @@
       "muted": "#686b71",
       "line": "#e5e7ea",
       "line-strong": "#d5d8dd",
+      "line-control": "#85888e",
       "action": "#1b1c1e",
       "action-hover": "#000000",
       "on-action": "#ffffff",
@@ -22,6 +23,9 @@
       "success-soft": "#e3f1df",
       "warning": "#9a6700",
       "warning-soft": "#fbf1dc",
+      "danger": "#b42318",
+      "danger-soft": "#fff0e9",
+      "on-danger": "#ffffff",
       "night": "#0c0e14",
       "night-2": "#141722",
       "on-night": "#e3e4e8",
@@ -36,6 +40,7 @@
       "muted": "#9a9ca6",
       "line": "#2a2b33",
       "line-strong": "#383944",
+      "line-control": "#6a6d78",
       "action": "#f2f3f5",
       "action-hover": "#ffffff",
       "on-action": "#0d0d12",
@@ -47,6 +52,9 @@
       "success-soft": "#132a22",
       "warning": "#e0b341",
       "warning-soft": "#2b2410",
+      "danger": "#ff6b5a",
+      "danger-soft": "#2e1714",
+      "on-danger": "#0d0d12",
       "night": "#0a0b10",
       "night-2": "#12141c",
       "on-night": "#e3e4e8",
@@ -62,7 +70,8 @@
     "roles": {
       "action": "The thing you click: ink, or the brand's accent when the site chose the accent action profile (profiles.action).",
       "accent": "Links, focus rings, active state, a chart line, the 8px label square; the primary button only through the accent action profile. Never body text, never words in a heading, never a section band.",
-      "success/warning": "State only. Their -soft tints are grounds: a tip or a warning callout, a success badge.",
+      "success/warning/danger": "State only. Their -soft tints are grounds: a tip or a warning callout, a success or an error badge, a field marked invalid. danger (0.6.0, gap #28) is the dashboard's --gemboss-danger family: the words of a field's error and the fill of a destructive button (on-danger on it).",
+      "line-control": "The border of a form control (a field, a checkbox, a radio), 0.6.0: it must reach 3:1 on bg, bg-soft and surface, light and dark, where line and line-strong are hairlines that do not. Like the dashboard's --gemboss-field-line.",
       "wash": "The hero wash and illustrations only."
     }
   },
@@ -86,6 +95,8 @@
     "display": {
       "h1": "clamp(40px, 4.6vw, 68px)",
       "h2": "clamp(32px, 3.4vw, 52px)",
+      "wordmark": "clamp(40px, 9vw, 128px)",
+      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading.",
       "weight": 600,
       "tracking": "-0.03em"
     },

package/templates/footer.html

@@ -1,7 +1,18 @@
 <!--
-  Footer: one per site, the same on every page. A brand block, three to five link columns, a bottom row.
-  Limits: column headings are one or two words in sentence case; four to seven links per column; the bottom row
-  holds the copyright, the legal links and the social links, nothing else. Replace every [bracketed] placeholder.
+  Footer: one per site, the same on every page, built from this template (AGENTS.md: brands fill its rows, they never
+  invent a footer part). It is the footer of gemboss.ai (0.7.0). In order:
+    1. the brand block: logo, one sentence; OPTIONAL the Ask AI row; OPTIONAL the newsletter form (0.6.0)
+    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (below 768px), open
+       columns from 768px. Headings one or two words in sentence case, four to seven links each.
+    3. OPTIONAL product-family rows: a label and two to eight products, name and one line each; repeat the <nav> for a
+       second family
+    4. the bottom row: copyright, legal links, OPTIONAL theme toggle, social links. Nothing else.
+    5. OPTIONAL the wordmark: the brand's mark and name, large and faint, decoration only
+  Replace every [bracketed] placeholder and delete the optional parts you do not use. website.js wires the folds and
+  the toggle; without it the footer still works (the browser folds the <details> by itself).
+
+  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true"></span> (a drawn ↗). A link with
+  target="_blank" also carries <span class="gw-visually-hidden"> (opens in a new tab)</span>; a link without it does not.
 -->
 <footer class="gw-footer">
   <div class="gw-wrap">
@@ -9,32 +20,124 @@
       <div class="gw-footer__brand">
         <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>
         <p>[One sentence on what the brand does for the reader.]</p>
+        <!-- OPTIONAL Ask AI: each link opens an assistant with the same neutral question already typed, URL-encoded after
+             ?q= (spaces as %20). Ask what the brand is and what it does for the reader, never a leading question. Words,
+             not the assistants' logos. -->
+        <div class="gw-footer__ask">
+          <p class="gw-footer__ask-label" id="footer-ask">Ask AI about [Brand]</p>
+          <ul aria-labelledby="footer-ask">
+            <li><a href="https://chatgpt.com/?q=[URL-encoded question]" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://claude.ai/new?q=[URL-encoded question]" target="_blank" rel="noopener">Claude<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.perplexity.ai/search/new?q=[URL-encoded question]" target="_blank" rel="noopener">Perplexity<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.google.com/search?udm=50&amp;q=[URL-encoded question]" target="_blank" rel="noopener">Google AI Mode<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          </ul>
+        </div>
+        <!-- OPTIONAL newsletter (0.6.0): keep it only when it is wired to a list that keeps the address and sends what the
+             note promises. The note says how often and how to stop, and links to the privacy policy. No box ticked for
+             the reader, no "No thanks, I hate saving money". On send: the page sets aria-invalid="true" and the error's
+             words, or aria-busy on the button and then a role="status" line. -->
+        <form class="gw-footer__newsletter" action="[/newsletter endpoint]" method="post" novalidate>
+          <div class="gw-field">
+            <label class="gw-field__label" for="footer-email">[Product news by email]</label>
+            <div class="gw-form-inline">
+              <input class="gw-input" id="footer-email" name="email" type="email" autocomplete="email" required aria-describedby="footer-email-error footer-email-note">
+              <button class="gw-btn gw-btn--secondary" type="submit">[Subscribe]</button>
+            </div>
+            <p class="gw-field__error" id="footer-email-error"></p>
+            <p class="gw-field__hint" id="footer-email-note">[How often you write.] Unsubscribe in one click. <a href="[/privacy]">Privacy policy</a></p>
+          </div>
+        </form>
       </div>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <!-- the columns: three to six. Each is a <nav> named like its heading, and the heading sits inside the <summary>. -->
+      <nav class="gw-footer__col" aria-label="[Product]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Product]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/pricing]">[Pricing]</a></li>
+          </ul>
+        </details>
       </nav>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <nav class="gw-footer__col" aria-label="[Use cases]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Use cases]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Solutions]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Solutions]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Resources]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Resources]</h2></summary>
+          <ul>
+            <li><a href="[/blog]">[Blog]</a></li>
+            <li><a href="[/docs]">[Docs]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog]<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Company]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Company]</h2></summary>
+          <ul>
+            <li><a href="[/about]">[About]</a></li>
+            <li><a href="[/careers]">[Careers]</a></li>
+            <li><a href="[/partners]">[Partners]</a></li>
+            <li><a href="[/contact]">[Contact]</a></li>
+          </ul>
+        </details>
       </nav>
     </div>
+    <!-- OPTIONAL product family: one <nav> per row, named like its label. Each item is the product's name (<b>) and one
+         line (<i>), a space between them. Another GemCommerce brand lists its siblings here (a GemPages site: GemBoss,
+         GemX, GemUpsells). -->
+    <nav class="gw-footer__family" aria-label="[More from Brand]">
+      <details class="gw-footer__fold">
+        <summary><h2 class="gw-footer__heading">[More from Brand]</h2></summary>
+        <ul>
+          <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+        </ul>
+      </details>
+    </nav>
     <div class="gw-footer__bottom">
       <span>© [Year] [Company]. All rights reserved.</span>
       <ul aria-label="Legal">
         <li><a href="[/privacy]">Privacy</a></li>
         <li><a href="[/terms]">Terms</a></li>
       </ul>
+      <!-- OPTIONAL theme toggle: the header's toggle, here instead of (or as well as) in the header -->
+      <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>
       <ul aria-label="Social">
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
+        <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
       </ul>
     </div>
+    <!-- OPTIONAL wordmark: decoration (aria-hidden="true", the name is already in the brand block). The mark is an
+         inline SVG drawn in currentColor, so it takes the faint colour; an <img> cannot, so leave the mark out and keep
+         the name. Not shown on phones. -->
+    <div class="gw-footer__wordmark" aria-hidden="true">
+      <svg viewBox="[0 0 width height]">[the brand's mark, every fill and stroke "currentColor"]</svg>
+      <span>[Brand]</span>
+    </div>
   </div>
 </footer>

package/templates/page.html

@@ -95,6 +95,7 @@
     </section>
   </main>
 
+  <!-- the short footer; the full one (Ask AI, family rows, theme toggle, wordmark) is templates/footer.html -->
   <footer class="gw-footer">
     <div class="gw-wrap">
       <div class="gw-footer__grid">
@@ -103,19 +104,23 @@
           <p>[One sentence on what the brand does for the reader.]</p>
         </div>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
       </div>
       <div class="gw-footer__bottom">

package/templates/sections/form.html

@@ -0,0 +1,42 @@
+<!--
+  Form: a short form beside the reason to send it (a contact form, "get the guide", a demo request). Ask as little as
+  you can: one field beats a form, and a form keeps two or three fields. A question with a good guess is a choice the
+  reader confirms (a radio group with the guess checked), not a box to fill.
+  - Every field: its <label for> above the control, the error right under it, then the hint; aria-describedby names
+    the error first, then the hint. Mark the optional fields "(optional)" in the label; the placeholder is never the label.
+  - Validation is the page's: on send, set aria-invalid="true" on each wrong field and write in its .gw-field__error
+    what to do ("Enter your work email, like name@example.com"), then move the focus to the first one. The kit adds the
+    icon and the colour; the words say it, never the colour alone. Keep the empty error element in the markup.
+  - While it is sent: aria-busy="true" on the button. When the answer comes: say what happened in words in the
+    role="status" line ("Sent. We'll reply to name@example.com.").
+  - Consent boxes start unchecked, say exactly what the reader gets, and are never required to get something else.
+  - One field and its button (a newsletter, "email me the guide"): the .gw-form-inline row, see templates/footer.html.
+  Limits: three fields, one .gw-btn; no field that the team does not read.
+-->
+<section class="gw-section" aria-labelledby="[form-h]">
+  <div class="gw-wrap gw-split">
+    <div>
+      <p class="gw-label">[Contact]</p>
+      <h2 id="[form-h]"><span class="gw-dim">[The reader's question.]</span> [What sending this gets them.]</h2>
+      <p class="gw-lead">[One line: who answers and how.]</p>
+    </div>
+    <form class="gw-card gw-form" action="[/endpoint]" method="post" novalidate>
+      <div class="gw-field">
+        <label class="gw-field__label" for="[form-email]">[Work email]</label>
+        <input class="gw-input" id="[form-email]" name="email" type="email" autocomplete="email" required aria-describedby="[form-email]-error">
+        <p class="gw-field__error" id="[form-email]-error"></p>
+      </div>
+      <div class="gw-field">
+        <label class="gw-field__label" for="[form-message]">[What are you building?]</label>
+        <textarea class="gw-textarea" id="[form-message]" name="message" rows="3" required aria-describedby="[form-message]-error [form-message]-hint"></textarea>
+        <p class="gw-field__error" id="[form-message]-error"></p>
+        <p class="gw-field__hint" id="[form-message]-hint">[A sentence or two is enough.]</p>
+      </div>
+      <label class="gw-check"><input type="checkbox" name="[news]" value="yes"><span>[Also send me product news, once a month]</span></label>
+      <div class="gw-actions">
+        <button class="gw-btn" type="submit">[Send the request]</button>
+        <p class="gw-note" role="status"></p>
+      </div>
+    </form>
+  </div>
+</section>

package/templates/sections/testimonials.html

@@ -0,0 +1,58 @@
+<!--
+  Testimonials: a rating badge and a wall of short reviews. Every one comes from a page anyone can open, and links to
+  it: the badge to the store's review page, each card to its review. Copy only what that page shows: the score and
+  the count on the day you copy them (update them when they change), the reviewer's words exactly (cut a long one
+  with an ellipsis, never reword it), their name and store as they wrote them. No review you wrote, no score you
+  averaged yourself, no source you cannot link: leave the card out. `check` warns about a badge or a card without
+  its link (rating-source).
+  - Stars: style="--gw-stars: N" and aria-label="N out of 5", the same number (0 to 5, one decimal). A number you also
+    show beside them is aria-hidden="true", so it is not read twice.
+  - The badge's icon: the generic bag below, or the store's own mark only where its brand rules allow it.
+  - Avatars are optional: a photo the reviewer made public with the review, alt="" (the name is beside it).
+  Limits: three or six cards; one to three sentences each; one badge.
+-->
+<section class="gw-section gw-section--soft" aria-labelledby="[reviews-h]">
+  <div class="gw-wrap">
+    <div class="gw-section__head">
+      <p class="gw-label">[Reviews]</p>
+      <h2 id="[reviews-h]"><span class="gw-dim">[What merchants say.]</span> [In their own words.]</h2>
+      <a class="gw-rating-badge" href="[https://apps.shopify.com/your-app/reviews]">
+        <span class="gw-rating-badge__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 8h14l-1 12H6z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg></span>
+        <span class="gw-rating-badge__body">
+          <span class="gw-rating-badge__score"><span aria-hidden="true">[4.9]</span><span class="gw-stars" role="img" aria-label="[4.9] out of 5" style="--gw-stars: 4.9"></span></span>
+          <span class="gw-rating-badge__count">[1,234] reviews on the [Shopify App Store]</span>
+        </span>
+      </a>
+    </div>
+    <ul class="gw-testimonials" role="list">
+      <li>
+        <figure class="gw-card gw-testimonial">
+          <span class="gw-stars" role="img" aria-label="[5] out of 5" style="--gw-stars: 5"></span>
+          <blockquote class="gw-testimonial__quote"><p>[The reviewer's exact words.]</p></blockquote>
+          <figcaption class="gw-testimonial__by">
+            <img class="gw-testimonial__avatar" src="[/img/reviewer.webp]" alt="" width="40" height="40" loading="lazy">
+            <span><b>[Name]</b>[Store] · <a href="[https://link to the review]">[Shopify App Store]</a></span>
+          </figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure class="gw-card gw-testimonial">
+          <span class="gw-stars" role="img" aria-label="[5] out of 5" style="--gw-stars: 5"></span>
+          <blockquote class="gw-testimonial__quote"><p>[The reviewer's exact words.]</p></blockquote>
+          <figcaption class="gw-testimonial__by">
+            <span><b>[Name]</b>[Store] · <a href="[https://link to the review]">[Shopify App Store]</a></span>
+          </figcaption>
+        </figure>
+      </li>
+      <li>
+        <figure class="gw-card gw-testimonial">
+          <span class="gw-stars" role="img" aria-label="[5] out of 5" style="--gw-stars: 5"></span>
+          <blockquote class="gw-testimonial__quote"><p>[The reviewer's exact words.]</p></blockquote>
+          <figcaption class="gw-testimonial__by">
+            <span><b>[Name]</b>[Store] · <a href="[https://link to the review]">[Shopify App Store]</a></span>
+          </figcaption>
+        </figure>
+      </li>
+    </ul>
+  </div>
+</section>