Product Specimen Hero

Lead landing and product-continuity pages with a real interface specimen, restrained copy, and compact proof markers.

LLM handoff

Copy a concise page brief or the full MDX source without digging through the docs shell.

Edition / Product standard

A sharper product standard for modern software.

Lead with the interface itself. Keep the claim narrow. Let hierarchy, density, and state do the selling.

Coverage: Marketing, docs, app routes
Focus: Hierarchy over decoration
State: Queue, detail, metadata

One specimen. Real product structure. No abstract hero treatment.

ProductSpecimenHero is the landing-scale opener for pages that need to explain the system and show the product immediately. It keeps the text rail narrow, the claim precise, and the specimen large enough to do the real persuasive work.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

import { ProductSpecimenHero } from "@/registry/swiss/blocks/product-specimen-hero"

<ProductSpecimenHero
  title="A sharper product standard for modern software."
  description="Lead with the interface itself. Keep the claim narrow."
  markers={[
    { label: "Coverage", value: "Marketing, docs, app routes" },
    { label: "State", value: "Queue, detail, metadata" },
  ]}
  specimen={<AppSpecimen />}
/>

Why This Block Exists

Landing pages in this system should not rely on abstract hero treatments. This block gives the page one authored way to pair positioning, proof markers, and a real product specimen.

API Reference

Prop	Type	Required	Notes
`title`	`string`	yes	Primary positioning claim.
`description`	`string`	yes	Supporting explanation.
`specimen`	`ReactNode`	yes	The real interface or product specimen.
`markers`	`{ label: string; value: ReactNode }[]`	no	Compact factual proof lines.
`primaryAction`	action object	no	Primary CTA.
`secondaryAction`	action object	no	Secondary CTA.

Previous: Settings Section Shell Next: Feature Grid Ledger