@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.6

package/blocks/trust-strip/trust-logos/README.md

@@ -0,0 +1,32 @@
+# trust-logos
+
+Grayscale logo row under hero.
+
+- **Category:** trust-strip
+- **Media:** partner marks
+- **Registers:** trade, b2b, professional, food
+- **Variants:** muted
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short label above the row (e.g. "Trusted by") |
+| `logos` | 4–7 `<img>` marks, ~160×48, grayscale applied automatically |
+
+## Example
+
+```html
+<trust-logos>
+  <p slot="eyebrow" class="eyebrow">Preferred contractor for</p>
+  <img src="/media/harvest/logo-1.svg" alt="Maine Housing" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-2.svg" alt="Portland Public Schools" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-3.svg" alt="Bayside Property Group" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-4.svg" alt="Casco Bay Realty" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-5.svg" alt="Hancock Lumber" width="160" height="48" slot="logos">
+</trust-logos>
+```
+
+Variants: `<trust-logos variant="muted">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/trust-strip/trust-logos/styles.css

@@ -0,0 +1,5 @@
+.c-trust-logos{border-block:1px solid var(--color-border)}
+.c-trust-logos__inner{display:grid;gap:var(--space-5);justify-items:center;text-align:center}
+.c-trust-logos__inner .eyebrow{font-size:.75rem}
+.c-trust-logos .logo-row img{max-height:2rem}
+.c-trust-logos--muted{background:var(--color-surface-2);border-block-color:transparent}

package/blocks/trust-strip/trust-logos/template.html

@@ -0,0 +1 @@
+<section class="c-trust-logos section--tight"><div class="wrap c-trust-logos__inner"><slot name="eyebrow"></slot><div class="logo-row"><slot name="logos"></slot></div></div></section>

package/blocks/trust-strip/trust-quote/README.md

@@ -0,0 +1,29 @@
+# trust-quote
+
+Single spotlight quote as trust band.
+
+- **Category:** trust-strip
+- **Media:** optional portrait
+- **Registers:** all
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `(default)` | `<p>` quote text (1–2 sentences) followed by `<cite>` name · context |
+| `avatar` | Optional `<img class="avatar avatar--lg">` |
+
+## Example
+
+```html
+<trust-quote>
+  <img src="/media/harvest/review-1.jpg" alt="" width="128" height="128" slot="avatar" class="avatar avatar--lg">
+  <p>They showed up when they said they would, finished a day early, and the yard was cleaner than when they started. I've already sent two neighbors their way.</p>
+  <cite>Jordan P. · Deering Center, homeowner since 2015</cite>
+</trust-quote>
+```
+
+Variants: `<trust-quote variant="dark">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/trust-strip/trust-quote/styles.css

@@ -0,0 +1,5 @@
+.c-trust-quote__inner{max-width:46rem;margin-inline:auto;text-align:center;display:grid;gap:var(--space-5);justify-items:center}
+.c-trust-quote .quote p{margin:0}
+.c-trust-quote .quote p::before{content:"“"}
+.c-trust-quote .quote p::after{content:"”"}
+.c-trust-quote--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}

package/blocks/trust-strip/trust-quote/template.html

@@ -0,0 +1 @@
+<section class="c-trust-quote section section--muted"><div class="wrap c-trust-quote__inner"><slot name="avatar"></slot><blockquote class="quote quote--lg"><slot></slot></blockquote></div></section>

package/blocks/trust-strip/trust-reviews/README.md

