export function UhuruSectionHeading({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description: string;
}) {
  return (
    <div className="flex flex-col gap-3">
      <span className="text-xs font-medium uppercase tracking-[0.18em] text-[var(--uhuru-accent-strong)]">
        {eyebrow}
      </span>
      <h2
        className="m-0 max-w-xl text-3xl tracking-[-0.04em] text-[var(--uhuru-text-primary)]"
        style={{ fontFamily: "var(--uhuru-font-heading)" }}
      >
        {title}
      </h2>
      <p className="m-0 max-w-2xl text-sm leading-7 text-[var(--uhuru-text-secondary)]">{description}</p>
    </div>
  );
}