content-explorer/ui/components/Hero.tsx

/**
 * Hero structure adapted from OnCo home: section.hero, kicker, display heading, lede, action.
 * Copyright (c) 2026 OnCo for the adapted pattern. MIT License. See ui/NOTICE.
 * The heading and lede are Content Explorer copy.
 */
export function Hero({
  dataspace,
  description,
  kinds = [],
}: {
  dataspace: string;
  description: string;
  kinds?: { href: string; label: string }[];
}) {
  return (
    <section className="hero border-b border-border">
      <div className="mx-auto max-w-7xl px-4 pt-14 pb-10 sm:px-6 sm:pt-20 sm:pb-12">
        <div className="max-w-3xl">
          <p className="kicker">{dataspace}</p>
          <h1 className="display mt-4">Explore a field of knowledge.</h1>
          <p className="mt-6 max-w-2xl text-[17px] leading-relaxed text-foreground/85 sm:text-xl">{description}</p>
          <div className="mt-8 flex flex-wrap gap-2">
            <a href="#records" className="btn btn-primary">
              Browse records
            </a>
            {kinds.map((kind) => (
              <a key={kind.href} href={kind.href} className="btn">
                {kind.label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}