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

package/blocks/hero/hero-page/README.md

@@ -0,0 +1,35 @@
+# hero-page
+
+Interior page header: eyebrow + h1 left, intro right, optional photo band.
+
+- **Category:** hero
+- **Media:** optional wide photo
+- **Registers:** all
+- **Variants:** center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `breadcrumb` | Optional `<a>` trail ending in `<span aria-current="page">` |
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `(default)` | `<h1>` (2–6 words) |
+| `intro` | `<p class="lede">` one or two sentences; optional `.btn-group` after it |
+| `media` | Optional `<div class="frame ratio-21x9">` with an `<img>` |
+
+## Example
+
+```html
+<hero-page>
+  <a slot="breadcrumb" href="/">Home</a>
+  <span slot="breadcrumb" aria-current="page">About</span>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">About the firm</p>
+  <h1>Leading with integrity and purpose.</h1>
+  <p slot="intro" class="lede">Years of experience and a steady commitment to honest, careful work — for clients who need legal help they can trust.</p>
+  <div slot="media" class="frame ratio-21x9"><img src="/media/harvest/office-wide.jpg" alt="The Verdict team in the main conference room" width="2100" height="900" fetchpriority="high"></div>
+</hero-page>
+```
+
+Variants: `<hero-page 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/hero/hero-page/styles.css

@@ -0,0 +1,19 @@
+.c-hero-page{padding-block:calc(var(--section-y) - var(--space-4)) var(--section-y)}
+.c-hero-page__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-hero-page__crumbs:empty{display:none}
+.c-hero-page__crumbs > * + *::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
+.c-hero-page__crumbs a{color:inherit;text-decoration:none}
+.c-hero-page__crumbs a:hover{color:var(--color-text)}
+.c-hero-page__crumbs [aria-current]{color:var(--color-text)}
+.c-hero-page__grid{display:grid;gap:var(--space-5)}
+.c-hero-page__title{display:grid;gap:var(--space-4)}
+.c-hero-page h1{max-width:16ch}
+.c-hero-page__intro{display:grid;gap:var(--space-5);align-self:end;justify-items:start}
+.c-hero-page__intro .lede{max-width:34rem}
+.c-hero-page__media{margin-top:var(--space-7)}
+.c-hero-page__media:empty{display:none}
+@media(min-width:900px){.c-hero-page__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end}.c-hero-page__intro{padding-bottom:.35rem}}
+.c-hero-page--center .c-hero-page__crumbs{justify-content:center}
+.c-hero-page--center .c-hero-page__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-5)}
+.c-hero-page--center h1{max-width:20ch}
+.c-hero-page--center .c-hero-page__intro{justify-items:center;padding:0}

package/blocks/hero/hero-page/template.html

@@ -0,0 +1 @@
+<section class="c-hero-page section"><div class="wrap"><nav class="c-hero-page__crumbs" aria-label="Breadcrumb"><slot name="breadcrumb"></slot></nav><div class="c-hero-page__grid"><div class="c-hero-page__title"><slot name="eyebrow"></slot><slot></slot></div><div class="c-hero-page__intro"><slot name="intro"></slot></div></div></div><div class="wrap c-hero-page__media"><slot name="media"></slot></div></section>

package/blocks/hero/hero-product/README.md

@@ -0,0 +1,41 @@
+# hero-product
+
+Product/mockup as architecture — b2b/agency.
+
+- **Category:** hero
+- **Media:** device mockup or product still
+- **Registers:** b2b, professional
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `logos-label` | Tiny label above logo row (e.g. "Trusted by") |
+| `logos` | 3–6 grayscale `<img>` marks |
+| `media` | Product still / mockup `<img>` (4:3 or 3:2) |
+
+## Example
+
+```html
+<hero-product>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Bookkeeping for trades</p>
+  <h1>Your books closed by the 5th, every month.</h1>
+  <p class="lede lede--lg">We reconcile, categorize, and send you one clear report. You keep the trucks moving.</p>
+  <a slot="actions" class="btn btn-lg" href="/contact">Book a 20-minute call</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/pricing">See pricing</a>
+  <span slot="logos-label">Trusted by 60+ contractors</span>
+  <img src="/media/harvest/logo-1.svg" alt="Dunn Plumbing" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-2.svg" alt="Castine Electric" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-3.svg" alt="Ridgeline Builders" width="160" height="48" slot="logos">
+  <img src="/media/harvest/logo-4.svg" alt="Bay Paving" width="160" height="48" slot="logos">
+  <img src="/media/harvest/report-mockup.jpg" alt="Monthly report on a laptop screen" width="1600" height="1200" slot="media" fetchpriority="high">
+</hero-product>
+```
+
+Variants: `<hero-product variant="reverse">`.
+
+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/hero/hero-product/styles.css

@@ -0,0 +1,11 @@
+.c-hero-product__copy{display:grid;gap:var(--space-5);align-content:center}
+.c-hero-product__copy h1{max-width:18ch}
+.c-hero-product__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-product__proof:empty{display:none}
+.c-hero-product__trust{display:grid;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
+.c-hero-product__logos-label{font-size:.75rem}
+.c-hero-product__logos-label:empty{display:none}
+.c-hero-product__logos{justify-content:flex-start;gap:var(--space-4) var(--space-6)}
+.c-hero-product__logos:empty{display:none}
+.c-hero-product__media{box-shadow:var(--shadow-3)}
+.c-hero-product--reverse .split > :first-child{order:2}

package/blocks/hero/hero-product/template.html

@@ -0,0 +1,14 @@
+<section class="c-hero-product section section--roomy section--muted">
+  <div class="wrap split">
+    <div class="c-hero-product__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+      <div class="c-hero-product__trust">
+        <p class="eyebrow c-hero-product__logos-label"><slot name="logos-label"></slot></p>
+        <div class="logo-row c-hero-product__logos"><slot name="logos"></slot></div>
+      </div>
+    </div>
+    <div class="c-hero-product__media frame ratio-4x3"><slot name="media"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-service/README.md

@@ -0,0 +1,37 @@
+# hero-service
+
+Service page header: photo band with an overlapping title card and a dark quote card.
+
+- **Category:** hero
+- **Media:** wide service photo
+- **Registers:** trade, beauty, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | `<img>` wide photo (LCP, `fetchpriority="high"`) |
+| `breadcrumb` | Optional `<a>` trail ending in `<span aria-current="page">` |
+| `(default)` | `<h1>` + `<p class="lede">` |
+| `aside` | `<h3>` + `<p>` + `.btn` / `.btn-outline` + optional rating line |
+
+## Example
+
+```html
+<hero-service>
+  <img src="/media/harvest/roof-aerial.jpg" alt="Aerial view of a finished architectural shingle roof" width="2000" height="900" slot="media" fetchpriority="high">
+  <a slot="breadcrumb" href="/">Home</a>
+  <a slot="breadcrumb" href="/services">Services</a>
+  <span slot="breadcrumb" aria-current="page">Roofing</span>
+  <h1>Roofing. Done in days.</h1>
+  <p class="lede">Roof replacement, repair, storm help, and free inspections across Greater Portland — one licensed crew, backed by a 25-year written warranty.</p>
+  <h3 slot="aside">Get a free estimate</h3>
+  <p slot="aside">An honest look and a fixed written quote within 24 hours — whether or not you hire us.</p>
+  <a slot="aside" class="btn" href="/contact">Get my free estimate</a>
+  <a slot="aside" class="btn-outline" href="tel:+15550102000"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg>(555) 010-2000</a>
+  <small slot="aside"><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> 4.9 from 1,200+ homeowners</small>
+</hero-service>
+```
+
+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/hero/hero-service/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "hero/hero-service",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "a42eb489095bb023c481f496b83c27adcdcabacbd266915de550446fac384f8e",
+  "fit": {
+    "visitorJobs": [
+      "Confirm a specific service and see the next action"
+    ],
+    "pageRoles": [
+      "service opening"
+    ],
+    "useWhen": [
+      "Confirm a specific service and see the next action"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "media",
+      "default"
+    ],
+    "optionalSlots": [
+      "breadcrumb",
+      "aside"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 1,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "image and overlapping information",
+    "alignment": "offset",
+    "density": "layered",
+    "mediaProminence": "high",
+    "geometry": [
+      "overlap",
+      "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/hero--hero-service.json"
+  }
+}

package/blocks/hero/hero-service/styles.css

@@ -0,0 +1,17 @@
+.c-hero-service__media{height:clamp(16rem,42vw,30rem);background:var(--color-surface-2)}
+.c-hero-service__media img{width:100%;height:100%;object-fit:cover}
+.c-hero-service__cards{position:relative;display:grid;gap:var(--space-4);margin-top:calc(-1 * var(--space-8));padding-bottom:var(--section-y)}
+.c-hero-service__title{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-6);box-shadow:var(--shadow-2)}
+.c-hero-service__title h1{font-size:var(--step-4);max-width:18ch}
+.c-hero-service__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--step-0);color:var(--color-muted)}
+.c-hero-service__crumbs:empty{display:none}
+.c-hero-service__crumbs > * + *::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
+.c-hero-service__crumbs a{color:inherit;text-decoration:none}
+.c-hero-service__crumbs [aria-current]{color:var(--color-text)}
+.c-hero-service__aside{display:grid;gap:var(--space-3);align-content:start;padding:var(--space-6);border-radius:var(--radius-lg)}
+.c-hero-service__aside h3{font-size:var(--step-2)}
+.c-hero-service__aside p{margin:0;color:var(--color-muted)}
+.c-hero-service__aside .btn,.c-hero-service__aside .btn-outline{width:100%}
+.c-hero-service__aside .btn + .btn-outline{margin-top:calc(-1 * var(--space-1))}
+.c-hero-service__aside small{display:flex;align-items:center;gap:.4rem;color:var(--color-muted)}
+@media(min-width:900px){.c-hero-service__cards{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-5);margin-top:calc(-1 * var(--space-9))}.c-hero-service__title{padding:var(--space-7)}}

package/blocks/hero/hero-service/template.html

@@ -0,0 +1 @@
+<section class="c-hero-service"><div class="c-hero-service__media"><slot name="media"></slot></div><div class="wrap c-hero-service__cards"><div class="card c-hero-service__title"><nav class="c-hero-service__crumbs" aria-label="Breadcrumb"><slot name="breadcrumb"></slot></nav><slot></slot></div><aside class="card c-hero-service__aside" data-scheme="dark"><slot name="aside"></slot></aside></div></section>

package/blocks/hero/hero-split/README.md

@@ -0,0 +1,36 @@
+# hero-split
+
+50/50 copy + media; default trade/home-service hero.
+
+- **Category:** hero
+- **Media:** photo or illustration LCP
+- **Registers:** trade, beauty, food, professional
+- **Variants:** reverse, dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | `<p class="eyebrow">` short category or location line |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` (one sentence) |
+| `actions` | 1–2 buttons (`btn btn-lg` primary, `btn-outline btn-lg` secondary) |
+| `proof` | Optional `.byline` with avatars + rating text |
+| `media` | LCP `<img>` with `fetchpriority="high"`, width/height set |
+
+## Example
+
+```html
+<hero-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Roofing · Portland, ME</p>
+  <h1>Roofs that outlast the weather they were built for.</h1>
+  <p class="lede lede--lg">Licensed, insured, and local since 2009. Written estimates in 48 hours, workmanship guaranteed for ten years.</p>
+  <a slot="actions" class="btn btn-lg" href="/contact">Get a free estimate</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/work">See our work</a>
+  <div slot="proof" class="byline"><div class="avatar-group"><img src="/media/harvest/review-1.jpg" alt="" width="96" height="96" class="avatar avatar--sm"><img src="/media/harvest/review-2.jpg" alt="" width="96" height="96" class="avatar avatar--sm"><img src="/media/harvest/review-3.jpg" alt="" width="96" height="96" class="avatar avatar--sm"></div><div><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><span> 4.9 from 212 local reviews</span></div></div>
+  <img src="/media/harvest/hero-roof.jpg" alt="Crew finishing a standing-seam metal roof" width="1600" height="1200" slot="media" fetchpriority="high">
+</hero-split>
+```
+
+Variants: `<hero-split variant="reverse">` (also: `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/hero/hero-split/styles.css

@@ -0,0 +1,7 @@
+.c-hero-split__copy{display:grid;gap:var(--space-5);align-content:center}
+.c-hero-split__copy h1{max-width:18ch}
+.c-hero-split__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-split__proof:empty{display:none}
+.c-hero-split--reverse .split > :first-child{order:2}
+.c-hero-split--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)}
+.c-hero-split--dark .frame{box-shadow:none}

package/blocks/hero/hero-split/template.html

@@ -0,0 +1,11 @@
+<section class="c-hero-split section section--roomy">
+  <div class="wrap split">
+    <div class="c-hero-split__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+      <div class="c-hero-split__proof"><slot name="proof"></slot></div>
+    </div>
+    <div class="c-hero-split__media frame ratio-4x3"><slot name="media"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-statement/README.md

@@ -0,0 +1,33 @@
+# hero-statement
+
+One huge centered statement with a three-image filmstrip beneath — studio / agency opener.
+
+- **Category:** hero
+- **Media:** 3 landscape stills
+- **Registers:** b2b, beauty, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `(default)` | `<h1>` (2–4 words) + optional `<p class="lede">` |
+| `strip` | 3 `<div class="frame ratio-4x3">` tiles with an `<img>` each |
+
+## Example
+
+```html
+<hero-statement>
+  <p slot="eyebrow" class="eyebrow">Brand &amp; identity studio · Portland</p>
+  <h1>We are Hive.</h1>
+  <p class="lede">A four-person studio designing the marks small businesses are known for.</p>
+  <div slot="strip" class="frame ratio-4x3"><img src="/media/harvest/work-1.jpg" alt="Logo lockup on a storefront awning" width="1200" height="900" fetchpriority="high"></div>
+  <div slot="strip" class="frame ratio-4x3"><img src="/media/harvest/work-2.jpg" alt="Business cards and letterhead on a desk" width="1200" height="900"></div>
+  <div slot="strip" class="frame ratio-4x3"><img src="/media/harvest/work-3.jpg" alt="Vehicle wrap on a delivery van" width="1200" height="900"></div>
+</hero-statement>
+```
+
+Variants: `<hero-statement 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/hero/hero-statement/styles.css

@@ -0,0 +1,8 @@
+.c-hero-statement__copy{display:grid;gap:var(--space-5);justify-items:center;text-align:center}
+.c-hero-statement h1{max-width:none;font-size:clamp(2.75rem,1.5rem + 6vw,6.5rem);line-height:.98;letter-spacing:-.04em}
+.c-hero-statement .lede{text-align:center;max-width:40rem}
+.c-hero-statement__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-8)}
+.c-hero-statement__strip:empty{display:none}
+.c-hero-statement__strip .frame{box-shadow:none}
+@media(min-width:720px){.c-hero-statement__strip{gap:var(--space-4);margin-top:var(--space-9)}}
+.c-hero-statement--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/hero/hero-statement/template.html

