@tryvitris/website-harness 0.1.0-beta.6 → 0.1.0-beta.7

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

@@ -1,34 +0,0 @@
-# hero-editorial
-
-Type-led hero with generous air — premium / professional.
-
-- **Category:** hero
-- **Media:** optional small media
-- **Registers:** professional, b2b, beauty
-- **Variants:** center
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Short line above headline |
-| `(default)` | `<h1>` (≤ 10 words) + `<p class="lede lede--lg">` |
-| `actions` | 1–2 buttons |
-| `media` | Optional wide `<img>` shown under the copy (21:9 crop) |
-
-## Example
-
-```html
-<hero-editorial>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Estate planning · Family law</p>
-  <h1>Counsel that speaks plainly and plans for decades.</h1>
-  <p class="lede lede--lg">A two-partner practice in the Old Port. Flat fees for wills and trusts, and one attorney who answers your calls from start to finish.</p>
-  <a slot="actions" class="btn btn-lg" href="/consult">Book a consultation</a>
-  <a slot="actions" class="btn-arrow" href="/practice">Practice areas</a>
-  <img src="/media/harvest/office-wide.jpg" alt="The practice's brick-walled meeting room" width="2100" height="900" slot="media" fetchpriority="high">
-</hero-editorial>
-```
-
-Variants: `<hero-editorial 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-editorial/block.meta.json

@@ -1,85 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "hero/hero-editorial",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "c7523f6b19a0b7643a08fbb15054906ef4d53d0acec527dc7582519e00a5f0b0",
-  "fit": {
-    "visitorJobs": [
-      "Understand a focused offer without relying on photography"
-    ],
-    "pageRoles": [
-      "home opening"
-    ],
-    "useWhen": [
-      "Understand a focused offer without relying on photography"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "eyebrow",
-      "default",
-      "actions"
-    ],
-    "optionalSlots": [
-      "media"
-    ],
-    "testedItemCounts": [
-      1
-    ]
-  },
-  "media": {
-    "min": 0,
-    "max": 8,
-    "optionalBehavior": "Recompose without empty media frames when media is optional",
-    "aspect": [
-      "content-dependent"
-    ]
-  },
-  "composition": {
-    "hierarchy": "type-led opening",
-    "alignment": "left or centered",
-    "density": "open",
-    "mediaProminence": "low",
-    "geometry": [
-      "type-led",
-      "single-column"
-    ],
-    "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-editorial.json"
-  }
-}

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

@@ -1,6 +0,0 @@
-.c-hero-editorial__copy{display:grid;gap:var(--space-5);max-width:46rem}
-.c-hero-editorial__copy h1{font-size:clamp(2.8rem,1.8rem + 4vw,5.5rem);max-width:16ch}
-.c-hero-editorial__copy .btn-group{margin-top:var(--space-2)}
-.c-hero-editorial__media{margin-top:var(--space-8)}
-.c-hero-editorial__media:not(:has(img,video)){display:none}
-.c-hero-editorial--center .c-hero-editorial__copy{margin-inline:auto;text-align:center;justify-items:center}

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

@@ -1,10 +0,0 @@
-<section class="c-hero-editorial section section--roomy">
-  <div class="wrap">
-    <div class="c-hero-editorial__copy">
-      <slot name="eyebrow"></slot>
-      <slot></slot>
-      <div class="btn-group"><slot name="actions"></slot></div>
-    </div>
-    <div class="c-hero-editorial__media frame ratio-21x9"><slot name="media"></slot></div>
-  </div>
-</section>

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

@@ -1,32 +0,0 @@
-# hero-evidence
-
-Type-led, no-photo opening with a quieter column for verified reasons to trust the business. The two columns carry different levels of emphasis; the proof is not a substitute for an invented testimonial or metric. This example is for the fictional Northline Counsel practice.
-
-- **Category:** hero
-- **Media:** none
-- **Registers:** professional, b2b, trade
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional context label |
-| `(default)` | One `<h1>` and a concise introductory paragraph |
-| `actions` | Optional primary and secondary links |
-| `proof` | List of specific, verified credentials or service facts; no fabricated claims |
-
-## Example
-
-```html
-<hero-evidence>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Northline Counsel · fictional example</p>
-  <h1>Clear counsel for decisions that cannot wait.</h1>
-  <p class="lede lede--lg">A small legal practice helping families and business owners understand their options before they choose a path.</p>
-  <a slot="actions" class="btn" href="/contact">Request a conversation</a>
-  <a slot="actions" class="btn-outline" href="/services">Explore services</a>
-  <ul slot="proof"><li>Direct conversation with the person handling your matter</li><li>Written scope before work begins</li><li>Practical next steps after the first meeting</li></ul>
-</hero-evidence>
-```
-
-Replace every example claim with a verified business fact. If no credible proof exists, use a simpler type-led opening. The proof column stacks after the main message on mobile.

package/blocks/hero/hero-evidence/block.meta.json

@@ -1,85 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "hero/hero-evidence",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "a6e4e590acd369d516d3d67301ff5b0bd1383850ec797a3826e713ae0e380099",
-  "fit": {
-    "visitorJobs": [
-      "Understand the offer and review verified reasons to trust"
-    ],
-    "pageRoles": [
-      "home opening"
-    ],
-    "useWhen": [
-      "Understand the offer and review verified reasons to trust"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "default",
-      "proof"
-    ],
-    "optionalSlots": [
-      "eyebrow",
-      "actions"
-    ],
-    "testedItemCounts": [
-      1
-    ]
-  },
-  "media": {
-    "min": 0,
-    "max": 8,
-    "optionalBehavior": "Recompose without empty media frames when media is optional",
-    "aspect": [
-      "content-dependent"
-    ]
-  },
-  "composition": {
-    "hierarchy": "type with proof column",
-    "alignment": "asymmetric",
-    "density": "open",
-    "mediaProminence": "none",
-    "geometry": [
-      "type-led",
-      "proof-column"
-    ],
-    "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-evidence.json"
-  }
-}

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

@@ -1,13 +0,0 @@
-.c-hero-evidence{border-bottom:1px solid var(--color-border)}
-.c-hero-evidence{overflow-wrap:anywhere}
-.c-hero-evidence__layout{display:grid;gap:var(--space-7);align-items:end}
-.c-hero-evidence__main{display:grid;gap:var(--space-5);align-content:start;min-width:0}
-.c-hero-evidence__main h1{font-size:clamp(3rem,2rem + 4.2vw,6rem);line-height:1.02;max-width:15ch}
-.c-hero-evidence__main .lede{max-width:48ch}
-.c-hero-evidence__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
-.c-hero-evidence__actions .btn,.c-hero-evidence__actions .btn-outline{white-space:normal;text-align:center;max-width:100%}
-.c-hero-evidence__proof{border-top:2px solid var(--color-accent);padding-top:var(--space-4);display:grid;gap:var(--space-4)}
-.c-hero-evidence__proof > *{margin:0}
-.c-hero-evidence__proof ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
-.c-hero-evidence__proof li{padding-block:var(--space-2);border-bottom:1px solid var(--color-border)}
-@media(min-width:900px){.c-hero-evidence__layout{grid-template-columns:minmax(0,1.65fr) minmax(17rem,.7fr)}.c-hero-evidence__proof{margin-bottom:var(--space-2)}}

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

@@ -1 +0,0 @@
-<section class="c-hero-evidence section section--roomy"><div class="wrap c-hero-evidence__layout"><div class="c-hero-evidence__main"><slot name="eyebrow"></slot><slot></slot><div class="c-hero-evidence__actions"><slot name="actions"></slot></div></div><aside class="c-hero-evidence__proof" aria-label="Supporting evidence"><slot name="proof"></slot></aside></div></section>

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

@@ -1,46 +0,0 @@
-# hero-form
-
-Lead form in the fold beside value prop.
-
-- **Category:** hero
-- **Media:** optional side media
-- **Registers:** trade, b2b, professional
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Short line above headline |
-| `(default)` | `<h1>` + `<p class="lede lede--lg">`; optionally a `<ul class="list-check">` |
-| `proof` | Optional `.byline` proof row |
-| `form-title` | `<h2>` or `<h3>` heading inside the card |
-| `form` | `<form data-lead-form>` using `.form-grid` / `.field` / `.input` |
-
-## Example
-
-```html
-<hero-form>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Commercial HVAC · Southern Maine</p>
-  <h1>Keep every tenant comfortable and every unit under warranty.</h1>
-  <p class="lede lede--lg">Preventive maintenance plans for property managers. One contract, quarterly visits, 4-hour emergency response.</p>
-  <ul class="list-check">
-    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Fixed annual price per unit</li>
-    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Licensed EPA 608 technicians</li>
-    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Reporting after every visit</li>
-  </ul>
-  <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>
-  <h3 slot="form-title">Get a maintenance quote</h3>
-  <form slot="form" data-lead-form class="form-grid">
-    <div class="field"><label for="hf-name">Name</label><input class="input" id="hf-name" name="name" autocomplete="name" required></div>
-    <div class="field"><label for="hf-email">Work email</label><input class="input" id="hf-email" name="email" type="email" autocomplete="email" required></div>
-    <div class="field"><label for="hf-units">How many units?</label><select class="select" id="hf-units" name="units"><option>1–10</option><option>11–50</option><option>50+</option></select></div>
-    <button class="btn btn-lg" type="submit">Send my request</button>
-    <small>We reply within one business day. No spam.</small>
-  </form>
-</hero-form>
-```
-
-Variants: `<hero-form 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-form/styles.css

