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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/blocks/incentives/incentive-cards/styles.css

@@ -1,4 +0,0 @@
-.c-incentive-cards__grid .card{background:var(--color-surface-2);border-color:transparent}
-.c-incentive-cards__grid .card__body{padding:var(--space-6);gap:var(--space-3)}
-.c-incentive-cards__grid .card__body > .icon-tile{margin-bottom:var(--space-2);background:var(--color-surface)}
-.c-incentive-cards__grid .card__body > h3{font-size:var(--step-2)}

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

@@ -1 +0,0 @@
-<section class="c-incentive-cards section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-incentive-cards__grid"><slot name="cards"></slot></div></div></section>

package/blocks/navbar/nav-announcement/README.md

@@ -1,35 +0,0 @@
-# nav-announcement
-
-Announcement strip above sticky split nav.
-
-- **Category:** navbar
-- **Media:** logo optional
-- **Registers:** trade, beauty, food, b2b
-- **Variants:** accent
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `announcement` | One short line, optionally with an inline `<a>` |
-| `brand` | Business name or logo |
-| `links` | 3–5 `<a>` primary links |
-| `actions` | Primary CTA button |
-
-## Example
-
-```html
-<nav-announcement>
-  <span slot="announcement">Spring roof inspections are free through May — <a href="/contact">book yours</a></span>
-  <span slot="brand">Harbor Roofing</span>
-  <a slot="links" href="/services">Services</a>
-  <a slot="links" href="/work">Our work</a>
-  <a slot="links" href="/about">About</a>
-  <a slot="links" href="/contact">Contact</a>
-  <a slot="actions" class="btn" href="/contact">Free estimate</a>
-</nav-announcement>
-```
-
-Variants: `<nav-announcement 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/navbar/nav-announcement/styles.css

@@ -1,10 +0,0 @@
-.c-nav-announcement__inner{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
-.c-nav-announcement__links{display:none;margin-inline:auto}
-.c-nav-announcement__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
-.c-nav-announcement__cta > :not(:first-child){display:none}
-.c-nav-announcement--accent .c-nav-announcement__strip{background:var(--color-accent);color:var(--color-accent-text);border-bottom-color:transparent}
-@media(min-width:900px){
-  .c-nav-announcement__links{display:flex}
-  .c-nav-announcement__cta > :not(:first-child){display:inline-flex}
-  .c-nav-announcement__toggle{display:none}
-}

package/blocks/navbar/nav-announcement/template.html

@@ -1,14 +0,0 @@
-<div class="c-nav-announcement">
-  <div class="announcement c-nav-announcement__strip"><slot name="announcement"></slot></div>
-  <header class="c-nav-announcement__bar header--sticky" data-island="header">
-    <div class="wrap c-nav-announcement__inner">
-      <a class="brand" href="/"><slot name="brand"></slot></a>
-      <nav class="nav-links c-nav-announcement__links" aria-label="Primary"><slot name="links"></slot></nav>
-      <div class="c-nav-announcement__actions">
-        <div class="btn-group c-nav-announcement__cta"><slot name="actions"></slot></div>
-        <button type="button" class="btn-ghost btn-icon c-nav-announcement__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
-      </div>
-    </div>
-    <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
-  </header>
-</div>

package/blocks/navbar/nav-centered/README.md

@@ -1,35 +0,0 @@
-# nav-centered
-
-Centered mark with flanking link clusters — beauty / premium.
-
-- **Category:** navbar
-- **Media:** logo preferred
-- **Registers:** beauty, food, professional
-- **Variants:** static
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `links-left` | 2–3 `<a>` links shown left of the brand |
-| `brand` | Wordmark or logo (centered) |
-| `links-right` | 1–2 `<a>` links shown right of the brand |
-| `actions` | Primary CTA button (right edge) |
-
-## Example
-
-```html
-<nav-centered>
-  <a slot="links-left" href="/services">Services</a>
-  <a slot="links-left" href="/gallery">Gallery</a>
-  <a slot="links-left" href="/team">Team</a>
-  <span slot="brand">Maison Lune</span>
-  <a slot="links-right" href="/about">About</a>
-  <a slot="links-right" href="/contact">Visit</a>
-  <a slot="actions" class="btn" href="/book">Book now</a>
-</nav-centered>
-```
-
-Variants: `<nav-centered variant="static">`.
-
-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/navbar/nav-centered/styles.css

@@ -1,11 +0,0 @@
-.c-nav-centered__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--header-h);gap:var(--space-3)}
-.c-nav-centered__brand{justify-self:center;font-size:var(--step-3);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
-.c-nav-centered__left{display:none}
-.c-nav-centered__links{display:none}
-.c-nav-centered__right{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2)}
-.c-nav-centered__cta{display:none}
-.c-nav-centered--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
-@media(min-width:900px){
-  .c-nav-centered__left,.c-nav-centered__links,.c-nav-centered__cta{display:flex}
-  .c-nav-centered__toggle{display:none}
-}