Make the use-case chooser a horizontal icon-tile grid

README.md

@@ -40,8 +40,11 @@ To add a page to discovery: just create it. To exclude one, set
 
 ## Adding a vertical
 
-1. Create `src/verticals/<name>/index.njk` with `title`, `summary`,
-   `description`, `order`, and `permalink: /<name>/` front matter.
+1. Create `src/verticals/<name>/index.njk` with `title`, `shortName`,
+   `summary`, `description`, `order`, `chooserIcon`, and
+   `permalink: /<name>/` front matter. `shortName` is the home-page tile
+   label; `chooserIcon` names an icon in `src/_data/flowIcons.js` for the
+   tile (add a new icon there if needed).
 2. Add `<name>.json` in that folder setting `layout` and `tags` (copy
    `education/education.json`).
 3. Clone the Layer 2–4 pages, swapping the anchor scenario.

src/_data/flowIcons.js

@@ -8,19 +8,21 @@
 // inside Nunjucks {% set %} blocks.
 
 export default {
-  educationIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <rect x="14" y="28" width="52" height="6" rx="1.5" fill="#1b1a17"/>
-    <polygon points="40,16 14,34 66,34" fill="#1b1a17"/>
-    <line x1="66" y1="34" x2="70" y2="46" stroke="#1b1a17" stroke-width="2"/>
-    <circle cx="70" cy="49" r="4" fill="#c0341d"/>
-    <rect x="18" y="44" width="44" height="26" rx="2" fill="#f4f0e6" stroke="#9a7b2e" stroke-width="1.5"/>
-    <rect x="22" y="48" width="10" height="10" rx="1" fill="#c0341d" opacity=".15"/>
-    <text x="27" y="57" text-anchor="middle" font-size="5" fill="#c0341d" font-family="Georgia,serif" font-style="italic">SEAL</text>
-    <line x1="36" y1="50" x2="58" y2="50" stroke="#c9c0ab" stroke-width="1.5"/>
-    <line x1="36" y1="55" x2="56" y2="55" stroke="#c9c0ab" stroke-width="1"/>
-    <line x1="36" y1="60" x2="58" y2="60" stroke="#c9c0ab" stroke-width="1"/>
-    <circle cx="55" cy="65" r="4" fill="none" stroke="#9a7b2e" stroke-width="1.5"/>
-    <text x="55" y="68" text-anchor="middle" font-size="6" fill="#9a7b2e" font-family="Georgia,serif">&#x2713;</text>
+  educationIssue: `<svg viewBox="10 23 60 39" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <!-- diploma certificate (landscape) -->
+    <rect x="14" y="24" width="52" height="32" rx="2" fill="#f4f0e6" stroke="#9a7b2e" stroke-width="1.5"/>
+    <rect x="17" y="27" width="46" height="26" rx="1" fill="none" stroke="#c9c0ab" stroke-width="1"/>
+    <!-- title -->
+    <line x1="22" y1="33" x2="46" y2="33" stroke="#1b1a17" stroke-width="2.5"/>
+    <!-- body text lines -->
+    <line x1="22" y1="40" x2="48" y2="40" stroke="#c9c0ab" stroke-width="1.25"/>
+    <line x1="22" y1="45" x2="48" y2="45" stroke="#c9c0ab" stroke-width="1.25"/>
+    <line x1="22" y1="50" x2="40" y2="50" stroke="#c9c0ab" stroke-width="1.25"/>
+    <!-- wax seal with ribbon -->
+    <path d="M56,49 l-3,8 l3,-2 l3,2 l-3,-8" fill="#c0341d"/>
+    <circle cx="56" cy="47" r="6" fill="#c0341d"/>
+    <circle cx="56" cy="47" r="6" fill="none" stroke="#9a2814" stroke-width="1"/>
+    <text x="56" y="50" text-anchor="middle" font-size="7" fill="#f4f0e6" font-family="Georgia,serif">&#x2605;</text>
   </svg>`,
 
   educationHold: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -42,7 +44,7 @@ export default {
     <text x="40" y="68" text-anchor="middle" font-size="7" fill="#2f6b4f" font-family="Georgia,serif" letter-spacing=".06em">VERIFIED</text>
   </svg>`,
 
-  supplyIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  supplyIssue: `<svg viewBox="11 31 62 39" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <rect x="14" y="44" width="52" height="24" rx="0" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
     <rect x="20" y="36" width="10" height="8" fill="#1b1a17"/>
     <rect x="34" y="32" width="10" height="12" fill="#1b1a17"/>
@@ -88,16 +90,18 @@ export default {
     <line x1="36" y1="39" x2="44" y2="39" stroke="#2f6b4f" stroke-width="1" stroke-dasharray="3,2"/>
   </svg>`,
 
-  studentIdIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <rect x="18" y="48" width="44" height="20" rx="0" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="26" y1="48" x2="26" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="36" y1="48" x2="36" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="44" y1="48" x2="44" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="54" y1="48" x2="54" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <polygon points="12,48 40,22 68,48" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
-    <text x="40" y="42" text-anchor="middle" font-size="9" fill="#1b1a17" font-family="Georgia,serif">&#x2605;</text>
-    <text x="40" y="62" text-anchor="middle" font-size="7" fill="#514c43" font-family="Georgia,serif" letter-spacing=".06em">UNI</text>
-    <rect x="10" y="68" width="60" height="3" rx="0" fill="#1b1a17" opacity=".15"/>
+  studentIdIssue: `<svg viewBox="10 20 60 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <!-- ID card -->
+    <rect x="14" y="22" width="52" height="36" rx="3" fill="#f4f0e6" stroke="#1b1a17" stroke-width="1.5"/>
+    <!-- portrait -->
+    <rect x="20" y="28" width="18" height="24" rx="1" fill="#ece6d6" stroke="#c9c0ab" stroke-width="1"/>
+    <circle cx="29" cy="37" r="5" fill="#c9c0ab"/>
+    <path d="M21,52 a8,8 0 0,1 16,0 z" fill="#c9c0ab"/>
+    <!-- text lines -->
+    <line x1="44" y1="30" x2="60" y2="30" stroke="#c0341d" stroke-width="2"/>
+    <line x1="44" y1="37" x2="58" y2="37" stroke="#c9c0ab" stroke-width="1.5"/>
+    <line x1="44" y1="43" x2="60" y2="43" stroke="#c9c0ab" stroke-width="1.5"/>
+    <line x1="44" y1="49" x2="56" y2="49" stroke="#c9c0ab" stroke-width="1.5"/>
   </svg>`,
 
   studentIdHold: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

src/assets/styles.css

@@ -250,7 +250,7 @@ p {
 /* ============================ HERO ============================ */
 .hero {
     position: relative;
-    padding: 1rem 0 1.5rem;
+    padding: 1rem 0 0.25rem;
 }
 .hero::before {
     /* "SPEC" seal stamp in the corner */
@@ -390,63 +390,72 @@ p {
 }
 
 /* ============================ VERTICAL GRID (home) ============================ */
+/* Horizontal icon + title tiles. auto-fit so added use cases wrap to new rows
+   with no markup or CSS change. Each tile = representative icon above a short
+   title; the "would this work for us" summary lives on the vertical's page. */
 .verticals h2 {
     border-top: 1px solid var(--hairline);
+    margin-top: 1.4rem;
     padding-top: 0.8rem;
 }
-.vertical-grid,
 .role-grid {
     list-style: none;
     padding: 0;
     display: grid;
     gap: 0;
 }
 .vertical-grid {
-    grid-template-columns: 1fr;
-    border-top: 1px solid var(--ink);
+    list-style: none;
+    padding: 0;
+    margin: 1.5rem 0 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 1.25rem;
 }
 .vertical-grid li a {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 1.2rem;
-    align-items: baseline;
-    padding: 1.4rem 0.3rem;
-    border-bottom: 1px solid var(--hairline);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.1rem;
+    height: 100%;
+    padding: 0.5rem 1rem 1.1rem;
+    background: var(--paper-2);
+    border: 1px solid var(--hairline);
+    border-radius: 12px;
+    box-shadow: 3px 3px 0 var(--paper-2);
     text-decoration: none;
     color: var(--ink);
     transition:
-        padding-left 0.2s ease,
-        background 0.2s ease;
-    counter-increment: vert;
+        background 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
 }
-.vertical-grid li a::before {
-    content: counter(vert, decimal-leading-zero);
-    font-family: var(--mono);
-    font-size: 0.85rem;
-    color: var(--seal);
-    padding-top: 0.5rem;
-    line-height: 1;
+.vertical-grid li a:hover {
+    background: var(--paper);
+    box-shadow: 4px 4px 0 var(--seal);
+    transform: translate(-1px, -1px);
 }
-.vertical-grid {
-    counter-reset: vert;
+.vertical-grid .vert-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 14.4rem;
+    height: 8rem;
 }
-.vertical-grid li a:hover {
-    background: var(--paper-2);
-    padding-left: 0.9rem;
+.vertical-grid .vert-icon svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 100%;
 }
-.vertical-grid .vert-body {
-    min-width: 0;
-} /* the single column-2 cell */
 .vertical-grid h3 {
-    font-size: 1.5rem;
+    font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 900;
+    line-height: 1.2;
     margin: 0;
 }
-.vertical-grid p {
-    color: var(--ink-soft);
-    margin: 0.35rem 0 0;
-    max-width: 42rem;
-}
 
 /* ============================ ROLE PICKER ============================ */
 .role-grid {

src/index.njk

@@ -16,13 +16,13 @@ title: false
   <h2>Pick your use case</h2>
   <p>Each guide answers "would this work for us?" — then shows you how to build it.</p>
   <ul class="vertical-grid">
-    {% for v in collections.verticals %}
+    {% for v in collections.verticals | sort(attribute="data.order") %}
     <li>
       <a href="{{ v.url }}">
-        <div class="vert-body">
-          <h3>{{ v.data.cardTitle or v.data.title }}</h3>
-          <p>{{ v.data.summary or v.data.description }}</p>
-        </div>
+        {% if v.data.chooserIcon and flowIcons[v.data.chooserIcon] %}
+        <span class="vert-icon" aria-hidden="true">{{ flowIcons[v.data.chooserIcon] | safe }}</span>
+        {% endif %}
+        <h3>{{ v.data.shortName or v.data.cardTitle or v.data.title }}</h3>
       </a>
     </li>
     {% endfor %}

src/verticals/education/index.njk

@@ -5,6 +5,7 @@ cardTitle: "Academic Credentials"
 summary: "Issue diplomas, transcripts, and enrollment proofs any wallet can hold and any institution can verify."
 description: "Issue and verify diplomas, transcripts, and enrollment proofs with W3C Verifiable Credentials over VCALM — no central identity provider."
 order: 1
+chooserIcon: educationIssue
 permalink: /education/
 ---
 {# Single-page vertical: SERP magnet, human journey, and technical model on one

src/verticals/student-id/index.njk

@@ -5,6 +5,7 @@ cardTitle: "Student IDs & campus credentials"
 summary: "Issue student IDs students control — verifiable across campus and beyond, with any wallet."
 description: "Issue digital student IDs with W3C Verifiable Credentials over VCALM — student-controlled, any wallet, no allow-lists, privacy by design. Prove enrollment without revealing identity."
 order: 3
+chooserIcon: studentIdIssue
 permalink: /student-id/
 ---
 {# Single-page student-ID vertical. Anchor: digital campus/student ID.

src/verticals/supply-chain/index.njk

@@ -1,10 +1,11 @@
 ---
 title: "Supply chain traceability & provenance with VCALM"
-shortName: "Supply chain & traceability"
+shortName: "Supply Chain"
 cardTitle: "Supply chain traceability"
 summary: "Issue tamper-evident traceability and provenance credentials buyers, retailers, and auditors can verify."
 description: "Build supply chain traceability and provenance with W3C Verifiable Credentials over VCALM — prove origin, fight counterfeits, meet DSCSA / FSMA / UFLPA, no central database. EU DPP-ready."
 order: 2
+chooserIcon: supplyIssue
 permalink: /supply-chain/
 ---
 {# Single-page supply-chain vertical. US-first: lead with "supply chain