diff --git a/intent/2026-10-14-michael-home-top.md b/intent/2026-10-14-michael-home-top.md new file mode 100644 index 0000000..5725ce4 --- /dev/null +++ b/intent/2026-10-14-michael-home-top.md @@ -0,0 +1,48 @@ +# Intent: new home page top (hero and consumer how-it-works) + +Author: Claude (working with Michael) +Date: 2026-10-14 +Status: draft (accepted when Danny merges the PR that adds it) +Product: zzThis (`Zero-State-LLC/zzthis`) + +## Problem / why now + +First-time visitors, mostly on mobile, were not grasping what zzThis is from the current hero. Michael wants them to get it within the first screen and one swipe. [verified: Michael, 2026-10-14] + +## Proposed outcome + +Hero, in order [MICHAEL 2026-10-14]: + +- Eyebrow: "The next evolution of the barcode". +- Headline: "A barcode/QR code you can write by hand". +- Sub-headline: the barcode/QR comparison with `zz-Kathy-found-dog-zz` set in mono and accent orange. +- The two hero buttons stay, right under the sub-headline, now with How it works first (primary) and See field logistics second [MICHAEL 2026-10-15, at Danny's request]. +- Two photos: the Kathy cork-board polaroid and the phone showing "Record found" (new assets under `public/images/hero/`). +- Hero body: the roadmap caveats (typed-only prototype, camera in v1, voice later) are removed; the paragraph now ends "zzThis makes things readable-writable-smart." + +New section right under the hero: "How it works - consumer" [MICHAEL 2026-10-14]: + +- Eyebrow "Physical-to-digital addressing"; headline "Skip the printer. Grab a marker." (Michael wrote "Ditch the printer" and asked for a less casual verb; swap back if preferred). +- His protocol sub-headline, the lead line, and the three steps (Create it / Write it / Look it up). No button in this block [MICHAEL 2026-10-15]. + +The home "How it works" section heading becomes "How it works - field" to distinguish the two. The rest of the page is unchanged, same sequence. + +## Constraints and flags for Danny + +- The hero no longer states that the prototype is typed-lookup only; the sub-headline and steps say "scan". Michael chose to move caveats off the top of the page. If a Status/Roadmap note is still wanted lower on the page, that is a follow-up. +- "highly secure" in the consumer sub-headline is Michael's wording. +- No em dash; spaced hyphens used. Copy lives in `src/content/hero.ts`. + +## Affected users / systems + +`src/content/hero.ts`, `src/content/workflows.ts`, `src/pages/index.astro`, `src/styles/b-base.css`, `public/images/hero/` (2 images), `tests/content.test.ts`, `tests/hero.test.ts` (new, for the max-lines rule). + +## Claims + +| Claim | Label | +|---|---| +| All headline, sub-headline, step and body wording is Michael's, as given or minimally cleaned | `[verified: Michael's doc, 2026-10-14]` | + +## Next + +Danny reviews and merges. Merging the PR that adds this file accepts it. diff --git a/public/images/hero/kathy-corkboard.webp b/public/images/hero/kathy-corkboard.webp new file mode 100644 index 0000000..c3f2c15 Binary files /dev/null and b/public/images/hero/kathy-corkboard.webp differ diff --git a/public/images/hero/kathy-phone-record.webp b/public/images/hero/kathy-phone-record.webp new file mode 100644 index 0000000..aedd535 Binary files /dev/null and b/public/images/hero/kathy-phone-record.webp differ diff --git a/src/content/hero.ts b/src/content/hero.ts index f1b407d..8e2771e 100644 --- a/src/content/hero.ts +++ b/src/content/hero.ts @@ -1,15 +1,27 @@ +// [MICHAEL 2026-10-14] Home top restructured: eyebrow, new headline, the +// barcode/QR comparison sub-headline with the Kathy code, two photos, the +// two hero buttons (How it works first), and the roadmap caveats removed from the hero body. export interface HeroAction { label: string; path: string; variant: "primary" | "secondary"; } +export interface HeroPhoto { + src: string; + width: number; + height: number; + alt: string; +} + export interface HeroContent { + eyebrow: string; title: string; - subline: string; + subline: { before: string; code: string; after: string }; paragraph: { before: string; code: string; after: string }; - imageCaption: string; + photos: readonly HeroPhoto[]; actions: readonly HeroAction[]; + imageCaption: string; } export interface TextBlock { @@ -22,25 +34,67 @@ export interface LinkBlock extends TextBlock { } export const hero: HeroContent = { - // Q62 [DANNY 2026-10-03, revised]: v1.0 headline, spaced hyphen, no em dash. - title: - "Barcodes made things scannable. zzThis makes things readable-writable - and smart.", - subline: "Write a code on a thing; type it to find its record.", + eyebrow: "The next evolution of the barcode", + title: "A barcode/QR code you can write by hand", + subline: { + before: + "Barcodes use bars. QR codes use dots. zzThis uses everyday words. Just wrap your words in double z’s - like ", + code: "zz-Kathy-found-dog-zz", + after: + " - write it on anything with a marker, and scan it to open its digital record. The “zz” ends tell our scanner exactly where to look, just like the three corner dots on a QR code.", + }, paragraph: { before: "zzThis is a human-readable, human-writable code for the physical world. Write a ", code: "zz-code", after: - " on tape, a crate, a parcel, an envelope, or a sign, or embed it in text or program code. The prototype supports typed lookup to a digital record. On-device camera recognition is planned for v1 but is not implemented in this build. Voice recognition is planned for a future release, not v1.", + " on tape, a crate, a parcel, an envelope, or a sign, or embed it in text or program code. zzThis makes things readable-writable-smart.", }, - imageCaption: "Word code on blue tape beside an obscured barcode.", + photos: [ + { + src: "images/hero/kathy-corkboard.webp", + width: 509, + height: 492, + alt: "A polaroid pinned to a cork board: a plush corgi wearing a zz tag, captioned zz-Kathy-found-dog-zz.", + }, + { + src: "images/hero/kathy-phone-record.webp", + width: 594, + height: 570, + alt: "A hand holds a phone scanning the plush corgi; the screen reads zz-Kathy-found-dog-zz, Record found, and the record link.", + }, + ], + // [MICHAEL 2026-10-15] Buttons restored at Danny's request, How it works first. actions: [ + { label: "How it works", path: "#how-it-works", variant: "primary" }, { label: "See field logistics", path: "#field-logistics", - variant: "primary", + variant: "secondary", + }, + ], + imageCaption: "Word code on blue tape beside an obscured barcode.", +}; + +// [MICHAEL 2026-10-14] "How it works - consumer" block, right under the hero. +export const consumerHow = { + eyebrow: "Physical-to-digital addressing", + heading: "Skip the printer. Grab a marker.", + text: "zzThis is a structurally constrained, human-readable tagging protocol. By bounding ordinary words with a “zz” prefix and suffix, we turn handwriting into a highly secure, scannable data link, from austere environments and logistics to everyday tracking.", + lead: "zzThis protocol words connect things to their online information.", + steps: [ + { + title: "Create it.", + text: "Choose or create your words and link them to information.", + }, + { + title: "Write it.", + text: "Put the zz-code on your item or sign.", + }, + { + title: "Look it up.", + text: "Scan the words to open the linked information.", }, - { label: "How it works", path: "#how-it-works", variant: "secondary" }, ], }; diff --git a/src/content/workflows.ts b/src/content/workflows.ts index 945c97c..d0493a1 100644 --- a/src/content/workflows.ts +++ b/src/content/workflows.ts @@ -13,7 +13,8 @@ export interface TitledImage { } export const coreIdentity = { - heading: "How it works", + // [MICHAEL 2026-10-14] "- field" distinguishes this from the consumer block. + heading: "How it works - field", intro: "Core identity: MARK a lowercase zz code → READ it by manual entry today; on-device camera recognition is planned for v1 → LINK it to a record → REPORT it in a voice handoff to another person if useful.", steps: [ diff --git a/src/pages/index.astro b/src/pages/index.astro index 41d2176..59ad9e5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,32 +9,27 @@ import Pipeline from "../components/Pipeline.astro"; import ComparisonCards from "../components/ComparisonCards.astro"; import { comparisonHeading } from "../content/comparison"; import Tour from "../components/Tour.astro"; -import { aboutTeaser, contactAction, hero } from "../content/hero"; +import { aboutTeaser, consumerHow, contactAction, hero } from "../content/hero"; import { contactEmail } from "../content/navigation"; import { url } from "../lib/url"; import BaseLayout from "../layouts/BaseLayout.astro"; -const splitAt = hero.title.indexOf(". "); -const setup = hero.title.slice(0, splitAt + 1); -const claim = hero.title.slice(splitAt + 2); -const phrase = "readable-writable"; -const phraseAt = claim.indexOf(phrase); -const claimBefore = claim.slice(0, phraseAt); -const claimAfter = claim.slice(phraseAt + phrase.length); +const description = + hero.subline.before + hero.subline.code + hero.subline.after; --- - +
+

