Add Financials section with Form 990 on About Us page. (#387)

This required a few, minor tweaks to the TextHeader component to allow
for arbitrary React content as well as styling tweaks.

src/components/grid-aware/TextHeader/TextHeader.module.css

@@ -68,6 +68,20 @@
   margin-top: 15px;
 }
 
+.description > :not(:first-child) {
+  margin-top: 15px;
+}
+
+/* We want this to have higher specificity than the :not(:first-child) selector
+ * above, so we attach the pseudoclass to the element name. */
+.description > br:not(:first-child) {
+  margin-top: 0;
+}
+
+.description > h2 {
+  font: var(--font-body-large);
+}
+
 @media (--tablet-and-down) {
   .description {
     margin-top: 20px;

src/components/grid-aware/TextHeader/TextHeader.tsx

@@ -4,7 +4,7 @@ import * as s from "./TextHeader.module.css";
 
 type TextHeaderProps = {
   title: string;
-  description?: string;
+  description?: React.ReactNode;
   large?: boolean;
   hasBottomPadding?: boolean;
 };

src/pages/about/index.tsx

@@ -4,10 +4,12 @@ import BaseHead from "../../components/BaseHead";
 import ArticleSpotlightCard from "../../components/grid-aware/ArticleSpotlightCard";
 import ImageHeader from "../../components/grid-aware/ImageHeader";
 import Spacer from "../../components/grid-aware/Spacer";
+import TextHeader from "../../components/grid-aware/TextHeader";
 import TwoParagraphBlock from "../../components/grid-aware/TwoParagraphBlock";
 import Layout from "../../components/layout";
 import articleSpotlightImage from "../images/laura-barerra-vera-cropped.png";
 import darcelJackson from "./darcel-jackson.png";
+import form990_2022 from "./form-990-2022.pdf";
 import teamImage from "./sheltertech-team.png";
 
 export default () => (
@@ -62,6 +64,27 @@ export default () => (
         alt: "Team members posing for a group photo.",
       }}
     />
+    <TextHeader
+      title="Financials"
+      description={
+        <>
+          <h2>2022</h2>
+          <ul>
+            <li>
+              <a href={form990_2022}>2022 Form 990</a>
+            </li>
+          </ul>
+          <br />
+          <p>
+            ShelterTech is a 501(c)(3) tax-exempt organization. All donations to
+            ShelterTech are tax-exempt to the extent allowed by law. For more
+            information about our financial statements, please contact{" "}
+            <a href="mailto:info@sheltertech.org">info@sheltertech.org</a>
+          </p>
+        </>
+      }
+    />
+    <Spacer heightDesktop="40px" heightMobile="20px" />
     <TwoParagraphBlock
       isAbout
       title="A note from our Founder, Darcel Jackson"