spb/maclustr-research

1import type { ReactNode } from "react";23export function SectionHead({ eyebrow, title, intro, as: Tag = "h2", id }: { eyebrow: string; title: ReactNode; intro?: ReactNode; as?: "h1" | "h2"; id?: string }) {4  return (5    <div className="reveal grid gap-5 md:grid-cols-12 md:gap-8">6      <p className="eyebrow md:col-span-3 md:pt-3">{eyebrow}</p>7      <div className="md:col-span-9">8        <Tag id={id} className={Tag === "h1" ? "display text-[clamp(2.4rem,1.2rem+5vw,5.25rem)]" : "h2"}>{title}</Tag>9        {intro ? <p className="prose-tech mt-6">{intro}</p> : null}10      </div>11    </div>12  );13}1415export function PageIntro({ eyebrow, title, intro }: { eyebrow: string; title: ReactNode; intro: ReactNode }) {16  return (17    <header className="shell pt-10 pb-10 md:pt-20 md:pb-16">18      <p className="eyebrow hero-in">{eyebrow}</p>19      <h1 className="display hero-in-2 mt-6 max-w-[18ch] text-[clamp(2.25rem,1.2rem+4.6vw,4.75rem)]">{title}</h1>20      <p className="prose-tech hero-in-3 mt-6 text-[1.125rem]">{intro}</p>21    </header>22  );23}2425export function Arrow() {26  return (27    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">28      <path d="M2 8h11M9 3.5 13.5 8 9 12.5" fill="none" stroke="currentColor" strokeWidth="1.4" />29    </svg>30  );31}32