frontend(feat): add honest install proof

src/app/page.tsx

@@ -6,6 +6,7 @@ import { CatalogSection } from '@/components/site/sections/CatalogSection'
 import { CommunityCta } from '@/components/site/sections/CommunityCta'
 import { FaqSection } from '@/components/site/sections/FaqSection'
 import { HeroSection } from '@/components/site/sections/HeroSection'
+import { InstallProofSection } from '@/components/site/sections/InstallProofSection'
 import { StackBand } from '@/components/site/sections/StackBand'
 import { WiringSection } from '@/components/site/sections/WiringSection'
 import { WorkflowSection } from '@/components/site/sections/WorkflowSection'
@@ -49,6 +50,7 @@ export default function HomePage() {
       <main className="flex-1">
         <HeroSection />
         <StackBand />
+        <InstallProofSection />
         <WiringSection />
         <WorkflowSection />
         <CatalogSection />

src/components/site/sections/InstallProofSection.tsx

@@ -0,0 +1,109 @@
+import Link from 'next/link'
+
+import { ArrowRight, CheckCircle2, FileCode2, MonitorCheck, TerminalSquare } from 'lucide-react'
+
+import { CommandCopyButton } from '@/components/site/CommandCopyButton'
+import { Section, SectionHeading } from '@/components/site/section'
+import {
+  frameInstalledFiles,
+  installProofIntro,
+  installProofItems,
+  installProofNoAdoption,
+  landingSections,
+  primaryInstallCommand,
+  type InstallProofItem,
+} from '@/lib/site'
+
+const proofIcons = {
+  diff: FileCode2,
+  result: MonitorCheck,
+  terminal: TerminalSquare,
+} satisfies Record<InstallProofItem['icon'], typeof TerminalSquare>
+
+/* An honest proof pass: no customer logos or testimonials until they exist.
+ * The homepage shows what can be verified now, namely the CLI stages, the repo
+ * diff, and the rendered component output. */
+export function InstallProofSection() {
+  return (
+    <Section id={landingSections.proof.id}>
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.48fr)] lg:items-end">
+        <SectionHeading
+          accentWord="diff"
+          eyebrow="Install proof"
+          heading={landingSections.proof.heading}
+          intro={installProofIntro}
+        />
+
+        <aside className="reveal-on-scroll rounded-xl border border-border bg-muted/40 p-5">
+          <p className="text-sm font-semibold tracking-tight text-foreground">
+            {installProofNoAdoption.title}
+          </p>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
+            {installProofNoAdoption.body}
+          </p>
+        </aside>
+      </div>
+
+      <div className="reveal-on-scroll mt-12 grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {installProofItems.map((item) => {
+          const Icon = proofIcons[item.icon]
+
+          return (
+            <article
+              key={item.title}
+              className="flex min-h-full flex-col rounded-xl border border-border bg-background p-5 shadow-card"
+            >
+              <div className="flex items-center gap-3">
+                <span
+                  aria-hidden="true"
+                  className="grid size-10 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-brand"
+                >
+                  <Icon className="size-4" />
+                </span>
+                <h3 className="text-base font-semibold tracking-tight text-foreground">
+                  {item.title}
+                </h3>
+              </div>
+              <p className="mt-4 flex-1 text-sm leading-6 text-muted-foreground">{item.body}</p>
+              <Link
+                href={item.href}
+                className="mt-5 inline-flex w-fit items-center gap-2 text-sm font-medium text-foreground transition-colors hover:text-brand"
+              >
+                {item.linkLabel}
+                <ArrowRight className="size-4" aria-hidden="true" />
+              </Link>
+            </article>
+          )
+        })}
+      </div>
+
+      <div className="reveal-on-scroll mt-6 grid gap-4 rounded-xl border border-border bg-muted/30 p-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] lg:p-6">
+        <div className="flex min-w-0 flex-col justify-between gap-5 rounded-lg border border-border bg-background p-5">
+          <div>
+            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+              Run it
+            </p>
+            <code className="mt-3 block overflow-x-auto whitespace-nowrap font-mono text-sm text-foreground">
+              {primaryInstallCommand}
+            </code>
+          </div>
+          <CommandCopyButton command={primaryInstallCommand} />
+        </div>
+
+        <div className="rounded-lg border border-border bg-background p-5">
+          <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
+            Resulting diff includes
+          </p>
+          <ul className="mt-4 grid gap-3 sm:grid-cols-2">
+            {frameInstalledFiles.map((filePath) => (
+              <li key={filePath} className="flex min-w-0 items-center gap-2 text-sm text-foreground/80">
+                <CheckCircle2 className="size-4 shrink-0 text-brand" aria-hidden="true" />
+                <code className="truncate font-mono text-[12px]">{filePath}</code>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </Section>
+  )
+}

src/lib/site.ts

@@ -80,6 +80,7 @@ export const landingSections = {
   community: { heading: 'Open source, end to end.', id: 'community' },
   faq: { heading: 'Questions, answered straight.', id: 'faq' },
   components: { heading: 'The catalog, rendered live.', id: 'components' },
+  proof: { heading: 'The proof is the diff.', id: 'proof' },
   wiring: { heading: "A block isn't live until it's wired.", id: 'wiring' },
   workflow: { heading: 'From catalog to commit in three moves.', id: 'workflow' },
 } as const
@@ -132,6 +133,47 @@ export const workflowSteps = [
   },
 ] as const
 