@@ -0,0 +1 @@
+<section class="c-hero-statement section section--roomy"><div class="wrap c-hero-statement__copy"><slot name="eyebrow"></slot><slot></slot></div><div class="wrap c-hero-statement__strip"><slot name="strip"></slot></div></section>

package/blocks/hero/hero-stats/README.md

@@ -0,0 +1,37 @@
+# hero-stats
+
+Headline with proof metrics under the fold of the hero.
+
+- **Category:** hero
+- **Media:** optional LCP
+- **Registers:** trade, b2b, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `stats` | 3–4 `.stat` blocks (`data-count-to` on the value for count-up) |
+
+## Example
+
+```html
+<hero-stats>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Electrical contractors · Since 1998</p>
+  <h1>Wired right the first time.</h1>
+  <p class="lede lede--lg">Residential and light-commercial electrical for Cumberland County. Panel upgrades, EV chargers, generators, and the odd mystery outlet.</p>
+  <a slot="actions" class="btn btn-lg" href="/contact">Get a free estimate</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/work">See our work</a>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="26">26</p><p class="stat__label">Years in business</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="4800" data-count-suffix="+">4800+</p><p class="stat__label">Jobs completed</p></div>
+  <div slot="stats" class="stat"><p class="stat__value">4.9</p><p class="stat__label">Average rating</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="24" data-count-suffix="h">24h</p><p class="stat__label">Emergency response</p></div>
+</hero-stats>
+```
+
+Variants: `<hero-stats 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/hero/hero-stats/styles.css

@@ -0,0 +1,10 @@
+.c-hero-stats__copy{display:grid;gap:var(--space-5);max-width:46rem}
+.c-hero-stats__copy h1{max-width:16ch}
+.c-hero-stats__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-stats__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}
+.c-hero-stats__row .stat--sm .stat__value{font-size:var(--step-3)}
+@media(min-width:720px){
+  .c-hero-stats__row{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
+  .c-hero-stats__row .stat + .stat{border-left:1px solid var(--color-border);padding-left:var(--space-5)}
+}
+.c-hero-stats--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/hero/hero-stats/template.html

@@ -0,0 +1,10 @@
+<section class="c-hero-stats section section--roomy">
+  <div class="wrap">
+    <div class="c-hero-stats__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <div class="c-hero-stats__row" data-island="counter"><slot name="stats"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-video-still/README.md

@@ -0,0 +1,36 @@
+# hero-video-still
+
+Poster still with play affordance linking to content clip — never autoplay bg.
+
+- **Category:** hero
+- **Media:** poster still
+- **Registers:** beauty, food, b2b
+- **Variants:** center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `media` | Poster `<img>` (21:9 crop) |
+| `play-label` | Short label next to the play icon; set the play link `href` in the template when you copy the block |
+
+## Example
+
+```html
+<hero-video-still>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Farm-to-table · Freeport</p>
+  <h1>Dinner starts in the field at 6 a.m.</h1>
+  <p class="lede lede--lg">A 40-seat dining room, a five-acre garden, and a menu that changes when the weather does.</p>
+  <a slot="actions" class="btn btn-lg" href="/reserve">Reserve a table</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/menu">Tonight's menu</a>
+  <img src="/media/harvest/kitchen-still.jpg" alt="Cooks plating at the pass" width="2100" height="900" slot="media" fetchpriority="high">
+  <span slot="play-label">Watch the 60-second tour</span>
+</hero-video-still>
+```
+
+Variants: `<hero-video-still 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/hero/hero-video-still/styles.css

