@dloizides/marketing-astro-kit 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 1.2.0
+
+- New `DemoFrame.astro` — a themeable, **client-side "try it" demo** shell for
+  static marketing sites (no backend): an eyebrow/title/intro, a row of clickable
+  example chips, a per-example result panel (bespoke product body injected via a
+  named slot `result-<example.id>`), a clearly-visible "sample data" disclaimer,
+  and a primary CTA (reuses `PrimaryCta`). Tiny inline vanilla JS toggles which
+  result shows on chip click (+ arrow-key roving tablist); the first example is
+  visible without JS (progressive enhancement). New `DemoExample` / `DemoFrameData`
+  types in `schema.ts`.
+- New `GuideCard.astro` — a themeable card for a **guides / SEO content-hub**
+  listing, rendering one guide's tags, title, description and date. New
+  `GuideCardData` type.
+- New `guideFrontmatterSchema` (Zod, built on `astro/zod`) + `GuideFrontmatter`
+  type in `schema.ts` — plug straight into an Astro content collection
+  (`defineCollection({ loader: glob(...), schema: guideFrontmatterSchema })`) so
+  every product's guides validate the same shape (title, description, slug?,
+  publishDate, updatedDate?, tags, ogImage?, canonical?, draft?). The article
+  page + routes + JSON-LD stay product-owned.
+- `schema.ts` now imports `z` from `astro/zod` (Astro is already a peer dep) —
+  the ONE runtime import; every other export stays plain types.
+
+## 1.1.0
+
+- New `PrimaryCta.astro` — a themeable primary call-to-action (link OR spam-safe
+  contact) with an optional secondary CTA and a `tone: 'light' | 'dark'` for
+  dark bands. Renders a `MarketingCta` so link-vs-lead-capture + analytics wiring
+  is no longer hand-coded per page.
+- New `buildPrimaryCta(opts)` helper + `PrimaryCtaOptions` in `schema.ts`: drive
+  a primary CTA from ONE `SIGNUP_URL` constant — a real signup link when set,
+  spam-safe lead-capture when `null` (flip at GA with no template change).
+- `ctaAttrs()` promoted from `PricingComparison.astro` into `schema.ts` and now
+  shared by every CTA-rendering component (no duplication).
+- `TrustSection` gains three optional, guarded fields (existing sites
+  unaffected): `foundingPartner` ("first N free during beta" panel),
+  `founder` (honest one-line credibility) and `sampleDeliverable` (a "here's the
+  actual report you get" showcase — image, or a `slot="sample-deliverable"` for
+  bespoke mock markup while the section chrome stays shared).
+
 ## 1.0.0
 
 - Initial release. `PricingComparison.astro` (Free-vs-Pro comparison table with

package/README.md

@@ -1,12 +1,69 @@
 # @dloizides/marketing-astro-kit
 
-Two reusable, **themeable** Astro marketing sections for product sites — the
-credibility markers an executive scans for before they trust a SaaS:
+Reusable, **themeable** Astro marketing sections for product sites — the
+credibility + conversion markers an executive scans for before they trust a SaaS:
 
 | Component | What it is |
 |---|---|
 | `PricingComparison.astro` | A clean **Free-vs-Pro(-vs-Business…) comparison table** — tier columns with price + CTA header, grouped feature rows (check / cross / short value), an optional footnote and an optional one-time "callout" card (e.g. a concierge/service tier). |
-| `TrustSection.astro` | A **trust / credibility** block — security & compliance cards with inline icons, a customer-logo row (real + clearly-labeled **placeholders**), testimonial cards (clearly-labeled **placeholders**), and a discreet **built-by** line. |
+| `TrustSection.astro` | A **trust / credibility** block — security & compliance cards with inline icons, a customer-logo row (real + clearly-labeled **placeholders**), testimonial cards (clearly-labeled **placeholders**), an optional **founding-partner** panel, an honest **founder** line, a **sample-deliverable** showcase, and a discreet **built-by** line. |
+| `PrimaryCta.astro` | A themeable **primary call-to-action** (link OR spam-safe contact) with an optional secondary CTA. Pair with `buildPrimaryCta` so ONE `SIGNUP_URL` constant drives whether it's a real signup link or lead-capture. |
+| `DemoFrame.astro` | A themeable, **client-side "try it" demo** shell for static sites (no backend): eyebrow/title/intro, a row of clickable example chips, a per-example result panel (bespoke product body via a named `result-<id>` slot), a "sample data" disclaimer, and a primary CTA. Tiny inline vanilla JS toggles which result shows; first example visible without JS. |
+| `GuideCard.astro` | A themeable **card for a guides / SEO content-hub** listing — one guide's tags, title, description and date. Pair with `guideFrontmatterSchema` on an Astro content collection. |
+
+## Config-driven primary CTA (`PrimaryCta` + `buildPrimaryCta`)
+
+Instead of hand-coding "is this a link to the app or a lead-capture mailto?" per
+page (with "flip to APP_URL at GA" TODO comments), hold ONE `SIGNUP_URL`
+constant and let the CTA switch itself:
+
+```ts
+// src/data/site.ts
+export const SIGNUP_URL: string | null = null; // null → app not public yet → lead-capture
+```
+
+```ts
+// src/data/marketing.ts
+import { buildPrimaryCta } from '@marketing-kit/schema';
+import { SIGNUP_URL } from './site';
+
+export const primaryCta = buildPrimaryCta({
+  signupUrl: SIGNUP_URL,          // set → real link ("Start free"); null → contact
+  linkLabel: 'Start free',
+  contactLabel: 'Request early access',
+  contact: { local: 'hello', domain: 'example.com' },
+  analyticsEvent: 'cta_primary',
+  analyticsData: { location: 'hero' },
+});
+```
+
+```astro
+---
+import PrimaryCta from '@marketing-kit/PrimaryCta.astro';
+import { primaryCta, secondaryCta } from '../data/marketing';
+---
+<PrimaryCta cta={primaryCta} secondary={secondaryCta} />              <!-- on light -->
+<PrimaryCta cta={primaryCta} secondary={secondaryCta} tone="dark" align="center" />  <!-- on a dark band -->
+```
+
+Flip `SIGNUP_URL` from `null` to a real URL (e.g. at GA) and every primary CTA
+becomes a real "Start free" link — no template change. Contact CTAs still rely on
+the host page's `[data-contact]` reveal handler.
+
+## Founding-partner / founder / sample-deliverable (`TrustSection` extras)
+
+All three `TrustSectionData` fields are optional and render behind guards —
+omitting them = the previous behaviour. The sample-deliverable accepts an
+`image`, OR a product can inject bespoke mock markup via a named slot while the
+eyebrow/title/caption chrome stays shared:
+
+```astro
+<TrustSection data={trust} id="trust">
+  <Fragment slot="sample-deliverable">
+    <!-- your bespoke mock report / screenshot markup -->
+  </Fragment>
+</TrustSection>
+```
 
 Both are **data-driven** (one typed object per section, see [`src/schema.ts`](./src/schema.ts))
 and **themed entirely through the host site's CSS custom properties** — drop them
@@ -17,6 +74,93 @@ hooks → Lighthouse-light.
 Extracted from `kefi-marketing` as the 2nd genuine use (per the "extract on the
 second use" rule); the Astro marketing sites otherwise share no code.
 
+## Client-side "try it" demo (`DemoFrame`)
+
+Static marketing sites (nginx, no backend) can still offer an interactive demo —
+`DemoFrame` renders the shared chrome around **curated, clearly-labelled sample
+data** that runs entirely in the browser. The frame owns the eyebrow/title/intro,
+the clickable example chips, a "sample data" disclaimer and the primary CTA; each
+product injects its own bespoke **result body per example** through a named slot
+(`result-<example.id>`), because that markup mirrors the product's real output:
+
+```ts
+// src/data/marketing.ts
+import type { DemoFrameData } from '@marketing-kit/schema';
+export const demo: DemoFrameData = {
+  eyebrow: 'See it in action',
+  title: 'Screen a wallet — watch the verdict',
+  examples: [
+    { id: 'flagged', label: '0x…illustrative', sublabel: 'Sanctioned' },
+    { id: 'clean',   label: 'Clean wallet',     sublabel: 'No matches' },
+  ],
+  disclaimer: 'Sample results on example wallets. Create a free account to screen any address.',
+  cta: primaryCta, // a MarketingCta driving to signup
+};
+```
+
+```astro
+---
+import DemoFrame from '@marketing-kit/DemoFrame.astro';
+import { demo } from '../data/marketing';
+---
+<DemoFrame data={demo} id="demo">
+  <!-- One panel per example, keyed by data-demo-result (matching an example id).
+       Mark the FIRST panel data-active so it shows without JS. -->
+  <div data-demo-result="flagged" data-active
+       id="demo-panel-flagged" role="tabpanel" aria-labelledby="demo-chip-flagged">
+    <!-- bespoke high-risk result mock -->
+  </div>
+  <div data-demo-result="clean"
+       id="demo-panel-clean" role="tabpanel" aria-labelledby="demo-chip-clean">
+    <!-- bespoke low-risk result mock -->
+  </div>
+</DemoFrame>
+```
+
+Astro forbids a dynamic `slot[name]`, so panels are routed through the default
+slot and keyed by a `data-demo-result` attribute (matching an example `id`)
+rather than named slots. The frame's chip ids are `<id>-chip-<exampleId>` and it
+wires `aria-controls` to `<id>-panel-<exampleId>`, so give each host panel
+`id="<id>-panel-<exampleId>"` + `aria-labelledby="<id>-chip-<exampleId>"`. The
+**first panel (`data-active`) is visible without JS** — the inline script only
+moves the active panel on chip click (and arrow-key roving for the tablist). Keep
+the result copy honest: real, public example data or an obviously-illustrative
+placeholder, never a fabricated claim.
+
+## SEO guides / content hub (`GuideCard` + `guideFrontmatterSchema`)
+
+A shared pattern for a product's guides flywheel: the kit supplies the **Zod
+frontmatter schema** (plug into an Astro content collection) and the **card** for
+the hub; the routes, article layout and JSON-LD stay product-owned.
+
+```ts
+// src/content.config.ts
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { guideFrontmatterSchema } from '@marketing-kit/schema';
+
+const guides = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/content/guides' }),
+  schema: guideFrontmatterSchema,
+});
+export const collections = { guides };
+```
+
+```astro
+---
+// src/pages/guides/index.astro
+import { getCollection } from 'astro:content';
+import GuideCard from '@marketing-kit/GuideCard.astro';
+const guides = (await getCollection('guides', ({ data }) => !data.draft))
+  .sort((a, b) => +b.data.publishDate - +a.data.publishDate);
+---
+{guides.map((g) => <GuideCard data={{ ...g.data, href: `/guides/${g.id}/` }} />)}
+```
+
+`guideFrontmatterSchema` fields: `title`, `description`, `slug?`, `publishDate`,
+`updatedDate?`, `tags`, `ogImage?`, `canonical?`, `draft?`. It is built on
+`astro/zod`, so it is the same zod instance Astro's content layer uses.
+
 ## Theming contract
 
 The components read these CSS vars off the host `:root` (each has a sensible

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@dloizides/marketing-astro-kit",
-  "version": "1.0.1",
-  "description": "Reusable, themeable Astro marketing sections for product sites — a Free-vs-Pro pricing comparison table and a trust / credibility section (security cards, customer-logo + testimonial placeholders, discreet built-by). Data-driven via a shared TypeScript schema; themed entirely through the host site's CSS custom properties.",
+  "version": "1.2.0",
+  "description": "Reusable, themeable Astro marketing sections for product sites — a Free-vs-Pro pricing comparison table, a trust / credibility section (security cards, customer-logo + testimonial placeholders, discreet built-by), a client-side \"try it\" demo shell, and an SEO guides/content-hub card + frontmatter schema. Data-driven via a shared TypeScript schema; themed entirely through the host site's CSS custom properties.",
   "keywords": [
     "astro",
     "marketing",
     "pricing",
     "comparison-table",
     "trust",
+    "demo",
+    "guides",
+    "content-hub",
+    "seo",
     "landing-page",
     "saas"
   ],
@@ -26,6 +30,9 @@
   "exports": {
     "./PricingComparison.astro": "./src/PricingComparison.astro",
     "./TrustSection.astro": "./src/TrustSection.astro",
+    "./PrimaryCta.astro": "./src/PrimaryCta.astro",
+    "./DemoFrame.astro": "./src/DemoFrame.astro",
+    "./GuideCard.astro": "./src/GuideCard.astro",
     "./schema": "./src/schema.ts",
     "./icons": "./src/icons.ts"
   },

package/src/DemoFrame.astro

@@ -0,0 +1,264 @@
+---
+// Reusable interactive "try it" demo shell for product marketing sites — a
+// themeable chrome around client-side, curated example data. The marketing
+// sites are static (nginx, no backend), so the demo runs ENTIRELY in the
+// browser over honest, clearly-labelled sample data. This component owns the
+// shared parts:
+//
+//   • eyebrow / title / intro
+//   • a row of clickable example "chips"
+//   • a result-panel area — the host supplies one bespoke, product-owned panel
+//     per example in the default slot, each tagged `data-demo-result="<id>"`
+//     (matching an example id) and the FIRST one also `data-active`
+//   • a clearly-visible "sample data" disclaimer line
+//   • a primary CTA (reuses PrimaryCta) driving to signup
+//
+//   <DemoFrame data={demo}>
+//     <div data-demo-result="flagged" data-active
+//          id="demo-panel-flagged" role="tabpanel" aria-labelledby="demo-chip-flagged">
+//       …your bespoke high-risk result markup…
+//     </div>
+//     <div data-demo-result="clean"
+//          id="demo-panel-clean" role="tabpanel" aria-labelledby="demo-chip-clean">…</div>
+//   </DemoFrame>
+//
+// The per-example RESULT markup is inherently product-specific (it mirrors the
+// product's real output), so it comes in via the default slot (Astro forbids a
+// dynamic `slot[name]`, so panels are keyed by a `data-demo-result` attribute
+// instead) while the frame stays shared. The frame's chip ids are
+// `<id>-chip-<exampleId>` and it wires `aria-controls` to `<id>-panel-<exampleId>`,
+// so a host panel should use `id="<id>-panel-<exampleId>"` +
+// `aria-labelledby="<id>-chip-<exampleId>"`. Minimal inline vanilla JS toggles
+// which panel shows on chip click — no framework. Progressive enhancement: the
+// FIRST panel (`data-active`) is visible without JS; the script just moves it.
+import type { DemoFrameData } from './schema';
+import PrimaryCta from './PrimaryCta.astro';
+
+interface Props {
+  data: DemoFrameData;
+  id?: string;
+}
+
+const { data, id = 'demo' } = Astro.props as Props;
+const { examples } = data;
+---
+
+<section class="dmk-demo" id={id} aria-labelledby={`${id}-title`} data-demo-frame>
+  <div class="dmk-container">
+    <p class="dmk-eyebrow" data-reveal>{data.eyebrow}</p>
+    <h2 class="dmk-title" id={`${id}-title`} data-reveal>{data.title}</h2>
+    {data.intro && <p class="dmk-intro" data-reveal>{data.intro}</p>}
+
+    <div class="dmk-panel" data-reveal>
+      <div class="dmk-chips" role="tablist" aria-label="Example inputs">
+        {examples.map((ex, i) => (
+          <button
+            type="button"
+            class="dmk-chip"
+            role="tab"
+            id={`${id}-chip-${ex.id}`}
+            aria-controls={`${id}-panel-${ex.id}`}
+            aria-selected={i === 0 ? 'true' : 'false'}
+            tabindex={i === 0 ? '0' : '-1'}
+            data-demo-chip={ex.id}
+            data-active={i === 0 ? '' : undefined}
+            data-umami-event={ex.analyticsEvent}
+          >
+            <span class="dmk-chip__label">{ex.label}</span>
+            {ex.sublabel && <span class="dmk-chip__sub">{ex.sublabel}</span>}
+          </button>
+        ))}
+      </div>
+
+      <div class="dmk-results">
+        <slot />
+      </div>
+
+      <p class="dmk-disclaimer" data-reveal>
+        <span class="dmk-disclaimer__dot" aria-hidden="true"></span>
+        {data.disclaimer}
+      </p>
+
+      <div class="dmk-cta" data-reveal>
+        <PrimaryCta cta={data.cta} secondary={data.secondaryCta} size="md" />
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Chip → result toggle for every DemoFrame on the page. Progressive
+  // enhancement: without JS the CSS already shows the first ([data-active])
+  // result; this just moves `data-active` on click (and arrow-key roving so the
+  // tablist is keyboard-navigable).
+  document.querySelectorAll('[data-demo-frame]').forEach((frame) => {
+    const chips = Array.from(frame.querySelectorAll('[data-demo-chip]'));
+    const results = Array.from(frame.querySelectorAll('[data-demo-result]'));
+
+    const activate = (key) => {
+      chips.forEach((chip) => {
+        const on = chip.getAttribute('data-demo-chip') === key;
+        chip.toggleAttribute('data-active', on);
+        chip.setAttribute('aria-selected', on ? 'true' : 'false');
+        chip.setAttribute('tabindex', on ? '0' : '-1');
+      });
+      results.forEach((result) => {
+        result.toggleAttribute('data-active', result.getAttribute('data-demo-result') === key);
+      });
+    };
+
+    chips.forEach((chip, index) => {
+      chip.addEventListener('click', () => activate(chip.getAttribute('data-demo-chip')));
+      chip.addEventListener('keydown', (event) => {
+        const delta = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (!delta) return;
+        event.preventDefault();
+        const next = chips[(index + delta + chips.length) % chips.length];
+        activate(next.getAttribute('data-demo-chip'));
+        next.focus();
+      });
+    });
+  });
+</script>
+
+<style>
+  .dmk-demo {
+    --_brand: var(--brand, #d8332a);
+    --_brand-deep: var(--brand-deep, #a8231c);
+    --_accent: var(--accent, #f5a300);
+    --_ink: var(--ink, #0a0a1f);
+    --_paper: var(--paper, #fff);
+    --_bg: var(--bg, #fbf9f4);
+    --_bg-tint: var(--bg-tint, #f1ede1);
+    --_muted: var(--muted, rgba(10, 10, 31, 0.62));
+    --_hairline: var(--hairline, rgba(10, 10, 31, 0.1));
+    --_r-md: var(--radius-md, 14px);
+    --_r-lg: var(--radius-lg, 24px);
+    --_shadow: var(--shadow, 0 30px 60px -30px rgba(10, 10, 31, 0.4));
+    padding: 96px 0;
+    background: var(--_paper);
+    border-top: 1px solid var(--_hairline);
+    border-bottom: 1px solid var(--_hairline);
+  }
+  .dmk-container {
+    width: min(1200px, 100% - 48px);
+    margin-inline: auto;
+  }
+  .dmk-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--_brand);
+    margin: 0;
+  }
+  .dmk-title {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: clamp(30px, 3.8vw, 46px);
+    font-weight: 700;
+    line-height: 1.08;
+    letter-spacing: -0.01em;
+    margin: 12px 0 14px;
+    max-width: 24ch;
+    color: var(--_ink);
+  }
+  .dmk-intro {
+    color: var(--_muted);
+    max-width: 62ch;
+    margin: 0 0 36px;
+  }
+
+  /* Panel --------------------------------------------------------------- */
+  .dmk-panel {
+    padding: 26px;
+    border-radius: var(--_r-lg);
+    background: var(--_bg);
+    border: 1px solid var(--_hairline);
+  }
+  @media (max-width: 560px) {
+    .dmk-panel { padding: 18px; }
+    .dmk-demo { padding: 64px 0; }
+  }
+
+  /* Chips (tablist) ----------------------------------------------------- */
+  .dmk-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 22px;
+  }
+  .dmk-chip {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    padding: 11px 16px;
+    border-radius: var(--_r-md);
+    background: var(--_paper);
+    border: 1px solid var(--_hairline);
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease,
+      background 0.14s ease;
+  }
+  .dmk-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--_brand) 40%, var(--_hairline)); }
+  .dmk-chip:focus-visible { outline: 2px solid var(--_brand); outline-offset: 2px; }
+  .dmk-chip[data-active] {
+    border-color: var(--_brand);
+    background: color-mix(in srgb, var(--_brand) 8%, var(--_paper));
+    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--_brand) 80%, transparent);
+  }
+  .dmk-chip__label {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.01em;
+    color: var(--_ink);
+  }
+  .dmk-chip__sub {
+    font-size: 11.5px;
+    color: var(--_muted);
+  }
+
+  /* Results ------------------------------------------------------------- */
+  /* The panels are host-supplied slot content, so the show/hide toggle is
+     :global (keyed by data attributes) to reach across the slot boundary; it
+     stays scoped under .dmk-results so it can't leak to the wider page. */
+  .dmk-results { min-height: 10px; }
+  .dmk-results :global([data-demo-result]) { display: none; }
+  .dmk-results :global([data-demo-result][data-active]) {
+    display: block;
+    animation: dmk-fade 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+  @keyframes dmk-fade {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .dmk-results :global([data-demo-result][data-active]) { animation: none; }
+  }
+
+  /* Disclaimer ---------------------------------------------------------- */
+  .dmk-disclaimer {
+    display: flex;
+    align-items: baseline;
+    gap: 9px;
+    margin: 22px 0 0;
+    font-size: 12.5px;
+    line-height: 1.5;
+    color: var(--_muted);
+    font-style: italic;
+  }
+  .dmk-disclaimer__dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--_accent);
+    transform: translateY(1px);
+  }
+
+  .dmk-cta { margin-top: 22px; }
+</style>

package/src/GuideCard.astro

@@ -0,0 +1,132 @@
+---
+// Reusable card for a guides / content-hub listing on a product marketing site.
+// Renders ONE guide's title, description, tags and date as a themeable link
+// card. Data-driven (schema.ts → GuideCardData); themed via host CSS vars.
+// Framework-free, no images → Lighthouse-light.
+//
+//   {guides.map((g) => <GuideCard data={{ ...g.data, href: `/guides/${g.id}/` }} />)}
+//
+// Pair with `guideFrontmatterSchema` (schema.ts) on the host's Astro content
+// collection so every product's hub validates + renders alike; the article
+// page + routes stay product-owned.
+import type { GuideCardData } from './schema';
+
+interface Props {
+  data: GuideCardData;
+}
+
+const { data } = Astro.props as Props;
+
+// Accept a Date (from the content collection) or a preformatted string. When a
+// Date, format it to a stable, locale-neutral "14 Jul 2026" and emit a machine
+// <time datetime> for the ISO value (good for SEO + a11y).
+const toDate = (value: Date | string): Date | null => {
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+const published = toDate(data.publishDate);
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const dateLabel = published
+  ? `${published.getUTCDate()} ${MONTHS[published.getUTCMonth()]} ${published.getUTCFullYear()}`
+  : typeof data.publishDate === 'string'
+    ? data.publishDate
+    : '';
+const dateIso = published ? published.toISOString().slice(0, 10) : undefined;
+const tags = data.tags ?? [];
+---
+
+<a class="gmk-card" href={data.href}>
+  {tags.length > 0 && (
+    <div class="gmk-tags">
+      {tags.slice(0, 3).map((tag) => <span class="gmk-tag">{tag}</span>)}
+    </div>
+  )}
+  <h3 class="gmk-card-t">{data.title}</h3>
+  <p class="gmk-card-d">{data.description}</p>
+  <div class="gmk-card-foot">
+    {dateLabel && <time class="gmk-date" datetime={dateIso}>{dateLabel}</time>}
+    <span class="gmk-go" aria-hidden="true">Read →</span>
+  </div>
+</a>
+
+<style>
+  .gmk-card {
+    --_brand: var(--brand, #d8332a);
+    --_brand-deep: var(--brand-deep, #a8231c);
+    --_ink: var(--ink, #0a0a1f);
+    --_paper: var(--paper, #fff);
+    --_bg: var(--bg, #fbf9f4);
+    --_bg-tint: var(--bg-tint, #f1ede1);
+    --_muted: var(--muted, rgba(10, 10, 31, 0.62));
+    --_hairline: var(--hairline, rgba(10, 10, 31, 0.1));
+    --_r-md: var(--radius-md, 14px);
+    --_shadow: var(--shadow, 0 30px 60px -30px rgba(10, 10, 31, 0.4));
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 24px 22px;
+    border-radius: var(--_r-md);
+    background: var(--_paper);
+    border: 1px solid var(--_hairline);
+    text-decoration: none;
+    color: inherit;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  }
+  .gmk-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--_shadow);
+    border-color: transparent;
+  }
+  .gmk-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .gmk-tag {
+    font-family: 'Oswald', sans-serif;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--_brand-deep);
+    background: color-mix(in srgb, var(--_brand) 10%, transparent);
+    padding: 4px 9px;
+    border-radius: 999px;
+  }
+  .gmk-card-t {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: 19px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 2px 0 0;
+    color: var(--_ink);
+  }
+  .gmk-card-d {
+    color: var(--_muted);
+    font-size: 14.5px;
+    line-height: 1.5;
+    margin: 0;
+    flex-grow: 1;
+  }
+  .gmk-card-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 6px;
+    padding-top: 12px;
+    border-top: 1px solid var(--_hairline);
+  }
+  .gmk-date {
+    font-size: 12.5px;
+    color: var(--_muted);
+  }
+  .gmk-go {
+    font-family: 'Oswald', sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--_brand-deep);
+  }
+  .gmk-card:hover .gmk-go { color: var(--_brand); }
+</style>

package/src/PricingComparison.astro

@@ -7,7 +7,11 @@
 //
 // The host page must provide the `[data-contact]` mailto-reveal handler for any
 // CTA with `kind: 'contact'` (the scaffold + kefi-marketing already do).
-import type { MarketingCta, PricingComparisonData } from './schema';
+//
+// `ctaAttrs` (link vs spam-safe contact + analytics wiring) is shared from
+// schema.ts so PrimaryCta.astro renders CTAs identically.
+import type { PricingComparisonData } from './schema';
+import { ctaAttrs } from './schema';
 
 interface Props {
   data: PricingComparisonData;
@@ -16,24 +20,6 @@ interface Props {
 
 const { data, id = 'pricing' } = Astro.props as Props;
 
-/** Build the html attributes for a CTA anchor (link or spam-safe contact). */
-function ctaAttrs(cta: MarketingCta): Record<string, string> {
-  const attrs: Record<string, string> = {};
-  if (cta.kind === 'contact' && cta.contact) {
-    attrs.href = '#';
-    attrs['data-contact'] = '';
-    attrs['data-local'] = cta.contact.local;
-    attrs['data-domain'] = cta.contact.domain;
-  } else {
-    attrs.href = cta.href;
-  }
-  if (cta.analyticsEvent) attrs['data-umami-event'] = cta.analyticsEvent;
-  for (const [k, v] of Object.entries(cta.analyticsData ?? {})) {
-    attrs[`data-umami-event-${k}`] = v;
-  }
-  return attrs;
-}
-
 const { tiers, groups } = data;
 ---
 

package/src/PrimaryCta.astro

@@ -0,0 +1,138 @@
+---
+// Reusable primary call-to-action for product marketing sites — renders a
+// `MarketingCta` (link OR spam-safe contact) as a themeable button, with an
+// optional secondary CTA beside it. One component for every "primary action"
+// on a site (hero, closing band …) so the link-vs-lead-capture + analytics
+// wiring is never hand-coded per page.
+//
+//   <PrimaryCta cta={primary} secondary={secondary} />
+//
+// Pair it with `buildPrimaryCta` (schema.ts): the site holds ONE `SIGNUP_URL`
+// constant and the CTA auto-switches between a real signup link (app is live)
+// and lead-capture contact (app not public yet) — no template change.
+//
+// Zero runtime JS of its own: `kind: 'contact'` CTAs render the same
+// `[data-contact]`/`data-local`/`data-domain` pattern the host page's existing
+// contact-reveal handler assembles on click. Themed via host CSS custom props.
+import type { MarketingCta } from './schema';
+import { ctaAttrs } from './schema';
+
+interface Props {
+  /** Primary CTA (link or contact). */
+  cta: MarketingCta;
+  /** Optional secondary CTA rendered beside the primary. */
+  secondary?: MarketingCta;
+  /** Button size. */
+  size?: 'md' | 'lg';
+  /** Horizontal alignment of the button group. */
+  align?: 'start' | 'center';
+  /** Set 'dark' when the CTA sits on a dark band so the ghost secondary stays
+   *  legible (light text + translucent border). Defaults to 'light'. */
+  tone?: 'light' | 'dark';
+  id?: string;
+}
+
+const {
+  cta,
+  secondary,
+  size = 'lg',
+  align = 'start',
+  tone = 'light',
+  id,
+} = Astro.props as Props;
+---
+
+<div
+  class={`tmk-cta-group tmk-cta-group--${align} tmk-cta-group--${tone}`}
+  id={id}
+  data-reveal
+>
+  <a class={`tmk-btn tmk-btn--primary tmk-btn--${size}`} {...ctaAttrs(cta)}>
+    {cta.label} <span class="tmk-btn__arrow" aria-hidden="true">→</span>
+  </a>
+  {secondary && (
+    <a class={`tmk-btn tmk-btn--ghost tmk-btn--${size}`} {...ctaAttrs(secondary)}>
+      {secondary.label}
+    </a>
+  )}
+</div>
+
+<style>
+  .tmk-cta-group {
+    --_brand: var(--brand, #d8332a);
+    --_brand-deep: var(--brand-deep, #a8231c);
+    --_ink: var(--ink, #0a0a1f);
+    --_paper: var(--paper, #fff);
+    --_hairline: var(--hairline, rgba(10, 10, 31, 0.1));
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .tmk-cta-group--center {
+    justify-content: center;
+  }
+
+  .tmk-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 14px 22px;
+    border-radius: 999px;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: 0.01em;
+    border: 1px solid transparent;
+    cursor: pointer;
+    text-decoration: none;
+    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease,
+      color 0.12s ease, border-color 0.12s ease;
+  }
+  .tmk-btn:hover {
+    transform: translateY(-1px);
+  }
+  .tmk-btn--lg {
+    padding: 16px 28px;
+    font-size: 16px;
+  }
+  .tmk-btn__arrow {
+    transition: transform 0.12s ease;
+  }
+  .tmk-btn:hover .tmk-btn__arrow {
+    transform: translateX(3px);
+  }
+
+  /* Primary — solid brand. */
+  .tmk-btn--primary {
+    background: var(--_brand-deep);
+    color: var(--_paper);
+    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--_brand) 70%, transparent);
+  }
+  .tmk-btn--primary:hover {
+    background: var(--_brand);
+  }
+
+  /* Ghost secondary — on light. */
+  .tmk-btn--ghost {
+    background: transparent;
+    color: var(--_ink);
+    border-color: color-mix(in srgb, var(--_ink) 18%, transparent);
+  }
+  .tmk-btn--ghost:hover {
+    background: var(--_ink);
+    color: var(--_paper);
+    border-color: var(--_ink);
+  }
+
+  /* Ghost secondary — on a dark band. */
+  .tmk-cta-group--dark .tmk-btn--ghost {
+    color: var(--_paper);
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+  .tmk-cta-group--dark .tmk-btn--ghost:hover {
+    background: var(--_paper);
+    color: var(--_ink);
+    border-color: var(--_paper);
+  }
+</style>

package/src/TrustSection.astro

@@ -8,6 +8,7 @@
 //
 //   <TrustSection data={trust} id="trust" />
 import type { TrustSectionData } from './schema';
+import { ctaAttrs } from './schema';
 import { TRUST_ICONS } from './icons';
 
 interface Props {
@@ -16,6 +17,11 @@ interface Props {
 }
 
 const { data, id = 'trust' } = Astro.props as Props;
+
+// A product can inject bespoke mock markup for the sample-deliverable showcase
+// via <TrustSection><Fragment slot="sample-deliverable">…</Fragment></TrustSection>
+// while the eyebrow/title/caption chrome stays shared.
+const hasSampleSlot = Astro.slots.has('sample-deliverable');
 ---
 
 <section class="tmk-trust" id={id} aria-labelledby={`${id}-title`}>
@@ -34,6 +40,23 @@ const { data, id = 'trust' } = Astro.props as Props;
       ))}
     </div>
 
+    {data.sampleDeliverable && (
+      <div class="tmk-sample" data-reveal>
+        <div class="tmk-sample-copy">
+          <p class="tmk-sample-eyebrow">{data.sampleDeliverable.eyebrow}</p>
+          <h3 class="tmk-sample-t">{data.sampleDeliverable.title}</h3>
+          <p class="tmk-sample-cap">{data.sampleDeliverable.caption}</p>
+        </div>
+        <div class="tmk-sample-media">
+          {hasSampleSlot ? (
+            <slot name="sample-deliverable" />
+          ) : data.sampleDeliverable.image ? (
+            <img class="tmk-sample-img" src={data.sampleDeliverable.image} alt={data.sampleDeliverable.title} loading="lazy" />
+          ) : null}
+        </div>
+      </div>
+    )}
+
     {data.logos && (
       <div class="tmk-logos" data-reveal>
         <p class="tmk-logos-label">{data.logos.label}</p>
@@ -71,6 +94,45 @@ const { data, id = 'trust' } = Astro.props as Props;
       </div>
     )}
 
+    {data.foundingPartner && (
+      <aside class="tmk-founding" data-reveal>
+        <div class="tmk-founding-body">
+          <p class="tmk-founding-eyebrow">{data.foundingPartner.eyebrow}</p>
+          <h3 class="tmk-founding-t">{data.foundingPartner.title}</h3>
+          <p class="tmk-founding-b">{data.foundingPartner.body}</p>
+          <ul class="tmk-founding-perks">
+            {data.foundingPartner.perks.map((perk) => <li>{perk}</li>)}
+          </ul>
+        </div>
+        {data.foundingPartner.cta && (
+          <a class="tmk-founding-cta" {...ctaAttrs(data.foundingPartner.cta)}>
+            {data.foundingPartner.cta.label}
+          </a>
+        )}
+      </aside>
+    )}
+
+    {data.founder && (
+      <figure class="tmk-founder" data-reveal>
+        {data.founder.avatar ? (
+          <img class="tmk-founder-av" src={data.founder.avatar} alt={data.founder.name ?? 'Founder'} loading="lazy" />
+        ) : (
+          <span class="tmk-founder-av tmk-founder-av--ph" aria-hidden="true">
+            {(data.founder.name ?? '·').trim().charAt(0)}
+          </span>
+        )}
+        <figcaption class="tmk-founder-cap">
+          <p class="tmk-founder-line">{data.founder.line}</p>
+          {(data.founder.name || data.founder.role) && (
+            <p class="tmk-founder-cite">
+              {data.founder.name && <span class="tmk-founder-name">{data.founder.name}</span>}
+              {data.founder.role && <span class="tmk-founder-role">{data.founder.role}</span>}
+            </p>
+          )}
+        </figcaption>
+      </figure>
+    )}
+
     {data.builtBy && (
       <p class="tmk-builtby" data-reveal>
         {data.builtBy.label}
@@ -262,6 +324,180 @@ const { data, id = 'trust' } = Astro.props as Props;
     font-style: italic;
   }
 
+  /* Sample deliverable -------------------------------------------------- */
+  .tmk-sample {
+    margin-top: 52px;
+    display: grid;
+    grid-template-columns: 0.92fr 1.08fr;
+    gap: 34px;
+    align-items: center;
+    padding: 30px;
+    border-radius: var(--_r-lg);
+    background: var(--_bg);
+    border: 1px solid var(--_hairline);
+  }
+  @media (max-width: 860px) {
+    .tmk-sample { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
+  }
+  .tmk-sample-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--_brand);
+    margin: 0 0 8px;
+  }
+  .tmk-sample-t {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: clamp(20px, 2.4vw, 26px);
+    font-weight: 700;
+    line-height: 1.14;
+    margin: 0 0 10px;
+    color: var(--_ink);
+  }
+  .tmk-sample-cap { color: var(--_muted); margin: 0; font-size: 14.5px; }
+  .tmk-sample-media { min-width: 0; }
+  .tmk-sample-img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--_r-md);
+    border: 1px solid var(--_hairline);
+  }
+
+  /* Founding-partner panel ---------------------------------------------- */
+  .tmk-founding {
+    margin-top: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+    flex-wrap: wrap;
+    padding: 30px 32px;
+    border-radius: var(--_r-lg);
+    background: var(--_ink);
+    color: var(--_paper);
+    border: 1px solid var(--_ink);
+  }
+  .tmk-founding-body { flex: 1 1 420px; }
+  .tmk-founding-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--_accent);
+    margin: 0 0 8px;
+  }
+  .tmk-founding-t {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: clamp(22px, 2.6vw, 28px);
+    font-weight: 700;
+    line-height: 1.12;
+    margin: 0 0 10px;
+    color: var(--_paper);
+  }
+  .tmk-founding-b {
+    color: rgba(255, 255, 255, 0.78);
+    margin: 0 0 16px;
+    font-size: 14.5px;
+    max-width: 60ch;
+  }
+  .tmk-founding-perks {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px 22px;
+  }
+  @media (max-width: 560px) { .tmk-founding-perks { grid-template-columns: 1fr; } }
+  .tmk-founding-perks li {
+    position: relative;
+    padding-left: 22px;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 13.8px;
+  }
+  .tmk-founding-perks li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 7px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--_accent);
+  }
+  .tmk-founding-cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 14px 24px;
+    border-radius: 999px;
+    background: var(--_accent);
+    color: var(--_ink);
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 700;
+    font-size: 14.5px;
+    letter-spacing: 0.01em;
+    text-decoration: none;
+    border: 1px solid transparent;
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+    cursor: pointer;
+  }
+  .tmk-founding-cta:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6);
+  }
+
+  /* Founder line -------------------------------------------------------- */
+  .tmk-founder {
+    margin: 40px 0 0;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    max-width: 78ch;
+  }
+  .tmk-founder-av {
+    flex-shrink: 0;
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid var(--_hairline);
+  }
+  .tmk-founder-av--ph {
+    display: inline-grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--_brand) 12%, transparent);
+    color: var(--_brand);
+    font-family: 'Oswald', sans-serif;
+    font-weight: 700;
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+  .tmk-founder-cap { margin: 0; }
+  .tmk-founder-line {
+    margin: 0;
+    color: var(--_ink);
+    font-size: 15.5px;
+    line-height: 1.5;
+  }
+  .tmk-founder-cite { margin: 4px 0 0; }
+  .tmk-founder-name {
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    font-size: 13.5px;
+    color: var(--_ink);
+  }
+  .tmk-founder-role {
+    font-size: 12.5px;
+    color: var(--_muted);
+    margin-left: 8px;
+  }
+
   /* Built by ------------------------------------------------------------ */
   .tmk-builtby {
     margin: 48px 0 0;

package/src/schema.ts

@@ -1,13 +1,21 @@
 // Data schema for the marketing "pricing comparison" + "trust / credibility"
-// Astro sections. Framework-agnostic types — a product supplies its own typed
-// data object (see kefi-marketing/src/data/marketing.ts) and the two .astro
-// components render it. No product-specific values live here.
+// + "try-it demo" + "guides/content-hub" Astro sections. Framework-agnostic
+// types — a product supplies its own typed data object (see
+// kefi-marketing/src/data/marketing.ts) and the .astro components render it.
+// No product-specific values live here.
 //
 // Themeing is done entirely through CSS custom properties on the host site's
 // `:root` (--brand, --accent, --ink, --paper, --muted, --hairline, radii,
 // --shadow, and the Oswald/Inter font families). The components reference
 // those vars with sensible fallbacks, so a site drops them in and they inherit
 // its palette automatically.
+//
+// The `guideFrontmatterSchema` (bottom of file) is the ONE Zod import — built
+// on Astro's own bundled zod (`astro/zod`, an `astro` peer-dep subpath), so the
+// content collection a host site defines validates guide frontmatter with the
+// SAME zod instance Astro's content layer uses. Everything else is plain types.
+
+import { z } from 'astro/zod';
 
 // ── Pricing comparison ─────────────────────────────────────────────────────
 
@@ -29,6 +37,70 @@ export interface MarketingCta {
   analyticsData?: Record<string, string>;
 }
 
+/** Build the html attributes for a CTA anchor — a normal link, or the spam-safe
+ *  `[data-contact]` reveal pattern for `kind: 'contact'` (the host page's
+ *  existing handler assembles the mailto on click). Shared by every kit
+ *  component that renders a `MarketingCta` (PricingComparison, PrimaryCta …) so
+ *  the link/contact + analytics wiring lives in exactly one place. */
+export function ctaAttrs(cta: MarketingCta): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  if (cta.kind === 'contact' && cta.contact) {
+    attrs.href = '#';
+    attrs['data-contact'] = '';
+    attrs['data-local'] = cta.contact.local;
+    attrs['data-domain'] = cta.contact.domain;
+  } else {
+    attrs.href = cta.href;
+  }
+  if (cta.analyticsEvent) attrs['data-umami-event'] = cta.analyticsEvent;
+  for (const [k, v] of Object.entries(cta.analyticsData ?? {})) {
+    attrs[`data-umami-event-${k}`] = v;
+  }
+  return attrs;
+}
+
+/** Inputs for {@link buildPrimaryCta}: one config that auto-switches a primary
+ *  CTA between a real signup/app link and spam-safe lead-capture, driven purely
+ *  by whether the product's app is public yet. */
+export interface PrimaryCtaOptions {
+  /** The public signup / app URL. `null` (or empty) = the app is not public yet
+   *  → the CTA falls back to lead-capture contact. Flip this to a real URL (e.g.
+   *  at GA) and the CTA auto-switches to a real link — no template change. */
+  signupUrl?: string | null;
+  /** Button label once a signup URL exists (app is live), e.g. "Start free". */
+  linkLabel: string;
+  /** Button label while there's no signup URL (lead-capture), e.g. "Request early access". */
+  contactLabel: string;
+  /** Spam-safe contact used for the lead-capture fallback. */
+  contact: { local: string; domain: string };
+  analyticsEvent?: string;
+  analyticsData?: Record<string, string>;
+}
+
+/** Produce a {@link MarketingCta} that is a real signup link when `signupUrl`
+ *  is set, else a spam-safe lead-capture contact CTA. Lets a site model "flip to
+ *  APP_URL at GA" as data (one `SIGNUP_URL` constant) instead of hand-coding the
+ *  mode + leaving TODO comments in the markup. */
+export function buildPrimaryCta(opts: PrimaryCtaOptions): MarketingCta {
+  if (opts.signupUrl) {
+    return {
+      label: opts.linkLabel,
+      href: opts.signupUrl,
+      kind: 'link',
+      analyticsEvent: opts.analyticsEvent,
+      analyticsData: opts.analyticsData,
+    };
+  }
+  return {
+    label: opts.contactLabel,
+    href: '#',
+    kind: 'contact',
+    contact: opts.contact,
+    analyticsEvent: opts.analyticsEvent,
+    analyticsData: opts.analyticsData,
+  };
+}
+
 /** One tier column in the comparison table header. */
 export interface PricingTierColumn {
   /** Stable code (free | pro | business …). Used for live-price patching and
@@ -120,6 +192,38 @@ export interface BuiltByCredit {
   href: string;
 }
 
+/** A "founding-partner program" panel — turns the no-customers-yet gap into
+ *  exclusivity ("first N, free during beta"). Rendered only when supplied. */
+export interface FoundingPartnerPanel {
+  eyebrow: string;
+  title: string;
+  body: string;
+  /** What a founding partner gets (bullet list). */
+  perks: string[];
+  cta?: MarketingCta;
+}
+
+/** A short, HONEST founder credibility line. Keep it truthful + generic — do
+ *  NOT fabricate specific credentials, companies or certifications. */
+export interface FounderCredit {
+  name?: string;
+  role?: string;
+  /** The one-line credibility statement. */
+  line: string;
+  /** Optional avatar image URL (omit for an initials/monogram fallback). */
+  avatar?: string;
+}
+
+/** A "here's the actual deliverable you get" showcase slot. Supply `image` for
+ *  the fully-shared case; OR pass a `slot="sample-deliverable"` on the section
+ *  to inject bespoke mock markup while the section chrome stays shared. */
+export interface SampleDeliverable {
+  eyebrow: string;
+  title: string;
+  caption: string;
+  image?: string;
+}
+
 export interface TrustSectionData {
   eyebrow: string;
   title: string;
@@ -128,4 +232,98 @@ export interface TrustSectionData {
   logos?: { label: string; note?: string; items: LogoItem[] };
   testimonials?: { label: string; note?: string; items: Testimonial[] };
   builtBy?: BuiltByCredit;
+  /** Optional "first N free during beta" founding-partner panel. */
+  foundingPartner?: FoundingPartnerPanel;
+  /** Optional honest founder credibility line. */
+  founder?: FounderCredit;
+  /** Optional "the actual report you get" showcase (image or named slot). */
+  sampleDeliverable?: SampleDeliverable;
+}
+
+// ── Interactive "try it" demo (DemoFrame.astro) ─────────────────────────────
+// The marketing sites are static (nginx, no backend), so the demo is entirely
+// CLIENT-SIDE over curated example data — honest, and clearly labelled "sample".
+// DemoFrame renders the SHARED chrome (eyebrow/title/intro, a row of clickable
+// example chips, a result panel, a "sample data" disclaimer, a primary CTA);
+// each product injects its own bespoke RESULT body per example through a named
+// slot (`slot="result-<example.id>"`) so the result markup stays product-owned
+// while the shell is reused. Tiny inline vanilla JS toggles which result shows;
+// the first example is visible without JS (progressive enhancement).
+
+/** One selectable example in a {@link DemoFrameData}. `id` wires the chip to its
+ *  result body: the host passes `<Fragment slot="result-<id>">…</Fragment>`. */
+export interface DemoExample {
+  /** Stable id — must match the named slot `result-<id>` the host supplies, and
+   *  is used for the chip↔result toggle + analytics. No spaces. */
+  id: string;
+  /** Chip label (e.g. a masked sample wallet or "Clean wallet"). */
+  label: string;
+  /** Optional muted sub-label under the chip (e.g. an expected-verdict hint). */
+  sublabel?: string;
+  /** Optional Umami custom-event name fired when this chip is picked. */
+  analyticsEvent?: string;
+}
+
+export interface DemoFrameData {
+  eyebrow: string;
+  title: string;
+  /** Optional intro paragraph under the title. */
+  intro?: string;
+  /** The clickable examples, in display order. The first is shown by default
+   *  (and is the one visible when JS is off). */
+  examples: DemoExample[];
+  /** The clearly-visible "these are sample results" disclaimer line. */
+  disclaimer: string;
+  /** Primary CTA driving to signup (reuses the shared MarketingCta wiring). */
+  cta: MarketingCta;
+  /** Optional secondary CTA rendered beside the primary. */
+  secondaryCta?: MarketingCta;
+}
+
+// ── SEO guides / content-hub (GuideCard.astro + guideFrontmatterSchema) ──────
+// A shared pattern for a product's guides/content flywheel: the Zod frontmatter
+// schema a host site plugs into an Astro content collection, plus a themeable
+// card that renders one guide in a hub listing. The article page + collection
+// wiring stay product-owned (routes, layout, JSON-LD) — the kit supplies the
+// validated shape + the card so every product's hub looks and validates alike.
+
+/** Zod schema for a guide's frontmatter — plug straight into an Astro content
+ *  collection: `defineCollection({ loader: glob(...), schema: guideFrontmatterSchema })`.
+ *  Built on `astro/zod` so it is the same zod instance Astro's content layer
+ *  uses. `publishDate`/`updatedDate` are coerced from ISO strings to `Date`. */
+export const guideFrontmatterSchema = z.object({
+  /** Headline — also the <title>/OG title. */
+  title: z.string(),
+  /** Meta description + card blurb (~120–160 chars). */
+  description: z.string(),
+  /** Optional route slug override; when omitted the host uses the file id. */
+  slug: z.string().optional(),
+  /** Publication date (ISO string in frontmatter → Date). */
+  publishDate: z.coerce.date(),
+  /** Optional last-updated date. */
+  updatedDate: z.coerce.date().optional(),
+  /** Topic tags for the card + on-page chips. */
+  tags: z.array(z.string()).default([]),
+  /** Optional per-guide OG image URL (falls back to the site default). */
+  ogImage: z.string().optional(),
+  /** Optional canonical override (defaults to the guide's own URL). */
+  canonical: z.string().optional(),
+  /** Draft guides are excluded from the hub + routes. */
+  draft: z.boolean().default(false),
+});
+
+/** The inferred frontmatter type (a guide entry's `data`). */
+export type GuideFrontmatter = z.infer<typeof guideFrontmatterSchema>;
+
+/** Props for {@link GuideCard}: one guide's card fields + its resolved href.
+ *  A superset-compatible subset of {@link GuideFrontmatter} plus `href` so the
+ *  host maps `entry.data` + the route in one place. */
+export interface GuideCardData {
+  title: string;
+  description: string;
+  href: string;
+  tags?: string[];
+  /** Accepts a `Date` (from the collection) or a preformatted string. */
+  publishDate: Date | string;
+  updatedDate?: Date | string;
 }