Add Mission and Vision Statements. (#389)

This also includes a couple small copy changes to the Home Page. Several
of the components have been changed to be a bit more flexible in terms
of allowing more fields to be optional.

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

@@ -53,5 +53,8 @@
 
 .description {
   font: var(--font-title);
+}
+
+.description:not(:first-child) {
   margin-top: 40px;
 }

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as s from "./HomePageLargeParagraph.module.css";
 
 type HomePageLargeParagraphProps = {
-  title: string;
+  title?: string;
   description: string;
 };
 
@@ -16,7 +16,7 @@ const HomePageLargeParagraph = ({
       <div className={s.bleedMainContent}>
         <div className={s.gridParent}>
           <div className={s.textWrapper}>
-            <div className={s.title}>{title}</div>
+            {title ? <div className={s.title}>{title}</div> : null}
             <div className={s.description}>{description}</div>
           </div>
         </div>

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

@@ -90,6 +90,10 @@
   margin-top: 20px;
 }
 
+.description > h2 {
+  font: var(--font-body-large);
+}
+
 .description :first-child {
   margin: 0;
 }
@@ -98,6 +102,10 @@
   margin-top: 15px;
 }
 
+.description > h2:not(:first-child) {
+  margin-top: 30px;
+}
+
 .ctaButtonRow {
   display: flex;
   flex-flow: row wrap;

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

@@ -9,7 +9,7 @@ type ImageProps = {
 
 type ImageHeaderProps = {
   title: string;
-  subtitle: string;
+  subtitle?: string;
   description: React.ReactNode;
   image1: ImageProps;
   image2?: ImageProps;
@@ -27,7 +27,7 @@ const ImageHeader = ({
   const GridAreaLeft = () => (
     <div className={s.gridAreaText}>
       <h1 className={s.title}>{title}</h1>
-      <div className={s.subtitle}>{subtitle}</div>
+      {subtitle ? <div className={s.subtitle}>{subtitle}</div> : null}
       <div className={s.description}>{description}</div>
       <div className={s.ctaButtonRow}>
         {ctaButtons?.map((button) => (

src/pages/about/index.tsx

@@ -16,9 +16,21 @@ export default () => (
   <Layout>
     <ImageHeader
       title="About Us"
-      subtitle="Our Mission and History"
       description={
         <>
+          <h2>ShelterTech Vision Statement</h2>
+          <p>
+            Our vision is a vibrant community where everyone has equitable and
+            effective access to a wide range of human services, regardless of
+            their status, income, or circumstances.
+          </p>
+          <h2>ShelterTech Mission Statement</h2>
+          <p>
+            ShelterTech reduces barriers for those in need by connecting them
+            with human services and opportunities empowering them to live
+            happier, healthier lives.
+          </p>
+          <h2>ShelterTech Overview</h2>
           <p>
             ShelterTech is an award-winning non-profit solving the biggest
             technology challenges faced by people experiencing homelessness and

src/pages/index.tsx

@@ -63,7 +63,7 @@ export default () => {
         />
       </Modal>
       <VideoHeader
-        title="Less than half of the nearly 28,000 people experiencing homelessness in the Bay Area have reliable access to the internet."
+        title="Less than half of the nearly 28,000 people experiencing homelessness in the Bay Area have reliable access to the internet, making it harder for them to find and access the services they need."
         description="ShelterTech is a technology-focused nonprofit organization making it easier for this community to connect with  resources that can help them address their challenges."
         image={videoHeaderImage}
         ctaButtons={[
@@ -72,10 +72,7 @@ export default () => {
         ]}
         playButtonOnClick={() => setVideoHeaderModalIsOpen(true)}
       />
-      <HomePageLargeParagraph
-        title="We believe connectivity is a human right."
-        description="Access to the internet and technology makes it possible for people to find a job, human services, and contact family and friends."
-      />
+      <HomePageLargeParagraph description="Access to the internet and technology makes it possible for people to find a job, human services, and contact family and friends." />
       <ThreeParagraphBlock
         title="Get involved"
         paragraph1={{