@@ -1,11 +0,0 @@
-.c-hero-form__copy{display:grid;gap:var(--space-5);align-content:center}
-.c-hero-form__copy h1{max-width:18ch}
-.c-hero-form__proof:empty{display:none}
-.c-hero-form__card{max-width:32rem;width:100%;justify-self:end}
-.c-hero-form__card .card__body{padding:var(--space-6);gap:var(--space-4)}
-.c-hero-form__card h3,.c-hero-form__card h2{font-size:var(--step-2)}
-.c-hero-form__card .btn{width:100%}
-.c-hero-form__card small{color:var(--color-muted)}
-@media(min-width:720px){.c-hero-form .split{align-items:center}}
-.c-hero-form--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-form--dark .card{box-shadow:none}

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

@@ -1,15 +0,0 @@
-<section class="c-hero-form section section--roomy">
-  <div class="wrap split split--top">
-    <div class="c-hero-form__copy">
-      <slot name="eyebrow"></slot>
-      <slot></slot>
-      <div class="c-hero-form__proof"><slot name="proof"></slot></div>
-    </div>
-    <div class="card card--elevated c-hero-form__card">
-      <div class="card__body">
-        <slot name="form-title"></slot>
-        <slot name="form"></slot>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,36 +0,0 @@
-# hero-menu
-
-Restaurant/menu: headline + featured dishes strip.
-
-- **Category:** hero
-- **Media:** food photography
-- **Registers:** food
-- **Variants:** center
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Short line above headline |
-| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
-| `actions` | 1–2 buttons |
-| `cards` | 3 dish cards: `.card` with `.card__media.ratio-4x3`, `<h3>`, `<p>`, and `.price` |
-
-## Example
-
-```html
-<hero-menu>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Neighborhood trattoria · Munjoy Hill</p>
-  <h1>Handmade pasta, twelve tables, one long night.</h1>
-  <p class="lede lede--lg">We roll the dough at four, open at five, and cook until the last table leaves.</p>
-  <a slot="actions" class="btn btn-lg" href="/reserve">Reserve</a>
-  <a slot="actions" class="btn-outline btn-lg" href="/menu">Full menu</a>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/cacio.jpg" alt="Cacio e pepe" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Cacio e pepe</h3><p class="price"><span class="price__amount">$19</span></p><p>Tonnarelli, pecorino, black pepper.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/ragu.jpg" alt="Pappardelle with short-rib ragù" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Short-rib ragù</h3><p class="price"><span class="price__amount">$26</span></p><p>Pappardelle, six-hour braise, parmigiano.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/branzino.jpg" alt="Whole roasted branzino" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Whole branzino</h3><p class="price"><span class="price__amount">$34</span></p><p>Lemon, capers, charred fennel.</p></div></article>
-</hero-menu>
-```
-
-Variants: `<hero-menu 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-menu/styles.css

@@ -1,7 +0,0 @@
-.c-hero-menu__copy{display:grid;gap:var(--space-5);max-width:42rem;margin-bottom:var(--space-8)}
-.c-hero-menu__copy h1{max-width:16ch}
-.c-hero-menu__copy .btn-group{margin-top:var(--space-2)}
-.c-hero-menu__cards .card__body{grid-template-columns:1fr auto;align-items:start}
-.c-hero-menu__cards .card__body > p:not(.price){grid-column:1 / -1}
-.c-hero-menu__cards .price__amount{font-size:var(--step-2)}
-.c-hero-menu--center .c-hero-menu__copy{margin-inline:auto;text-align:center;justify-items:center}

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

@@ -1,10 +0,0 @@
-<section class="c-hero-menu section section--roomy">
-  <div class="wrap">
-    <div class="c-hero-menu__copy">
-      <slot name="eyebrow"></slot>
-      <slot></slot>
-      <div class="btn-group"><slot name="actions"></slot></div>
-    </div>
-    <div class="grid grid--3 c-hero-menu__cards"><slot name="cards"></slot></div>
-  </div>
-</section>

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

@@ -1,35 +0,0 @@
-# hero-overlay
-
-Full-bleed photo with scrim and dual CTAs — immersive home default.
-
-- **Category:** hero
-- **Media:** darker LCP photo
-- **Registers:** trade, beauty, food
-- **Variants:** tall, center
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `media` | Full-bleed LCP `<img>` (dark or mid-tone subject) |
-| `eyebrow` | Short line above the headline |
-| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
-| `actions` | 1–2 buttons |
-| `proof` | Optional `.byline` proof row |
-
-## Example
-
-```html
-<hero-overlay>
-  <img src="/media/harvest/hero-storefront.jpg" alt="Evening view of the shop front" width="2000" height="1250" slot="media" fetchpriority="high">
-  <p slot="eyebrow" class="eyebrow">Portland's East End · Est. 2011</p>
-  <h1>Good bread, honest coffee, no fuss.</h1>
-  <p class="lede lede--lg">Sourdough out of the oven at 7, sandwiches at 11, closed when we sell out.</p>
-  <a slot="actions" class="btn btn-lg" href="/menu">See today's menu</a>
-  <a slot="actions" class="btn-outline btn-lg" href="/order">Order ahead</a>
-</hero-overlay>
-```
-
-Variants: `<hero-overlay variant="tall">` (also: `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-overlay/styles.css