+/* ------------------------------------------------------------------ */
+/* Install proof — honest proof before install intent.                 */
+/* ------------------------------------------------------------------ */
+
+export const installProofIntro =
+  'Customer logos and testimonials stay off the page until there is a named source. For now, the proof is the install trace, the files it changes, and the live component result you can inspect before copying the command.'
+
+export const installProofNoAdoption = {
+  body: 'No fake quotes, no implied customer count, no borrowed logos. Real customer proof can replace this box only when there is a real install to name.',
+  title: 'No borrowed trust',
+} as const
+
+export const installProofItems = [
+  {
+    body:
+      'The replay follows the installer stages: resolve the component, copy source, patch Payload files, regenerate Payload output, and record install state.',
+    href: '#wiring',
+    icon: 'terminal',
+    linkLabel: 'See the wiring ledger',
+    title: 'The command shows its work',
+  },
+  {
+    body:
+      'The installed files list names the block source plus the generated Payload outputs that land in the project as a normal reviewable diff.',
+    href: '/docs/installation',
+    icon: 'diff',
+    linkLabel: 'Read the install workflow',
+    title: 'The repo diff is visible',
+  },
+  {
+    body:
+      'The catalog renders the same component twins the docs use, so the installed result is inspectable before a developer runs the CLI.',
+    href: '/components',
+    icon: 'result',
+    linkLabel: 'Browse the live catalog',
+    title: 'The result is rendered live',
+  },
+] as const
+
+export type InstallProofItem = (typeof installProofItems)[number]
+
 /* ------------------------------------------------------------------ */
 /* Wiring ledger — the differentiator as a verifiable artifact table.  */
 /* Rows mirror the manifest contract: recovery.patchedFiles plus the   */

tests/e2e/frontend.e2e.spec.ts

@@ -364,6 +364,12 @@ test.describe('Light shadcn frontend', () => {
 
     // The catalog section teases page families with live previews instead of
     // listing every component as a text row; the full index lives at /components.
+    await expect(page.getByText('No fake quotes, no implied customer count')).toBeVisible()
+    await expect(page.getByRole('link', { name: 'Read the install workflow' })).toHaveAttribute(
+      'href',
+      '/docs/installation',
+    )
+    await expect(page.getByText('Resulting diff includes')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Page blocks' })).toBeVisible()
     await expect(page.getByRole('link', { name: /Browse all \d+ components/ })).toBeVisible()
     await expect(page.locator('code', { hasText: primaryInstallCommand }).first()).toBeVisible()