{hero.eyebrow}

- {setup}{" "} - - {claimBefore} - {phrase} - {claimAfter} - + {hero.title}

-

{hero.subline}

+

+ {hero.subline.before} + {hero.subline.code} + {hero.subline.after} +

{hero.actions.map((action) => ( ))}
+
+ {hero.photos.map((photo) => ( + {photo.alt} + ))} +

{hero.paragraph.before} {hero.paragraph.code} @@ -53,6 +60,19 @@ const claimAfter = claim.slice(phraseAt + phrase.length);

+
+

{consumerHow.eyebrow}

+

{consumerHow.heading}

+

{consumerHow.text}

+

{consumerHow.lead}

+
    + {consumerHow.steps.map((step) => ( +
  1. + {step.title} {step.text} +
    2. + ))} +
+

{comparisonHeading}

diff --git a/src/styles/b-base.css b/src/styles/b-base.css index bb7e4f3..7f5fe29 100644 --- a/src/styles/b-base.css +++ b/src/styles/b-base.css @@ -357,6 +357,49 @@ kbd { gap: var(--space-xs); } +.hero__code { + font-family: var(--font-mono); + font-weight: 600; + color: var(--color-accent-ink); + overflow-wrap: anywhere; +} + +.hero__photos { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xs); +} + +.hero__photos img { + width: 100%; + height: auto; + border: var(--rule-hair) solid var(--color-rule-strong); +} + +.consumer { + display: grid; + gap: var(--space-sm); + justify-items: start; +} + +.consumer__text, +.consumer__lead { + max-width: 62ch; + color: var(--color-ink-2); +} + +.consumer__lead { + font-weight: 600; +} + +.consumer__steps { + display: grid; + gap: var(--space-2xs); + margin: 0; + padding-inline-start: 1.25em; + color: var(--color-ink-2); +} + .hero__body { font-size: var(--text-sm); color: var(--color-ink-2); diff --git a/tests/content.test.ts b/tests/content.test.ts index ca10564..b3767ee 100644 --- a/tests/content.test.ts +++ b/tests/content.test.ts @@ -21,7 +21,6 @@ import * as workflowsModule from "../src/content/workflows"; const { applications, applicationsPage } = applicationsModule; const { comparisonColumns, comparisonNote, comparisonRows } = comparisonModule; const { whyMarkers } = anatomyModule; -const { featured, hero } = heroModule; const { footerItems, footerNotice, zzthisSocial, zzthatSocial } = navigationModule; const { advisors, founder, founderOrigin } = peopleModule; @@ -66,35 +65,6 @@ const allStrings = modules.flatMap(collectStrings); const story = (id: string): string | undefined => applications.find((entry) => entry.id === id)?.story; -describe("hero and featured statement (spec 3.2)", () => { - it("matches the hero copy", () => { - expect(hero.title).toBe( - "Barcodes made things scannable. zzThis makes things readable-writable - and smart.", - ); - expect(hero.subline).toBe( - "Write a code on a thing; type it to find its record.", - ); - const { before, code, after } = hero.paragraph; - expect(before + code + after).toBe( - "zzThis is a human-readable, human-writable code for the physical world. Write a zz-code on tape, a crate, a parcel, an envelope, or a sign, or embed it in text or program code. The prototype supports typed lookup to a digital record. On-device camera recognition is planned for v1 but is not implemented in this build. Voice recognition is planned for a future release, not v1.", - ); - expect(code).toBe("zz-code"); - expect(hero.actions.map((action) => action.label)).toEqual([ - "See field logistics", - "How it works", - ]); - }); - - it("matches the featured statement", () => { - expect(featured.heading).toBe( - "The shortest, smartest distance between a physical thing, its digital record, and the work that comes next.", - ); - expect(featured.text).toBe( - "A zz code gives people a way to create the mark themselves, wherever the work happens. Future AI-assisted workflows could help identify what a camera sees, count what remains, suggest how an item should be handled, and prepare the next task; those capabilities are explorations, not shipped v1 behavior. The same visible code connects the item, its history, and the people responsible for it. It bridges physical things and their digital control. AI may serve as an interface and connector, not as the authority that defines or resolves a zz code.", - ); - }); -}); - describe("demo prototype decisions", () => { it("keeps zzthing.com in the demo pending the October 31 review", () => { expect(demoPrototypeLinks.map((link) => link.name)).toEqual([ diff --git a/tests/hero.test.ts b/tests/hero.test.ts new file mode 100644 index 0000000..338a14b --- /dev/null +++ b/tests/hero.test.ts @@ -0,0 +1,51 @@ +import { describe, expect, it } from "vitest"; +import { consumerHow, featured, hero } from "../src/content/hero"; + +// Moved from content.test.ts for the max-lines rule. +describe("hero and featured statement (spec 3.2, home top 2026-10-14)", () => { + it("matches the hero copy", () => { + // [MICHAEL 2026-10-14] New home top: eyebrow, headline, the barcode/QR + // comparison sub-headline, two photos, no hero buttons, and the roadmap + // caveats removed from the hero body. + expect(hero.eyebrow).toBe("The next evolution of the barcode"); + expect(hero.title).toBe("A barcode/QR code you can write by hand"); + const sub = hero.subline; + expect(sub.code).toBe("zz-Kathy-found-dog-zz"); + expect(sub.before + sub.code + sub.after).toBe( + "Barcodes use bars. QR codes use dots. zzThis uses everyday words. Just wrap your words in double z’s - like zz-Kathy-found-dog-zz - write it on anything with a marker, and scan it to open its digital record. The “zz” ends tell our scanner exactly where to look, just like the three corner dots on a QR code.", + ); + const { before, code, after } = hero.paragraph; + expect(before + code + after).toBe( + "zzThis is a human-readable, human-writable code for the physical world. Write a zz-code on tape, a crate, a parcel, an envelope, or a sign, or embed it in text or program code. zzThis makes things readable-writable-smart.", + ); + expect(code).toBe("zz-code"); + expect(hero.photos.map((photo) => photo.src)).toEqual([ + "images/hero/kathy-corkboard.webp", + "images/hero/kathy-phone-record.webp", + ]); + // [MICHAEL 2026-10-15] Buttons restored, How it works first. + expect(hero.actions.map((action) => action.label)).toEqual([ + "How it works", + "See field logistics", + ]); + }); + + it("matches the consumer how-it-works block", () => { + expect(consumerHow.eyebrow).toBe("Physical-to-digital addressing"); + expect(consumerHow.heading).toBe("Skip the printer. Grab a marker."); + expect(consumerHow.steps.map((step) => step.title)).toEqual([ + "Create it.", + "Write it.", + "Look it up.", + ]); + }); + + it("matches the featured statement", () => { + expect(featured.heading).toBe( + "The shortest, smartest distance between a physical thing, its digital record, and the work that comes next.", + ); + expect(featured.text).toBe( + "A zz code gives people a way to create the mark themselves, wherever the work happens. Future AI-assisted workflows could help identify what a camera sees, count what remains, suggest how an item should be handled, and prepare the next task; those capabilities are explorations, not shipped v1 behavior. The same visible code connects the item, its history, and the people responsible for it. It bridges physical things and their digital control. AI may serve as an interface and connector, not as the authority that defines or resolves a zz code.", + ); + }); +});