@dloizides/marketing-astro-kit 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 1.0.0
+
+- Initial release. `PricingComparison.astro` (Free-vs-Pro comparison table with
+  tier columns, grouped feature rows, optional footnote + one-time callout card)
+  and `TrustSection.astro` (security cards with inline icons, customer-logo row
+  with placeholders, testimonial placeholders, discreet built-by line).
+- Framework-agnostic data schema (`schema.ts`) + inline icon set (`icons.ts`).
+- Themed via host CSS custom properties with fallbacks; no image assets.
+- Extracted from `kefi-marketing` as the 2nd genuine use of the pricing/trust
+  sections across the Astro marketing sites.

package/README.md

@@ -0,0 +1,104 @@
+# @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:
+
+| 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. |
+
+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
+into any Astro marketing site and they inherit its palette automatically. No
+images, no runtime JS beyond the host's existing scroll-reveal + contact-reveal
+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.
+
+## Theming contract
+
+The components read these CSS vars off the host `:root` (each has a sensible
+fallback, so a site missing a token still renders):
+
+`--brand`, `--brand-deep`, `--accent`, `--ink`, `--paper`, `--bg`, `--bg-tint`,
+`--muted`, `--hairline`, `--radius-md`, `--radius-lg`, `--shadow`, plus the
+`Oswald` (headings) and `Inter` (body) font families. This is the same token set
+`kefi-marketing`, `kefi-landings` and the `scaffold-landing` output already
+define.
+
+Reveal-on-scroll: the components tag elements with `data-reveal` (matching the
+kefi convention). If the host has a `data-reveal` observer, the sections animate
+in; if not, they're just visible. Spam-safe contact CTAs (`kind: 'contact'`)
+render `data-contact`/`data-local`/`data-domain` and rely on the host page's
+existing `[data-contact]` mailto-reveal handler.
+
+## Adopt in an Astro marketing site (katalogos, erevna, …)
+
+Because these sites aren't a formal npm workspace, wire the kit in with a **Vite
+alias** (single-source, no publish needed). Once the package is published to npm
+you can instead `npm i @dloizides/marketing-astro-kit` and import by its real
+name — the import specifiers are identical.
+
+**1. Alias the kit** in `astro.config.mjs`:
+
+```js
+import { fileURLToPath } from 'node:url';
+
+export default defineConfig({
+  // …
+  vite: {
+    resolve: {
+      alias: {
+        '@marketing-kit': fileURLToPath(
+          new URL('../NpmPackages/packages/marketing-astro-kit/src', import.meta.url),
+        ),
+      },
+    },
+  },
+});
+```
+
+**2. Add your product's data** in `src/data/marketing.ts` (copy the shape from
+[`kefi-marketing/src/data/marketing.ts`](../../../kefi-marketing/src/data/marketing.ts)):
+
+```ts
+import type { PricingComparisonData, TrustSectionData } from '@marketing-kit/schema';
+
+export const pricing: PricingComparisonData = { /* your real tiers + gates */ };
+export const trust: TrustSectionData = { /* your compliance + placeholders */ };
+```
+
+Use **your product's actual plan gates** — don't invent features. Cells are
+`true`/`false` (check/cross) or a short string (`"Unlimited"`, `"€0"`).
+
+**3. Render** in your page, replacing any hand-rolled pricing/trust markup:
+
+```astro
+---
+import PricingComparison from '@marketing-kit/PricingComparison.astro';
+import TrustSection from '@marketing-kit/TrustSection.astro';
+import { pricing, trust } from '../data/marketing';
+---
+<TrustSection data={trust} id="trust" />
+<PricingComparison data={pricing} id="pricing" />
+```
+
+**4. Ensure the theming contract** — confirm your site's `:root` defines the
+tokens above (or accept the fallbacks), and that the page has a `[data-contact]`
+handler if you use a contact CTA.
+
+That's the whole adoption: alias + one data file + two imports. No copy-paste of
+the markup or styles.
+
+## TypeScript editor support (optional)
+
+For in-editor types, mirror the alias in `tsconfig.json`:
+
+```json
+{ "compilerOptions": { "paths": { "@marketing-kit/*": ["../NpmPackages/packages/marketing-astro-kit/src/*"] } } }
+```
+
+The Astro build (Rollup) only needs the Vite alias — types are not required for
+`astro build` to succeed.