@@ -0,0 +1,35 @@
+# trust-reviews
+
+Avatar cluster + rating line + review-platform marks.
+
+- **Category:** trust-strip
+- **Media:** 3–5 tiny portraits, 2–4 platform marks
+- **Registers:** trade, beauty, food, professional
+- **Variants:** center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `avatars` | 3–5 `<img class="avatar">` |
+| `rating` | `<p>` stars + `<strong>4.9</strong>` + count |
+| `platforms` | Optional 2–4 `<img>` platform marks (~120×32) |
+
+## Example
+
+```html
+<trust-reviews>
+  <img slot="avatars" src="/media/harvest/avatar-1.jpg" alt="" width="96" height="96" class="avatar">
+  <img slot="avatars" src="/media/harvest/avatar-2.jpg" alt="" width="96" height="96" class="avatar">
+  <img slot="avatars" src="/media/harvest/avatar-3.jpg" alt="" width="96" height="96" class="avatar">
+  <img slot="avatars" src="/media/harvest/avatar-4.jpg" alt="" width="96" height="96" class="avatar">
+  <p slot="rating"><span class="rating" aria-label="5 out of 5 stars"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg></span> <strong>4.9</strong> from 1,800+ clients</p>
+  <img src="/media/harvest/logo-google.svg" alt="Google" width="120" height="32" slot="platforms">
+  <img src="/media/harvest/logo-yelp.svg" alt="Yelp" width="120" height="32" slot="platforms">
+  <img src="/media/harvest/logo-avvo.svg" alt="Avvo" width="120" height="32" slot="platforms">
+</trust-reviews>
+```
+
+Variants: `<trust-reviews variant="center">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/trust-strip/trust-reviews/styles.css

@@ -0,0 +1,9 @@
+.c-trust-reviews{border-block:1px solid var(--color-border)}
+.c-trust-reviews__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6)}
+.c-trust-reviews__people{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
+.c-trust-reviews__rating p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:var(--step-0);color:var(--color-muted)}
+.c-trust-reviews__rating strong{font-weight:600;color:var(--color-text)}
+.c-trust-reviews__platforms{justify-content:flex-start;gap:var(--space-5)}
+.c-trust-reviews__platforms:empty{display:none}
+.c-trust-reviews__platforms img{max-height:1.5rem}
+.c-trust-reviews--center .c-trust-reviews__row,.c-trust-reviews--center .c-trust-reviews__people,.c-trust-reviews--center .c-trust-reviews__platforms{justify-content:center}

package/blocks/trust-strip/trust-reviews/template.html

@@ -0,0 +1 @@
+<section class="c-trust-reviews section--tight"><div class="wrap c-trust-reviews__row"><div class="c-trust-reviews__people"><div class="avatar-group"><slot name="avatars"></slot></div><div class="c-trust-reviews__rating"><slot name="rating"></slot></div></div><div class="logo-row c-trust-reviews__platforms"><slot name="platforms"></slot></div></div></section>

package/blocks/work/case-alternating/README.md

@@ -0,0 +1,34 @@
+# case-alternating
+
+Numbered case studies alternating photo and copy.
+
+- **Category:** work
+- **Media:** one photo per case
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `cases` | 2–4 `<article><div class="frame ratio-4x3"><img></div><div class="stack"><p class="eyebrow">…</p><h3>…</h3><p>…</p><a class="btn-outline">…</a></div></article>` |
+
+## Example
+
+```html
+<case-alternating>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Featured case studies</p>
+  <h2 slot="heading">Real cases. Real results for our clients.</h2>
+  <p slot="lede" class="lede">A look at recent work across our service areas. Some names are kept private to respect client confidentiality.</p>
+  <a slot="actions" class="btn-arrow" href="/case-studies">All case studies <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <article slot="cases"><div class="frame ratio-4x3"><img src="/media/harvest/case-1.jpg" alt="Wind turbines beside an office park" width="1200" height="900" loading="lazy"></div><div class="stack"><p class="eyebrow">Case 01 · 2026 · Energy</p><h3>Helped a large energy company defeat a price-fixing lawsuit.</h3><p>The court refused to group the customers into a class, and threw the case out for good.</p><a class="btn-outline" href="/case-studies/energy">Read the full case study <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div></article>
+  <article slot="cases"><div class="frame ratio-4x3"><img src="/media/harvest/case-2.jpg" alt="Two lawyers reviewing documents on marble steps" width="1200" height="900" loading="lazy"></div><div class="stack"><p class="eyebrow">Case 02 · 2025 · Technology</p><h3>Defended a US tech company against a patent troll.</h3><p>No products were blocked, and we settled on terms that worked for our client.</p><a class="btn-outline" href="/case-studies/technology">Read the full case study <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div></article>
+  <article slot="cases"><div class="frame ratio-4x3"><img src="/media/harvest/case-3.jpg" alt="Newsroom desks at night" width="1200" height="900" loading="lazy"></div><div class="stack"><p class="eyebrow">Case 03 · 2025 · Media</p><h3>Won a copyright trial for an independent publisher.</h3><p>A jury verdict in nine days, and a permanent injunction that protected the catalogue.</p><a class="btn-outline" href="/case-studies/media">Read the full case study <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div></article>
+</case-alternating>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/work/case-alternating/block.meta.json

