From 2458f1e70c6830c2191f0f5b2fe560f358e4eb5d Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 13 Jun 2024 13:14:18 -0700
Subject: [PATCH 01/25] initial home page prep

---
 app/pages/HomePage/HomePage.tsx | 119 ++++++++++++--------------------
 1 file changed, 46 insertions(+), 73 deletions(-)

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 68d1c3c8d..51b1de412 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -1,15 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
-import qs from "qs";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { getResourceCount } from "utils/DataService";
 import { Footer } from "components/ui";
 import imageUrlBuilder from "@sanity/image-url";
 import Hero from "components/ui/Hero/Hero";
-import { Partners } from "./components/Partners/Partners";
-import { SearchBar } from "./components/SearchBar/SearchBar";
-import { HomePageSection } from "./components/Section/Section";
-import ResourceList from "./components/ResourceList/ResourceList";
+import { OppEventCardSection } from "components/ui/Section/OppEventCardSection";
 import { client } from "../../sanity";
 
 const builder = imageUrlBuilder(client);
@@ -27,6 +22,50 @@ export interface HeroData {
   buttons: ButtonType[];
 }
 
+export const HomePage = () => {
+  const [resourceCount, setResourceCount] = useState<number | undefined>();
+  const [heroData, setHeroData] = useState<HeroData | null>(null);
+
+  useEffect(() => {
+    getResourceCount().then((count: number) => setResourceCount(count));
+    const fetchHeroData = async () => {
+      const query = `*[_type == "hero" && name == "Home Hero"][0]{
+        name,
+        title,
+        description,
+        backgroundImage,
+        buttons
+      }`;
+      const result: HeroData = await client.fetch(query);
+      setHeroData(result);
+    };
+
+    fetchHeroData();
+  }, []);
+
+  if (!heroData) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <Hero
+        backgroundImage={builder.image(heroData.backgroundImage).url()}
+        title={heroData.title}
+        description={heroData.description}
+        buttons={heroData.buttons}
+      />
+      {/* Category Card */}
+      <OppEventCardSection sectionType="opportunity" />
+      <OppEventCardSection sectionType="event" />
+      {/* Two Column Layout */}
+      <Footer />
+    </>
+  );
+};
+
+// Remove when new categories is created
+// other components are dependent on this list
 export const coreCategories = [
   {
     algoliaCategoryName: "Covid-food",
@@ -100,70 +139,4 @@ export const coreCategories = [
     icon: "substance-use",
     categorySlug: "substance-use-resources",
   },
-];
-
-export const HomePage = () => {
-  const [resourceCount, setResourceCount] = useState<number | undefined>();
-  const [searchValue, setSearchValue] = useState("");
-  const history = useHistory();
-  const [heroData, setHeroData] = useState<HeroData | null>(null);
-
-  const submitSearch = () => {
-    if (searchValue) {
-      const query = qs.stringify({ query: searchValue });
-      history.push(`/search?${query}`);
-    }
-  };
-
-  useEffect(() => {
-    getResourceCount().then((count: number) => setResourceCount(count));
-    const fetchHeroData = async () => {
-      const query = `*[_type == "hero" && name == "Home Hero"][0]{
-        name,
-        title,
-        description,
-        backgroundImage,
-        buttons
-      }`;
-      const result: HeroData = await client.fetch(query);
-      setHeroData(result);
-    };
-
-    fetchHeroData();
-  }, []);
-
-  if (!heroData) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <>
-      <Hero
-        backgroundImage={builder.image(heroData.backgroundImage).url()}
-        title={heroData.title}
-        description={heroData.description}
-        buttons={heroData.buttons}
-      />
-      <HomePageSection title="Find essential services in San Francisco">
-        <ResourceList resources={coreCategories} />
-      </HomePageSection>
-
-      <HomePageSection
-        title="Browse Directory"
-        description="Search the directory for a specific social service provider or browse by category."
-      >
-        <SearchBar
-          placeholder={`Search ${
-            resourceCount || ""
-          } resources in San Francisco`}
-          onSubmit={submitSearch}
-          onChange={(newSearchValue: string) => setSearchValue(newSearchValue)}
-          value={searchValue}
-        />
-      </HomePageSection>
-
-      <Partners />
-      <Footer />
-    </>
-  );
-};
+];
\ No newline at end of file

From 7e75cb8936d4e3f547489ec97133d87eaed45339 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Mon, 17 Jun 2024 17:34:47 -0700
Subject: [PATCH 02/25] move and export type from two column component