package/package.json

@@ -0,0 +1,39 @@
+{
+  "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.",
+  "keywords": [
+    "astro",
+    "marketing",
+    "pricing",
+    "comparison-table",
+    "trust",
+    "landing-page",
+    "saas"
+  ],
+  "author": "dloizides",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openmindednewby/marketing-astro-kit.git"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./PricingComparison.astro": "./src/PricingComparison.astro",
+    "./TrustSection.astro": "./src/TrustSection.astro",
+    "./schema": "./src/schema.ts",
+    "./icons": "./src/icons.ts"
+  },
+  "peerDependencies": {
+    "astro": ">=4"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/PricingComparison.astro

@@ -0,0 +1,442 @@
+---
+// Reusable "Free-vs-Pro" pricing comparison table for product marketing sites.
+// Data-driven (see schema.ts → PricingComparisonData); themed purely through
+// the host site's CSS custom properties. Drop-in for any Astro marketing site.
+//
+//   <PricingComparison data={pricing} id="pricing" />
+//
+// 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';
+
+interface Props {
+  data: PricingComparisonData;
+  id?: string;
+}
+
+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;
+---
+
+<section class={`pmk-pricing`} id={id} aria-labelledby={`${id}-title`}>
+  <div class="pmk-container">
+    <p class="pmk-eyebrow" data-reveal>{data.eyebrow}</p>
+    <h2 class="pmk-title" id={`${id}-title`} data-reveal>{data.title}</h2>
+    {data.subtitle && <p class="pmk-sub" data-reveal>{data.subtitle}</p>}
+
+    <div class="pmk-tablewrap" data-reveal>
+      <table class="pmk-table">
+        <caption class="pmk-visually-hidden">Plan feature comparison</caption>
+        <thead>
+          <tr>
+            <th scope="col" class="pmk-th-corner"><span class="pmk-visually-hidden">Feature</span></th>
+            {tiers.map((t) => (
+              <th scope="col" class={`pmk-th${t.featured ? ' is-featured' : ''}`}>
+                {t.badge && <span class="pmk-ribbon">{t.badge}</span>}
+                <span class="pmk-tier-name">{t.name}</span>
+                <span class="pmk-tier-price">
+                  <b>{t.price}</b><i>{t.priceUnit}</i>
+                </span>
+                {t.tagline && <span class="pmk-tier-tag">{t.tagline}</span>}
+                <a class={`pmk-cta${t.featured ? ' pmk-cta--brand' : ' pmk-cta--ink'}`} {...ctaAttrs(t.cta)}>
+                  {t.cta.label}
+                </a>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => (
+            <>
+              {group.heading && (
+                <tr class="pmk-grouprow">
+                  <th scope="colgroup" colspan={tiers.length + 1}>{group.heading}</th>
+                </tr>
+              )}
+              {group.rows.map((row) => (
+                <tr class="pmk-row">
+                  <th scope="row" class="pmk-rowlabel">
+                    <span class="pmk-rowlabel-t">{row.label}</span>
+                    {row.hint && <span class="pmk-rowlabel-h">{row.hint}</span>}
+                  </th>
+                  {row.cells.map((cell, ci) => (
+                    <td
+                      class={`pmk-cell${tiers[ci]?.featured ? ' is-featured' : ''}`}
+                      data-label={tiers[ci]?.name}
+                    >
+                      {typeof cell === 'boolean' ? (
+                        cell ? (
+                          <span class="pmk-yes" aria-label="Included">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7" /></svg>
+                          </span>
+                        ) : (
+                          <span class="pmk-no" aria-label="Not included">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17" /></svg>
+                          </span>
+                        )
+                      ) : (
+                        <span class="pmk-val">{cell}</span>
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </>
+          ))}
+        </tbody>
+      </table>
+    </div>
+
+    {data.footnote && <p class="pmk-footnote" data-reveal>{data.footnote}</p>}
+
+    {data.callout && (
+      <aside class="pmk-callout" data-reveal>
+        <div class="pmk-callout-body">
+          {data.callout.badge && <span class="pmk-callout-badge">{data.callout.badge}</span>}
+          <h3 class="pmk-callout-name">{data.callout.name}</h3>
+          <p class="pmk-callout-price"><b>{data.callout.price}</b> <i>{data.callout.priceUnit}</i></p>
+          {data.callout.tagline && <p class="pmk-callout-tag">{data.callout.tagline}</p>}
+          <ul class="pmk-callout-list">
+            {data.callout.bullets.map((b) => <li>{b}</li>)}
+          </ul>
+        </div>
+        <a class="pmk-cta pmk-cta--ink pmk-callout-cta" {...ctaAttrs(data.callout.cta)}>
+          {data.callout.cta.label}
+        </a>
+      </aside>
+    )}
+  </div>
+</section>
+
+<style>
+  /* Themed via host CSS vars (fallbacks keep it rendering standalone). */
+  .pmk-pricing {
+    --_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-lg: var(--radius-lg, 24px);
+    --_r-md: var(--radius-md, 14px);
+    --_shadow: var(--shadow, 0 30px 60px -30px rgba(10, 10, 31, 0.4));
+    padding: 96px 0;
+  }
+  .pmk-container {
+    width: min(1200px, 100% - 48px);
+    margin-inline: auto;
+  }
+  .pmk-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--_brand);
+    margin: 0;
+  }
+  .pmk-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: 22ch;
+    color: var(--_ink);
+  }
+  .pmk-sub {
+    color: var(--_muted);
+    max-width: 60ch;
+    margin: 0 0 40px;
+  }
+
+  /* Table --------------------------------------------------------------- */
+  .pmk-tablewrap {
+    overflow-x: auto;
+    border-radius: var(--_r-lg);
+    -webkit-overflow-scrolling: touch;
+  }
+  .pmk-table {
+    width: 100%;
+    min-width: 640px;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+  }
+  .pmk-table caption { text-align: left; }
+  .pmk-th-corner,
+  .pmk-rowlabel {
+    width: 34%;
+    text-align: left;
+  }
+  .pmk-th {
+    position: relative;
+    vertical-align: bottom;
+    padding: 22px 18px 20px;
+    text-align: center;
+    background: var(--_paper);
+    border-top: 1px solid var(--_hairline);
+    border-bottom: 2px solid var(--_hairline);
+  }
+  .pmk-th.is-featured {
+    background: var(--_ink);
+    border-radius: var(--_r-md) var(--_r-md) 0 0;
+    border-color: var(--_ink);
+  }
+  .pmk-th-corner {
+    background: transparent;
+    border-bottom: 2px solid var(--_hairline);
+  }
+  .pmk-ribbon {
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--_brand);
+    color: var(--_paper);
+    padding: 4px 12px;
+    border-radius: 999px;
+    font-family: 'Oswald', sans-serif;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .pmk-tier-name {
+    display: block;
+    font-family: 'Oswald', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--_ink);
+  }
+  .is-featured .pmk-tier-name { color: var(--_paper); }
+  .pmk-tier-price {
+    display: block;
+    margin: 8px 0 2px;
+    color: var(--_ink);
+  }
+  .pmk-tier-price b {
+    font-family: 'Oswald', sans-serif;
+    font-size: 34px;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .pmk-tier-price i {
+    font-style: normal;
+    font-size: 13px;
+    color: var(--_muted);
+    margin-left: 4px;
+  }
+  .is-featured .pmk-tier-price,
+  .is-featured .pmk-tier-price b { color: var(--_paper); }
+  .is-featured .pmk-tier-price i { color: rgba(255, 255, 255, 0.7); }
+  .pmk-tier-tag {
+    display: block;
+    font-size: 12.5px;
+    color: var(--_muted);
+    margin-bottom: 14px;
+    min-height: 1.4em;
+  }
+  .is-featured .pmk-tier-tag { color: rgba(255, 255, 255, 0.72); }
+
+  /* CTA (self-contained — does not depend on host .btn) ----------------- */
+  .pmk-cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 11px 18px;
+    border-radius: 999px;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 600;
+    font-size: 13.5px;
+    letter-spacing: 0.02em;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
+    text-decoration: none;
+  }
+  .pmk-cta:hover { transform: translateY(-1px); }
+  .pmk-cta--ink { background: var(--_ink); color: var(--_paper); }
+  .pmk-cta--ink:hover { background: var(--_brand); }
+  .pmk-cta--brand { background: var(--_brand); color: var(--_paper); }
+  .pmk-cta--brand:hover { background: var(--_brand-deep); }
+  .is-featured .pmk-cta--brand { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
+
+  /* Group + rows -------------------------------------------------------- */
+  .pmk-grouprow th {
+    text-align: left;
+    padding: 22px 18px 8px;
+    font-family: 'Oswald', sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--_brand);
+  }
+  .pmk-row:hover .pmk-rowlabel,
+  .pmk-row:hover .pmk-cell:not(.is-featured) {
+    background: var(--_bg-tint);
+  }
+  .pmk-rowlabel {
+    padding: 15px 18px;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--_hairline);
+    font-weight: 500;
+  }
+  .pmk-rowlabel-t { display: block; color: var(--_ink); font-size: 15px; }
+  .pmk-rowlabel-h { display: block; color: var(--_muted); font-size: 12.5px; margin-top: 2px; }
+  .pmk-cell {
+    padding: 15px 18px;
+    text-align: center;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--_hairline);
+    color: var(--_ink);
+  }
+  .pmk-cell.is-featured {
+    background: color-mix(in srgb, var(--_ink) 5%, transparent);
+    border-left: 1px solid var(--_hairline);
+    border-right: 1px solid var(--_hairline);
+  }
+  .pmk-val {
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.01em;
+  }
+  .pmk-yes,
+  .pmk-no {
+    display: inline-grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+  .pmk-yes {
+    background: color-mix(in srgb, var(--_accent) 20%, transparent);
+    color: var(--_brand-deep);
+  }
+  .pmk-yes svg { width: 15px; height: 15px; }
+  .pmk-no { color: var(--_muted); opacity: 0.5; }
+  .pmk-no svg { width: 15px; height: 15px; }
+  /* last row of the featured column gets a rounded bottom */
+  .pmk-table tbody tr:last-child .pmk-cell.is-featured {
+    border-radius: 0 0 var(--_r-md) var(--_r-md);
+  }
+
+  .pmk-footnote {
+    color: var(--_muted);
+    font-size: 13.5px;
+    margin: 18px 2px 0;
+  }
+
+  /* Concierge / one-time callout --------------------------------------- */
+  .pmk-callout {
+    margin-top: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px;
+    flex-wrap: wrap;
+    padding: 26px 30px;
+    border-radius: var(--_r-lg);
+    background: var(--_bg-tint);
+    border: 1px solid var(--_hairline);
+  }
+  .pmk-callout-badge {
+    display: inline-block;
+    font-family: 'Oswald', sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--_ink);
+    background: var(--_accent);
+    padding: 4px 10px;
+    border-radius: 999px;
+    margin-bottom: 12px;
+  }
+  .pmk-callout-name {
+    font-family: 'Oswald', sans-serif;
+    font-size: 22px;
+    font-weight: 700;
+    margin: 0;
+    display: inline-block;
+  }
+  .pmk-callout-price {
+    margin: 4px 0 8px;
+    color: var(--_ink);
+  }
+  .pmk-callout-price b { font-family: 'Oswald', sans-serif; font-size: 26px; }
+  .pmk-callout-price i { font-style: normal; font-size: 13px; color: var(--_muted); }
+  .pmk-callout-tag { color: var(--_muted); margin: 0 0 10px; font-size: 14.5px; }
+  .pmk-callout-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 22px;
+    max-width: 62ch;
+  }
+  .pmk-callout-list li {
+    position: relative;
+    padding-left: 18px;
+    color: var(--_muted);
+    font-size: 13.5px;
+  }
+  .pmk-callout-list li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--_brand);
+  }
+  .pmk-callout-cta { white-space: nowrap; flex-shrink: 0; }
+
+  .pmk-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (max-width: 640px) {
+    .pmk-pricing { padding: 64px 0; }
+    .pmk-callout { flex-direction: column; align-items: flex-start; }
+  }
+</style>

package/src/TrustSection.astro

@@ -0,0 +1,280 @@
+---
+// Reusable trust / credibility section for product marketing sites — the
+// markers an executive scans for: security & compliance cards, a discreet
+// "built by" line, plus clearly-labeled PLACEHOLDER slots for customer logos
+// and testimonials the site owner fills in with real ones.
+//
+// Data-driven (schema.ts → TrustSectionData); themed via host CSS vars.
+//
+//   <TrustSection data={trust} id="trust" />
+import type { TrustSectionData } from './schema';
+import { TRUST_ICONS } from './icons';
+
+interface Props {
+  data: TrustSectionData;
+  id?: string;
+}
+
+const { data, id = 'trust' } = Astro.props as Props;
+---
+
+<section class="tmk-trust" id={id} aria-labelledby={`${id}-title`}>
+  <div class="tmk-container">
+    <p class="tmk-eyebrow" data-reveal>{data.eyebrow}</p>
+    <h2 class="tmk-title" id={`${id}-title`} data-reveal>{data.title}</h2>
+    {data.subtitle && <p class="tmk-sub" data-reveal>{data.subtitle}</p>}
+
+    <div class="tmk-grid">
+      {data.items.map((item, i) => (
+        <article class="tmk-card" data-reveal style={`--d:${(i % 4) + 1}`}>
+          <span class="tmk-ico" set:html={TRUST_ICONS[item.icon]} />
+          <h3 class="tmk-card-t">{item.title}</h3>
+          <p class="tmk-card-b">{item.body}</p>
+        </article>
+      ))}
+    </div>
+
+    {data.logos && (
+      <div class="tmk-logos" data-reveal>
+        <p class="tmk-logos-label">{data.logos.label}</p>
+        <div class="tmk-logos-row">
+          {data.logos.items.map((logo) =>
+            logo.placeholder ? (
+              <span class="tmk-logo tmk-logo--ph" aria-hidden="true">Your logo</span>
+            ) : logo.href ? (
+              <a class="tmk-logo" href={logo.href} target="_blank" rel="noopener">{logo.name}</a>
+            ) : (
+              <span class="tmk-logo">{logo.name}</span>
+            ),
+          )}
+        </div>
+        {data.logos.note && <p class="tmk-ph-note">{data.logos.note}</p>}
+      </div>
+    )}
+
+    {data.testimonials && (
+      <div class="tmk-quotes" data-reveal>
+        <p class="tmk-logos-label">{data.testimonials.label}</p>
+        <div class="tmk-quotes-row">
+          {data.testimonials.items.map((t) => (
+            <figure class={`tmk-quote${t.placeholder ? ' tmk-quote--ph' : ''}`}>
+              {t.placeholder && <span class="tmk-ph-tag">Placeholder</span>}
+              <blockquote class="tmk-quote-b">{t.quote}</blockquote>
+              <figcaption class="tmk-quote-cite">
+                <span class="tmk-quote-name">{t.authorName}</span>
+                {t.authorRole && <span class="tmk-quote-role">{t.authorRole}</span>}
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+        {data.testimonials.note && <p class="tmk-ph-note">{data.testimonials.note}</p>}
+      </div>
+    )}
+
+    {data.builtBy && (
+      <p class="tmk-builtby" data-reveal>
+        {data.builtBy.label}
+        <a href={data.builtBy.href} target="_blank" rel="noopener">{data.builtBy.name}</a>
+      </p>
+    )}
+  </div>
+</section>
+
+<style>
+  .tmk-trust {
+    --_brand: var(--brand, #d8332a);
+    --_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);
+  }
+  .tmk-container {
+    width: min(1200px, 100% - 48px);
+    margin-inline: auto;
+  }
+  .tmk-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--_brand);
+    margin: 0;
+  }
+  .tmk-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: 22ch;
+    color: var(--_ink);
+  }
+  .tmk-sub {
+    color: var(--_muted);
+    max-width: 60ch;
+    margin: 0 0 44px;
+  }
+
+  /* Cards --------------------------------------------------------------- */
+  .tmk-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 18px;
+  }
+  @media (max-width: 1024px) { .tmk-grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 560px) { .tmk-grid { grid-template-columns: 1fr; } }
+  .tmk-card {
+    position: relative;
+    padding: 26px 22px;
+    border-radius: var(--_r-md);
+    background: var(--_bg);
+    border: 1px solid var(--_hairline);
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  }
+  .tmk-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--_shadow);
+    border-color: transparent;
+  }
+  .tmk-ico {
+    display: inline-grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--_brand) 10%, transparent);
+    color: var(--_brand);
+    margin-bottom: 16px;
+  }
+  .tmk-ico :global(svg) { width: 22px; height: 22px; }
+  .tmk-card-t {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 8px;
+    color: var(--_ink);
+  }
+  .tmk-card-b { color: var(--_muted); margin: 0; font-size: 14.5px; }
+
+  /* Logos --------------------------------------------------------------- */
+  .tmk-logos { margin-top: 52px; }
+  .tmk-logos-label {
+    font-family: 'Oswald', sans-serif;
+    font-size: 12px;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--_muted);
+    margin: 0 0 18px;
+    text-align: center;
+  }
+  .tmk-logos-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 14px 18px;
+  }
+  .tmk-logo {
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    font-size: 17px;
+    letter-spacing: 0.02em;
+    color: var(--_ink);
+    padding: 12px 22px;
+    border-radius: var(--_r-md);
+    background: var(--_bg-tint);
+    border: 1px solid var(--_hairline);
+    transition: color 0.14s ease, border-color 0.14s ease;
+  }
+  a.tmk-logo:hover { color: var(--_brand); border-color: var(--_brand); }
+  .tmk-logo--ph {
+    color: var(--_muted);
+    background: transparent;
+    border: 1px dashed var(--_hairline);
+    opacity: 0.75;
+  }
+
+  /* Testimonials -------------------------------------------------------- */
+  .tmk-quotes { margin-top: 52px; }
+  .tmk-quotes-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 18px;
+  }
+  @media (max-width: 900px) { .tmk-quotes-row { grid-template-columns: 1fr; } }
+  .tmk-quote {
+    position: relative;
+    padding: 26px 24px 22px;
+    border-radius: var(--_r-md);
+    background: var(--_bg);
+    border: 1px solid var(--_hairline);
+  }
+  .tmk-quote--ph { border-style: dashed; background: transparent; }
+  .tmk-ph-tag {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    font-family: 'Oswald', sans-serif;
+    font-size: 9.5px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--_muted);
+    background: var(--_bg-tint);
+    padding: 3px 8px;
+    border-radius: 999px;
+  }
+  .tmk-quote-b {
+    margin: 0 0 16px;
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--_ink);
+  }
+  .tmk-quote--ph .tmk-quote-b { color: var(--_muted); }
+  .tmk-quote-b::before { content: '“'; color: var(--_brand); font-weight: 700; }
+  .tmk-quote-cite { font-style: normal; }
+  .tmk-quote-name {
+    display: block;
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    font-size: 14.5px;
+    color: var(--_ink);
+  }
+  .tmk-quote-role { display: block; font-size: 12.5px; color: var(--_muted); }
+
+  .tmk-ph-note {
+    text-align: center;
+    color: var(--_muted);
+    font-size: 12.5px;
+    margin: 16px 0 0;
+    font-style: italic;
+  }
+
+  /* Built by ------------------------------------------------------------ */
+  .tmk-builtby {
+    margin: 48px 0 0;
+    text-align: center;
+    color: var(--_muted);
+    font-size: 13px;
+  }
+  .tmk-builtby a {
+    color: var(--_ink);
+    border-bottom: 1px dotted var(--_muted);
+    margin-left: 5px;
+  }
+  .tmk-builtby a:hover { color: var(--_brand); }
+
+  @media (max-width: 560px) { .tmk-trust { padding: 64px 0; } }
+</style>

