@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/components/marketing/CodeSample.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * <CodeSample> — a display-only fenced code block. SECURITY: the code is
+ * rendered as ESCAPED TEXT inside <pre><code> (never set:html), so it can't
+ * inject markup or scripts. Samples must be public/server-side framed — never
+ * embed secret keys or tokens (see the epic's D7 secret-scan guardrail).
+ */
+import type { CodeSample } from "@/lib/storyblok/content-model";
+interface Props {
+  sample: CodeSample;
+}
+const { sample } = Astro.props;
+---
+<figure class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-text)]">
+  <figcaption class="flex items-center justify-between border-b border-white/10 px-4 py-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-white/60">
+    <span>{sample.caption ?? "Example"}</span>
+    {sample.language && <span>{sample.language}</span>}
+  </figcaption>
+  <pre class="overflow-x-auto px-4 py-4 text-[0.82rem] leading-relaxed"><code class="font-mono text-[#e6edf3]">{sample.code}</code></pre>
+</figure>

package/apps/storefront/src/components/marketing/CtaBand.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * <CtaBand> — the final conversion band: a headline, optional subhead, and a
+ * centered CTA row. Sits on the surface tone to close the page.
+ */
+import type { CtaBandBlock } from "@/lib/storyblok/content-model";
+import MarketingCtas from "@/components/marketing/MarketingCtas.astro";
+interface Props {
+  block: CtaBandBlock;
+  basePath: string;
+}
+const { block, basePath } = Astro.props;
+---
+<section class="bg-[var(--color-surface)] py-[clamp(3.5rem,8vw,6.5rem)]">
+  <div class="container-prose">
+    <div class="mx-auto max-w-2xl text-center" data-reveal>
+      <h2 class="display-lg">{block.title}</h2>
+      {block.subhead && (
+        <p class="mx-auto mt-4 max-w-[48ch] text-[var(--color-muted)]">{block.subhead}</p>
+      )}
+      <MarketingCtas ctas={block.ctas} basePath={basePath} class="mt-8 justify-center" />
+    </div>
+  </div>
+</section>

package/apps/storefront/src/components/marketing/Faq.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * <Faq> — a no-JS accordion of question/answer pairs using native
+ * <details>/<summary>. Emits FAQPage JSON-LD so answers are eligible for rich
+ * results. Answers are plain text (auto-escaped).
+ */
+import Section from "@/components/Section.astro";
+import type { FaqBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: FaqBlock;
+}
+const { block } = Astro.props;
+
+const faqLd = {
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  mainEntity: block.items.map((it) => ({
+    "@type": "Question",
+    name: it.q,
+    acceptedAnswer: { "@type": "Answer", text: it.a },
+  })),
+};
+---
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+  <div class="mx-auto max-w-[46rem] divide-y divide-[var(--color-border)]" data-reveal>
+    {block.items.map((it) => (
+      <details class="group py-4">
+        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-display text-base font-semibold text-[var(--color-text)]">
+          {it.q}
+          <span aria-hidden="true" class="shrink-0 text-[var(--color-accent)] transition-transform group-open:rotate-45">+</span>
+        </summary>
+        <p class="mt-3 text-[var(--color-muted)]">{it.a}</p>
+      </details>
+    ))}
+  </div>
+</Section>
+<script type="application/ld+json" set:html={JSON.stringify(faqLd)} is:inline />