@@ -1,14 +0,0 @@
-.c-hero-overlay{position:relative;min-height:min(80vh,44rem);display:grid;align-items:end;isolation:isolate;--color-text:#fff;--color-muted:color-mix(in srgb,#fff 78%,transparent);--color-border:color-mix(in srgb,#fff 40%,transparent);color:var(--color-text)}
-.c-hero-overlay--tall{min-height:min(94vh,54rem)}
-.c-hero-overlay__media{position:absolute;inset:0;z-index:0;background:#2a2622}
-.c-hero-overlay__media img{width:100%;height:100%;object-fit:cover}
-.c-hero-overlay__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,#000 18%,transparent) 0%,color-mix(in srgb,#000 30%,transparent) 45%,color-mix(in srgb,#000 74%,transparent) 100%)}
-.c-hero-overlay__copy{position:relative;z-index:2;display:grid;gap:var(--space-5);padding-block:var(--space-9) var(--space-8);max-width:42rem}
-.c-hero-overlay__copy h1{max-width:18ch;text-shadow:0 2px 24px color-mix(in srgb,#000 30%,transparent)}
-.c-hero-overlay__copy .btn-group{margin-top:var(--space-2)}
-.c-hero-overlay__copy .btn-outline{background:color-mix(in srgb,#fff 10%,transparent);backdrop-filter:blur(6px)}
-.c-hero-overlay__copy .btn-outline:hover{background:color-mix(in srgb,#fff 20%,transparent);border-color:#fff}
-.c-hero-overlay__proof:empty{display:none}
-.c-hero-overlay--center{align-items:center}
-.c-hero-overlay--center .c-hero-overlay__copy{margin-inline:auto;text-align:center;justify-items:center}
-.c-hero-overlay--center .c-hero-overlay__scrim{background:color-mix(in srgb,#000 52%,transparent)}

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

@@ -1,10 +0,0 @@
-<section class="c-hero-overlay">
-  <div class="c-hero-overlay__media"><slot name="media"></slot></div>
-  <div class="c-hero-overlay__scrim" aria-hidden="true"></div>
-  <div class="wrap c-hero-overlay__copy">
-    <slot name="eyebrow"></slot>
-    <slot></slot>
-    <div class="btn-group"><slot name="actions"></slot></div>
-    <div class="c-hero-overlay__proof"><slot name="proof"></slot></div>
-  </div>
-</section>

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

@@ -1,35 +0,0 @@
-# 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

@@ -1,19 +0,0 @@
-.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

@@ -1 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-<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>