package/src/icons.ts

@@ -0,0 +1,23 @@
+// Inline 24×24 stroke icons for the trust section. Text-light (no image
+// requests → Lighthouse-friendly). Each is `currentColor`-stroked so it
+// inherits the host palette. Keyed by TrustIconName in schema.ts.
+import type { TrustIconName } from './schema';
+
+export const TRUST_ICONS: Record<TrustIconName, string> = {
+  // GDPR / privacy — shield with check
+  shield:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>',
+  // Secure sign-in — key
+  key: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="4"/><path d="M11 11l8 8"/><path d="M16 16l2-2"/><path d="M18.5 18.5l1.5-1.5"/></svg>',
+  // Your domain — globe
+  globe:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.5 3.8 5.7 3.8 9S14.5 18.5 12 21c-2.5-2.5-3.8-5.7-3.8-9S9.5 5.5 12 3z"/></svg>',
+  // Your money — wallet
+  wallet:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="2.5"/><path d="M3 9h18"/><circle cx="16.5" cy="13" r="1.3" fill="currentColor" stroke="none"/></svg>',
+  // Access control — lock
+  lock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4.5" y="10.5" width="15" height="10" rx="2.5"/><path d="M8 10.5V8a4 4 0 018 0v2.5"/></svg>',
+  // Quality / polish — spark
+  spark:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z"/></svg>',
+};