@@ -0,0 +1,86 @@
+{
+  "schemaVersion": 1,
+  "id": "work/case-alternating",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "ce5e6e7e56b617a2400c71e9a61c9e3cb83560165f174edd2303c97cb616056e",
+  "fit": {
+    "visitorJobs": [
+      "Inspect project evidence and outcomes"
+    ],
+    "pageRoles": [
+      "work index"
+    ],
+    "useWhen": [
+      "Inspect project evidence and outcomes"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "cases"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "lede",
+      "actions"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 1,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "alternating narratives",
+    "alignment": "alternating",
+    "density": "medium",
+    "mediaProminence": "high",
+    "geometry": [
+      "alternating",
+      "image-led"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/work--case-alternating.json"
+  }
+}

package/blocks/work/case-alternating/styles.css

@@ -0,0 +1,7 @@
+.c-case-alternating__list{display:grid;gap:var(--space-7)}
+.c-case-alternating__list > article{display:grid;gap:var(--space-5);align-items:center;padding-top:var(--space-7);border-top:1px solid var(--color-border)}
+.c-case-alternating__list .stack{gap:var(--space-4);justify-items:start}
+.c-case-alternating__list .stack h3{font-size:var(--step-3);max-width:20ch}
+.c-case-alternating__list .stack > p:not(.eyebrow){color:var(--color-muted);max-width:36rem}
+.c-case-alternating__list .stack .eyebrow{display:flex;gap:var(--space-3)}
+@media(min-width:900px){.c-case-alternating__list{gap:var(--space-8)}.c-case-alternating__list > article{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}.c-case-alternating__list > article:nth-child(even) > .frame{order:2}}

package/blocks/work/case-alternating/template.html

@@ -0,0 +1 @@
+<section class="c-case-alternating section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-case-alternating__list"><slot name="cases"></slot></div></div></section>

package/blocks/work/case-carousel/README.md

@@ -0,0 +1,26 @@
+# case-carousel
+
+One case per slide: copy left, image right, arrow nav.
+
+- **Category:** work
+- **Media:** one photo per case
+- **Registers:** b2b, professional, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `slides` | 3–5 `<article><div class="stack"><p class="eyebrow">…</p><h2>…</h2><p>…</p><a class="btn-arrow">…</a></div><div class="frame ratio-4x3"><img></div></article>` |
+
+## Example
+
+```html
+<case-carousel>
+  <article slot="slides"><div class="stack"><p class="eyebrow eyebrow--accent">Nextdock · Identity</p><h2>From idea to launch: how we gave Nextdock a bold identity.</h2><p>We worked with Nextdock from their earliest sketches, creating a logo that reflects speed and innovation. The new identity helped them secure their first round of investment.</p><a class="btn-arrow" href="/work/nextdock">See the project <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div><div class="frame ratio-4x3"><img src="/media/harvest/work-1.jpg" alt="Nextdock wordmark on a dark billboard" width="1200" height="900" loading="lazy"></div></article>
+  <article slot="slides"><div class="stack"><p class="eyebrow eyebrow--accent">Neobase · Rebrand</p><h2>Rebranding success: a legacy brand for modern markets.</h2><p>A complete visual overhaul that kept the brand's heritage while appealing to a new generation of buyers.</p><a class="btn-arrow" href="/work/neobase">See the project <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div><div class="frame ratio-4x3"><img src="/media/harvest/work-2.jpg" alt="Neobase mark applied to a car wrap" width="1200" height="900" loading="lazy"></div></article>
+  <article slot="slides"><div class="stack"><p class="eyebrow eyebrow--accent">Charter · Identity</p><h2>From concept to market: a timeless brand identity.</h2><p>Working with a mission-driven company from their earliest stages, we created a mark that reflects their values of sustainability and craft.</p><a class="btn-arrow" href="/work/charter">See the project <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div><div class="frame ratio-4x3"><img src="/media/harvest/work-3.jpg" alt="Charter logo embossed on packaging" width="1200" height="900" loading="lazy"></div></article>
+</case-carousel>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/work/case-carousel/styles.css

@@ -0,0 +1,7 @@
+.c-case-carousel__carousel .carousel__track{gap:var(--space-6);scroll-padding-inline:0}
+.c-case-carousel__carousel .carousel__track > *{flex:0 0 100%;display:grid;gap:var(--space-5);align-items:center}
+.c-case-carousel__carousel .stack{gap:var(--space-4);justify-items:start}
+.c-case-carousel__carousel .stack h2{max-width:18ch}
+.c-case-carousel__carousel .stack > p:not(.eyebrow){color:var(--color-muted);max-width:34rem}
+.c-case-carousel__carousel .frame{box-shadow:none}
+@media(min-width:900px){.c-case-carousel__carousel .carousel__track > *{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-8)}}

package/blocks/work/case-carousel/template.html

@@ -0,0 +1 @@
+<section class="c-case-carousel section"><div class="wrap carousel c-case-carousel__carousel" data-island="carousel" tabindex="0" aria-roledescription="carousel"><div class="carousel__track"><slot name="slides"></slot></div><div class="carousel__nav"><button type="button" data-carousel-prev aria-label="Previous"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" data-carousel-next aria-label="Next"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div></div></section>

package/blocks/work/case-header/README.md

@@ -0,0 +1,38 @@
+# case-header
+
+Case study / project header: breadcrumb, title, meta, hero image, side CTA card.
+
+- **Category:** work
+- **Media:** one hero photo
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `breadcrumb` | Optional `<a>` trail ending in `<span aria-current="page">` |
+| `(default)` | `<h1>` |
+| `meta` | 2–4 `<span>` facts (date, category, client) |
+| `media` | `<img>` 16:9 (LCP) |
+| `aside` | Optional `<h3>` + `<p>` + `.btn` for the side card |
+
+## Example
+
+```html
+<case-header>
+  <a slot="breadcrumb" href="/">Home</a>
+  <a slot="breadcrumb" href="/case-studies">Case studies</a>
+  <span slot="breadcrumb" aria-current="page">Energy antitrust</span>
+  <h1>An energy company beats a price-fixing lawsuit.</h1>
+  <span slot="meta">Nov 18, 2025</span>
+  <span slot="meta">Class action defense</span>
+  <span slot="meta">Lead partner: Dana Kowalski</span>
+  <img src="/media/harvest/case-1.jpg" alt="Two lawyers reviewing a tablet beside wind turbines" width="1600" height="900" slot="media" fetchpriority="high">
+  <h3 slot="aside">Need counsel on a matter like this?</h3>
+  <p slot="aside">A senior partner takes the first call. Conflicts cleared within the hour, a strategy memo on your desk inside seventy-two.</p>
+  <a slot="aside" class="btn" href="/contact">Get in touch <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+</case-header>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/work/case-header/styles.css

@@ -0,0 +1,18 @@
+.c-case-header{padding-block:calc(var(--section-y) - var(--space-4)) var(--section-y)}
+.c-case-header__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--step-0);color:var(--color-muted)}
+.c-case-header__crumbs:empty{display:none}
+.c-case-header__crumbs > * + *::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
+.c-case-header__crumbs a{color:inherit;text-decoration:none}
+.c-case-header__crumbs [aria-current]{color:var(--color-text)}
+.c-case-header__title{display:grid;gap:var(--space-4);max-width:52rem;margin-bottom:var(--space-7)}
+.c-case-header h1{font-size:var(--step-4);max-width:24ch}
+.c-case-header__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:var(--step-0);color:var(--color-muted)}
+.c-case-header__meta > * + *::before{content:"·";margin-right:var(--space-4);color:var(--color-border)}
+.c-case-header__grid{display:grid;gap:var(--space-4)}
+.c-case-header__media{box-shadow:none}
+.c-case-header__aside{display:grid;gap:var(--space-3);align-content:start;padding:var(--space-6)}
+.c-case-header__aside:empty{display:none}
+.c-case-header__aside h3{font-size:var(--step-2)}
+.c-case-header__aside p{margin:0;color:var(--color-muted)}
+.c-case-header__aside .btn,.c-case-header__aside .btn-outline{justify-self:start}
+@media(min-width:900px){.c-case-header__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-5)}.c-case-header__grid:has(.c-case-header__aside:empty){grid-template-columns:1fr}}