@@ -0,0 +1,9 @@
+.c-hero-video-still__copy{display:grid;gap:var(--space-5);max-width:46rem;margin-bottom:var(--space-7)}
+.c-hero-video-still__copy h1{max-width:16ch}
+.c-hero-video-still__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-video-still__frame{box-shadow:var(--shadow-3)}
+.c-hero-video-still__frame::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--color-text) 18%,transparent);pointer-events:none}
+.c-hero-video-still__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:var(--shadow-3)}
+.c-hero-video-still__play .icon{fill:currentColor;stroke:none}
+@media(max-width:599px){.c-hero-video-still__play{width:3.5rem;height:3.5rem;padding:0;border-radius:var(--radius-pill)}.c-hero-video-still__play > span{display:none}}
+.c-hero-video-still--center .c-hero-video-still__copy{margin-inline:auto;text-align:center;justify-items:center}

package/blocks/hero/hero-video-still/template.html

@@ -0,0 +1,13 @@
+<section class="c-hero-video-still section section--roomy">
+  <div class="wrap">
+    <div class="c-hero-video-still__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <div class="c-hero-video-still__frame frame ratio-21x9">
+      <slot name="media"></slot>
+      <a class="btn btn-lg c-hero-video-still__play" href="#video"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5v14l11-7z"/></svg><slot name="play-label"></slot></a>
+    </div>
+  </div>
+</section>