package/src/schema.ts

@@ -0,0 +1,131 @@
+// 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.
+//
+// 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.
+
+// ── Pricing comparison ─────────────────────────────────────────────────────
+
+/** A comparison-table cell: `true`/`false` renders a check/cross; a string
+ *  renders a short value (e.g. "Unlimited", "€0", "White-label"). */
+export type ComparisonCell = boolean | string;
+
+/** A call-to-action button. `kind: 'contact'` renders a spam-safe mailto that
+ *  the host page assembles in JS from `contact.local`/`contact.domain` (the
+ *  existing `[data-contact]` reveal handler) — never a plaintext email. */
+export interface MarketingCta {
+  label: string;
+  href: string;
+  kind?: 'link' | 'contact';
+  contact?: { local: string; domain: string };
+  /** Umami custom-event name fired on click (optional). */
+  analyticsEvent?: string;
+  /** Extra Umami `data-umami-event-*` pairs, e.g. { location: 'pricing' }. */
+  analyticsData?: Record<string, string>;
+}
+
+/** One tier column in the comparison table header. */
+export interface PricingTierColumn {
+  /** Stable code (free | pro | business …). Used for live-price patching and
+   *  analytics — NOT shown to users. */
+  code: string;
+  name: string;
+  /** Already-formatted headline price, e.g. "€19" or "€0". */
+  price: string;
+  /** Unit under the price, e.g. "/ month" or "forever". */
+  priceUnit: string;
+  tagline?: string;
+  /** Visually lift this column as the recommended tier. */
+  featured?: boolean;
+  /** Small ribbon over a featured column, e.g. "Most popular". */
+  badge?: string;
+  cta: MarketingCta;
+}
+
+/** A single feature row spanning every tier column. */
+export interface ComparisonRow {
+  label: string;
+  /** Optional muted helper under the label. */
+  hint?: string;
+  /** One cell per tier, in the SAME order as `PricingComparisonData.tiers`. */
+  cells: ComparisonCell[];
+}
+
+/** Rows grouped under an optional subheading (e.g. "Payments", "Team"). */
+export interface ComparisonGroup {
+  heading?: string;
+  rows: ComparisonRow[];
+}
+
+/** An optional one-time / service tier rendered as a card beneath the table
+ *  (Kefi uses it for the Concierge "we build it for you" offer). */
+export interface PricingCallout {
+  name: string;
+  price: string;
+  priceUnit: string;
+  tagline?: string;
+  bullets: string[];
+  cta: MarketingCta;
+  badge?: string;
+}
+
+export interface PricingComparisonData {
+  eyebrow: string;
+  title: string;
+  subtitle?: string;
+  tiers: PricingTierColumn[];
+  groups: ComparisonGroup[];
+  footnote?: string;
+  callout?: PricingCallout;
+}
+
+// ── Trust / credibility ────────────────────────────────────────────────────
+
+/** Built-in inline-SVG icon keys (see icons.ts). Adding one is a kit change. */
+export type TrustIconName = 'shield' | 'key' | 'globe' | 'wallet' | 'lock' | 'spark';
+
+export interface TrustItem {
+  icon: TrustIconName;
+  title: string;
+  body: string;
+}
+
+/** A customer/logo chip. Text wordmark only — no image asset, so the section
+ *  stays Lighthouse-light. `placeholder: true` renders a clearly-labeled empty
+ *  slot the site owner fills with a real customer later. */
+export interface LogoItem {
+  name: string;
+  href?: string;
+  placeholder?: boolean;
+}
+
+/** A testimonial card. `placeholder: true` renders a clearly-labeled stub so
+ *  the page reads as "credible, quotes coming" without faking a quote. */
+export interface Testimonial {
+  quote: string;
+  authorName: string;
+  authorRole?: string;
+  placeholder?: boolean;
+}
+
+/** The discreet "built by …" attribution line. */
+export interface BuiltByCredit {
+  label: string;
+  name: string;
+  href: string;
+}
+
+export interface TrustSectionData {
+  eyebrow: string;
+  title: string;
+  subtitle?: string;
+  items: TrustItem[];
+  logos?: { label: string; note?: string; items: LogoItem[] };
+  testimonials?: { label: string; note?: string; items: Testimonial[] };
+  builtBy?: BuiltByCredit;
+}