---
 .../TwoColumnContentSection.tsx               | 18 ++++++++-------
 app/pages/AboutPageOur415/AboutPage.tsx       | 22 ++++++-------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index 689633266..a9a8d0fcc 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -36,6 +36,15 @@ const BlockRenderer = (props: {
   return BlockContent.defaultSerializers.types.block(props);
 };
 
+export interface TwoColumnContent {
+  mediaAlignment: string;
+  image: SanityImageSource;
+  imageAlt: string | undefined;
+  contentBlock: BlockContentProps;
+  contentLinkButtonText: string;
+  contentLinkButtonUrl: string;
+}
+
 export const TwoColumnContentSection = ({
   image,
   imageAlt,
@@ -43,14 +52,7 @@ export const TwoColumnContentSection = ({
   mediaAlignment,
   contentLinkButtonText,
   contentLinkButtonUrl,
-}: {
-  mediaAlignment: string;
-  image: SanityImageSource;
-  imageAlt: string | undefined;
-  contentBlock: BlockContentProps;
-  contentLinkButtonText: string;
-  contentLinkButtonUrl: string;
-}) => {
+}: TwoColumnContent) => {
   return (
     <section className={styles.twoColumnContentSectionContainer}>
       <div
diff --git a/app/pages/AboutPageOur415/AboutPage.tsx b/app/pages/AboutPageOur415/AboutPage.tsx
index 714a0e0b8..0f5e12911 100644
--- a/app/pages/AboutPageOur415/AboutPage.tsx
+++ b/app/pages/AboutPageOur415/AboutPage.tsx
@@ -1,24 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { client } from "../../sanity";
 import { Masthead } from "../../components/ui/Masthead/Masthead";
 import { EmailSignup } from "../../components/EmailSignup/Emailsignup";
-import { TwoColumnContentSection } from "../../components/ui/TwoColumnContentSection/TwoColumnContentSection";
-
-interface TwoColumnContentSection {
-  mediaAlignment: string;
-  image: SanityImageSource;
-  imageAlt: string | undefined;
-  contentBlock: any;
-  contentLinkButtonText: string;
-  contentLinkButtonUrl: string;
-  _id: string;
-}
+import {
+  TwoColumnContent,
+  TwoColumnContentSection,
+} from "../../components/ui/TwoColumnContentSection/TwoColumnContentSection";
 
 interface PageState {
   pageInitialized: boolean;
   mastHead: string;
-  twoColumnContentSections: TwoColumnContentSection[];
+  twoColumnContentSections: TwoColumnContent[];
 }
 
 export const AboutPage = () => {
@@ -54,8 +46,8 @@ export const AboutPage = () => {
     <>
       <Masthead title={pageData.mastHead} />
       {pageData?.twoColumnContentSections?.map(
-        (section: JSX.IntrinsicAttributes & TwoColumnContentSection) => {
-          return <TwoColumnContentSection key={section._id} {...section} />;
+        (section: JSX.IntrinsicAttributes & TwoColumnContent) => {
+          return <TwoColumnContentSection key={section.key} {...section} />;
         }
       )}
       <EmailSignup />

From 1ad45f1313a7cb5c07040c5afb9f81aa45ddb1b6 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Mon, 17 Jun 2024 18:24:09 -0700
Subject: [PATCH 03/25] create 2 column component for home page

---
 app/pages/HomePage/HomePage.tsx              |  6 ++-
 app/pages/HomePage/HomePageContentColumn.tsx | 43 ++++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/HomePage/HomePageContentColumn.tsx

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 51b1de412..6becf9733 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -6,6 +6,7 @@ import imageUrlBuilder from "@sanity/image-url";
 import Hero from "components/ui/Hero/Hero";
 import { OppEventCardSection } from "components/ui/Section/OppEventCardSection";
 import { client } from "../../sanity";
+import { HomePageContentColumn } from "./HomePageContentColumn";
 
 const builder = imageUrlBuilder(client);
 
@@ -58,7 +59,8 @@ export const HomePage = () => {
       {/* Category Card */}
       <OppEventCardSection sectionType="opportunity" />
       <OppEventCardSection sectionType="event" />
-      {/* Two Column Layout */}
+      <HomePageContentColumn />
+      {/* Newsletter Component */}
       <Footer />
     </>
   );
@@ -139,4 +141,4 @@ export const coreCategories = [
     icon: "substance-use",
     categorySlug: "substance-use-resources",
   },
-];
\ No newline at end of file
+];
diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx
new file mode 100644
index 000000000..cc389af6f
--- /dev/null
+++ b/app/pages/HomePage/HomePageContentColumn.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import {
+  TwoColumnContent,
+  TwoColumnContentSection,
+} from "components/ui/TwoColumnContentSection/TwoColumnContentSection";
+import { client } from "../../sanity";
+
+interface ContentState {
+  contentInitialized: boolean;
+  twoColumnContentSections: TwoColumnContent[];
+}
+
+export const HomePageContentColumn = () => {
+  const [contentData, setContentData] = useState<ContentState>({
+    contentInitialized: false,
+    twoColumnContentSections: [],
+  });
+
+  useEffect(() => {
+    const fetchPageData = async () => {
+      const fetchedPageData = await client.fetch(
+        `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}`
+      );
+
+      const { twoColumnContentSections } = fetchedPageData[0];
+
+      setContentData({
+        twoColumnContentSections,
+        contentInitialized: true,
+      });
+    };
+
+    fetchPageData();
+  }, []);
+
+  if (!contentData.contentInitialized) {
+    return <>loading...</>;
+  }
+
+  return (
+    <TwoColumnContentSection {...contentData.twoColumnContentSections[0]} />
+  );
+};

From b59629400a1dac55719c86614b7d06b36eeebf1c Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Mon, 17 Jun 2024 18:38:04 -0700
Subject: [PATCH 04/25] rm resource count state

---
 app/pages/HomePage/HomePage.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 6becf9733..43e748d96 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
-import { getResourceCount } from "utils/DataService";
 import { Footer } from "components/ui";
 import imageUrlBuilder from "@sanity/image-url";
 import Hero from "components/ui/Hero/Hero";
@@ -24,11 +23,9 @@ export interface HeroData {
 }
 
 export const HomePage = () => {
-  const [resourceCount, setResourceCount] = useState<number | undefined>();
   const [heroData, setHeroData] = useState<HeroData | null>(null);
 
   useEffect(() => {
-    getResourceCount().then((count: number) => setResourceCount(count));
     const fetchHeroData = async () => {
       const query = `*[_type == "hero" && name == "Home Hero"][0]{
         name,

From bb7a42fad77aedb3080805419855bdf47d14c460 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Tue, 18 Jun 2024 15:32:21 -0700
Subject: [PATCH 05/25] refactor into one api call from sanity

---
 app/pages/HomePage/HomePage.tsx | 69 +++++++++++++++++++++++----------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 43e748d96..40b0d29da 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import imageUrlBuilder from "@sanity/image-url";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { Footer } from "components/ui";
-import imageUrlBuilder from "@sanity/image-url";
 import Hero from "components/ui/Hero/Hero";
 import { OppEventCardSection } from "components/ui/Section/OppEventCardSection";
+import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
 import { HomePageContentColumn } from "./HomePageContentColumn";
 
@@ -22,40 +22,67 @@ export interface HeroData {
   buttons: ButtonType[];
 }
 
+interface OppEventCardData {
+  header: string;
+  subheader?: string;
+  backgroundColor?: string;
+  link?: {
+    label: string;
+    href: string;
+  };
+}
+
+interface HomePageData {
+  heroSection: HeroData;
+  categoriesSection: {
+    header: string;
+    subheader: string;
+  };
+  opportunitySection: OppEventCardData;
+  eventSection: OppEventCardData;
+}
+
 export const HomePage = () => {
-  const [heroData, setHeroData] = useState<HeroData | null>(null);
+  const [homePageData, setHomePageData] = useState<HomePageData | null>(null);
 
   useEffect(() => {
-    const fetchHeroData = async () => {
-      const query = `*[_type == "hero" && name == "Home Hero"][0]{
-        name,
-        title,
-        description,
-        backgroundImage,
-        buttons
+    const fetchHomePageData = async () => {
+      const query = `*[_type == "homePage" && name == "Home Page"][0]{
+        'heroSection': *[_type == "hero" && name == "Home Hero"][0],
+        categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->{...}},
+        opportunitySection {...,'opportunityCards': opportunityCards[]->{...}},
+        eventSection {...,'eventCards': eventCards[]-> {...}},
       }`;
-      const result: HeroData = await client.fetch(query);
-      setHeroData(result);
+
+      const result: HomePageData = await client.fetch(query);
+
+      setHomePageData(result);
     };
 
-    fetchHeroData();
+    fetchHomePageData();
   }, []);
 
-  if (!heroData) {
+  if (!homePageData) {
     return <div>Loading...</div>;
   }
 
+  const { categoriesSection, opportunitySection, eventSection, heroSection } =
+    homePageData;
+
   return (
     <>
       <Hero
-        backgroundImage={builder.image(heroData.backgroundImage).url()}
-        title={heroData.title}
-        description={heroData.description}
-        buttons={heroData.buttons}
+        backgroundImage={builder.image(heroSection.backgroundImage).url()}
+        title={heroSection.title}
+        description={heroSection.description}
+        buttons={heroSection.buttons}
+      />
+      {/* <CategoryCardSection sectionData={categoriesSection} /> */}
+      <OppEventCardSection
+        sectionType="opportunity"
+        sectionData={opportunitySection}
       />
-      {/* Category Card */}
-      <OppEventCardSection sectionType="opportunity" />
-      <OppEventCardSection sectionType="event" />
+      <OppEventCardSection sectionType="event" sectionData={eventSection} />
       <HomePageContentColumn />
       {/* Newsletter Component */}
       <Footer />

From 19564ca3053e616d93396650f04e1f28629159e5 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Tue, 18 Jun 2024 16:32:26 -0700
Subject: [PATCH 06/25] connect oppevent cards to sanity data

---
 .../ui/Cards/OppEventCard.module.scss         |  5 ++
 app/components/ui/Cards/OppEventCard.tsx      |  5 +-
 .../Section/OppEventCardSection.module.scss   | 72 ++++++++--------
 .../ui/Section/OppEventCardSection.tsx        | 85 ++++++++-----------
 app/pages/HomePage/HomePage.tsx               | 24 ++----
 5 files changed, 89 insertions(+), 102 deletions(-)

diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss
index eb5b920c7..658d19057 100644
--- a/app/components/ui/Cards/OppEventCard.module.scss
+++ b/app/components/ui/Cards/OppEventCard.module.scss
@@ -36,6 +36,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: flex-start;
     gap: $general-spacing-md;
     padding: $general-spacing-lg;
     height: 100%;
@@ -43,6 +44,10 @@
 
     @media screen and (max-width: $break-tablet-p) {
       padding: $general-spacing-md;
+
+      button {
+        justify-content: flex-start;
+      }
     }
 
     .contentTitle {
diff --git a/app/components/ui/Cards/OppEventCard.tsx b/app/components/ui/Cards/OppEventCard.tsx
index af3ff804b..0829e95f2 100644
--- a/app/components/ui/Cards/OppEventCard.tsx
+++ b/app/components/ui/Cards/OppEventCard.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "components/ui/inline/Button/Button";
 import styles from "./OppEventCard.module.scss";
 import { OppEventDate } from "./OppEventDate";
 
@@ -32,7 +33,9 @@ export const OppEventCard = (props: OppEventCardProps) => {
           </div>
         </div>
 
-        <p className={styles.contentSubtext}>View more</p>
+        <Button arrowVariant="after" variant="linkBlue" size="lg">
+          View more
+        </Button>
       </div>
     </div>
   );
diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss
index 0062ebf3f..114dbf267 100644
--- a/app/components/ui/Section/OppEventCardSection.module.scss
+++ b/app/components/ui/Section/OppEventCardSection.module.scss
@@ -8,8 +8,19 @@
   width: 100%;
   padding: $spacing-24 $spacing-32;
 
-  &.event {
-    background: $color-brand-dark;
+  &.secondary {
+    background-color: $color-secondary;
+    h2,
+    p {
+      color: $white;
+    }
+  }
+  &.tertiary {
+    background-color: $color-brand-dark;
+    h2,
+    p {
+      color: $white;
+    }
   }
 
   @media screen and (max-width: $break-tablet-s) {
@@ -24,46 +35,39 @@
     h2 {
       margin-bottom: $general-spacing-s;
     }
-
-    &.event {
-      h2,
-      p {
-        color: $white;
-      }
-    }
-
-    @media screen and (max-width: $break-tablet-p) {
-      gap: $general-spacing-s;
-      flex-direction: column;
-      align-items: stretch;
-    }
   }
 
-  .cardsContainer {
-    display: flex;
-    gap: $general-spacing-lg;
-    width: 100%;
-    height: 100%;
-
-    &.event {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
+  @media screen and (max-width: $break-tablet-p) {
+    gap: $general-spacing-s;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 
-      @media screen and (max-width: $break-tablet-p) {
-        display: flex;
-        flex-direction: column;
-      }
-    }
+.cardsContainer {
+  display: flex;
+  gap: $general-spacing-lg;
+  width: 100%;
+  height: 100%;
 
-    @media screen and (max-width: 1336px) {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
+  &.event {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
 
     @media screen and (max-width: $break-tablet-p) {
       display: flex;
       flex-direction: column;
     }
   }
+
+  @media screen and (max-width: 1336px) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: $break-tablet-p) {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx
index d2976e42e..53ea5bacf 100644
--- a/app/components/ui/Section/OppEventCardSection.tsx
+++ b/app/components/ui/Section/OppEventCardSection.tsx
@@ -1,22 +1,17 @@
 import imageUrlBuilder from "@sanity/image-url";
-import React, { useEffect, useState } from "react";
+import React from "react";
+import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { client } from "../../../sanity";
-import { OppEventCard } from "../Cards/OppEventCard";
 import { Button } from "../inline/Button/Button";
 import styles from "./OppEventCardSection.module.scss";
+import { OppEventCard } from "../Cards/OppEventCard";
 
 export interface EventData {
   slug: {
     current: string;
     _type: string;
   };
-  image: {
-    asset: {
-      _ref: string;
-      _type: string;
-    };
-    _type: string;
-  };
+  image: SanityImageSource;
 
   /* Event Types*/
   title?: string;
@@ -32,63 +27,51 @@ export interface EventData {
   end_date?: Date;
 }
 
-export interface OppEventCardSectionProps {
-  sectionType: "opportunity" | "event";
+export interface OppEventCardData {
+  header: string;
+  subheader?: string;
+  backgroundColor: string;
+  link?: {
+    label: string;
+    href: string;
+  };
+  opportunityCards?: EventData[];
+  eventCards?: EventData[];
+}
+
+interface OppEventCardSectionProps {
+  sectionType: "event" | "opportunity";
+  sectionData: OppEventCardData;
 }
-/* 
-TODO: Future PRs
-  - Pull in Sanity data for header, description, button text
-  - Update Button to use global button component
-    - Update header button and view more button
-    - include link to opportunity/event page
-*/
 
 export const OppEventCardSection = (props: OppEventCardSectionProps) => {
-  const { sectionType } = props;
-  const [eventData, setEventData] = useState<EventData[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { sectionType, sectionData } = props;
+  const { header, subheader, backgroundColor, link } = sectionData;
   const builder = imageUrlBuilder(client);
 
-  useEffect(() => {
-    const fetchEventData = async () => {
-      const fields = {
-        event: "title, slug, date, image",
-        opportunity: "name, slug, start_date, end_date, image",
-      };
-      const query = `*[_type == "${sectionType}"] | order(_createdAt desc)[0...4] { ${fields[sectionType]} }`;
-
-      setIsLoading(true);
-      const result: EventData[] = await client.fetch(query);
-      setIsLoading(false);
-
-      setEventData(result);
-    };
-
-    fetchEventData();
-  }, [sectionType]);
-
-  if (isLoading) {
+  if (!sectionData) {
     return <div>Loading...</div>;
   }
 
-  if (!eventData) {
-    return null;
-  }
+  const cardData = sectionData.opportunityCards || sectionData.eventCards;
 
   return (
-    <div className={`${styles.oppEventSection} ${styles[sectionType]}`}>
-      <div className={`${styles.oppEvent__header} ${styles[sectionType]}`}>
+    <div className={`${styles.oppEventSection} ${styles[backgroundColor]}`}>
+      <div className={`${styles.oppEvent__header}`}>
         <div>
-          <h2>
-            {sectionType === "event" ? "Upcoming events" : "Open Opportunties"}
-          </h2>
-          <p>Description text explaining this section goes here.</p>
+          <h2>{header}</h2>
+          {subheader && <p>{subheader}</p>}
         </div>
-        <Button>See all opportunities/events</Button>
+
+        {link && (
+          <Button href={link.href} arrowVariant="after">
+            {link.label}
+          </Button>
+        )}
       </div>
 
       <div className={`${styles.cardsContainer} ${styles[sectionType]}`}>
-        {eventData.map((event): JSX.Element => {
+        {cardData?.map((event): JSX.Element => {
           const { title, name, slug, date, start_date, end_date, image } =
             event;
           const cardImage = builder.image(image).url();
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 40b0d29da..9dea67bc3 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -2,7 +2,10 @@ import imageUrlBuilder from "@sanity/image-url";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { Footer } from "components/ui";
 import Hero from "components/ui/Hero/Hero";
-import { OppEventCardSection } from "components/ui/Section/OppEventCardSection";
+import {
+  OppEventCardData,
+  OppEventCardSection,
+} from "components/ui/Section/OppEventCardSection";
 import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
 import { HomePageContentColumn } from "./HomePageContentColumn";
@@ -22,16 +25,6 @@ export interface HeroData {
   buttons: ButtonType[];
 }
 
-interface OppEventCardData {
-  header: string;
-  subheader?: string;
-  backgroundColor?: string;
-  link?: {
-    label: string;
-    href: string;
-  };
-}
-
 interface HomePageData {
   heroSection: HeroData;
   categoriesSection: {
@@ -49,9 +42,9 @@ export const HomePage = () => {
     const fetchHomePageData = async () => {
       const query = `*[_type == "homePage" && name == "Home Page"][0]{
         'heroSection': *[_type == "hero" && name == "Home Hero"][0],
-        categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->{...}},
-        opportunitySection {...,'opportunityCards': opportunityCards[]->{...}},
-        eventSection {...,'eventCards': eventCards[]-> {...}},
+        categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->},
+        opportunitySection {...,'opportunityCards': opportunityCards[]->},
+        eventSection {...,'eventCards': eventCards[]->},
       }`;
 
       const result: HomePageData = await client.fetch(query);
@@ -66,8 +59,7 @@ export const HomePage = () => {
     return <div>Loading...</div>;
   }
 
-  const { categoriesSection, opportunitySection, eventSection, heroSection } =
-    homePageData;
+  const { opportunitySection, eventSection, heroSection } = homePageData;
 
   return (
     <>

From 2bfb53d90770922406959dadacb5beaca8e8583d Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Tue, 18 Jun 2024 16:55:03 -0700
Subject: [PATCH 07/25] fix button issue with two column content, misc changes

---
 .../Section/OppEventCardSection.module.scss   | 52 ++++++++++---------
 .../TwoColumnContentSection.module.scss       |  2 +-
 .../TwoColumnContentSection.tsx               |  9 ++--
 app/pages/HomePage/HomePageContentColumn.tsx  |  8 +--
 app/styles/st-base/_forms.scss                | 36 ++++++-------
 5 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss
index 114dbf267..3c9c12421 100644
--- a/app/components/ui/Section/OppEventCardSection.module.scss
+++ b/app/components/ui/Section/OppEventCardSection.module.scss
@@ -10,6 +10,7 @@
 
   &.secondary {
     background-color: $color-secondary;
+
     h2,
     p {
       color: $white;
@@ -31,43 +32,44 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: $general-spacing-lg;
 
     h2 {
       margin-bottom: $general-spacing-s;
     }
-  }
 
-  @media screen and (max-width: $break-tablet-p) {
-    gap: $general-spacing-s;
-    flex-direction: column;
-    align-items: stretch;
+    @media screen and (max-width: $break-tablet-p) {
+      gap: $general-spacing-s;
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
-}
 
-.cardsContainer {
-  display: flex;
-  gap: $general-spacing-lg;
-  width: 100%;
-  height: 100%;
+  .cardsContainer {
+    display: flex;
+    gap: $general-spacing-lg;
+    width: 100%;
+    height: 100%;
 
-  &.event {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, 1fr);
+    &.event {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+
+      @media screen and (max-width: $break-tablet-p) {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    @media screen and (max-width: 1336px) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
 
     @media screen and (max-width: $break-tablet-p) {
       display: flex;
       flex-direction: column;
     }
   }
-
-  @media screen and (max-width: 1336px) {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media screen and (max-width: $break-tablet-p) {
-    display: flex;
-    flex-direction: column;
-  }
 }
diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
index f1d4049f7..20851f60d 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
@@ -53,7 +53,7 @@
   margin-left: 7%;
   margin-right: 18%;
   display: inline-block;
-  margin-top: $general-spacing-md;
+  margin-top: $general-spacing-xl;
   margin-bottom: $general-spacing-md;
 }
 
diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index a9a8d0fcc..4e6272e24 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -6,6 +6,7 @@ import BlockContent, {
 import imageUrlBuilder from "@sanity/image-url";
 import styles from "./TwoColumnContentSection.module.scss";
 import { client } from "../../../sanity";
+import { Button } from "../inline/Button/Button";
 
 const builder = imageUrlBuilder(client);
 
@@ -81,9 +82,11 @@ export const TwoColumnContentSection = ({
           serializers={{ types: { block: BlockRenderer } }}
         />
         {contentLinkButtonText && (
-          <a className={styles.contentLinkButton} href={contentLinkButtonUrl}>
-            {contentLinkButtonText}
-          </a>
+          <div className={styles.contentLinkButton}>
+            <Button href={contentLinkButtonUrl} arrowVariant="after">
+              {contentLinkButtonText}
+            </Button>
+          </div>
         )}
       </div>
     </section>
diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx
index cc389af6f..cd8ccfba7 100644
--- a/app/pages/HomePage/HomePageContentColumn.tsx
+++ b/app/pages/HomePage/HomePageContentColumn.tsx
@@ -17,12 +17,12 @@ export const HomePageContentColumn = () => {
   });
 
   useEffect(() => {
-    const fetchPageData = async () => {
-      const fetchedPageData = await client.fetch(
+    const fetchContentData = async () => {
+      const fetchedContentData = await client.fetch(
         `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}`
       );
 
-      const { twoColumnContentSections } = fetchedPageData[0];
+      const { twoColumnContentSections } = fetchedContentData[0];
 
       setContentData({
         twoColumnContentSections,
@@ -30,7 +30,7 @@ export const HomePageContentColumn = () => {
       });
     };
 
-    fetchPageData();
+    fetchContentData();
   }, []);
 
   if (!contentData.contentInitialized) {
diff --git a/app/styles/st-base/_forms.scss b/app/styles/st-base/_forms.scss
index 407ad3171..6a8429431 100644
--- a/app/styles/st-base/_forms.scss
+++ b/app/styles/st-base/_forms.scss
@@ -33,25 +33,25 @@ textarea {
 }
 
 // This button is affecting all buttons globally
-button {
-  @extend %font-size-default;
-  border: 0;
-  // height: calc-em(44px);
-  padding: calc-em(6px) calc-em(20px);
-  color: $color-white;
-  background: $color-green;
-  display: inline-block;
-  font-weight: 600;
-  &:active,
-  &:hover,
-  &:focus {
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
-  }
+// button {
+//   @extend %font-size-default;
+//   border: 0;
+//   // height: calc-em(44px);
+//   padding: calc-em(6px) calc-em(20px);
+//   color: $color-white;
+//   background: $color-green;
+//   display: inline-block;
+//   font-weight: 600;
+//   &:active,
+//   &:hover,
+//   &:focus {
+//     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+//   }
 
-  &.danger {
-    background: $color-red;
-  }
-}
+//   &.danger {
+//     background: $color-red;
+//   }
+// }
 
 button.filter-chip {
   border-radius: 3px;

From 63eef688b87f1f483bc010043ad21f306fa0eba7 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 15:16:42 -0700
Subject: [PATCH 08/25] refactor home page section component

---
 .../components/Section/Section.module.scss    | 72 ++++++++++++-------
 .../HomePage/components/Section/Section.tsx   | 27 +++++--
 2 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/app/pages/HomePage/components/Section/Section.module.scss b/app/pages/HomePage/components/Section/Section.module.scss
index 813fa797b..72f4e4f35 100644
--- a/app/pages/HomePage/components/Section/Section.module.scss
+++ b/app/pages/HomePage/components/Section/Section.module.scss
@@ -1,37 +1,59 @@
 @import "app/styles/utils/_helpers.scss";
 
 .section {
-  color: #202020;
-  margin-top: 100px;
-  position: relative;
-  @media screen and (max-width: 600px) {
-    margin-top: 50px;
+  padding: $spacing-24 $spacing-32;
+
+  @media screen and (max-width: $break-tablet-p) {
+    padding: $general-spacing-xl $general-spacing-md;
   }
-}
 
-.content {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: $width-content;
-  width: 90%;
+  &.secondary {
+    background-color: $color-secondary;
+    .description {
+      color: $white;
+    }
+  }
+
+  &.tertiary {
+    background-color: $color-brand-dark;
+    .title,
+    .description {
+      color: $white;
+    }
+  }
 }
 
-.title {
-  font-weight: 600;
-  font-size: 42px;
-  @media screen and (max-width: 767px) {
-    font-size: 36px;
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $general-spacing-lg;
+  gap: $general-spacing-xl;
+
+  @media screen and (max-width: $break-tablet-s) {
+    gap: $general-spacing-s;
+    align-items: stretch;
+    flex-direction: column;
   }
-  @media screen and (max-width: 600px) {
-    font-size: 24px;
+
+  .title {
+    margin-bottom: $general-spacing-s;
+    @media screen and (max-width: $break-tablet-p) {
+      font-size: 1.625rem;
+    }
   }
-}
 
-.description {
-  font-size: 18px;
-  margin-top: 5px;
-  @media screen and (max-width: 600px) {
-    font-size: 14px;
-    margin-top: 10px;
+  .description {
+    font-size: 18px;
+    color: $text-secondary;
+    @media screen and (max-width: $break-tablet-p) {
+      font-size: 1rem;
+    }
   }
 }
+
+.content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $width-content;
+}
diff --git a/app/pages/HomePage/components/Section/Section.tsx b/app/pages/HomePage/components/Section/Section.tsx
index 95e178f48..0830e569e 100644
--- a/app/pages/HomePage/components/Section/Section.tsx
+++ b/app/pages/HomePage/components/Section/Section.tsx
@@ -1,20 +1,37 @@
+import { Button } from "components/ui/inline/Button/Button";
 import React from "react";
-
 import styles from "./Section.module.scss";
 
 export const HomePageSection = ({
   title,
   description,
+  backgroundColor,
+  link,
   children,
 }: {
-  title: string;
+  title?: string;
   description?: string;
+  backgroundColor: string;
   children?: React.ReactNode;
+  link?: {
+    label: string;
+    href: string;
+  };
 }) => (
-  <section className={styles.section}>
+  <section className={`${styles.section} ${styles[backgroundColor]}`}>
     <div className={styles.content}>
-      <h1 className={styles.title}>{title}</h1>
-      <div className={styles.description}>{description}</div>
+      <div className={styles.header}>
+        <div>
+          <h2 className={styles.title}>{title}</h2>
+          <p className={styles.description}>{description}</p>
+        </div>
+
+        {link && (
+          <Button href={link.href} arrowVariant="after" size="lg">
+            {link.label}
+          </Button>
+        )}
+      </div>
       {children}
     </div>
   </section>

From c8d2fe4e1702f4764e6eeb0208db289872d38d39 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 15:17:07 -0700
Subject: [PATCH 09/25] add focus/active state on event cards

---
 app/components/ui/Cards/OppEventCard.module.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss
index 658d19057..ad72ebd6a 100644
--- a/app/components/ui/Cards/OppEventCard.module.scss
+++ b/app/components/ui/Cards/OppEventCard.module.scss
@@ -10,6 +10,10 @@
   position: relative;
   cursor: pointer;
 
+  &:focus-within {
+    outline: 3px solid $color-secondary
+  }
+  
   &.opportunity {
     flex-direction: column;
   }
@@ -53,6 +57,11 @@
     .contentTitle {
       line-height: 125%;
       margin-bottom: $general-spacing-md;
+
+      &:active,
+      :focus {
+        outline: none;
+      }
     }
 
     .contentTitle a {

From 32a4e1ada0d01f38153bd7c2f7a929d584987902 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 15:17:42 -0700
Subject: [PATCH 10/25] refactor event section to use home page section

---
 .../Section/OppEventCardSection.module.scss   | 76 ++++---------------
 .../ui/Section/OppEventCardSection.tsx        | 23 ++----
 2 files changed, 23 insertions(+), 76 deletions(-)

diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss
index 3c9c12421..cbc4554ae 100644
--- a/app/components/ui/Section/OppEventCardSection.module.scss
+++ b/app/components/ui/Section/OppEventCardSection.module.scss
@@ -1,75 +1,29 @@
 @import "../../../styles/utils/_helpers.scss";
 
-.oppEventSection {
+.cardsContainer {
   display: flex;
-  flex-direction: column;
-  gap: $general-spacing-xl;
-  overflow: hidden;
+  gap: $general-spacing-lg;
   width: 100%;
-  padding: $spacing-24 $spacing-32;
+  height: 100%;
 
-  &.secondary {
-    background-color: $color-secondary;
-
-    h2,
-    p {
-      color: $white;
-    }
-  }
-  &.tertiary {
-    background-color: $color-brand-dark;
-    h2,
-    p {
-      color: $white;
-    }
-  }
-
-  @media screen and (max-width: $break-tablet-s) {
-    padding: $general-spacing-xl $general-spacing-md;
-  }
-
-  .oppEvent__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $general-spacing-lg;
-
-    h2 {
-      margin-bottom: $general-spacing-s;
-    }
+  &.event {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
 
     @media screen and (max-width: $break-tablet-p) {
-      gap: $general-spacing-s;
+      display: flex;
       flex-direction: column;
-      align-items: stretch;
     }
   }
 
-  .cardsContainer {
-    display: flex;
-    gap: $general-spacing-lg;
-    width: 100%;
-    height: 100%;
-
-    &.event {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-
-      @media screen and (max-width: $break-tablet-p) {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    @media screen and (max-width: 1336px) {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
+  @media screen and (max-width: 1336px) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    @media screen and (max-width: $break-tablet-p) {
-      display: flex;
-      flex-direction: column;
-    }
+  @media screen and (max-width: $break-tablet-p) {
+    display: flex;
+    flex-direction: column;
   }
 }
diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx
index 53ea5bacf..160753f0d 100644
--- a/app/components/ui/Section/OppEventCardSection.tsx
+++ b/app/components/ui/Section/OppEventCardSection.tsx
@@ -5,6 +5,7 @@ import { client } from "../../../sanity";
 import { Button } from "../inline/Button/Button";
 import styles from "./OppEventCardSection.module.scss";
 import { OppEventCard } from "../Cards/OppEventCard";
+import { HomePageSection } from "pages/HomePage/components/Section";
 
 export interface EventData {
   slug: {
@@ -56,20 +57,12 @@ export const OppEventCardSection = (props: OppEventCardSectionProps) => {
   const cardData = sectionData.opportunityCards || sectionData.eventCards;
 
   return (
-    <div className={`${styles.oppEventSection} ${styles[backgroundColor]}`}>
-      <div className={`${styles.oppEvent__header}`}>
-        <div>
-          <h2>{header}</h2>
-          {subheader && <p>{subheader}</p>}
-        </div>
-
-        {link && (
-          <Button href={link.href} arrowVariant="after">
-            {link.label}
-          </Button>
-        )}
-      </div>
-
+    <HomePageSection
+      title={header}
+      description={subheader}
+      backgroundColor={backgroundColor}
+      link={link}
+    >
       <div className={`${styles.cardsContainer} ${styles[sectionType]}`}>
         {cardData?.map((event): JSX.Element => {
           const { title, name, slug, date, start_date, end_date, image } =
@@ -89,6 +82,6 @@ export const OppEventCardSection = (props: OppEventCardSectionProps) => {
           );
         })}
       </div>
-    </div>
+    </HomePageSection>
   );
 };

From 61b817541545eefebc5257aae1bd5ef91e72d62c Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 15:39:52 -0700
Subject: [PATCH 11/25] fix small breakpoint issue with two column section

---
 .../TwoColumnContentSection.module.scss                  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
index 20851f60d..d8f2e49e7 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss
@@ -77,11 +77,11 @@
 
   .twoColumnContentSectionContainer {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    grid-template-columns: none;
   }
 
   .contentContainer_right {
+    padding: $general-spacing-md;
     grid-row: 1;
   }
 
@@ -91,16 +91,17 @@
   }
 
   .contentLinkButton {
+    width: 100%;
     margin: 0px 0px;
-    padding: $general-spacing-md $general-spacing-xl;
   }
 
   .contentContainer_left {
+    padding: $general-spacing-md;
     grid-row: 1;
   }
 
   .imageContainer_left {
     grid-row: 2;
-    grid-column: 1;
+    grid-column: none;
   }
 }

From 71efed697ab94c63cfd3f779758a4ed40c8a9b12 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 15:40:22 -0700
Subject: [PATCH 12/25] fix prettier

---
 app/components/ui/Cards/OppEventCard.module.scss | 4 ++--
 app/pages/HomePage/HomePage.tsx                  | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss
index ad72ebd6a..019b6d8b3 100644
--- a/app/components/ui/Cards/OppEventCard.module.scss
+++ b/app/components/ui/Cards/OppEventCard.module.scss
@@ -11,9 +11,9 @@
   cursor: pointer;
 
   &:focus-within {
-    outline: 3px solid $color-secondary
+    outline: 3px solid $color-secondary;
   }
-  
+
   &.opportunity {
     flex-direction: column;
   }
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 9dea67bc3..a0eff0bfb 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -9,6 +9,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
 import { HomePageContentColumn } from "./HomePageContentColumn";
+import { HomePageSection } from "./components/Section";
 
 const builder = imageUrlBuilder(client);
 
@@ -40,6 +41,7 @@ export const HomePage = () => {
 
   useEffect(() => {
     const fetchHomePageData = async () => {
+      /* Create and pull in 2 Column content data after schema is made*/
       const query = `*[_type == "homePage" && name == "Home Page"][0]{
         'heroSection': *[_type == "hero" && name == "Home Hero"][0],
         categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->},
@@ -69,7 +71,7 @@ export const HomePage = () => {
         description={heroSection.description}
         buttons={heroSection.buttons}
       />
-      {/* <CategoryCardSection sectionData={categoriesSection} /> */}
+      {/* <CategorySection /> */}
       <OppEventCardSection
         sectionType="opportunity"
         sectionData={opportunitySection}

From d94ecb8d7314bed13ded9310e6878613284f786a Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 16:13:27 -0700
Subject: [PATCH 13/25] fix build error

---
 app/pages/HomePage/HomePage.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index a0eff0bfb..a90786f78 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -9,7 +9,6 @@ import {
 import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
 import { HomePageContentColumn } from "./HomePageContentColumn";
-import { HomePageSection } from "./components/Section";
 
 const builder = imageUrlBuilder(client);
 
@@ -41,7 +40,9 @@ export const HomePage = () => {
 
   useEffect(() => {
     const fetchHomePageData = async () => {
-      /* Create and pull in 2 Column content data after schema is made*/
+      /* 
+        Create and pull in 2 Column content data after schema is made
+      */
       const query = `*[_type == "homePage" && name == "Home Page"][0]{
         'heroSection': *[_type == "hero" && name == "Home Hero"][0],
         categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->},

From 2470d9cf2493cb6f8ae2a5db8b5dacbd0cec8e91 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Wed, 19 Jun 2024 16:17:28 -0700
Subject: [PATCH 14/25] fix build errors again

---
 app/components/ui/Section/OppEventCardSection.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx
index 160753f0d..8d6c64821 100644
--- a/app/components/ui/Section/OppEventCardSection.tsx
+++ b/app/components/ui/Section/OppEventCardSection.tsx
@@ -1,11 +1,10 @@
 import imageUrlBuilder from "@sanity/image-url";
-import React from "react";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
+import { HomePageSection } from "pages/HomePage/components/Section";
+import React from "react";
 import { client } from "../../../sanity";
-import { Button } from "../inline/Button/Button";
-import styles from "./OppEventCardSection.module.scss";
 import { OppEventCard } from "../Cards/OppEventCard";
-import { HomePageSection } from "pages/HomePage/components/Section";
+import styles from "./OppEventCardSection.module.scss";
 
 export interface EventData {
   slug: {

From d56197adc26c3b14fc28e3894d8f0a9cb07daa72 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 10:45:50 -0700
Subject: [PATCH 15/25] add in category cards

---
 app/components/ui/Cards/CategoryCard.tsx      |  10 +-
 .../ui/Section/CategorySection.module.scss    |   5 -
 app/components/ui/Section/CategorySection.tsx | 123 ++++++++++--------
 app/pages/HomePage/HomePage.tsx               |  15 ++-
 .../components/Section/Section.module.scss    |   2 +-
 5 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/app/components/ui/Cards/CategoryCard.tsx b/app/components/ui/Cards/CategoryCard.tsx
index e504e7724..590c6e0de 100644
--- a/app/components/ui/Cards/CategoryCard.tsx
+++ b/app/components/ui/Cards/CategoryCard.tsx
@@ -3,16 +3,22 @@ import styles from "./CategoryCard.module.scss";
 
 interface CategoryCardProps {
   label: string;
-  icon: string;
+  slug: string;
+  icon: {
+    name: string;
+    provider: string;
+  };
 }
+
 export const CategoryCard = (props: CategoryCardProps) => {
   const { label, icon } = props;
   const searchQuery =
     label === "See all services" ? "" : encodeURIComponent(label);
 
+  const iconName = `${icon.provider} ${icon.name}`;
   return (
     <a href={`/service-finder${searchQuery}`} className={styles.categoryCard}>
-      <span className={`fas ${icon} ${styles.icon}`} />
+      <span className={`${iconName} ${styles.icon}`} />
       <p className={styles.categoryTitle}>{label}</p>
     </a>
   );
diff --git a/app/components/ui/Section/CategorySection.module.scss b/app/components/ui/Section/CategorySection.module.scss
index 5105cd622..77d10e597 100644
--- a/app/components/ui/Section/CategorySection.module.scss
+++ b/app/components/ui/Section/CategorySection.module.scss
@@ -2,16 +2,11 @@
 
 .categorySection {
   background-color: $color-secondary;
-  padding: $spacing-24 $spacing-32;
 
   h2 {
     margin-bottom: $general-spacing-s;
   }
 
-  @media screen and (max-width: $break-tablet-p) {
-    padding: $general-spacing-xl $general-spacing-md;
-  }
-
   .categoryCards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx
index b2e7ce051..e73607247 100644
--- a/app/components/ui/Section/CategorySection.tsx
+++ b/app/components/ui/Section/CategorySection.tsx
@@ -1,67 +1,76 @@
 import React from "react";
 import { CategoryCard } from "../Cards/CategoryCard";
 import styles from "./CategorySection.module.scss";
+import { HomePageSection } from "pages/HomePage/components/Section";
 
-const categories = [
-  {
-    label: "Arts, Culture, & Identity",
-    icon: "fa-palette",
-  },
-  {
-    label: "Childcare",
-    icon: "fa-baby",
-  },
-  {
-    label: "Education",
-    icon: "fa-school",
-  },
-  {
-    label: "Family Support",
-    icon: "fa-people-roof",
-  },
-  {
-    label: "Health & Wellness",
-    icon: "fa-heart-pulse",
-  },
-  {
-    label: "Sports & Recreation",
-    icon: "fa-running",
-  },
-  {
-    label: "Youth Workforce & Life Skills",
-    icon: "fa-briefcase",
-  },
-  {
-    label: "See all services",
-    icon: "fa-arrow-right",
-  },
-];
+interface Category {
+  icon: {
+    name: string;
+    provider: string;
+  };
+  label: string;
+  slug: string;
+  name: string;
+}
 
-/*
-TODO: future PR
-- Pull in title and description data 
-- Remove hardcoded category data
-- add in background color field in sanity schema
-*/
+interface FeaturedCategoriesSection {
+  category: Category[];
+  name: string;
+}
+
+export interface FeaturedCategoriesData {
+  header: string;
+  subheader: string;
+  backgroundColor: string;
+  featuredCategoriesSection: FeaturedCategoriesSection[];
+}
+
+interface CategorySectionProps {
+  sectionData: FeaturedCategoriesData;
+}
+
+export const CategorySection = (props: CategorySectionProps) => {
+  const { sectionData } = props;
+
+  if (!sectionData) {
+    return <div>Loading...</div>;
+  }
+
+  const { header, subheader, backgroundColor, featuredCategoriesSection } =
+    sectionData;
+  const categories = featuredCategoriesSection[0].category;
+  const navigationIcon = {
+    name: "fa-arrow-right",
+    provider: "fas",
+  };
 
-export const CategorySection = () => {
-  // const {sectionData} = props;
-  // const {header, subheader, backgroundColor} = sectionData
   return (
-    // <HomePageSection title={header} description={subheader} backgroundColor={backgroundColor}>
-    <div className={styles.categorySection}>
-      <div className={styles.categoryCards}>
-        {categories.map((category) => {
-          return (
-            <CategoryCard
-              key={category.label}
-              label={category.label}
-              icon={category.icon}
-            />
-          );
-        })}
+    <HomePageSection
+      title={header}
+      description={subheader}
+      backgroundColor={backgroundColor}
+    >
+      <div className={styles.categorySection}>
+        <div className={styles.categoryCards}>
+          {categories.map((category) => {
+            console.log(category);
+            return (
+              <CategoryCard
+                key={category.label}
+                label={category.label}
+                slug={category.slug}
+                icon={category.icon}
+              />
+            );
+          })}
+          <CategoryCard
+            key="See all services"
+            label="See all services"
+            slug={"/"}
+            icon={navigationIcon}
+          />
+        </div>
       </div>
-    </div>
-    // </HomePageSection>
+    </HomePageSection>
   );
 };
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index a90786f78..d46a2cb9c 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -9,6 +9,10 @@ import {
 import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
 import { HomePageContentColumn } from "./HomePageContentColumn";
+import {
+  CategorySection,
+  FeaturedCategoriesData,
+} from "components/ui/Section/CategorySection";
 
 const builder = imageUrlBuilder(client);
 
@@ -27,10 +31,7 @@ export interface HeroData {
 
 interface HomePageData {
   heroSection: HeroData;
-  categoriesSection: {
-    header: string;
-    subheader: string;
-  };
+  categoriesSection: FeaturedCategoriesData;
   opportunitySection: OppEventCardData;
   eventSection: OppEventCardData;
 }
@@ -62,7 +63,9 @@ export const HomePage = () => {
     return <div>Loading...</div>;
   }
 
-  const { opportunitySection, eventSection, heroSection } = homePageData;
+  const { categoriesSection, opportunitySection, eventSection, heroSection } =
+    homePageData;
+
 
   return (
     <>
@@ -72,7 +75,7 @@ export const HomePage = () => {
         description={heroSection.description}
         buttons={heroSection.buttons}
       />
-      {/* <CategorySection /> */}
+      <CategorySection sectionData={categoriesSection} />
       <OppEventCardSection
         sectionType="opportunity"
         sectionData={opportunitySection}
diff --git a/app/pages/HomePage/components/Section/Section.module.scss b/app/pages/HomePage/components/Section/Section.module.scss
index 72f4e4f35..1e4abc56a 100644
--- a/app/pages/HomePage/components/Section/Section.module.scss
+++ b/app/pages/HomePage/components/Section/Section.module.scss
@@ -10,7 +10,7 @@
   &.secondary {
     background-color: $color-secondary;
     .description {
-      color: $white;
+      color: $text-primary;
     }
   }
 

From db63bdd9deec88f2a99a1ec7590e85cb4892771e Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:02:54 -0700
Subject: [PATCH 16/25] fetch home page 2 column content

---
 .../TwoColumnContentSection.tsx               |  2 +
 app/pages/HomePage/HomePage.tsx               | 32 ++++++++++----
 app/pages/HomePage/HomePageContentColumn.tsx  | 43 -------------------
 3 files changed, 25 insertions(+), 52 deletions(-)
 delete mode 100644 app/pages/HomePage/HomePageContentColumn.tsx

diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index 4e6272e24..5cebbada9 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -38,6 +38,8 @@ const BlockRenderer = (props: {
 };
 
 export interface TwoColumnContent {
+  // Fix in sanity schema
+  twoColumnContentSections: TwoColumnContent;
   mediaAlignment: string;
   image: SanityImageSource;
   imageAlt: string | undefined;
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index d46a2cb9c..c8d6524b3 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -2,17 +2,20 @@ import imageUrlBuilder from "@sanity/image-url";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { Footer } from "components/ui";
 import Hero from "components/ui/Hero/Hero";
+import {
+  CategorySection,
+  FeaturedCategoriesData,
+} from "components/ui/Section/CategorySection";
 import {
   OppEventCardData,
   OppEventCardSection,
 } from "components/ui/Section/OppEventCardSection";
+import {
+  TwoColumnContent,
+  TwoColumnContentSection,
+} from "components/ui/TwoColumnContentSection/TwoColumnContentSection";
 import React, { useEffect, useState } from "react";
 import { client } from "../../sanity";
-import { HomePageContentColumn } from "./HomePageContentColumn";
-import {
-  CategorySection,
-  FeaturedCategoriesData,
-} from "components/ui/Section/CategorySection";
 
 const builder = imageUrlBuilder(client);
 
@@ -34,6 +37,7 @@ interface HomePageData {
   categoriesSection: FeaturedCategoriesData;
   opportunitySection: OppEventCardData;
   eventSection: OppEventCardData;
+  twoColumnContentSections: TwoColumnContent[];
 }
 
 export const HomePage = () => {
@@ -49,6 +53,9 @@ export const HomePage = () => {
         categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->},
         opportunitySection {...,'opportunityCards': opportunityCards[]->},
         eventSection {...,'eventCards': eventCards[]->},
+        'twoColumnContentSections': *[_type == 'contentPageType' && name == 'Home']{
+      twoColumnContentSections[0]->
+    }
       }`;
 
       const result: HomePageData = await client.fetch(query);
@@ -63,9 +70,13 @@ export const HomePage = () => {
     return <div>Loading...</div>;
   }
 
-  const { categoriesSection, opportunitySection, eventSection, heroSection } =
-    homePageData;
-
+  const {
+    categoriesSection,
+    opportunitySection,
+    eventSection,
+    heroSection,
+    twoColumnContentSections,
+  } = homePageData;
 
   return (
     <>
@@ -81,7 +92,10 @@ export const HomePage = () => {
         sectionData={opportunitySection}
       />
       <OppEventCardSection sectionType="event" sectionData={eventSection} />
-      <HomePageContentColumn />
+      {/* Fix Sanity schema for two column */}
+      <TwoColumnContentSection
+        {...twoColumnContentSections[0].twoColumnContentSections}
+      />
       {/* Newsletter Component */}
       <Footer />
     </>
diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx
deleted file mode 100644
index cd8ccfba7..000000000
--- a/app/pages/HomePage/HomePageContentColumn.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  TwoColumnContent,
-  TwoColumnContentSection,
-} from "components/ui/TwoColumnContentSection/TwoColumnContentSection";
-import { client } from "../../sanity";
-
-interface ContentState {
-  contentInitialized: boolean;
-  twoColumnContentSections: TwoColumnContent[];
-}
-
-export const HomePageContentColumn = () => {
-  const [contentData, setContentData] = useState<ContentState>({
-    contentInitialized: false,
-    twoColumnContentSections: [],
-  });
-
-  useEffect(() => {
-    const fetchContentData = async () => {
-      const fetchedContentData = await client.fetch(
-        `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}`
-      );
-
-      const { twoColumnContentSections } = fetchedContentData[0];
-
-      setContentData({
-        twoColumnContentSections,
-        contentInitialized: true,
-      });
-    };
-
-    fetchContentData();
-  }, []);
-
-  if (!contentData.contentInitialized) {
-    return <>loading...</>;
-  }
-
-  return (
-    <TwoColumnContentSection {...contentData.twoColumnContentSections[0]} />
-  );
-};

From 2e325c00c94bf02042a7192e2ba05bf2d1f08d02 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:03:11 -0700
Subject: [PATCH 17/25] fix slug type

---
 app/components/ui/Section/OppEventCardSection.tsx | 10 ++++------
 app/pages/HomePage/components/Section/Section.tsx |  9 +++++++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx
index 8d6c64821..816920556 100644
--- a/app/components/ui/Section/OppEventCardSection.tsx
+++ b/app/components/ui/Section/OppEventCardSection.tsx
@@ -5,12 +5,10 @@ import React from "react";
 import { client } from "../../../sanity";
 import { OppEventCard } from "../Cards/OppEventCard";
 import styles from "./OppEventCardSection.module.scss";
+import { Slug } from "pages/HomePage/components/Section/Section";
 
 export interface EventData {
-  slug: {
-    current: string;
-    _type: string;
-  };
+  slug: Slug;
   image: SanityImageSource;
 
   /* Event Types*/
@@ -31,9 +29,9 @@ export interface OppEventCardData {
   header: string;
   subheader?: string;
   backgroundColor: string;
-  link?: {
+  link: {
     label: string;
-    href: string;
+    slug: Slug;
   };
   opportunityCards?: EventData[];
   eventCards?: EventData[];
diff --git a/app/pages/HomePage/components/Section/Section.tsx b/app/pages/HomePage/components/Section/Section.tsx
index 0830e569e..3a3727378 100644
--- a/app/pages/HomePage/components/Section/Section.tsx
+++ b/app/pages/HomePage/components/Section/Section.tsx
@@ -2,6 +2,11 @@ import { Button } from "components/ui/inline/Button/Button";
 import React from "react";
 import styles from "./Section.module.scss";
 
+export interface Slug {
+  current: string;
+  _type: string;
+}
+
 export const HomePageSection = ({
   title,
   description,
@@ -15,7 +20,7 @@ export const HomePageSection = ({
   children?: React.ReactNode;
   link?: {
     label: string;
-    href: string;
+    slug: Slug;
   };
 }) => (
   <section className={`${styles.section} ${styles[backgroundColor]}`}>
@@ -27,7 +32,7 @@ export const HomePageSection = ({
         </div>
 
         {link && (
-          <Button href={link.href} arrowVariant="after" size="lg">
+          <Button href={link.slug.current} arrowVariant="after" size="lg">
             {link.label}
           </Button>
         )}

From 962927dae19fc9fd21e2b20bf657591a7b772037 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:03:19 -0700
Subject: [PATCH 18/25] rm console.log

---
 app/components/ui/Section/CategorySection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx
index e73607247..78059fbc7 100644
--- a/app/components/ui/Section/CategorySection.tsx
+++ b/app/components/ui/Section/CategorySection.tsx
@@ -53,7 +53,6 @@ export const CategorySection = (props: CategorySectionProps) => {
       <div className={styles.categorySection}>
         <div className={styles.categoryCards}>
           {categories.map((category) => {
-            console.log(category);
             return (
               <CategoryCard
                 key={category.label}

From c893886999b88a9208fd804739eafb8bbd1334d0 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:14:08 -0700
Subject: [PATCH 19/25] fix two column types

---
 .../TwoColumnContentSection.tsx                 |  2 --
 app/pages/HomePage/HomePage.tsx                 | 17 +++++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index 5cebbada9..4e6272e24 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -38,8 +38,6 @@ const BlockRenderer = (props: {
 };
 
 export interface TwoColumnContent {
-  // Fix in sanity schema
-  twoColumnContentSections: TwoColumnContent;
   mediaAlignment: string;
   image: SanityImageSource;
   imageAlt: string | undefined;
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index c8d6524b3..33ae9e170 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -37,7 +37,10 @@ interface HomePageData {
   categoriesSection: FeaturedCategoriesData;
   opportunitySection: OppEventCardData;
   eventSection: OppEventCardData;
-  twoColumnContentSections: TwoColumnContent[];
+  /* Fix naming in Sanity schema */
+  twoColumnContentSections: {
+    twoColumnContentSections: TwoColumnContent;
+  }[];
 }
 
 export const HomePage = () => {
@@ -45,9 +48,6 @@ export const HomePage = () => {
 
   useEffect(() => {
     const fetchHomePageData = async () => {
-      /* 
-        Create and pull in 2 Column content data after schema is made
-      */
       const query = `*[_type == "homePage" && name == "Home Page"][0]{
         'heroSection': *[_type == "hero" && name == "Home Hero"][0],
         categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->},
@@ -78,6 +78,10 @@ export const HomePage = () => {
     twoColumnContentSections,
   } = homePageData;
 
+  /* Fix naming in Sanity schema */
+  const twoColumnContentData =
+    twoColumnContentSections[0].twoColumnContentSections;
+
   return (
     <>
       <Hero
@@ -92,10 +96,7 @@ export const HomePage = () => {
         sectionData={opportunitySection}
       />
       <OppEventCardSection sectionType="event" sectionData={eventSection} />
-      {/* Fix Sanity schema for two column */}
-      <TwoColumnContentSection
-        {...twoColumnContentSections[0].twoColumnContentSections}
-      />
+      <TwoColumnContentSection {...twoColumnContentData} />
       {/* Newsletter Component */}
       <Footer />
     </>

From 3f4366ebcc355f206160afce541682ced70f4bc1 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:14:36 -0700
Subject: [PATCH 20/25] fix prettier/lint issues

---
 app/components/ui/Cards/CategoryCard.tsx          | 8 +++-----
 app/components/ui/Section/CategorySection.tsx     | 4 ++--
 app/components/ui/Section/OppEventCardSection.tsx | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/components/ui/Cards/CategoryCard.tsx b/app/components/ui/Cards/CategoryCard.tsx
index 590c6e0de..83d8126cd 100644
--- a/app/components/ui/Cards/CategoryCard.tsx
+++ b/app/components/ui/Cards/CategoryCard.tsx
@@ -11,13 +11,11 @@ interface CategoryCardProps {
 }
 
 export const CategoryCard = (props: CategoryCardProps) => {
-  const { label, icon } = props;
-  const searchQuery =
-    label === "See all services" ? "" : encodeURIComponent(label);
-
+  const { label, icon, slug } = props;
   const iconName = `${icon.provider} ${icon.name}`;
+
   return (
-    <a href={`/service-finder${searchQuery}`} className={styles.categoryCard}>
+    <a href={`/service-finder${slug}`} className={styles.categoryCard}>
       <span className={`${iconName} ${styles.icon}`} />
       <p className={styles.categoryTitle}>{label}</p>
     </a>
diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx
index 78059fbc7..418055bf5 100644
--- a/app/components/ui/Section/CategorySection.tsx
+++ b/app/components/ui/Section/CategorySection.tsx
@@ -1,7 +1,7 @@
+import { HomePageSection } from "pages/HomePage/components/Section";
 import React from "react";
 import { CategoryCard } from "../Cards/CategoryCard";
 import styles from "./CategorySection.module.scss";
-import { HomePageSection } from "pages/HomePage/components/Section";
 
 interface Category {
   icon: {
@@ -65,7 +65,7 @@ export const CategorySection = (props: CategorySectionProps) => {
           <CategoryCard
             key="See all services"
             label="See all services"
-            slug={"/"}
+            slug=""
             icon={navigationIcon}
           />
         </div>
diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx
index 816920556..49eab18c3 100644
--- a/app/components/ui/Section/OppEventCardSection.tsx
+++ b/app/components/ui/Section/OppEventCardSection.tsx
@@ -1,11 +1,11 @@
 import imageUrlBuilder from "@sanity/image-url";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
 import { HomePageSection } from "pages/HomePage/components/Section";
+import { Slug } from "pages/HomePage/components/Section/Section";
 import React from "react";
 import { client } from "../../../sanity";
 import { OppEventCard } from "../Cards/OppEventCard";
 import styles from "./OppEventCardSection.module.scss";
-import { Slug } from "pages/HomePage/components/Section/Section";
 
 export interface EventData {
   slug: Slug;

From dc3aaefd6f569c78a4b2e264bb9722c734698ebc Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Thu, 20 Jun 2024 12:29:37 -0700
Subject: [PATCH 21/25] refactor see all services icon

---
 app/components/ui/Section/CategorySection.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx
index 418055bf5..a08cd5b2f 100644
--- a/app/components/ui/Section/CategorySection.tsx
+++ b/app/components/ui/Section/CategorySection.tsx
@@ -39,10 +39,6 @@ export const CategorySection = (props: CategorySectionProps) => {
   const { header, subheader, backgroundColor, featuredCategoriesSection } =
     sectionData;
   const categories = featuredCategoriesSection[0].category;
-  const navigationIcon = {
-    name: "fa-arrow-right",
-    provider: "fas",
-  };
 
   return (
     <HomePageSection
@@ -66,7 +62,7 @@ export const CategorySection = (props: CategorySectionProps) => {
             key="See all services"
             label="See all services"
             slug=""
-            icon={navigationIcon}
+            icon={{ provider: "fas", name: "fa-arrow-right" }}
           />
         </div>
       </div>

From 9d789f8ae4fa3dcbda19e8c344567f9a07ac705c Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Fri, 21 Jun 2024 08:17:22 -0700
Subject: [PATCH 22/25] update comments, address pr review comments

---
 app/components/ui/Section/CategorySection.tsx        |  4 ++--
 .../TwoColumnContentSection.tsx                      |  1 +
 app/pages/AboutPageOur415/AboutPage.tsx              |  2 +-
 app/pages/HomePage/HomePage.tsx                      | 12 +++++++-----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx
index a08cd5b2f..7dcc646dc 100644
--- a/app/components/ui/Section/CategorySection.tsx
+++ b/app/components/ui/Section/CategorySection.tsx
@@ -38,7 +38,7 @@ export const CategorySection = (props: CategorySectionProps) => {
 
   const { header, subheader, backgroundColor, featuredCategoriesSection } =
     sectionData;
-  const categories = featuredCategoriesSection[0].category;
+  const featuredCategories = featuredCategoriesSection[0].category;
 
   return (
     <HomePageSection
@@ -48,7 +48,7 @@ export const CategorySection = (props: CategorySectionProps) => {
     >
       <div className={styles.categorySection}>
         <div className={styles.categoryCards}>
-          {categories.map((category) => {
+          {featuredCategories.map((category) => {
             return (
               <CategoryCard
                 key={category.label}
diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index 4e6272e24..f1fd9afe6 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -44,6 +44,7 @@ export interface TwoColumnContent {
   contentBlock: BlockContentProps;
   contentLinkButtonText: string;
   contentLinkButtonUrl: string;
+  _id: string;
 }
 
 export const TwoColumnContentSection = ({
diff --git a/app/pages/AboutPageOur415/AboutPage.tsx b/app/pages/AboutPageOur415/AboutPage.tsx
index 0f5e12911..3502d31f9 100644
--- a/app/pages/AboutPageOur415/AboutPage.tsx
+++ b/app/pages/AboutPageOur415/AboutPage.tsx
@@ -47,7 +47,7 @@ export const AboutPage = () => {
       <Masthead title={pageData.mastHead} />
       {pageData?.twoColumnContentSections?.map(
         (section: JSX.IntrinsicAttributes & TwoColumnContent) => {
-          return <TwoColumnContentSection key={section.key} {...section} />;
+          return <TwoColumnContentSection key={section._id} {...section} />;
         }
       )}
       <EmailSignup />
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 33ae9e170..91fdb1bda 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -37,7 +37,9 @@ interface HomePageData {
   categoriesSection: FeaturedCategoriesData;
   opportunitySection: OppEventCardData;
   eventSection: OppEventCardData;
-  /* Fix naming in Sanity schema */
+  /* TODO: update field in Sanity schema
+  to avoid nested values of the same name
+  */
   twoColumnContentSections: {
     twoColumnContentSections: TwoColumnContent;
   }[];
@@ -66,7 +68,7 @@ export const HomePage = () => {
     fetchHomePageData();
   }, []);
 
-  if (!homePageData) {
+  if (homePageData === null) {
     return <div>Loading...</div>;
   }
 
@@ -78,7 +80,6 @@ export const HomePage = () => {
     twoColumnContentSections,
   } = homePageData;
 
-  /* Fix naming in Sanity schema */
   const twoColumnContentData =
     twoColumnContentSections[0].twoColumnContentSections;
 
@@ -103,8 +104,9 @@ export const HomePage = () => {
   );
 };
 
-// Remove when new categories is created
-// other components are dependent on this list
+/* TODO: Remove when new categories are created
+ other components are dependent on this list */
+
 export const coreCategories = [
   {
     algoliaCategoryName: "Covid-food",

From 72ad47140aaa89b29bfc7ad8d877412c30ea8c4a Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Fri, 21 Jun 2024 08:17:35 -0700
Subject: [PATCH 23/25] add basic error handling

---
 app/pages/HomePage/HomePage.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index 91fdb1bda..ebd7881c5 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -57,12 +57,15 @@ export const HomePage = () => {
         eventSection {...,'eventCards': eventCards[]->},
         'twoColumnContentSections': *[_type == 'contentPageType' && name == 'Home']{
       twoColumnContentSections[0]->
-    }
-      }`;
+      }
+    }`;
 
-      const result: HomePageData = await client.fetch(query);
-
-      setHomePageData(result);
+      try {
+        const result: HomePageData = await client.fetch(query);
+        setHomePageData(result);
+      } catch (error) {
+        console.error("Failed to fetch home page data");
+      }
     };
 
     fetchHomePageData();

From 0a8b8a72774aacae5029bab87cda5213f1b17845 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Fri, 21 Jun 2024 08:37:26 -0700
Subject: [PATCH 24/25] fix no console lint error, revert two column prop type

---
 .../TwoColumnContentSection/TwoColumnContentSection.tsx  | 9 ++++++++-
 app/pages/HomePage/HomePage.tsx                          | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
index f1fd9afe6..9f3cfadf8 100644
--- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
+++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx
@@ -54,7 +54,14 @@ export const TwoColumnContentSection = ({
   mediaAlignment,
   contentLinkButtonText,
   contentLinkButtonUrl,
-}: TwoColumnContent) => {
+}: {
+  mediaAlignment: string;
+  image: SanityImageSource;
+  imageAlt: string | undefined;
+  contentBlock: any;
+  contentLinkButtonText: string;
+  contentLinkButtonUrl: string;
+}) => {
   return (
     <section className={styles.twoColumnContentSectionContainer}>
       <div
diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx
index ebd7881c5..ef9e8cf67 100644
--- a/app/pages/HomePage/HomePage.tsx
+++ b/app/pages/HomePage/HomePage.tsx
@@ -1,5 +1,6 @@
 import imageUrlBuilder from "@sanity/image-url";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types.d";
+import * as Sentry from "@sentry/browser";
 import { Footer } from "components/ui";
 import Hero from "components/ui/Hero/Hero";
 import {
@@ -64,7 +65,7 @@ export const HomePage = () => {
         const result: HomePageData = await client.fetch(query);
         setHomePageData(result);
       } catch (error) {
-        console.error("Failed to fetch home page data");
+        Sentry.captureException(error);
       }
     };
 

From 9660204b398c070ef5e2a8f8717d6cb3ad2c04e5 Mon Sep 17 00:00:00 2001
From: Justin Caovan <justincaovan@gmail.com>
Date: Fri, 21 Jun 2024 08:38:24 -0700
Subject: [PATCH 25/25] rm previous global button styling

---
 app/styles/st-base/_forms.scss | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/app/styles/st-base/_forms.scss b/app/styles/st-base/_forms.scss
index 6a8429431..ddfdbac81 100644
--- a/app/styles/st-base/_forms.scss
+++ b/app/styles/st-base/_forms.scss
@@ -32,27 +32,6 @@ textarea {
   resize: vertical !important;
 }
 
-// This button is affecting all buttons globally
-// button {
-//   @extend %font-size-default;
-//   border: 0;
-//   // height: calc-em(44px);
-//   padding: calc-em(6px) calc-em(20px);
-//   color: $color-white;
-//   background: $color-green;
-//   display: inline-block;
-//   font-weight: 600;
-//   &:active,
-//   &:hover,
-//   &:focus {
-//     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
-//   }
-
-//   &.danger {
-//     background: $color-red;
-//   }
-// }
-
 button.filter-chip {
   border-radius: 3px;
   border: 1px solid #e0e0e0;