package/blocks/icons.md

@@ -0,0 +1,44 @@
+# Icons
+
+Copy an SVG into a block or component. Use class `icon` (and `icon--lg` when needed). Paths use `stroke` via CSS on `.icon`.
+
+```html
+<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
+```
+
+## Set (Lucide-style, ISC)
+
+| Name | Path `d` |
+|------|----------|
+| check | `M5 13l4 4L19 7` |
+| chevron-right | `M9 6l6 6-6 6` |
+| chevron-down | `M6 9l6 6 6-6` |
+| arrow-right | `M5 12h14M13 6l6 6-6 6` |
+| plus | `M12 5v14M5 12h14` |
+| minus | `M5 12h14` |
+| menu | `M4 7h16M4 12h16M4 17h16` |
+| x | `M6 6l12 12M18 6L6 18` |
+| phone | `M6 3h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A16 16 0 014 5a2 2 0 012-2z` |
+| mail | `M4 6h16v12H4zM4 6l8 7 8-7` |
+| map-pin | `M12 21s7-5.2 7-11a7 7 0 10-14 0c0 5.8 7 11 7 11zM12 10.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z` |
+| clock | `M12 7v5l3 2M12 21a9 9 0 110-18 9 9 0 010 18z` |
+| star | `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` |
+| shield | `M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z` |
+| wrench | `M14.5 6.5a4 4 0 01-5.2 5.2L4 17l3 3 5.3-5.3a4 4 0 015.2-5.2l-3-3z` |
+| home | `M4 11l8-7 8 7v9a1 1 0 01-1 1h-5v-6H10v6H5a1 1 0 01-1-1v-9z` |
+| users | `M16 20v-1a4 4 0 00-4-4H7a4 4 0 00-4 4v1M9.5 11a3 3 0 100-6 3 3 0 000 6zM17 11a3 3 0 100-6` |
+| camera | `M4 8h3l2-2h6l2 2h3v11H4V8zM12 17a3.5 3.5 0 100-7 3.5 3.5 0 000 7z` |
+| heart | `M12 20s-7-4.4-7-10a4 4 0 017-2.5A4 4 0 0119 10c0 5.6-7 10-7 10z` |
+| leaf | `M5 19c8 0 12-6 14-14-8 2-14 6-14 14zM5 19c2-4 6-7 11-9` |
+| truck | `M3 7h11v10H3zM14 10h4l3 3v4h-7V10zM7 20a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM17 20a1.5 1.5 0 100-3 1.5 1.5 0 000 3z` |
+| building | `M4 20V6l8-3 8 3v14H4zM9 20v-5h6v5` |
+| briefcase | `M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M4 7h16v12H4V7z` |
+| sparkles | `M12 3l1.2 3.8L17 8l-3.8 1.2L12 13l-1.2-3.8L7 8l3.8-1.2L12 3zM6 14l.8 2.2L9 17l-2.2.8L6 20l-.8-2.2L3 17l2.2-.8L6 14z` |
+| quote | `M7 8h5v5H9a3 3 0 00-3 3v1h6v-4H8V8zm8 0h5v5h-3a3 3 0 00-3 3v1h6v-4h-4V8z` |
+| play | `M8 5v14l11-7L8 5z` |
+| image | `M4 5h16v14H4V5zm0 10l4-4 3 3 4-5 5 6` |
+| link | `M10 13a5 5 0 007 0l2-2a5 5 0 00-7-7l-1 1M14 11a5 5 0 00-7 0l-2 2a5 5 0 007 7l1-1` |
+| calendar | `M5 4h14v16H5V4zm0 4h14M9 2v4M15 2v4` |
+| search | `M11 18a7 7 0 100-14 7 7 0 000 14zM20 20l-3.5-3.5` |
+
+Add `fill="none"` is unnecessary — `.icon { fill: none; stroke: currentColor }` is in primitives.

