@dloizides/marketing-astro-kit 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 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

@@ -6,7 +6,62 @@ credibility 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. |
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dloizides/marketing-astro-kit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "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.",
   "keywords": [
     "astro",
@@ -26,6 +26,7 @@
   "exports": {
     "./PricingComparison.astro": "./src/PricingComparison.astro",
     "./TrustSection.astro": "./src/TrustSection.astro",
+    "./PrimaryCta.astro": "./src/PrimaryCta.astro",
     "./schema": "./src/schema.ts",
     "./icons": "./src/icons.ts"
   },

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

@@ -29,6 +29,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 +184,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 +224,10 @@ 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;
 }