From 00a14a8b08aeadbed724581ca495a233f3617f2e Mon Sep 17 00:00:00 2001
From: gabrielsaruhashi <gabriel.saruhashi@gmail.com>
Date: Sat, 4 Jul 2020 09:31:25 -0300
Subject: [PATCH 1/4] added state and facility mailing guides, connecting with
 GSheets API

---
 src/components/app/App.tsx                    |  10 +-
 src/components/app/cards/JobCard.tsx          |   6 -
 src/components/app/pages/FacilityGuide.tsx    |  54 ++++
 .../app/pages/StateMailingGuide.tsx           | 101 ++++++++
 src/components/app/pages/landing.tsx          |   2 +
 src/components/app/sections/GuidesByState.css |   0
 src/components/app/sections/GuidesByState.tsx |  28 +++
 src/utils/us_states.tsx                       | 238 ++++++++++++++++++
 src/utils/utils.js                            |  10 +
 9 files changed, 442 insertions(+), 7 deletions(-)
 create mode 100644 src/components/app/pages/FacilityGuide.tsx
 create mode 100644 src/components/app/pages/StateMailingGuide.tsx
 create mode 100644 src/components/app/sections/GuidesByState.css
 create mode 100644 src/components/app/sections/GuidesByState.tsx
 create mode 100644 src/utils/us_states.tsx

diff --git a/src/components/app/App.tsx b/src/components/app/App.tsx
index 232504bf..699adc5d 100644
--- a/src/components/app/App.tsx
+++ b/src/components/app/App.tsx
@@ -10,9 +10,10 @@ import Footer from "./footer/Footer";
 import HowItWorks from "./pages/HowItWorks";
 import Ambassadors from "./pages/Ambassadors";
 import GetInvolved from "./pages/GetInvolved";
-
+import StateMailingGuide from "./pages/StateMailingGuide";
 import { HashRouter as Router, Route, Switch } from "react-router-dom";
 import { trackPageOpen, load, page } from "../../utils/analytics";
+import { US_STATES } from "../../utils/us_states";
 
 const App: React.FC = () => {
   useEffect(() => {
@@ -32,6 +33,13 @@ const App: React.FC = () => {
         <Route path="/ambassadors" component={Ambassadors} />
         <Route path="/mission" component={Mission} />
         <Route path="/get-involved" component={GetInvolved} />
+        {US_STATES.map((item) => (
+          <Route
+            key={item.abbreviation}
+            path={`/${item.abbreviation}`}
+            component={StateMailingGuide}
+          />
+        ))}
         <Route path="/" component={Landing} />
       </Switch>
       <Footer />
diff --git a/src/components/app/cards/JobCard.tsx b/src/components/app/cards/JobCard.tsx
index 856c6efb..dd7311b5 100644
--- a/src/components/app/cards/JobCard.tsx
+++ b/src/components/app/cards/JobCard.tsx
@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "./JobCard.css";
 
-interface JobProps {
-  title: string;
-  description: string;
-  type: string;
-}
-
 const JobCard = ({ title, description, type }) => {
   const applyLink =
     type === "volunteer"
diff --git a/src/components/app/pages/FacilityGuide.tsx b/src/components/app/pages/FacilityGuide.tsx
new file mode 100644
index 00000000..a5b13927
--- /dev/null
+++ b/src/components/app/pages/FacilityGuide.tsx
@@ -0,0 +1,54 @@
+import React, { FunctionComponent, useState, useEffect } from "react";
+// import "./FacilityGuide.css";
+
+interface FacilityInformationProps {
+  state: string;
+  facility: string;
+  description: string;
+  address: string;
+  telephone: string;
+  mailing: string;
+}
+
+const FacilityGuide: FunctionComponent<FacilityInformationProps> = ({
+  facility,
+  description,
+  address,
+  telephone,
+  mailing,
+}) => {
+  //   const [job_clicked, setJobClicked] = useState(false);
+
+  //   useEffect(() => {
+  //     if (job_clicked) {
+  //       window.open(applyLink);
+  //     }
+  //   });
+  // https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
+  return (
+    <div className="d-flex flex-column align-items-center">
+      <div
+        className="text-center"
+        dangerouslySetInnerHTML={{ __html: facility }}
+      />
+      <div
+        className="text-center"
+        dangerouslySetInnerHTML={{ __html: description }}
+      />
+      <div
+        className="text-center"
+        dangerouslySetInnerHTML={{ __html: address }}
+      />
+      <div
+        className="text-center"
+        dangerouslySetInnerHTML={{ __html: telephone }}
+      />
+      <div
+        className="text-center"
+        dangerouslySetInnerHTML={{ __html: mailing }}
+      />
+    </div>
+  );
+};
+
+export default FacilityGuide;
diff --git a/src/components/app/pages/StateMailingGuide.tsx b/src/components/app/pages/StateMailingGuide.tsx
new file mode 100644
index 00000000..d9dc4e1a
--- /dev/null
+++ b/src/components/app/pages/StateMailingGuide.tsx
@@ -0,0 +1,101 @@
+import React, { Component } from "react";
+import FacilityGuide from "./FacilityGuide";
+import { RouteComponentProps } from "react-router-dom";
+import { getStateGuideData, getStateName } from "../../../utils/utils";
+import { withRouter } from "react-router-dom";
+
+type FacilityItem = {
+  state: string;
+  facility: string;
+  description: string;
+  address: string;
+  telephone: string;
+  mailing: string;
+};
+
+interface FacilityItems extends Array<FacilityItem> {}
+
+type StateMailingGuideState = {
+  // region: string,
+  items: FacilityItems;
+  region: string;
+};
+
+type TParams = {
+  region: string;
+};
+
+class StateMailingGuide extends Component<
+  RouteComponentProps<TParams>,
+  StateMailingGuideState
+> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [],
+      region: this.props.location.pathname.replace("/", ""),
+    };
+  }
+
+  componentDidMount() {
+    const url = getStateGuideData(
+      this.props.location.pathname.replace("/", "")
+    );
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        let batchRowValues = data.valueRanges[0].values;
+
+        let rows: FacilityItem[] = [];
+
+        for (let i = 1; i < batchRowValues.length; i++) {
+          let rowObject: FacilityItem = {
+            state: "",
+            facility: "",
+            description: "",
+            address: "",
+            telephone: "",
+            mailing: "",
+          };
+
+          for (let j = 0; j < batchRowValues[i].length; j++) {
+            rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
+          }
+          rows.push(rowObject);
+        }
+
+        this.setState({ items: rows });
+        console.log(this.state.items);
+      });
+  }
+
+  render() {
+    const listItems: JSX.Element[] = this.state.items.map(
+      (item: FacilityItem) => (
+        <FacilityGuide
+          state={item.state}
+          facility={item.facility}
+          description={item.description}
+          address={item.address}
+          telephone={item.telephone}
+          mailing={item.mailing}
+        />
+      )
+    );
+
+    const state = getStateName(this.state.region);
+    return (
+      <div>
+        <div className="d-flex flex-column p-3">
+          <span className="p1 font-weight-bold text-center">
+            {state}, Mailing & Visiting
+          </span>
+        </div>
+        <div>{listItems}</div>
+      </div>
+    );
+  }
+}
+
+export default withRouter(StateMailingGuide);
diff --git a/src/components/app/pages/landing.tsx b/src/components/app/pages/landing.tsx
index 998fcdd0..4c89af75 100644
--- a/src/components/app/pages/landing.tsx
+++ b/src/components/app/pages/landing.tsx
@@ -6,6 +6,7 @@ import LettersForFamilies from "../sections/LettersFamilies";
 import LettersForOrgs from "../sections/LettersOrgs";
 import GetStarted from "../sections/GetStarted";
 import Careers from "../sections/Careers";
