Pill Header Overlay

import PillHeaderOverlay from "./index.jsx";
import styles from "./demo.module.css";

export default function PillHeaderOverlayDemo() {
  return (
    <div className={styles.demo}>
      <PillHeaderOverlay />
      <div className={styles.body}>
        <p className={styles.lead}>
          Scroll to hide &amp; reveal the bar. Try Info, Contact, and — at a
          narrow width — the Menu.
        </p>
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className={styles.row} />
        ))}
      </div>
    </div>
  );
}