package/blocks/work/case-header/template.html

@@ -0,0 +1 @@
+<section class="c-case-header section"><div class="wrap"><nav class="c-case-header__crumbs" aria-label="Breadcrumb"><slot name="breadcrumb"></slot></nav><div class="c-case-header__title"><slot></slot><div class="c-case-header__meta"><slot name="meta"></slot></div></div><div class="c-case-header__grid"><div class="frame ratio-16x9 c-case-header__media"><slot name="media"></slot></div><aside class="card card--flat c-case-header__aside"><slot name="aside"></slot></aside></div></div></section>

package/blocks/work/project-evidence/README.md

@@ -0,0 +1,35 @@
+# project-evidence
+
+A project story led by one real image and a compact fact ledger. Captions explain what the image actually shows; facts remain independently verifiable. This example is for the fictional Tide & Slate roofing company and uses a synthetic teaching image, never customer proof.
+
+- **Category:** work
+- **Media:** one project photo required
+- **Registers:** trade, professional, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional project context |
+| `heading` | `<h2>` with the project question or result |
+| `summary` | Brief project narrative without unsupported claims |
+| `media` | One image with truthful alt text and explicit dimensions |
+| `caption` | Visible description and provenance context for the image |
+| `facts` | Two to four `<div>` items containing `<dt>` and `<dd>` factual pairs |
+
+## Example
+
+```html
+<project-evidence>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Tide &amp; Slate · fictional teaching example</p>
+  <h2 slot="heading">A roof shaped by the coast.</h2>
+  <p slot="summary" class="lede">The example shows how a project story can connect material choice, site conditions, and a clear next step without inventing a testimonial.</p>
+  <img slot="media" src="/media/teaching/slate-roof-finished.webp" alt="Synthetic teaching image of a slate roof on a coastal house" width="1536" height="1024" loading="lazy">
+  <span slot="caption">Synthetic teaching image. Replace with a verified project photograph and accurate caption.</span>
+  <div slot="facts"><dt>Material</dt><dd>Slate tiles</dd></div>
+  <div slot="facts"><dt>Setting</dt><dd>Coastal residence</dd></div>
+</project-evidence>
+```
+
+The media is essential to this composition. Do not use it when no genuine project image exists. On a real site, source the facts and caption from the project record.

