/* eslint-disable @next/next/no-img-element -- portable registry component; bring your own image pipeline */ import type { HTMLAttributes, ReactNode } from "react"; export type HeroAction = { label: string; href: string }; export type HeroImage = { src: string; alt: string; width: number; height: number }; export type ProductScreenshotHeroProps = Omit, "title"> & { title?: ReactNode; description?: ReactNode; primaryAction?: HeroAction; secondaryAction?: HeroAction; note?: ReactNode; /** Product screenshot. When omitted, a drawn placeholder is shown. */ image?: HeroImage; /** Address shown in the browser frame. */ address?: string; 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]"; function ScreenshotPlaceholder() { return ( ); } export function ProductScreenshotHero({ title = "Schema migrations your whole team can review", description = "Halyard plans every Postgres migration against a snapshot of production, flags statements that take long locks, and deploys in the order your reviewers approved.", primaryAction = { label: "Start a 14-day trial", href: "#" }, secondaryAction = { label: "Read the docs", href: "#" }, note = "Free for teams of up to five engineers.", image, address = "app.halyard.dev/migrations", headingLevel = "h1", className = "", ...props }: ProductScreenshotHeroProps) { const Heading = headingLevel; return (

{title}

{description}

{primaryAction ? ( {primaryAction.label} ) : null} {secondaryAction ? ( {secondaryAction.label} ) : null}

{note ?

{note}

: null}

); }