From 299a076a8d96c65a47d06035153c0c223e862624 Mon Sep 17 00:00:00 2001
From: Richard Xia <richardxia@richardxia.com>
Date: Thu, 6 Jun 2024 09:01:56 -0700
Subject: [PATCH] Add Mission and Vision Statements.

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.
---
 .../HomePageLargeParagraph.module.css              |  3 +++
 .../HomePageLargeParagraph.tsx                     |  4 ++--
 .../grid-aware/ImageHeader/ImageHeader.module.css  |  8 ++++++++
 .../grid-aware/ImageHeader/ImageHeader.tsx         |  4 ++--
 src/pages/about/index.tsx                          | 14 +++++++++++++-
 src/pages/index.tsx                                |  7 ++-----
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.module.css b/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.module.css
index 510f92b0..2acf32d5 100644
--- a/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.module.css
+++ b/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.module.css
@@ -53,5 +53,8 @@
 
 .description {
   font: var(--font-title);
+}
+
+.description:not(:first-child) {
   margin-top: 40px;
 }
diff --git a/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.tsx b/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.tsx
index a2fae69a..51214055 100644
--- a/src/components/grid-aware/HomePageLargeParagraph/HomePageLargeParagraph.tsx
+++ b/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>
diff --git a/src/components/grid-aware/ImageHeader/ImageHeader.module.css b/src/components/grid-aware/ImageHeader/ImageHeader.module.css
index e79517b6..39d11a35 100644
--- a/src/components/grid-aware/ImageHeader/ImageHeader.module.css
+++ b/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;
diff --git a/src/components/grid-aware/ImageHeader/ImageHeader.tsx b/src/components/grid-aware/ImageHeader/ImageHeader.tsx
index c6932862..6b7df262 100644
--- a/src/components/grid-aware/ImageHeader/ImageHeader.tsx
+++ b/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) => (
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 397c0306..1c889a82 100644
--- a/src/pages/about/index.tsx
+++ b/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
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 33d2e230..080bd2db 100644
--- a/src/pages/index.tsx
+++ b/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={{