import type { HTMLAttributes, ReactNode } from "react"; export type StatementAction = { label: string; href: string; variant?: "primary" | "secondary" }; export type StatementFact = { value: string; label: string }; export type SplitStatementHeroProps = Omit, "title"> & { statement?: ReactNode; body?: ReactNode; actions?: StatementAction[]; facts?: StatementFact[]; headingLevel?: "h1" | "h2"; }; const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4B8E] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8DB2E6] dark:focus-visible:ring-offset-[#0F1620]"; export function SplitStatementHero({ statement = "Migrations should be the most boring part of your release.", body = "Halyard is made by eleven engineers who spent a decade running Postgres at payments companies. We build software that waits, checks, and asks before it locks a table.", actions = [ { label: "Meet the team", href: "#", variant: "primary" }, { label: "Read our engineering notes", href: "#", variant: "secondary" }, ], facts = [ { value: "38,400", label: "Migrations planned in August" }, { value: "0.4 s", label: "Median lock time in production" }, ], headingLevel = "h1", className = "", ...props }: SplitStatementHeroProps) { const Heading = headingLevel; return (

{statement}

{body}

{actions.length > 0 ? (

{actions.map((action) => action.variant === "secondary" ? ( {action.label} ) : ( {action.label} ), )}

) : null} {facts.length > 0 ? (

{fact.label}: {fact.value}

) : null}

); }