import * as React from "react"; import { cn } from "@/lib/utils"; export interface CaseStudyHeroLink { href: string; label: React.ReactNode; /** Opens in a new tab, with the rel guard and a screen-reader hint. */ external?: boolean; } export interface CaseStudyHeroMetaItem { label: React.ReactNode; value: React.ReactNode; } export type CaseStudyHeroHeadingLevel = "h1" | "h2" | "h3"; export interface CaseStudyHeroProps extends Omit, "title"> { /** Heading element for the headline. Pick by document outline, not by size. */ headingLevel?: CaseStudyHeroHeadingLevel; /** Mono uppercase kicker, e.g. "Case study". */ eyebrow?: React.ReactNode; /** Secondary mono line, e.g. the client and year. */ kicker?: React.ReactNode; headline: React.ReactNode; /** Second line of the headline, carrying the accent color. */ headlineAccent?: React.ReactNode; /** * Categorical, not semantic: any CSS color, keyed to the study rather than to a * meaning. Falls back to the alternate accent token. */ accentColor?: string; tagline?: React.ReactNode; link?: CaseStudyHeroLink; meta?: CaseStudyHeroMetaItem[]; /** Arbitrary node so callers can pass Chips, spans, or nothing. */ tags?: React.ReactNode; /** The media well. Pass a MockupShowcase, an img, a video, or an iframe. */ children?: React.ReactNode; } const pill = "relative inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border border-border px-4 py-1.5 font-mono text-[0.6875rem] uppercase tracking-[0.12em] text-muted outline-none after:absolute after:inset-x-0 after:-inset-y-2.5 after:content-[''] transition-control duration-fast ease-soft hover:border-border-strong hover:text-ink focus-visible:ring-focus"; /** * The copy-driven opener for a case study. Motion-free by design: wrap it, or its * parts, in `RevealGroup` for kajo's staggered entrance. */ export const CaseStudyHero = React.forwardRef( ( { className, headingLevel: Heading = "h1", eyebrow, kicker, headline, headlineAccent, accentColor, tagline, link, meta, tags, children, ...props }, ref, ) => (

{(eyebrow != null || kicker != null || link) && (

{eyebrow != null && (

{eyebrow}

)} {kicker != null && (

{kicker}

)}

{link && ( {link.label} {link.external && ( (opens in a new tab) )} )}

)} {headline} {headlineAccent != null && ( <>
{headlineAccent} )} {tagline != null && (

{tagline}

)} {meta != null && meta.length > 0 && (

{item.label}: {item.value}

)} {children != null &&

{children}

} {tags != null &&

{tags}

}

), ); CaseStudyHero.displayName = "CaseStudyHero";