package/blocks/incentives/incentive-banner/README.md

@@ -0,0 +1,28 @@
+# incentive-banner
+
+Promo / offer banner.
+
+- **Category:** incentives
+- **Media:** none
+- **Registers:** trade, beauty, food
+- **Variants:** accent
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `(default)` | One line: `<strong>` offer + short terms |
+| `actions` | One `<a>` (text link or `.btn.btn-sm`) |
+
+## Example
+
+```html
+<incentive-banner>
+  <strong>0% financing for 12 months</strong> on full roof replacements — approvals in minutes.
+  <a slot="actions" href="/financing">See terms</a>
+</incentive-banner>
+```
+
+Variants: `<incentive-banner variant="accent">`.
+
+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/incentives/incentive-banner/styles.css

@@ -0,0 +1,7 @@
+.c-incentive-banner{gap:var(--space-2) var(--space-3);padding-block:var(--space-3)}
+.c-incentive-banner__icon .icon{width:1.1rem;height:1.1rem;color:var(--color-accent)}
+.c-incentive-banner__text{margin:0}
+.c-incentive-banner__text strong{font-weight:600}
+.c-incentive-banner > a{font-weight:600;text-underline-offset:.2em}
+.c-incentive-banner--accent{background:var(--color-accent);color:var(--color-accent-text);border-bottom-color:transparent}
+.c-incentive-banner--accent .c-incentive-banner__icon .icon{color:var(--color-accent-text)}