package/blocks/work/project-evidence/block.meta.json

@@ -0,0 +1,87 @@
+{
+  "schemaVersion": 1,
+  "id": "work/project-evidence",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "1a4977448d8eff5dfdb483b44ae62737cc4a74d387db07f430e227d8169f9593",
+  "fit": {
+    "visitorJobs": [
+      "Inspect a real project and its verified facts"
+    ],
+    "pageRoles": [
+      "project story"
+    ],
+    "useWhen": [
+      "Inspect a real project and its verified facts"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "summary",
+      "media",
+      "caption",
+      "facts"
+    ],
+    "optionalSlots": [
+      "eyebrow"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 1,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "image with fact ledger",
+    "alignment": "asymmetric",
+    "density": "medium",
+    "mediaProminence": "high",
+    "geometry": [
+      "image-led",
+      "facts"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/work--project-evidence.json"
+  }
+}

package/blocks/work/project-evidence/styles.css

@@ -0,0 +1,12 @@
+.c-project-evidence__intro{display:grid;gap:var(--space-4);margin-bottom:var(--space-6)}
+.c-project-evidence__intro h2{max-width:18ch}
+.c-project-evidence__intro > p{max-width:56ch;color:var(--color-muted)}
+.c-project-evidence__body{display:grid;gap:var(--space-5)}
+.c-project-evidence__figure{margin:0;min-width:0}
+.c-project-evidence__figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
+.c-project-evidence__figure figcaption{font-size:var(--step-0);color:var(--color-muted);margin-top:var(--space-2);max-width:65ch}
+.c-project-evidence__facts{align-self:start;display:grid;border-top:2px solid var(--color-accent);margin:0}
+.c-project-evidence__facts > div{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);display:grid;gap:var(--space-2)}
+.c-project-evidence__facts dt{font-size:var(--step-0);color:var(--color-muted)}
+.c-project-evidence__facts dd{margin:0;font-weight:600}
+@media(min-width:900px){.c-project-evidence__intro{grid-template-columns:minmax(0,1fr) minmax(18rem,.75fr);align-items:end}.c-project-evidence__body{grid-template-columns:minmax(0,1.5fr) minmax(16rem,.55fr);gap:var(--space-7)}}

package/blocks/work/project-evidence/template.html

@@ -0,0 +1 @@
+<section class="c-project-evidence section"><div class="wrap"><div class="c-project-evidence__intro"><div><slot name="eyebrow"></slot><slot name="heading"></slot></div><slot name="summary"></slot></div><div class="c-project-evidence__body"><figure class="c-project-evidence__figure"><slot name="media"></slot><figcaption><slot name="caption"></slot></figcaption></figure><dl class="c-project-evidence__facts"><slot name="facts"></slot></dl></div></div></section>

package/blocks/work/project-grid/README.md

@@ -0,0 +1,38 @@
+# project-grid
+
+Portfolio grid: image, title, category.
+
+- **Category:** work
+- **Media:** one photo per project
+- **Registers:** b2b, beauty, trade, professional
+- **Variants:** two
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `projects` | 3–9 `<a href><div class="frame ratio-4x3"><img></div><h3>Title</h3><p>Category · Year</p></a>` |
+
+## Example
+
+```html
+<project-grid>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Featured work</p>
+  <h2 slot="heading">Marks that stuck.</h2>
+  <a slot="actions" class="btn-arrow" href="/work">All projects <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <a slot="projects" href="/work/neobase"><div class="frame ratio-4x3"><img src="/media/harvest/work-2.jpg" alt="Neobase identity" width="1200" height="900" loading="lazy"></div><h3>Neobase</h3><p>Rebrand · 2026</p></a>
+  <a slot="projects" href="/work/nextdock"><div class="frame ratio-4x3"><img src="/media/harvest/work-1.jpg" alt="Nextdock identity" width="1200" height="900" loading="lazy"></div><h3>Nextdock</h3><p>Logo &amp; identity · 2026</p></a>
+  <a slot="projects" href="/work/scalar"><div class="frame ratio-4x3"><img src="/media/harvest/work-3.jpg" alt="Scalar identity" width="1200" height="900" loading="lazy"></div><h3>Scalar</h3><p>Icon system · 2025</p></a>
+  <a slot="projects" href="/work/charter"><div class="frame ratio-4x3"><img src="/media/harvest/work-4.jpg" alt="Charter identity" width="1200" height="900" loading="lazy"></div><h3>Charter</h3><p>Brand identity · 2025</p></a>
+  <a slot="projects" href="/work/echo"><div class="frame ratio-4x3"><img src="/media/harvest/work-5.jpg" alt="Echo identity" width="1200" height="900" loading="lazy"></div><h3>Echo</h3><p>Rebrand · 2025</p></a>
+  <a slot="projects" href="/work/harbor"><div class="frame ratio-4x3"><img src="/media/harvest/work-6.jpg" alt="Harbor identity" width="1200" height="900" loading="lazy"></div><h3>Harbor Roofing</h3><p>Logo &amp; fleet · 2024</p></a>
+</project-grid>
+```
+
+Variants: `<project-grid variant="two">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/work/project-grid/styles.css

@@ -0,0 +1,9 @@
+.c-project-grid__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-4)}
+.c-project-grid__grid > a{display:grid;gap:var(--space-3);align-content:start;color:inherit;text-decoration:none}
+.c-project-grid__grid > a .frame{box-shadow:none}
+.c-project-grid__grid > a img{transition:transform .5s ease}
+.c-project-grid__grid > a:hover img{transform:scale(1.03)}
+.c-project-grid__grid h3{font-size:var(--step-1)}
+.c-project-grid__grid p{margin:calc(-1 * var(--space-2)) 0 0;font-size:var(--step-0);color:var(--color-muted)}
+@media(min-width:720px){.c-project-grid__grid{gap:var(--space-7) var(--space-5)}}
+@media(min-width:1080px){.c-project-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.c-project-grid--two .c-project-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-6)}}

package/blocks/work/project-grid/template.html

@@ -0,0 +1 @@
+<section class="c-project-grid section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-project-grid__grid"><slot name="projects"></slot></div></div></section>

package/cloudflare/wrangler.forms-test.jsonc

@@ -0,0 +1,19 @@
+{
+  "name": "my-vitris-forms-test",
+  "main": "../bin/cloudflare/forms-test.js",
+  "compatibility_date": "2026-10-11",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "my-vitris-test",
+      "database_id": "REPLACE_WITH_YOUR_TEST_D1_DATABASE_ID",
+      "migrations_dir": "../migrations"
+    }
+  ],
+  "vars": {
+    "FORMS_SANDBOX": "1"
+  }
+}

package/cloudflare/wrangler.jsonc

@@ -0,0 +1,14 @@
+{
+  "$schema": "../node_modules/wrangler/config-schema.json",
+  "name": "my-vitris-backend",
+  "main": "../bin/cloudflare/backend.js",
+  "compatibility_date": "2026-10-11",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": true,
+  "d1_databases": [{"binding":"DB","database_name":"my-vitris","database_id":"REPLACE_WITH_YOUR_D1_DATABASE_ID","migrations_dir":"../migrations"}],
+  "kv_namespaces": [{"binding":"KV","id":"REPLACE_WITH_YOUR_KV_NAMESPACE_ID"}],
+  "r2_buckets": [{"binding":"R2","bucket_name":"my-vitris-assets"}],
+  "analytics_engine_datasets": [{"binding":"AE","dataset":"my_vitris_events"}],
+  "workflows": [{"name":"my-site-update","binding":"SITE_UPDATE","class_name":"SiteUpdateWorkflow"}],
+  "triggers": {"crons":["0 6 * * *","*/5 * * * *"]}
+}

package/cloudflare/wrangler.templates.jsonc

@@ -0,0 +1,6 @@
+{
+  "name":"my-vitris-templates",
+  "main":"../bin/cloudflare/templates.js",
+  "compatibility_date":"2026-10-11",
+  "r2_buckets":[{"binding":"R2","bucket_name":"my-vitris-assets"}]
+}