personal-site/components/SectionHeading.js

import Reveal from './Reveal';

export default function SectionHeading({ index, eyebrow, title, children }) {
  return (
    <Reveal className="section-heading">
      <p className="eyebrow">
        <span className="eyebrow-index">{index}</span>
        {eyebrow}
      </p>
      <h2 className="section-title">{title}</h2>
      {children && <p className="section-lead">{children}</p>}
    </Reveal>
  );
}