+import GuidesByState from "../sections/GuidesByState";
 
 const Landing: React.FC = () => {
   return (
@@ -17,6 +18,7 @@ const Landing: React.FC = () => {
       <LettersForOrgs />
       <GetStarted />
       <Careers />
+      <GuidesByState />
     </div>
   );
 };
diff --git a/src/components/app/sections/GuidesByState.css b/src/components/app/sections/GuidesByState.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/app/sections/GuidesByState.tsx b/src/components/app/sections/GuidesByState.tsx
new file mode 100644
index 00000000..677f718d
--- /dev/null
+++ b/src/components/app/sections/GuidesByState.tsx
@@ -0,0 +1,28 @@
+import React, { Component, FunctionComponent } from "react";
+import { US_STATES } from "../../../utils/us_states";
+import { Link } from "react-router-dom";
+import _ from "lodash";
+
+const GuidesByState: FunctionComponent = () => {
+  let states = US_STATES.map((item) => (
+    <Link className="blue" to={`/${item.abbreviation}`}>
+      {item.name}
+    </Link>
+  ));
+  let lists = _.chunk(states, 11).map(function (group) {
+    return <div className="d-flex flex-column ml-lg-5">{group}</div>;
+  });
+  console.log(states);
+  console.log(lists);
+  return (
+    <div className="d-flex flex-row default-px">
+      <span className="font-weight-bold p3">
+        Mailing
+        <br /> Guides by State
+      </span>
+      <div className="d-flex flex-column flex-lg-row">{lists}</div>
+    </div>
+  );
+};
+
+export default GuidesByState;
diff --git a/src/utils/us_states.tsx b/src/utils/us_states.tsx
new file mode 100644
index 00000000..e994e1c4
--- /dev/null
+++ b/src/utils/us_states.tsx
@@ -0,0 +1,238 @@
+export const US_STATES = [
+  {
+    name: "Alabama",
+    abbreviation: "AL",
+  },
+  {
+    name: "Alaska",
+    abbreviation: "AK",
+  },
+  // {
+  //     "name": "American Samoa",
+  //     "abbreviation": "AS"
+  // },
+  {
+    name: "Arizona",
+    abbreviation: "AZ",
+  },
+  {
+    name: "Arkansas",
+    abbreviation: "AR",
+  },
+  {
+    name: "California",
+    abbreviation: "CA",
+  },
+  {
+    name: "Colorado",
+    abbreviation: "CO",
+  },
+  {
+    name: "Connecticut",
+    abbreviation: "CT",
+  },
+  {
+    name: "Delaware",
+    abbreviation: "DE",
+  },
+  {
+    name: "District Of Columbia",
+    abbreviation: "DC",
+  },
+  // {
+  //     "name": "Federated States Of Micronesia",
+  //     "abbreviation": "FM"
+  // },
+  {
+    name: "Florida",
+    abbreviation: "FL",
+  },
+  {
+    name: "Georgia",
+    abbreviation: "GA",
+  },
+  {
+    name: "Guam",
+    abbreviation: "GU",
+  },
+  {
+    name: "Hawaii",
+    abbreviation: "HI",
+  },
+  {
+    name: "Idaho",
+    abbreviation: "ID",
+  },
+  {
+    name: "Illinois",
+    abbreviation: "IL",
+  },
+  {
+    name: "Indiana",
+    abbreviation: "IN",
+  },
+  {
+    name: "Iowa",
+    abbreviation: "IA",
+  },
+  {
+    name: "Kansas",
+    abbreviation: "KS",
+  },
+  {
+    name: "Kentucky",
+    abbreviation: "KY",
+  },
+  {
+    name: "Louisiana",
+    abbreviation: "LA",
+  },
+  {
+    name: "Maine",
+    abbreviation: "ME",
+  },
+  {
+    name: "Marshall Islands",
+    abbreviation: "MH",
+  },
+  {
+    name: "Maryland",
+    abbreviation: "MD",
+  },
+  {
+    name: "Massachusetts",
+    abbreviation: "MA",
+  },
+  {
+    name: "Michigan",
+    abbreviation: "MI",
+  },
+  {
+    name: "Minnesota",
+    abbreviation: "MN",
+  },
+  {
+    name: "Mississippi",
+    abbreviation: "MS",
+  },
+  {
+    name: "Missouri",
+    abbreviation: "MO",
+  },
+  {
+    name: "Montana",
+    abbreviation: "MT",
+  },
+  {
+    name: "Nebraska",
+    abbreviation: "NE",
+  },
+  {
+    name: "Nevada",
+    abbreviation: "NV",
+  },
+  {
+    name: "New Hampshire",
+    abbreviation: "NH",
+  },
+  {
+    name: "New Jersey",
+    abbreviation: "NJ",
+  },
+  {
+    name: "New Mexico",
+    abbreviation: "NM",
+  },
+  {
+    name: "New York",
+    abbreviation: "NY",
+  },
+  {
+    name: "North Carolina",
+    abbreviation: "NC",
+  },
+  {
+    name: "North Dakota",
+    abbreviation: "ND",
+  },
+  // {
+  //     "name": "Northern Mariana Islands",
+  //     "abbreviation": "MP"
+  // },
+  {
+    name: "Ohio",
+    abbreviation: "OH",
+  },
+  {
+    name: "Oklahoma",
+    abbreviation: "OK",
+  },
+  {
+    name: "Oregon",
+    abbreviation: "OR",
+  },
+  // {
+  //     "name": "Palau",
+  //     "abbreviation": "PW"
+  // },
+  {
+    name: "Pennsylvania",
+    abbreviation: "PA",
+  },
+  // {
+  //     "name": "Puerto Rico",
+  //     "abbreviation": "PR"
+  // },
+  {
+    name: "Rhode Island",
+    abbreviation: "RI",
+  },
+  {
+    name: "South Carolina",
+    abbreviation: "SC",
+  },
+  {
+    name: "South Dakota",
+    abbreviation: "SD",
+  },
+  {
+    name: "Tennessee",
+    abbreviation: "TN",
+  },
+  {
+    name: "Texas",
+    abbreviation: "TX",
+  },
+  {
+    name: "Utah",
+    abbreviation: "UT",
+  },
+  {
+    name: "Vermont",
+    abbreviation: "VT",
+  },
+  {
+    name: "Virgin Islands",
+    abbreviation: "VI",
+  },
+  {
+    name: "Virginia",
+    abbreviation: "VA",
+  },
+  {
+    name: "Washington",
+    abbreviation: "WA",
+  },
+  {
+    name: "West Virginia",
+    abbreviation: "WV",
+  },
+  {
+    name: "Wisconsin",
+    abbreviation: "WI",
+  },
+  {
+    name: "Wyoming",
+    abbreviation: "WY",
+  },
+];
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 823f6357..8135c5c3 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,3 +1,13 @@
+import { US_STATES } from "./us_states";
+
 export function numberWithCommas(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+
+export function getStateGuideData(abbrev) {
+  return `https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GSHEETS_ID}/values:batchGet?ranges=${abbrev}&majorDimension=ROWS&key=${process.env.REACT_APP_GSHEETS_KEY}`;
+}
+
+export function getStateName(abbrev) {
+  return US_STATES[abbrev];
+}

From 1114c1d45d2682aeb4ce0e6e1f4129f3b5c7f084 Mon Sep 17 00:00:00 2001
From: gabrielsaruhashi <gabriel.saruhashi@gmail.com>
Date: Sun, 5 Jul 2020 21:31:00 -0300
Subject: [PATCH 2/4] adede faciltiy guide rendering

---
 src/components/app/App.tsx                    |  9 ++
 src/components/app/pages/FacilityGuide.tsx    | 96 ++++++++++++-------
 .../app/pages/StateMailingGuide.tsx           | 88 ++++++-----------
 src/components/app/pages/landing.tsx          |  5 +-
 ...{GuidesByState.css => GuidesCatalogue.css} |  0
 ...{GuidesByState.tsx => GuidesCatalogue.tsx} | 27 ++++--
 src/utils/us_states.tsx                       | 35 ++-----
 src/utils/utils.js                            | 13 ---
 src/utils/utils.tsx                           | 56 +++++++++++
 9 files changed, 184 insertions(+), 145 deletions(-)
 rename src/components/app/sections/{GuidesByState.css => GuidesCatalogue.css} (100%)
 rename src/components/app/sections/{GuidesByState.tsx => GuidesCatalogue.tsx} (51%)
 delete mode 100644 src/utils/utils.js
 create mode 100644 src/utils/utils.tsx

diff --git a/src/components/app/App.tsx b/src/components/app/App.tsx
index 699adc5d..f46495e1 100644
--- a/src/components/app/App.tsx
+++ b/src/components/app/App.tsx
@@ -14,6 +14,7 @@ import StateMailingGuide from "./pages/StateMailingGuide";
 import { HashRouter as Router, Route, Switch } from "react-router-dom";
 import { trackPageOpen, load, page } from "../../utils/analytics";
 import { US_STATES } from "../../utils/us_states";
+import FacilityGuide from "./pages/FacilityGuide";
 
 const App: React.FC = () => {
   useEffect(() => {
@@ -37,9 +38,17 @@ const App: React.FC = () => {
           <Route
             key={item.abbreviation}
             path={`/${item.abbreviation}`}
+            exact
             component={StateMailingGuide}
           />
         ))}
+        {US_STATES.map((item) => (
+          <Route
+            key={item.abbreviation}
+            path={`/${item.abbreviation}/:facilityName`}
+            component={FacilityGuide}
+          />
+        ))}
         <Route path="/" component={Landing} />
       </Switch>
       <Footer />
diff --git a/src/components/app/pages/FacilityGuide.tsx b/src/components/app/pages/FacilityGuide.tsx
index a5b13927..36a39858 100644
--- a/src/components/app/pages/FacilityGuide.tsx
+++ b/src/components/app/pages/FacilityGuide.tsx
@@ -1,52 +1,76 @@
-import React, { FunctionComponent, useState, useEffect } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
 // import "./FacilityGuide.css";
+import { getGuideData } from "../../../utils/utils";
 
-interface FacilityInformationProps {
+export interface FacilityItem {
   state: string;
   facility: string;
   description: string;
   address: string;
   telephone: string;
   mailing: string;
+  route: string;
 }
 
-const FacilityGuide: FunctionComponent<FacilityInformationProps> = ({
-  facility,
-  description,
-  address,
-  telephone,
-  mailing,
-}) => {
-  //   const [job_clicked, setJobClicked] = useState(false);
+interface FacilityGuideProps extends RouteComponentProps<FacilityItem> {}
 
-  //   useEffect(() => {
-  //     if (job_clicked) {
-  //       window.open(applyLink);
-  //     }
-  //   });
-  // https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
+const FacilityGuide = ({
+  location,
+}: RouteComponentProps<{}, any, FacilityItem | any>) => {
+  const [facility, setFacility] = useState(
+    location.state ? location.state.data : null
+  );
+  const [route, _] = useState(location.pathname.split("/")[2]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getGuideData(route, "facility");
+
+      setFacility(data.length > 0 ? data[0] : null);
+    }
+    if (!facility) {
+      fetchData();
+    }
+  }, [facility, route]); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
+
+  // For this use case, dangerouslySetInnerHTML seems safe given that we are the only ones controlling the data source passed down to
+  // The flag is primarily to alert users of the vulnearbility to XSS scripting
+  // Source: https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
   return (
     <div className="d-flex flex-column align-items-center">
-      <div
-        className="text-center"
-        dangerouslySetInnerHTML={{ __html: facility }}
-      />
-      <div
-        className="text-center"
-        dangerouslySetInnerHTML={{ __html: description }}
-      />
-      <div
-        className="text-center"
-        dangerouslySetInnerHTML={{ __html: address }}
-      />
-      <div
-        className="text-center"
-        dangerouslySetInnerHTML={{ __html: telephone }}
-      />
-      <div
-        className="text-center"
-        dangerouslySetInnerHTML={{ __html: mailing }}
-      />
+      {facility ? (
+        <div>
+          {" "}
+          <h1
+            className="text-center"
+            dangerouslySetInnerHTML={{ __html: facility!.facility }}
+          />
+          <section>
+            <h2>Physical Address</h2>
+            <p
+              className="text-center"
+              dangerouslySetInnerHTML={{ __html: facility!.address }}
+            />
+          </section>
+          <section>
+            <h2>Telephone</h2>
+            <p
+              className="text-center"
+              dangerouslySetInnerHTML={{ __html: facility!.telephone }}
+            />
+          </section>
+          <section>
+            <h2>Mailing Address</h2>
+            <div
+              className="text-center"
+              dangerouslySetInnerHTML={{ __html: facility!.mailing }}
+            />
+          </section>
+        </div>
+      ) : (
+        <div />
+      )}
     </div>
   );
 };
diff --git a/src/components/app/pages/StateMailingGuide.tsx b/src/components/app/pages/StateMailingGuide.tsx
index d9dc4e1a..407ce731 100644
--- a/src/components/app/pages/StateMailingGuide.tsx
+++ b/src/components/app/pages/StateMailingGuide.tsx
@@ -1,23 +1,16 @@
 import React, { Component } from "react";
-import FacilityGuide from "./FacilityGuide";
+import FacilityGuide, { FacilityItem } from "./FacilityGuide";
 import { RouteComponentProps } from "react-router-dom";
-import { getStateGuideData, getStateName } from "../../../utils/utils";
-import { withRouter } from "react-router-dom";
-
-type FacilityItem = {
-  state: string;
-  facility: string;
-  description: string;
-  address: string;
-  telephone: string;
-  mailing: string;
-};
+import { getGuideData, getStateName } from "../../../utils/utils";
+import { Link, withRouter, useRouteMatch } from "react-router-dom";
+import GuideCatalogue from "../sections/GuidesCatalogue";
+import _ from "lodash";
 
 interface FacilityItems extends Array<FacilityItem> {}
 
 type StateMailingGuideState = {
   // region: string,
-  items: FacilityItems;
+  facilities: FacilityItems;
   region: string;
 };
 
@@ -32,57 +25,37 @@ class StateMailingGuide extends Component<
   constructor(props) {
     super(props);
     this.state = {
-      items: [],
+      facilities: [],
       region: this.props.location.pathname.replace("/", ""),
     };
   }
 
-  componentDidMount() {
-    const url = getStateGuideData(
-      this.props.location.pathname.replace("/", "")
+  async componentDidMount() {
+    const data = await getGuideData(
+      this.props.match.url.replace("/", ""),
+      "state"
     );
-
-    fetch(url)
-      .then((response) => response.json())
-      .then((data) => {
-        let batchRowValues = data.valueRanges[0].values;
-
-        let rows: FacilityItem[] = [];
-
-        for (let i = 1; i < batchRowValues.length; i++) {
-          let rowObject: FacilityItem = {
-            state: "",
-            facility: "",
-            description: "",
-            address: "",
-            telephone: "",
-            mailing: "",
-          };
-
-          for (let j = 0; j < batchRowValues[i].length; j++) {
-            rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
-          }
-          rows.push(rowObject);
-        }
-
-        this.setState({ items: rows });
-        console.log(this.state.items);
-      });
+    this.setState({ facilities: data });
   }
 
   render() {
-    const listItems: JSX.Element[] = this.state.items.map(
-      (item: FacilityItem) => (
-        <FacilityGuide
-          state={item.state}
-          facility={item.facility}
-          description={item.description}
-          address={item.address}
-          telephone={item.telephone}
-          mailing={item.mailing}
-        />
-      )
-    );
+    const { url } = this.props.match;
+
+    console.log(this.state.facilities);
+    const links = this.state.facilities.map((item) => (
+      // to={{ pathname: `${url}/${item.route}`, state: { foo: 'bar'} }}
+      <Link
+        key={item.route}
+        className="blue"
+        to={{ pathname: `${url}/${item.route}`, state: { data: item } }}
+      >
+        {item.facility}
+      </Link>
+    ));
+
+    const catalogue = _.chunk(links, 7).map(function (group) {
+      return <div className="d-flex flex-column ml-lg-5">{group}</div>;
+    });
 
     const state = getStateName(this.state.region);
     return (
@@ -92,7 +65,8 @@ class StateMailingGuide extends Component<
             {state}, Mailing & Visiting
           </span>
         </div>
-        <div>{listItems}</div>
+        <div className="d-flex flex-column flex-lg-row">{catalogue}</div>
+        {/* <div>{listItems}</div> */}
       </div>
     );
   }
diff --git a/src/components/app/pages/landing.tsx b/src/components/app/pages/landing.tsx
index 4c89af75..0bbba2ca 100644
--- a/src/components/app/pages/landing.tsx
+++ b/src/components/app/pages/landing.tsx
@@ -6,7 +6,8 @@ import LettersForFamilies from "../sections/LettersFamilies";
 import LettersForOrgs from "../sections/LettersOrgs";
 import GetStarted from "../sections/GetStarted";
 import Careers from "../sections/Careers";
-import GuidesByState from "../sections/GuidesByState";
+import GuidesCatalogue from "../sections/GuidesCatalogue";
+import { US_STATES } from "../../../utils/us_states";
 
 const Landing: React.FC = () => {
   return (
@@ -18,7 +19,7 @@ const Landing: React.FC = () => {
       <LettersForOrgs />
       <GetStarted />
       <Careers />
-      <GuidesByState />
+      <GuidesCatalogue items={US_STATES} />
     </div>
   );
 };
diff --git a/src/components/app/sections/GuidesByState.css b/src/components/app/sections/GuidesCatalogue.css
similarity index 100%
rename from src/components/app/sections/GuidesByState.css
rename to src/components/app/sections/GuidesCatalogue.css
diff --git a/src/components/app/sections/GuidesByState.tsx b/src/components/app/sections/GuidesCatalogue.tsx
similarity index 51%
rename from src/components/app/sections/GuidesByState.tsx
rename to src/components/app/sections/GuidesCatalogue.tsx
index 677f718d..07d707bb 100644
--- a/src/components/app/sections/GuidesByState.tsx
+++ b/src/components/app/sections/GuidesCatalogue.tsx
@@ -1,28 +1,39 @@
 import React, { Component, FunctionComponent } from "react";
-import { US_STATES } from "../../../utils/us_states";
 import { Link } from "react-router-dom";
 import _ from "lodash";
+import "./GuidesCatalogue.css";
 
-const GuidesByState: FunctionComponent = () => {
-  let states = US_STATES.map((item) => (
+interface GuideItem {
+  abbreviation: string;
+  name: string;
+}
+
+interface GuidesCatalogueProps {
+  items: Array<GuideItem>;
+}
+
+const GuidesCatalogue: FunctionComponent<GuidesCatalogueProps> = ({
+  items,
+}) => {
+  const links = items.map((item) => (
     <Link className="blue" to={`/${item.abbreviation}`}>
       {item.name}
     </Link>
   ));
-  let lists = _.chunk(states, 11).map(function (group) {
+
+  const catalogue = _.chunk(links, 11).map(function (group) {
     return <div className="d-flex flex-column ml-lg-5">{group}</div>;
   });
-  console.log(states);
-  console.log(lists);
+
   return (
     <div className="d-flex flex-row default-px">
       <span className="font-weight-bold p3">
         Mailing
         <br /> Guides by State
       </span>
-      <div className="d-flex flex-column flex-lg-row">{lists}</div>
+      <div className="d-flex flex-column flex-lg-row">{catalogue}</div>
     </div>
   );
 };
 
-export default GuidesByState;
+export default GuidesCatalogue;
diff --git a/src/utils/us_states.tsx b/src/utils/us_states.tsx
index e994e1c4..8a42b2a0 100644
--- a/src/utils/us_states.tsx
+++ b/src/utils/us_states.tsx
@@ -1,4 +1,9 @@
-export const US_STATES = [
+export interface State {
+  name: string;
+  abbreviation: string;
+}
+
+export const US_STATES: State[] = [
   {
     name: "Alabama",
     abbreviation: "AL",
@@ -7,10 +12,6 @@ export const US_STATES = [
     name: "Alaska",
     abbreviation: "AK",
   },
-  // {
-  //     "name": "American Samoa",
-  //     "abbreviation": "AS"
-  // },
   {
     name: "Arizona",
     abbreviation: "AZ",
@@ -39,10 +40,6 @@ export const US_STATES = [
     name: "District Of Columbia",
     abbreviation: "DC",
   },
-  // {
-  //     "name": "Federated States Of Micronesia",
-  //     "abbreviation": "FM"
-  // },
   {
     name: "Florida",
     abbreviation: "FL",
@@ -51,10 +48,6 @@ export const US_STATES = [
     name: "Georgia",
     abbreviation: "GA",
   },
-  {
-    name: "Guam",
-    abbreviation: "GU",
-  },
   {
     name: "Hawaii",
     abbreviation: "HI",
@@ -91,10 +84,6 @@ export const US_STATES = [
     name: "Maine",
     abbreviation: "ME",
   },
-  {
-    name: "Marshall Islands",
-    abbreviation: "MH",
-  },
   {
     name: "Maryland",
     abbreviation: "MD",
@@ -155,10 +144,6 @@ export const US_STATES = [
     name: "North Dakota",
     abbreviation: "ND",
   },
-  // {
-  //     "name": "Northern Mariana Islands",
-  //     "abbreviation": "MP"
-  // },
   {
     name: "Ohio",
     abbreviation: "OH",
@@ -171,18 +156,10 @@ export const US_STATES = [
     name: "Oregon",
     abbreviation: "OR",
   },
-  // {
-  //     "name": "Palau",
-  //     "abbreviation": "PW"
-  // },
   {
     name: "Pennsylvania",
     abbreviation: "PA",
   },
-  // {
-  //     "name": "Puerto Rico",
-  //     "abbreviation": "PR"
-  // },
   {
     name: "Rhode Island",
     abbreviation: "RI",
diff --git a/src/utils/utils.js b/src/utils/utils.js
deleted file mode 100644
index 8135c5c3..00000000
--- a/src/utils/utils.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { US_STATES } from "./us_states";
-
-export function numberWithCommas(x) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
-
-export function getStateGuideData(abbrev) {
-  return `https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GSHEETS_ID}/values:batchGet?ranges=${abbrev}&majorDimension=ROWS&key=${process.env.REACT_APP_GSHEETS_KEY}`;
-}
-
-export function getStateName(abbrev) {
-  return US_STATES[abbrev];
-}
diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx
new file mode 100644
index 00000000..a18fdb80
--- /dev/null
+++ b/src/utils/utils.tsx
@@ -0,0 +1,56 @@
+import { US_STATES } from "./us_states";
+
+export function numberWithCommas(x: number): string {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+interface FacilityItem {
+  state: string;
+  facility: string;
+  description: string;
+  address: string;
+  telephone: string;
+  mailing: string;
+  route: string;
+}
+
+type GuideFilter = "state" | "facility";
+
+export async function getGuideData(keyword: string, type: GuideFilter) {
+  // const url = `https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GSHEETS_ID}/values:batchGet?ranges=${abbrev}&majorDimension=ROWS&key=${process.env.REACT_APP_GSHEETS_KEY}`;
+  const url = `https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GSHEETS_ID}/values:batchGet?ranges=Main&majorDimension=ROWS&key=${process.env.REACT_APP_GSHEETS_KEY}`;
+
+  const response = await fetch(url);
+  const data = await response.json();
+  let batchRowValues = data.valueRanges[0].values;
+
+  let rows: FacilityItem[] = [];
+
+  for (let i = 1; i < batchRowValues.length; i++) {
+    let rowObject: FacilityItem = {} as FacilityItem;
+
+    for (let j = 0; j < batchRowValues[i].length; j++) {
+      rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
+    }
+    rows.push(rowObject);
+  }
+  console.log(rows);
+  switch (type) {
+    case "state":
+      rows = rows.filter((row) => row.state === getStateName(keyword));
+      break;
+    case "facility":
+      rows = rows.filter((row) => row.route === keyword);
+      break;
+  }
+
+  console.log(rows);
+  return rows;
+}
+
+export function getStateName(abbrev: string): string {
+  const matches = US_STATES.filter((state) => {
+    return state.abbreviation === abbrev;
+  });
+  return matches[Object.keys(matches)[0]]["name"];
+}

From 91936ce9ef42c47389fe773c200302bdff1dd3e9 Mon Sep 17 00:00:00 2001
From: gabrielsaruhashi <gabriel.saruhashi@gmail.com>
Date: Thu, 9 Jul 2020 09:33:30 -0300
Subject: [PATCH 3/4] adding spinner when loading

---
 src/components/app/facepile/Facepile.css      |  0
 src/components/app/facepile/Facepile.tsx      |  2 +
 src/components/app/pages/FacilityGuide.tsx    | 39 ++++++++-----------
 .../app/pages/StateMailingGuide.tsx           |  8 +---
 .../app/sections/GuidesCatalogue.tsx          |  2 +-
 src/utils/utils.tsx                           |  2 -
 6 files changed, 21 insertions(+), 32 deletions(-)
 create mode 100644 src/components/app/facepile/Facepile.css
 create mode 100644 src/components/app/facepile/Facepile.tsx

diff --git a/src/components/app/facepile/Facepile.css b/src/components/app/facepile/Facepile.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/app/facepile/Facepile.tsx b/src/components/app/facepile/Facepile.tsx
new file mode 100644
index 00000000..a97cc78d
--- /dev/null
+++ b/src/components/app/facepile/Facepile.tsx
@@ -0,0 +1,2 @@
+import React from "react";
+import Image from "react-bootstrap/Image";
diff --git a/src/components/app/pages/FacilityGuide.tsx b/src/components/app/pages/FacilityGuide.tsx
index 36a39858..201d1b45 100644
--- a/src/components/app/pages/FacilityGuide.tsx
+++ b/src/components/app/pages/FacilityGuide.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent, useEffect, useState } from "react";
 import { RouteComponentProps } from "react-router-dom";
 // import "./FacilityGuide.css";
 import { getGuideData } from "../../../utils/utils";
+import Spinner from "react-bootstrap/Spinner";
 
 export interface FacilityItem {
   state: string;
@@ -13,8 +14,6 @@ export interface FacilityItem {
   route: string;
 }
 
-interface FacilityGuideProps extends RouteComponentProps<FacilityItem> {}
-
 const FacilityGuide = ({
   location,
 }: RouteComponentProps<{}, any, FacilityItem | any>) => {
@@ -32,44 +31,38 @@ const FacilityGuide = ({
     if (!facility) {
       fetchData();
     }
-  }, [facility, route]); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
+  }, [facility, route]);
 
-  // For this use case, dangerouslySetInnerHTML seems safe given that we are the only ones controlling the data source passed down to
+  // For this use case, dangerouslySetInnerHTML seems safe given that we are the only with edit access to the markup being passed down
   // The flag is primarily to alert users of the vulnearbility to XSS scripting
   // Source: https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
   return (
-    <div className="d-flex flex-column align-items-center">
+    <div className="d-flex flex-column align-items-center py-5">
       {facility ? (
         <div>
           {" "}
+          <p className="lightgray">{facility.state}</p>
           <h1
-            className="text-center"
-            dangerouslySetInnerHTML={{ __html: facility!.facility }}
+            dangerouslySetInnerHTML={{ __html: facility.facility }}
+            className="mb-5"
           />
-          <section>
+          <section className="mb-3">
             <h2>Physical Address</h2>
-            <p
-              className="text-center"
-              dangerouslySetInnerHTML={{ __html: facility!.address }}
-            />
+            <p dangerouslySetInnerHTML={{ __html: facility.address }} />
           </section>
-          <section>
+          <section className="mb-3">
             <h2>Telephone</h2>
-            <p
-              className="text-center"
-              dangerouslySetInnerHTML={{ __html: facility!.telephone }}
-            />
+            <p dangerouslySetInnerHTML={{ __html: facility.telephone }} />
           </section>
-          <section>
+          <section className="mb-3">
             <h2>Mailing Address</h2>
-            <div
-              className="text-center"
-              dangerouslySetInnerHTML={{ __html: facility!.mailing }}
-            />
+            <div dangerouslySetInnerHTML={{ __html: facility.mailing }} />
           </section>
         </div>
       ) : (
-        <div />
+        <div className="vh-100">
+          <Spinner animation="border" />
+        </div>
       )}
     </div>
   );
diff --git a/src/components/app/pages/StateMailingGuide.tsx b/src/components/app/pages/StateMailingGuide.tsx
index 407ce731..097e683c 100644
--- a/src/components/app/pages/StateMailingGuide.tsx
+++ b/src/components/app/pages/StateMailingGuide.tsx
@@ -1,15 +1,13 @@
 import React, { Component } from "react";
-import FacilityGuide, { FacilityItem } from "./FacilityGuide";
+import { FacilityItem } from "./FacilityGuide";
 import { RouteComponentProps } from "react-router-dom";
 import { getGuideData, getStateName } from "../../../utils/utils";
-import { Link, withRouter, useRouteMatch } from "react-router-dom";
-import GuideCatalogue from "../sections/GuidesCatalogue";
+import { Link, withRouter } from "react-router-dom";
 import _ from "lodash";
 
 interface FacilityItems extends Array<FacilityItem> {}
 
 type StateMailingGuideState = {
-  // region: string,
   facilities: FacilityItems;
   region: string;
 };
@@ -41,9 +39,7 @@ class StateMailingGuide extends Component<
   render() {
     const { url } = this.props.match;
 
-    console.log(this.state.facilities);
     const links = this.state.facilities.map((item) => (
-      // to={{ pathname: `${url}/${item.route}`, state: { foo: 'bar'} }}
       <Link
         key={item.route}
         className="blue"
diff --git a/src/components/app/sections/GuidesCatalogue.tsx b/src/components/app/sections/GuidesCatalogue.tsx
index 07d707bb..3845363e 100644
--- a/src/components/app/sections/GuidesCatalogue.tsx
+++ b/src/components/app/sections/GuidesCatalogue.tsx
@@ -26,7 +26,7 @@ const GuidesCatalogue: FunctionComponent<GuidesCatalogueProps> = ({
   });
 
   return (
-    <div className="d-flex flex-row default-px">
+    <div className="d-flex flex-row default-px py-5">
       <span className="font-weight-bold p3">
         Mailing
         <br /> Guides by State
diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx
index a18fdb80..6bbc6e1a 100644
--- a/src/utils/utils.tsx
+++ b/src/utils/utils.tsx
@@ -34,7 +34,6 @@ export async function getGuideData(keyword: string, type: GuideFilter) {
     }
     rows.push(rowObject);
   }
-  console.log(rows);
   switch (type) {
     case "state":
       rows = rows.filter((row) => row.state === getStateName(keyword));
@@ -44,7 +43,6 @@ export async function getGuideData(keyword: string, type: GuideFilter) {
       break;
   }
 
-  console.log(rows);
   return rows;
 }
 

From 3e62d4307493b474cd000007323d85845faf7948 Mon Sep 17 00:00:00 2001
From: gabrielsaruhashi <gabriel.saruhashi@gmail.com>
Date: Sat, 11 Jul 2020 18:54:57 -0300
Subject: [PATCH 4/4] added components

---
 src/components/app/App.css                    | 24 ++++++++++++
 src/components/app/cards/AuthorCard.css       |  4 ++
 src/components/app/cards/AuthorCard.tsx       | 20 ++++++++++
 src/components/app/cards/CtaCard.css          |  5 +++
 src/components/app/cards/CtaCard.tsx          | 38 +++++++++++++++++++
 src/components/app/cards/SummaryCard.css      | 23 +++++++++++
 src/components/app/cards/SummaryCard.tsx      | 20 ++++++++++
 src/components/app/facepile/Facepile.css      | 10 +++++
 src/components/app/facepile/Facepile.tsx      | 29 ++++++++++++++
 src/components/app/pages/FacilityGuide.tsx    | 11 +++++-
 .../app/pages/StateMailingGuide.tsx           | 38 +++++++++++++------
 11 files changed, 210 insertions(+), 12 deletions(-)
 create mode 100644 src/components/app/cards/AuthorCard.css
 create mode 100644 src/components/app/cards/AuthorCard.tsx
 create mode 100644 src/components/app/cards/CtaCard.css
 create mode 100644 src/components/app/cards/CtaCard.tsx
 create mode 100644 src/components/app/cards/SummaryCard.css
 create mode 100644 src/components/app/cards/SummaryCard.tsx

diff --git a/src/components/app/App.css b/src/components/app/App.css
index 27abc93a..667c5024 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -5,6 +5,8 @@
   --main-primary-dark: #042c7a;
   --main-cta-color: #4884f8;
   --main-lightblue-color: #ebf8ff;
+  --main-grey: #656a6f;
+  --main-lightgrey: #d0d0d4;
   --main-black: #232624;
 }
 
@@ -69,10 +71,17 @@ a:hover {
   background-color: var(--main-primary-dark);
 }
 
+.lightgrey {
+  color: var(--main-lightgrey);
+}
 .blue {
   color: var(--main-primary-color);
 }
 
+.grey {
+  color: var(--main-grey);
+}
+
 .bg-lightblue {
   background-color: var(--main-lightblue-color);
 }
@@ -102,6 +111,14 @@ h1 {
   font-size: 16px;
 }
 
+.p6 {
+  font-size: 14px;
+}
+
+.p7 {
+  font-size: 13px;
+}
+
 @media (min-width: 768px) {
   h1 {
     font-size: 48px;
@@ -132,6 +149,13 @@ h1 {
   max-width: 90%;
 }
 
+.w-33 {
+  max-width: 33%;
+}
+
+.top-2 {
+  top: 2em;
+}
 .secondary-btn {
   border: var(--main-primary-color) 1px solid !important;
   color: var(--main-primary-color) !important;
diff --git a/src/components/app/cards/AuthorCard.css b/src/components/app/cards/AuthorCard.css
new file mode 100644
index 00000000..46702735
--- /dev/null
+++ b/src/components/app/cards/AuthorCard.css
@@ -0,0 +1,4 @@
+.author-img {
+  height: 60px;
+  width: 60px;
+}
diff --git a/src/components/app/cards/AuthorCard.tsx b/src/components/app/cards/AuthorCard.tsx
new file mode 100644
index 00000000..219296d0
--- /dev/null
+++ b/src/components/app/cards/AuthorCard.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Image from "react-bootstrap/Image";
+import "./AuthorCard.css";
+
+const AuthorCard = () => {
+  return (
+    <div className="d-flex flex-row align-items-center">
+      <Image
+        roundedCircle
+        src={require("../../../assets/team/lara.jpeg")}
+        className="author-img"
+      />
+      <div className="d-flex flex-column ml-3">
+        <span className="bold p6">Written by Lara Schull</span>
+        <span className="grey p7">Updated July 9, 2020</span>
+      </div>
+    </div>
+  );
+};
+export default AuthorCard;
diff --git a/src/components/app/cards/CtaCard.css b/src/components/app/cards/CtaCard.css
new file mode 100644
index 00000000..a916d0b6
--- /dev/null
+++ b/src/components/app/cards/CtaCard.css
@@ -0,0 +1,5 @@
+.cta-card-wrapper {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px -5px;
+  padding: 3em;
+  width: 100%;
+}
diff --git a/src/components/app/cards/CtaCard.tsx b/src/components/app/cards/CtaCard.tsx
new file mode 100644
index 00000000..a839d085
--- /dev/null
+++ b/src/components/app/cards/CtaCard.tsx
@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from "react";
+import { Home, Send, Heart } from "react-feather";
+import "./CtaCard.css";
+import Button from "react-bootstrap/Button";
+
+const CtaCard: FunctionComponent = () => {
+  return (
+    <div className="cta-card-wrapper">
+      <span className="font-weight-bold p4">
+        A nonprofit that helps you stay in touch with your loved one for free.
+      </span>
+
+      <div className="d-flex flex-row mt-3">
+        <Send className="blue" size={48} />
+        <p className="ml-3">
+          We've helped <b>{process.env.REACT_APP_FAMILY_COUNT}</b> families send
+          over <b>20,000</b> letters.
+        </p>
+      </div>
+      <div className="d-flex flex-row mt-3">
+        <Home className="blue" size={48} />
+        <p className="ml-3">
+          We serve all jails, facilities and detention centers.
+        </p>
+      </div>
+      <div className="d-flex flex-row mt-3">
+        <Heart className="blue" size={48} />
+        <p className="ml-3">
+          Our <b>award winning</b> nonprofit's help is 100% free.
+        </p>
+      </div>
+      <Button className="bg-blue" size="lg" block>
+        Get Started
+      </Button>
+    </div>
+  );
+};
+export default CtaCard;
diff --git a/src/components/app/cards/SummaryCard.css b/src/components/app/cards/SummaryCard.css
new file mode 100644
index 00000000..a1e7bf68
--- /dev/null
+++ b/src/components/app/cards/SummaryCard.css
@@ -0,0 +1,23 @@
+.summary {
+  padding: 0px 0px 1em;
+  margin: 0px auto 2em;
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgb(240, 241, 242);
+  border-image: initial;
+  background: rgb(255, 255, 255);
+}
+
+.summary b {
+  font-size: 18px;
+  position: relative;
+  top: -0.8em;
+  background: rgb(255, 255, 255);
+  padding: 0.25em 1em;
+  margin: 0px 1em;
+}
+
+.summary p {
+  padding: 0px 2em;
+  margin: 1em 0px 1.5em;
+}
diff --git a/src/components/app/cards/SummaryCard.tsx b/src/components/app/cards/SummaryCard.tsx
new file mode 100644
index 00000000..699161ba
--- /dev/null
+++ b/src/components/app/cards/SummaryCard.tsx
@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+import "./SummaryCard.css";
+
+interface SummaryCardProps {
+  locality: string;
+}
+
+const SummaryCard: FunctionComponent<SummaryCardProps> = ({ locality }) => {
+  return (
+    <div className="summary">
+      <b>Summary</b>
+      <p>
+        Is your loved one in a facility in {locality}? With our mobile app, you
+        can write letters and send photos for free.
+      </p>
+    </div>
+  );
+};
+
+export default SummaryCard;
diff --git a/src/components/app/facepile/Facepile.css b/src/components/app/facepile/Facepile.css
index e69de29b..e74f1cfb 100644
--- a/src/components/app/facepile/Facepile.css
+++ b/src/components/app/facepile/Facepile.css
@@ -0,0 +1,10 @@
+.facepile-img {
+  height: 25px;
+  width: 25px;
+  object-fit: cover;
+  margin-right: -0.5rem;
+}
+
+.facepile-caption {
+  font-size: 13px;
+}
diff --git a/src/components/app/facepile/Facepile.tsx b/src/components/app/facepile/Facepile.tsx
index a97cc78d..f0d4364e 100644
--- a/src/components/app/facepile/Facepile.tsx
+++ b/src/components/app/facepile/Facepile.tsx
@@ -1,2 +1,31 @@
 import React from "react";
 import Image from "react-bootstrap/Image";
+import "./Facepile.css";
+import { Link } from "react-router-dom";
+
+const Facepile = () => {
+  const images = [
+    require("../../../assets/ambassadors/Anna-Jones-California.png"),
+    require("../../../assets/ambassadors/Carolyn-Vargas-New-York.png"),
+    require("../../../assets/ambassadors/Connie-Mcbride-Virginia.png"),
+    require("../../../assets/ambassadors/Jessica-Ruiz-Oklahoma.png"),
+    require("../../../assets/ambassadors/Rachel-Wade-New-York.png"),
+  ];
+
+  return (
+    <div className="d-flex flex-row align-items-center">
+      {images.map((img) => (
+        <Image src={img} roundedCircle className="facepile-img" />
+      ))}
+      <span className="ml-3 facepile-caption">
+        <b>{process.env.REACT_APP_FAMILY_COUNT}</b> families have sent free
+        letters to their loved ones using Ameelio.{" "}
+        <Link className="blue facepile-caption" to="/">
+          Learn More
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default Facepile;
diff --git a/src/components/app/pages/FacilityGuide.tsx b/src/components/app/pages/FacilityGuide.tsx
index 201d1b45..fcb2ee16 100644
--- a/src/components/app/pages/FacilityGuide.tsx
+++ b/src/components/app/pages/FacilityGuide.tsx
@@ -3,6 +3,9 @@ import { RouteComponentProps } from "react-router-dom";
 // import "./FacilityGuide.css";
 import { getGuideData } from "../../../utils/utils";
 import Spinner from "react-bootstrap/Spinner";
+import Facepile from "../facepile/Facepile";
+import SummaryCard from "../cards/SummaryCard";
+import AuthorCard from "../cards/AuthorCard";
 
 export interface FacilityItem {
   state: string;
@@ -44,8 +47,14 @@ const FacilityGuide = ({
           <p className="lightgray">{facility.state}</p>
           <h1
             dangerouslySetInnerHTML={{ __html: facility.facility }}
-            className="mb-5"
+            className=""
           />
+          <Facepile />
+          <hr />
+          <AuthorCard />
+          <div className="mt-5">
+            <SummaryCard locality={facility.facility} />
+          </div>
           <section className="mb-3">
             <h2>Physical Address</h2>
             <p dangerouslySetInnerHTML={{ __html: facility.address }} />
diff --git a/src/components/app/pages/StateMailingGuide.tsx b/src/components/app/pages/StateMailingGuide.tsx
index 097e683c..060ecc9b 100644
--- a/src/components/app/pages/StateMailingGuide.tsx
+++ b/src/components/app/pages/StateMailingGuide.tsx
@@ -4,7 +4,10 @@ import { RouteComponentProps } from "react-router-dom";
 import { getGuideData, getStateName } from "../../../utils/utils";
 import { Link, withRouter } from "react-router-dom";
 import _ from "lodash";
-
+import Facepile from "../facepile/Facepile";
+import SummaryCard from "../cards/SummaryCard";
+import AuthorCard from "../cards/AuthorCard";
+import CtaCard from "../cards/CtaCard";
 interface FacilityItems extends Array<FacilityItem> {}
 
 type StateMailingGuideState = {
@@ -42,27 +45,40 @@ class StateMailingGuide extends Component<
     const links = this.state.facilities.map((item) => (
       <Link
         key={item.route}
-        className="blue"
+        className="blue p5"
         to={{ pathname: `${url}/${item.route}`, state: { data: item } }}
       >
         {item.facility}
       </Link>
     ));
 
-    const catalogue = _.chunk(links, 7).map(function (group) {
-      return <div className="d-flex flex-column ml-lg-5">{group}</div>;
+    const catalogue = _.chunk(links, 10).map(function (group) {
+      return <div className="d-flex flex-column mr-lg-5">{group}</div>;
     });
 
     const state = getStateName(this.state.region);
     return (
-      <div>
-        <div className="d-flex flex-column p-3">
-          <span className="p1 font-weight-bold text-center">
-            {state}, Mailing & Visiting
-          </span>
+      <div className="default-px d-flex">
+        <div>
+          <div className="d-flex flex-column">
+            <span className="p4 lightgrey">{state}</span>
+            <span className="p1 font-weight-bold">
+              {state}, Mailing & Visiting
+            </span>
+            <Facepile />
+            <hr className="mb-3" />
+            <AuthorCard />
+          </div>
+          <div className="mt-5">
+            <SummaryCard locality={state} />
+          </div>
+          <div className="d-flex flex-column flex-lg-row">{catalogue}</div>
+        </div>
+        <div className="w-33 vh-100">
+          <div className="d-flex flex-column mt-5 ml-5 position-sticky top-2">
+            <CtaCard />
+          </div>
         </div>
-        <div className="d-flex flex-column flex-lg-row">{catalogue}</div>
-        {/* <div>{listItems}</div> */}
       </div>
     );
   }