add generic page header component, person section component with headings, ++

web/src/components/people/PersonSection.tsx

@@ -0,0 +1,11 @@
+import { PersonList } from "./PersonList";
+import styles from "./personSection.module.scss";
+
+export const PersonSection = ({ heading }: { heading: string }) => {
+  return (
+    <section className={styles.personSection}>
+      <h2 className={styles.heading}>{heading}</h2>
+      <PersonList />
+    </section>
+  );
+};

web/src/components/people/personSection.module.scss

@@ -0,0 +1,17 @@
+.personSection {
+  background: var(--color-background-secondary);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  +.personSection {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+
+  &:nth-of-type(even) {
+    background: var(--color-background);
+  }
+}
+
+.heading {
+  margin: 2rem 0;
+}