content-explorer/ui/components/Hero.tsx
tegwick 940a6a90d0 Keep OnCo provenance headers on adapted UI files.
CONTENT-WP-0002-T08 requires each adapted file to name the pinned commit, the OnCo copyright, and ui/NOTICE.

Assistant: grok
Assistant-Session: 01a1346c-fdff-7741-b1af-b7283661554b
2026-10-13 23:32:25 +02:00

37 lines
1.3 KiB
TypeScript

/**
* Hero structure adapted from OnCo home: section.hero, kicker, display heading, lede, action.
* https://github.com/judegomila/OnCo @ b594d7433bf4e408b44215e25e5304696d6f840e
* 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>
);
}