package/blocks/incentives/incentive-banner/template.html

@@ -0,0 +1 @@
+<aside class="c-incentive-banner announcement"><span class="c-incentive-banner__icon" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg></span><p class="c-incentive-banner__text"><slot></slot></p><slot name="actions"></slot></aside>

package/blocks/incentives/incentive-cards/README.md

@@ -0,0 +1,31 @@
+# incentive-cards
+
+Offer cards (financing, warranty, gift).
+
+- **Category:** incentives
+- **Media:** optional icons
+- **Registers:** trade, beauty, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `cards` | 3 `.card` offers: `.icon-tile`, `<h3>`, `<p>`, optional `<a class="btn-arrow">` |
+
+## Example
+
+```html
+<incentive-cards>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Offers</p>
+  <h2 slot="heading">Ways to make it easier</h2>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg></span><h3>0% for 12 months</h3><p>Financing through our lending partner. Five-minute application, no hard credit pull to see your rate.</p><a class="btn-arrow" href="/financing">Financing details</a></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>10-year workmanship warranty</h3><p>Any leak caused by installation, we fix free. Transferable if you sell the house.</p><a class="btn-arrow" href="/warranty">Read the warranty</a></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7-4.6-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.4-9 9-9 9z"/></svg></span><h3>$250 referral credit</h3><p>When a neighbor you refer books a replacement, you both get $250 off your next service.</p><a class="btn-arrow" href="/referrals">How referrals work</a></div></div>
+</incentive-cards>
+```
+
+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.