package/apps/storefront/src/components/marketing/Integrations.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * <Integrations> — the "fits the store you already run" section: a strip of
+ * platform names/links, optional implementation points, and an optional safe
+ * code sample. Platform links open externally when they carry an http href.
+ */
+import Section from "@/components/Section.astro";
+import CodeSample from "@/components/marketing/CodeSample.astro";
+import type { IntegrationsBlock } from "@/lib/storyblok/content-model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  block: IntegrationsBlock;
+  basePath: string;
+}
+const { block, basePath } = Astro.props;
+const isExternal = (href: string) => /^https?:\/\//i.test(href);
+---
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+  {block.subhead && (
+    <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
+      {block.subhead}
+    </p>
+  )}
+  <div class="grid items-start gap-10 lg:grid-cols-2">
+    <div data-reveal>
+      <ul class="flex flex-wrap gap-2.5">
+        {block.platforms.map((p) =>
+          p.href ? (
+            <li>
+              <a
+                href={isExternal(p.href) ? p.href : withBase(basePath, p.href)}
+                {...(isExternal(p.href) ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                class="inline-flex rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-4 py-2 font-display text-sm font-medium text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]"
+              >
+                {p.label}
+              </a>
+            </li>
+          ) : (
+            <li class="inline-flex rounded-full border border-[var(--color-border)] bg-[var(--color-bg)] px-4 py-2 font-display text-sm font-medium text-[var(--color-text)]">
+              {p.label}
+            </li>
+          ),
+        )}
+      </ul>
+      {block.points?.length && (
+        <ul class="mt-7 grid gap-3 sm:grid-cols-2">
+          {block.points.map((pt) => (
+            <li class="flex items-start gap-2 text-sm text-[var(--color-muted)]">
+              <span aria-hidden="true" class="mt-0.5 text-[var(--color-accent)]">✓</span>
+              {pt}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+    {block.code && (
+      <div data-reveal>
+        <CodeSample sample={block.code} />
+      </div>
+    )}
+  </div>
+</Section>

package/apps/storefront/src/components/marketing/MarketingBlocks.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * <MarketingBlocks> — the marketing page renderer. Dispatches a list of
+ * MarketingBlock view-models to their block components. Tenant-agnostic: every
+ * block is styled through theme tokens and reads its copy from tenant content.
+ * Reused by the homepage and (future) marketing content pages.
+ */
+import type { MarketingBlock } from "@/lib/storyblok/content-model";
+import MarketingHero from "@/components/marketing/MarketingHero.astro";
+import TrustBar from "@/components/marketing/TrustBar.astro";
+import SplitCompare from "@/components/marketing/SplitCompare.astro";
+import Steps from "@/components/marketing/Steps.astro";
+import CardGrid from "@/components/marketing/CardGrid.astro";
+import Integrations from "@/components/marketing/Integrations.astro";
+import ProofStrip from "@/components/marketing/ProofStrip.astro";
+import Testimonials from "@/components/marketing/Testimonials.astro";
+import Faq from "@/components/marketing/Faq.astro";
+import CtaBand from "@/components/marketing/CtaBand.astro";
+
+interface Props {
+  blocks: MarketingBlock[];
+  basePath: string;
+}
+const { blocks, basePath } = Astro.props;
+---
+{
+  blocks.map((block) => {
+    switch (block.component) {
+      case "marketing_hero":
+        return <MarketingHero block={block} basePath={basePath} />;
+      case "trust_bar":
+        return <TrustBar block={block} />;
+      case "split_compare":
+        return <SplitCompare block={block} />;
+      case "steps":
+        return <Steps block={block} />;
+      case "card_grid":
+        return <CardGrid block={block} basePath={basePath} />;
+      case "integrations":
+        return <Integrations block={block} basePath={basePath} />;
+      case "proof_strip":
+        return <ProofStrip block={block} />;
+      case "testimonials":
+        return <Testimonials block={block} />;
+      case "faq":
+        return <Faq block={block} />;
+      case "cta_band":
+        return <CtaBand block={block} basePath={basePath} />;
+      default:
+        return null;
+    }
+  })
+}

package/apps/storefront/src/components/marketing/MarketingCtas.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * <MarketingCtas> — a row of call-to-action buttons for marketing blocks.
+ * Tenant-agnostic: styling is all theme tokens. External hrefs (http[s]) open in
+ * a new tab with rel="noopener"; same-origin root-absolute hrefs get the tenant
+ * base-path prefix so path-routed tenants stay in-tenant.
+ */
+import type { MarketingCta } from "@/lib/storyblok/content-model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  ctas?: MarketingCta[];
+  basePath: string;
+  class?: string;
+}
+
+const { ctas = [], basePath, class: className } = Astro.props;
+
+const styles: Record<NonNullable<MarketingCta["variant"]>, string> = {
+  primary:
+    "rounded-full bg-accent px-6 py-3 font-display text-sm font-semibold text-[var(--color-primary-contrast)] shadow-[var(--shadow-sm)] transition-transform hover:-translate-y-0.5",
+  secondary:
+    "rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-6 py-3 font-display text-sm font-semibold text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]",
+  ghost:
+    "inline-flex items-center font-display text-sm font-semibold text-[var(--color-primary)] underline-offset-4 hover:underline",
+};
+
+const isExternal = (href: string) => /^https?:\/\//i.test(href);
+---
+
+{
+  ctas.length > 0 && (
+    <div class:list={["flex flex-wrap items-center gap-3", className]}>
+      {ctas.map((cta) => {
+        const external = isExternal(cta.href);
+        return (
+          <a
+            href={external ? cta.href : withBase(basePath, cta.href)}
+            class={styles[cta.variant ?? "primary"]}
+            {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+          >
+            {cta.label}
+          </a>
+        );
+      })}
+    </div>
+  )
+}

package/apps/storefront/src/components/marketing/MarketingHero.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * <MarketingHero> — the signature top-of-page moment for a marketing tenant.
+ * Left: eyebrow + oversized headline + subhead/body + CTAs + trust chips.
+ * Right (optional): a "product moment" panel of demo/evidence log lines.
+ * All copy is plain text (auto-escaped); no raw HTML is rendered.
+ */
+import type { MarketingHeroBlock } from "@/lib/storyblok/content-model";
+import MarketingCtas from "@/components/marketing/MarketingCtas.astro";
+
+interface Props {
+  block: MarketingHeroBlock;
+  basePath: string;
+}
+const { block, basePath } = Astro.props;
+const hasPanel = !!block.panel?.lines?.length;
+---
+
+<section class="bg-[var(--color-bg)] py-[clamp(3.5rem,8vw,7rem)]">
+  <div class="container-prose">
+    <div
+      class:list={[
+        "grid items-center gap-12",
+        hasPanel ? "lg:grid-cols-[1.05fr_0.95fr]" : "",
+      ]}
+    >
+      <div data-reveal>
+        {block.eyebrow && <p class="eyebrow eyebrow--tick mb-4">{block.eyebrow}</p>}
+        <h1 class="display-xl max-w-[18ch]">{block.headline}</h1>
+        {block.subhead && (
+          <p class="mt-5 max-w-[46ch] text-[1.15rem] font-medium text-[var(--color-text)]">
+            {block.subhead}
+          </p>
+        )}
+        {block.body && (
+          <p class="mt-4 max-w-[52ch] text-[var(--color-muted)]">{block.body}</p>
+        )}
+        <MarketingCtas ctas={block.ctas} basePath={basePath} class="mt-8" />
+        {block.trust?.length && (
+          <ul class="mt-8 flex flex-wrap gap-x-6 gap-y-2">
+            {block.trust.map((t) => (
+              <li class="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+                <span aria-hidden="true" class="text-[var(--color-accent)]">✓</span>
+                {t}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {hasPanel && (
+        <div data-reveal>
+          <div class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-lg)]">
+            {block.panel!.title && (
+              <div class="border-b border-[var(--color-border)] px-5 py-3 font-mono text-xs uppercase tracking-[0.12em] text-[var(--color-muted)]">
+                {block.panel!.title}
+              </div>
+            )}
+            <ul class="divide-y divide-[var(--color-border)]">
+              {block.panel!.lines.map((line) => (
+                <li class="flex items-start gap-3 px-5 py-3 font-mono text-[0.82rem] text-[var(--color-text)]">
+                  <span aria-hidden="true" class="mt-0.5 text-[var(--color-accent)]">›</span>
+                  <span>{line}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+</section>

package/apps/storefront/src/components/marketing/ProofStrip.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * <ProofStrip> — a privacy/trust proof band (e.g. "We will never sell your
+ * data"). A bold statement + supporting copy + a grid of proof bullets. Painted
+ * in the primary color for a single strong moment. Plain text only.
+ */
+import type { ProofStripBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: ProofStripBlock;
+}
+const { block } = Astro.props;
+---
+<section class="bg-[var(--color-primary)] py-[clamp(3rem,7vw,6rem)] text-[var(--color-primary-contrast)]">
+  <div class="container-prose">
+    <div class="mx-auto max-w-3xl text-center" data-reveal>
+      {block.eyebrow && (
+        <p class="mb-3 font-mono text-xs uppercase tracking-[0.14em] opacity-70">
+          {block.eyebrow}
+        </p>
+      )}
+      <h2 class="display-lg">{block.title}</h2>
+      {block.body && <p class="mx-auto mt-5 max-w-[52ch] opacity-85">{block.body}</p>}
+    </div>
+    {block.items?.length && (
+      <ul
+        class="mx-auto mt-10 grid max-w-3xl gap-3 sm:grid-cols-2 lg:grid-cols-3"
+        data-reveal
+      >
+        {block.items.map((item) => (
+          <li class="flex items-center gap-2 rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-primary-contrast)_12%,transparent)] px-4 py-2.5 text-sm">
+            <span aria-hidden="true">✓</span> {item}
+          </li>
+        ))}
+      </ul>
+    )}
+  </div>
+</section>

package/apps/storefront/src/components/marketing/SplitCompare.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * <SplitCompare> — a before/after two-column comparison (e.g. "today's
+ * patchwork" vs "one platform"). The `before` column reads as the problem
+ * (muted, ⚠) and `after` as the solution (accent, ✓).
+ */
+import Section from "@/components/Section.astro";
+import type { SplitCompareBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: SplitCompareBlock;
+}
+const { block } = Astro.props;
+---
+<Section eyebrow={block.eyebrow} title={block.title} tone="bg">
+  {block.subhead && (
+    <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
+      {block.subhead}
+    </p>
+  )}
+  <div class="grid gap-6 md:grid-cols-2">
+    <div
+      class="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-7"
+      data-reveal
+    >
+      <h3 class="flex items-center gap-2 font-display text-lg font-semibold text-[var(--color-muted)]">
+        <span aria-hidden="true">⚠</span> {block.before.title}
+      </h3>
+      <ul class="mt-5 space-y-3">
+        {block.before.items.map((item) => (
+          <li class="flex items-start gap-3 text-sm text-[var(--color-muted)] line-through decoration-[var(--color-border)]">
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div
+      class="rounded-[var(--radius-lg)] border-2 border-[var(--color-primary)] bg-[var(--color-surface)] p-7 shadow-[var(--shadow-md)]"
+      data-reveal
+    >
+      <h3 class="flex items-center gap-2 font-display text-lg font-semibold text-[var(--color-primary)]">
+        <span aria-hidden="true">✓</span> {block.after.title}
+      </h3>
+      <ul class="mt-5 space-y-3">
+        {block.after.items.map((item) => (
+          <li class="flex items-start gap-3 text-sm text-[var(--color-text)]">
+            <span aria-hidden="true" class="mt-0.5 text-[var(--color-accent)]">✓</span>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</Section>

package/apps/storefront/src/components/marketing/Steps.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * <Steps> — a numbered/emoji journey (e.g. the checkout verification flow).
+ * Renders as a horizontal-scrolling rail on small screens, a wrapped row above.
+ */
+import Section from "@/components/Section.astro";
+import type { StepsBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: StepsBlock;
+}
+const { block } = Astro.props;
+---
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+  {block.subhead && (
+    <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
+      {block.subhead}
+    </p>
+  )}
+  <ol class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-reveal>
+    {block.steps.map((step, i) => (
+      <li class="relative rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg)] p-5">
+        <div class="flex items-center gap-3">
+          <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[var(--color-primary)] font-mono text-sm text-[var(--color-primary-contrast)]">
+            {step.icon ?? i + 1}
+          </span>
+          <span class="font-display text-sm font-semibold text-[var(--color-text)]">
+            {step.label}
+          </span>
+        </div>
+        {step.detail && (
+          <p class="mt-3 text-sm text-[var(--color-muted)]">{step.detail}</p>
+        )}
+      </li>
+    ))}
+  </ol>
+</Section>

package/apps/storefront/src/components/marketing/Testimonials.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * <Testimonials> — outcome/quote cards with an optional stat lead-in and
+ * attribution, plus an optional row of rating tokens. Plain text only.
+ */
+import Section from "@/components/Section.astro";
+import type { TestimonialsBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: TestimonialsBlock;
+}
+const { block } = Astro.props;
+---
+<Section eyebrow={block.eyebrow} title={block.title} tone="bg">
+  <div class="grid gap-5 md:grid-cols-3" data-reveal>
+    {block.quotes.map((q) => (
+      <figure class="flex flex-col rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6">
+        {q.stat && (
+          <p class="font-display text-2xl font-bold text-[var(--color-accent)]">{q.stat}</p>
+        )}
+        <blockquote class="mt-3 flex-1 text-[var(--color-text)]">
+          <p>“{q.quote}”</p>
+        </blockquote>
+        {q.attribution && (
+          <figcaption class="mt-4 text-sm text-[var(--color-muted)]">
+            — {q.attribution}
+          </figcaption>
+        )}
+      </figure>
+    ))}
+  </div>
+  {block.ratings?.length && (
+    <ul class="mt-8 flex flex-wrap justify-center gap-x-8 gap-y-2" data-reveal>
+      {block.ratings.map((r) => (
+        <li class="font-mono text-sm text-[var(--color-muted)]">{r}</li>
+      ))}
+    </ul>
+  )}
+</Section>

package/apps/storefront/src/components/marketing/TrustBar.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * <TrustBar> — a quiet horizontal strip of proof tokens (countries, standards,
+ * platform names, ratings). Plain text, dot-separated on small screens.
+ */
+import type { TrustBarBlock } from "@/lib/storyblok/content-model";
+interface Props {
+  block: TrustBarBlock;
+}
+const { block } = Astro.props;
+---
+<div class="border-y border-[var(--color-border)] bg-[var(--color-surface)]">
+  <div class="container-prose py-4">
+    <ul class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-center font-mono text-[0.72rem] uppercase tracking-[0.1em] text-[var(--color-muted)]">
+      {block.items.map((item) => (
+        <li class="flex items-center gap-5">
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+</div>

package/apps/storefront/src/components/nav/Footer.astro

@@ -0,0 +1,148 @@
+---
+/**
+ * <Footer> — brand column + link columns + newsletter signup + social row +
+ * bottom policy bar. Theme-agnostic (CSS-var-backed utilities only).
+ */
+import type { SiteChrome } from "@/lib/storyblok/content-model";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  chrome: SiteChrome;
+}
+
+const { chrome } = Astro.props;
+const { tenant, basePath, features } = Astro.locals;
+const year = new Date().getFullYear();
+// Bottom-bar links: if a column is explicitly titled "Legal", use just those
+// (marketing tenants); otherwise fall back to all column links (commerce, as before).
+const legalCol = chrome.footer.columns.find((c) => /legal/i.test(c.title));
+const policyLinks = legalCol
+  ? legalCol.links
+  : chrome.footer.columns.flatMap((c) => c.links);
+// Marketing tenants have no newsletter form; when it's hidden the columns get
+// the full width. The bottom bar shows a legal/compliance line if provided.
+const showNewsletter = features.newsletter;
+const legal = chrome.footer.legal;
+---
+
+<footer class="mt-24 border-t border-border bg-surface">
+  <div class="container-prose py-16">
+    <div class="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
+      <!-- Brand -->
+      <div class="lg:col-span-1">
+        <a
+          href={withBase(basePath, "/")}
+          class="font-display text-lg font-bold tracking-tight transition-colors hover:text-primary"
+        >
+          {tenant.displayName}
+        </a>
+        {
+          chrome.footer.tagline && (
+            <p class="mt-3 max-w-xs text-sm text-muted">
+              {chrome.footer.tagline}
+            </p>
+          )
+        }
+      </div>
+
+      <!-- Link columns -->
+      {
+        chrome.footer.columns.map((col) => (
+          <nav aria-label={col.title}>
+            <h2 class="eyebrow">{col.title}</h2>
+            <ul class="mt-4 space-y-2.5">
+              {col.links.map((link) => (
+                <li>
+                  <a
+                    href={withBase(basePath, link.href)}
+                    class="text-sm text-muted transition-colors hover:text-primary"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))
+      }
+
+      <!-- Newsletter (commerce only) -->
+      {showNewsletter && (
+      <section id="newsletter" aria-labelledby="newsletter-heading">
+        <h2 id="newsletter-heading" class="eyebrow">Newsletter</h2>
+        <form
+          action={withBase(basePath, "/api/newsletter")}
+          method="post"
+          class="mt-4 flex flex-col gap-2"
+        >
+          <input type="hidden" name="source" value="footer" />
+          <label for="footer-newsletter-email" class="sr-only">
+            Email address
+          </label>
+          <input
+            id="footer-newsletter-email"
+            type="email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            aria-label="Email address"
+            class="w-full rounded-md border border-border bg-bg px-3 py-2 text-sm text-text placeholder:text-muted"
+          />
+          <button
+            type="submit"
+            class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 font-display text-sm font-medium text-primary-contrast transition-opacity hover:opacity-90"
+          >
+            Subscribe
+          </button>
+        </form>
+      </section>
+      )}
+    </div>
+
+    <!-- Social -->
+    {
+      chrome.footer.social.length > 0 && (
+        <ul class="mt-12 flex flex-wrap gap-x-6 gap-y-2">
+          {chrome.footer.social.map((s) => (
+            <li>
+              <a
+                href={withBase(basePath, s.href)}
+                class="font-mono text-xs uppercase tracking-[0.12em] text-muted transition-colors hover:text-primary"
+              >
+                {s.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+  </div>
+
+  <!-- Bottom bar -->
+  <div class="border-t border-border">
+    <div
+      class="container-prose flex flex-col gap-3 py-6 text-xs text-muted sm:flex-row sm:items-center sm:justify-between"
+    >
+      <p>© {year} {tenant.displayName}{legal ? ` · ${legal}` : ""}</p>
+      {
+        policyLinks.length > 0 && (
+          <nav aria-label="Legal">
+            <ul class="flex flex-wrap gap-x-5 gap-y-1">
+              {policyLinks.map((link) => (
+                <li>
+                  <a
+                    href={withBase(basePath, link.href)}
+                    class="transition-colors hover:text-primary"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )
+      }
+    </div>
+  </div>
+</footer>