diff --git a/app/services/nodemailer-service.js b/app/services/nodemailer-service.js
deleted file mode 100644
index 5a9f67fe9..000000000
--- a/app/services/nodemailer-service.js
+++ /dev/null
@@ -1,100 +0,0 @@
-const applyEmailTemplate = require("../../client/src/helpers/EmailTemplate");
-const nodemailer = require("nodemailer");
-const serverUrl = process.env.SERVER_URL;
-const clientUrl = process.env.CLIENT_URL;
-const emailUser = process.env.EMAIL_USER;
-
-const transporter = nodemailer.createTransport({
- service: "gmail",
- auth: {
- user: process.env.EMAIL_USER,
- pass: process.env.EMAIL_PASSWORD,
- },
-});
-
-const sendRegistrationConfirmation = async (
- email,
- token,
- emailTemplate = applyEmailTemplate
-) => {
- const emailBody = `
-
- Hello,
-
-
- Thank you for registering with Food Oasis!
- Please take a moment to verify your account by clicking the link bellow.
-
-
-
-
- Thanks,
-
- Food Oasis Team
- `;
- const options = {
- to: `${email}`,
- from: emailUser,
- subject: `Verify your account`,
- html: `${emailTemplate.applyEmailTemplate(emailBody)}`,
- };
- transporter.sendMail(options, function (err, result) {
- if (err) {
- return Promise.reject("Sending registration confirmation email failed.");
- } else {
- return Promise.resolve(result);
- }
- });
-};
-
-const sendResetPasswordConfirmation = async (
- email,
- token,
- emailTemplate = applyEmailTemplate
-) => {
- const emailBody = `
-
- Hello,
-
-
- Your Food Oasis password can be reset by clicking the link bellow.
-
-
-
- Regards,
-
- Food Oasis Team
- `;
- const options = {
- to: `${email}`,
- from: "dnr.jobsforhope@gmail.com",
- subject: `Password Reset`,
- html: `${emailTemplate.applyEmailTemplate(emailBody)}`,
- };
- transporter.sendMail(options, function (err, result) {
- if (err) {
- return Promise.reject(
- "Sending reset password confirmation email failed."
- );
- } else {
- return Promise.resolve(result);
- }
- });
-};
-
-module.exports = {
- sendRegistrationConfirmation,
- sendResetPasswordConfirmation,
-};
diff --git a/app/services/sendgrid-service.js b/app/services/sendgrid-service.js
index 9a88a5a80..486e5c752 100644
--- a/app/services/sendgrid-service.js
+++ b/app/services/sendgrid-service.js
@@ -17,7 +17,7 @@ const sendRegistrationConfirmation = async (
Thank you for registering with Food Oasis!
- Please take a moment to verify your account by clicking the link bellow.
+ Please take a moment to verify your account by clicking the link below.
@@ -57,7 +57,7 @@ const sendResetPasswordConfirmation = async (
Hello,
- Your Food Oasis password can be reset by clicking the link bellow.
+ Your Food Oasis password can be reset by clicking the link below.
diff --git a/client/package.json b/client/package.json
index d7cbb6f98..9b9b598fc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,7 +1,7 @@
{
"name": "food-oasis-client",
"description": "React Client for Food Oasis",
- "version": "1.0.24",
+ "version": "1.0.25",
"author": "Hack for LA",
"license": "GPL-2.0",
"private": true,
diff --git a/client/public/index.html b/client/public/index.html
index fb41eebf0..c4d63487c 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -16,7 +16,7 @@
name="description"
content="Food Oasis is an application that helps eliminate food waste by connecting donors and food outlets."
/>
-
+
diff --git a/client/src/App.js b/client/src/App.js
index 45ae033bb..2468a43eb 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -20,6 +20,9 @@ import Faq from "components/StaticPages/Faq";
import DonateCA from "components/StaticPagesCA/Donate";
import AboutCA from "components/StaticPagesCA/About";
import FaqCA from "components/StaticPagesCA/Faq";
+import DonateHI from "components/StaticPagesHI/Donate";
+import AboutHI from "components/StaticPagesHI/About";
+import FaqHI from "components/StaticPagesHI/Faq";
import Resources from "components/Resources";
import Register from "components/Register";
import Login from "components/Login";
@@ -32,6 +35,7 @@ import Home from "containers/Home";
import Results from "components/Results/ResultsContainer";
import Suggestion from "components/Suggestion";
import newTheme from "./theme/newTheme";
+import { defaultCoordinates } from "./helpers/Configuration";
const useStyles = makeStyles({
app: (props) => ({
@@ -73,8 +77,8 @@ function App() {
const [toast, setToast] = useState({ message: "" });
const [bgImg, setBgImg] = useState("");
const [origin, setOrigin] = useState({
- latitude: 34.0522,
- longitude: -118.2437,
+ latitude: defaultCoordinates.lat,
+ longitude: defaultCoordinates.lon,
});
useEffect(() => {
@@ -125,8 +129,8 @@ function App() {
(error) => {
console.log(`Getting browser location failed: ${error.message}`);
const userCoordinates = {
- latitude: 34.0522,
- longitude: -118.2437,
+ latitude: defaultCoordinates.lat,
+ longitude: defaultCoordinates.lon,
};
setUserCoordinates(userCoordinates);
}
@@ -239,13 +243,31 @@ function App() {
- {tenantId === 2 ? : }
+ {tenantId === 3 ? (
+
+ ) : tenantId === 2 ? (
+
+ ) : (
+
+ )}
- {tenantId === 2 ? : }
+ {tenantId === 3 ? (
+
+ ) : tenantId === 2 ? (
+
+ ) : (
+
+ )}
- {tenantId === 2 ? : }
+ {tenantId === 3 ? (
+
+ ) : tenantId === 2 ? (
+
+ ) : (
+
+ )}
diff --git a/client/src/components/Menu.js b/client/src/components/Menu.js
index 1962e6849..bc5b69f70 100644
--- a/client/src/components/Menu.js
+++ b/client/src/components/Menu.js
@@ -83,6 +83,7 @@ export default function Menu(props) {
<>
logout(setUser, setToast, history)}
diff --git a/client/src/components/Results/ResultsContainer.js b/client/src/components/Results/ResultsContainer.js
index 7c13d1800..0351dadeb 100644
--- a/client/src/components/Results/ResultsContainer.js
+++ b/client/src/components/Results/ResultsContainer.js
@@ -5,6 +5,7 @@ import { Grid } from "@material-ui/core";
import { useOrganizationBests } from "hooks/useOrganizationBests";
import useCategoryIds from "hooks/useCategoryIds";
import { isMobile } from "helpers";
+import { defaultCoordinates } from "../../helpers/Configuration";
import Filters from "./ResultsFilters";
import List from "./ResultsList";
@@ -78,14 +79,14 @@ export default function ResultsContainer(props) {
? JSON.parse(storage.origin).latitude
: userCoordinates
? userCoordinates.latitude
- : 34.07872,
+ : defaultCoordinates.lat,
longitude: userSearch
? userSearch.longitude
: storage.origin
? JSON.parse(storage.origin).longitude
: userCoordinates
? userCoordinates.longitude
- : -118.243328,
+ : defaultCoordinates.lon,
};
const [radius, setRadius] = useState(
diff --git a/client/src/components/StaticPagesHI/About.js b/client/src/components/StaticPagesHI/About.js
new file mode 100644
index 000000000..f29bf7e0d
--- /dev/null
+++ b/client/src/components/StaticPagesHI/About.js
@@ -0,0 +1,282 @@
+import React from "react";
+
+import aboutbg from "./assets/about-bg.png";
+import iconSpacer from "./assets/icon-spacer.svg";
+import iconSpacerBlue from "./assets/icon-spacer-blue.svg";
+import foodCycle from "./assets/food-cycle.png";
+import foodForward from "./assets/food-forward.png";
+import farmPeople from "./assets/farm-people.png";
+import foodBank from "./assets/food-bank.png";
+import { makeStyles } from "@material-ui/core";
+import Footer from "../Footer";
+
+const useStyles = makeStyles(() => ({
+ outer: {
+ background: "#fff",
+ },
+ main: {
+ padding: "1.5rem 0;",
+ maxWidth: "1200px",
+ margin: "0 auto",
+ "@media only screen and (min-width: 75em)": {
+ padding: "1.5rem 2rem",
+ },
+ },
+ title: {
+ textTransform: "uppercase",
+ fontWeight: 500,
+ textAlign: "center",
+ background: "#FFF",
+ margin: 0,
+ padding: "32px 0",
+ "& $span": {
+ color: "#336699",
+ },
+ },
+ figure: {
+ margin: 0,
+ padding: 0,
+ },
+ icon: {
+ margin: "auto",
+ },
+ mission: {
+ padding: "32px",
+ margin: "32px 0",
+ borderRadius: "24px",
+ color: "#4d4d4d",
+ background: "#f0f0f0",
+ display: "flex",
+ flexDirection: "column",
+ "& $h2": {
+ color: "#336699",
+ flexBasis: "100",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ },
+ team: {
+ padding: "32px",
+ margin: "32px 0 0 0",
+ borderRadius: "24px",
+ color: "#fff",
+ background: "#336699",
+ display: "flex",
+ flexDirection: "column",
+ "& $h2": {
+ flexBasis: "100",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ "& $a": {
+ color: "#fff",
+ },
+ },
+ contact: {
+ padding: "32px",
+ margin: "32px 0 0 0",
+ borderRadius: "24px",
+ color: "#4d4d4d",
+ background: "#f0f0f0",
+ display: "flex",
+ flexDirection: "column",
+ textAlign: "center",
+ "& $h2": {
+ color: "#336699",
+ flexBasis: "100",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ "& $a": {
+ color: "#4d4d4d",
+ },
+ },
+ partners: {
+ background: "#fff",
+ padding: "48px 32px",
+ borderRadius: "24px",
+ justifyContent: "space-between",
+ alignItems: "center",
+ display: "flex",
+ flexWrap: "wrap",
+ flexDirection: "column",
+ "& $h2": {
+ color: "#336699",
+ width: "100%",
+ flexBasis: "100",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "60px",
+ },
+ "@media only screen and (min-width: 64em)": {
+ flexDirection: "row",
+ },
+ },
+ partnersLogo: {
+ maxWidth: "100%",
+ height: "100%",
+ marginBottom: "40px",
+ "@media only screen and (min-width: 64em) ": {
+ marginBottom: 0,
+ },
+ },
+}));
+const About = () => {
+ const classes = useStyles();
+ // const { t } = useTranslation("about");
+ return (
+
+
+ About Food Oasis Hawaii
+
+
+
+
+
+
+
+
Our Mission
+
+ Access to enough food should be a basic right. Unfortunately, this
+ is not the reality for millions of people in Hawaii. Food insecurity
+ is inconsistent with access to cheap and nutritious food.
+
+
(TBD)
+
+ Food pantries in the area are experiencing unprecedented demand. The
+ demand for food assistance has almost doubled since the beginning of
+ 2020. To compound matters, it is the hard work of volunteers that
+ keeps pantries and meal programs open. The number of volunteers
+ available to distribute food has diminished.
+
+
+ The primary goal of Food Oasis is to provide up-to-date information
+ to Hawaiians. We built a directory that connects anyone with
+ hundreds of free food resources. Food Oasis presents reliable
+ information on a user-friendly platform. This will reduce stress and
+ uncertainty for food seekers. It will also demonstrate to our
+ community the growing need of food donations on the islands.
+
+
+ Food Oasis is creating a directory of updated food resources. There
+ are countless groups helping to feed hungry Hawaiians. But it’s
+ difficult for those in need to find them because there’s no one
+ source of updated info. We’re working to change that.
+
+
+
+
+ Our Team
+
+ Food Oasis started in 2015 under{" "}
+
+ Hack for LA
+
+ , a brigade under the non-profit{" "}
+
+ Code for America
+
+ . The goal was to create a site of free and subsidized food
+ resources. The team gave the project to a nonprofit to manage its
+ day-to-day operations. The upkeep turned out to be much more work
+ than any single nonprofit could handle.
+
+
+
+ Our web-based solution is sparking collaboration, community
+ building, and team building. The result of this community-building
+ gives the food seeker updated information to find the free food
+ resources they need.
+
+
+ We are 100% volunteer-run project. We look forward to sharing our
+ updated directory with Hawaii.
+
+
+
+
+ Contact Us
+
+ Questions about our project?
+
+ Updates to the listings?
+
+ General inquiries?
+
+
+
+ Please contact us
+
+ foodoasishi@gmail.com
+
+
+
+
+ Our Partners
+
+
+
+
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/client/src/components/StaticPagesHI/Donate.js b/client/src/components/StaticPagesHI/Donate.js
new file mode 100644
index 000000000..b0eb93f01
--- /dev/null
+++ b/client/src/components/StaticPagesHI/Donate.js
@@ -0,0 +1,241 @@
+import React from "react";
+
+import donatebg from "./assets/donate-bg.png";
+import iconSpacer from "./assets/icon-spacer.svg";
+import iconSpacerBlue from "./assets/icon-spacer-blue.svg";
+import { makeStyles } from "@material-ui/core";
+import Footer from "../Footer";
+
+const useStyles = makeStyles(() => ({
+ outer: {
+ background: "#fff",
+ },
+ main: {
+ padding: "1.5rem 0;",
+ maxWidth: "1200px",
+ margin: "0 auto",
+ "@media only screen and (min-width: 75em)": {
+ padding: "1.5rem 2rem",
+ },
+ },
+ title: {
+ color: "#4d4d4d",
+ textTransform: "uppercase",
+ fontWeight: 500,
+ textAlign: "center",
+ background: "#FFF",
+ margin: 0,
+ padding: "32px 0",
+ },
+ btnOrange: {
+ color: "#fff",
+ fontSize: "18px",
+ background: "#e57109",
+ boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+ borderRadius: "6px",
+ padding: "8px 16px",
+ textDecoration: "none",
+ textTransform: "uppercase",
+ },
+ btnOutline: {
+ color: "#fff",
+ border: "1px solid #336699",
+ background: "#336699",
+ borderRadius: "6px",
+ padding: "8px 16px",
+ textDecoration: "none",
+ textTransform: "uppercase",
+ },
+ btnWhite: {
+ color: "#336699",
+ background: "#ffffff",
+ borderRadius: "6px",
+ padding: "8px 16px",
+ textDecoration: "none",
+ textTransform: "uppercase",
+ },
+ figure: {
+ margin: 0,
+ padding: 0,
+ },
+ icon: {
+ margin: "auto",
+ },
+ donate: {
+ padding: "32px",
+ margin: "32px 0 0 0",
+ borderRadius: "24px",
+ color: "#4d4d4d",
+ background: "#f0f0f0",
+ display: "flex",
+ flexWrap: "wrap",
+ "& $h2": {
+ color: "#336699",
+ flexBasis: "100%",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ "& $btnOutline": {
+ margin: "20px auto 0 auto",
+ },
+ },
+ volunteerSection: {
+ padding: "32px",
+ margin: "32px 0 0 0",
+ borderRadius: "24px",
+ color: "#fff",
+ background: "#336699",
+ display: "flex",
+ flexWrap: "wrap",
+ "& $h2": {
+ color: "#fff",
+ flexBasis: "100%",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ "& $btnWhite": {
+ margin: "20px auto 0 auto",
+ },
+ },
+ cards: {
+ display: "flex",
+ flexWrap: "wrap",
+ margin: "0 0 32px 0",
+ justifyContent: "center",
+ "& $aside": {
+ textAlign: "center",
+ borderRadius: "24px",
+ padding: "1.25rem",
+ maxWidth: "550px",
+ margin: "1rem 0",
+ "& $btnWhite": {
+ display: "inline-block",
+ marginBottom: "20px",
+ },
+ "& $h3": {
+ fontSize: "40px",
+ fontWeight: "500",
+ color: "#ffffff",
+ margin: "20px 0",
+ },
+ "@media only screen and (min-width: 64em)": {
+ marginLeft: "1rem",
+ marginRight: "1rem",
+ },
+ },
+ "@media only screen and (min-width: 64em)": {
+ flexWrap: "nowrap",
+ padding: "32px",
+ },
+ },
+ signup: {
+ background: "rgba(229, 113, 9, .7)",
+ },
+ volunteer: {
+ background: "#e57109",
+ },
+}));
+const Donate = () => {
+ const classes = useStyles();
+ // const { t } = useTranslation("donate");
+ return (
+
+
Donate
+
+
+
+
+
+
+ Why Donate?
+
+ We’ve done so much already as a 100% volunteer-run organization—but
+ we need your help to finish what we set out to do. The admin,
+ development, and marketing costs to expand our directory are
+ extensive. We have a directory of over 1,300 organizations to
+ update. Your tax-deductible donation would help us offset some of
+ those costs.
+
+
+ Please make donations to our parent organization (Code for America).
+ At the Code for America donation page you will see a text box: “What
+ inspired you to donate today”? Please write "Food Oasis and Code for
+ Hawaii" in that box. Your donation will get earmarked for Food Oasis
+ Hawaii.
+
+
+ Donate
+
+
+
+
+
Volunteer
+
+ We’re run 100% by remote volunteers who do critical work by updating
+ our food directory weekly. The work you do impact those who don’t
+ have enough to eat. Your help to update our directory makes it
+ easier for anyone to get in touch with groups that fit their needs.
+
+
+ Become a Volunteer
+
+
+
+
+ Get monthly updates on what we're doing
+
+ Signup
+
+
+
+
+
+
+
+ );
+};
+
+export default Donate;
diff --git a/client/src/components/StaticPagesHI/Faq.js b/client/src/components/StaticPagesHI/Faq.js
new file mode 100644
index 000000000..20f3e9356
--- /dev/null
+++ b/client/src/components/StaticPagesHI/Faq.js
@@ -0,0 +1,237 @@
+import React from "react";
+
+import faqbg from "./assets/faq-bg.png";
+import iconSpacer from "./assets/icon-spacer.svg";
+import iconSpacerBlue from "./assets/icon-spacer-blue.svg";
+import { makeStyles } from "@material-ui/core";
+import Footer from "../Footer";
+
+const useStyles = makeStyles(() => ({
+ outer: {
+ background: "#fff",
+ },
+ main: {
+ padding: "1.5rem 0;",
+ maxWidth: "1200px",
+ margin: "0 auto",
+ "@media only screen and (min-width: 75em)": {
+ padding: "1.5rem 2rem",
+ },
+ },
+ title: {
+ textTransform: "uppercase",
+ fontWeight: 500,
+ textAlign: "center",
+ background: "#FFF",
+ margin: 0,
+ padding: "32px 0",
+ "& $span": {
+ color: "#336699",
+ "& $span": {
+ textTransform: "none",
+ },
+ },
+ },
+ figure: {
+ margin: 0,
+ padding: 0,
+ },
+ icon: {
+ margin: "auto",
+ },
+ glossary: {
+ padding: "32px",
+ margin: "32px 0",
+ borderRadius: "24px",
+ color: "#4d4d4d",
+ display: "flex",
+ flexWrap: "wrap",
+ "& $h2": {
+ color: "#336699",
+ flexBasis: "100%",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ },
+ forVolunteers: {
+ padding: "32px",
+ margin: "32px 0",
+ borderRadius: "24px",
+ color: "#fff",
+ background: "#336699",
+ display: "flex",
+ flexDirection: "column",
+ "& $h2": {
+ flexBasis: "100%",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ "& $a": {
+ color: "#ffffff",
+ },
+ },
+ forDonors: {
+ color: "#4d4d4d",
+ background: "#fff",
+ padding: "32px",
+ margin: "32px 0",
+ borderRadius: "24px",
+ display: "flex",
+ flexDirection: "column",
+ "& $h2": {
+ color: "#336699",
+ flexBasis: "100%",
+ textTransform: "uppercase;",
+ textAlign: "center",
+ fontWeight: "500",
+ fontSize: "32px",
+ marginTop: "10px",
+ marginBottom: "20px",
+ },
+ },
+ dl: {
+ marginTop: "0",
+ marginBottom: "0",
+ "& $dt": {
+ fontWeight: "600",
+ },
+ "& $dd": {
+ marginLeft: "0",
+ marginBottom: "32px",
+ },
+ "& $dd:last-child": {
+ marginBottom: "0",
+ },
+ },
+}));
+const About = () => {
+ const classes = useStyles();
+ // const { t } = useTranslation("about");
+ return (
+
+
+
+ FAQs
+
+
+
+
+
+
+
+
+ Glossary
+
+ Food Seeker
+ A person in need of free groceries or meals.
+ Food Pantry
+
+ A place that gives away free groceries—not cooked meals—to the
+ community.
+
+ Food Bank
+
+ A nonprofit that collects donated food and distributes it to food
+ pantries.
+
+ Meal Program or Soup Kitchen
+
+ A place that gives away free cooked meals—not grocery and pantry
+ items—to the community.
+
+ Food Donation
+
+ Donated food includes pantry items, produce, and prepared meals.
+
+ Food Rescue Organization
+
+ Collects food donations from farmers, grocery stores, restaurants,
+ corporations, and caterers. Their goal is to give food to people
+ who need it and not have it go to waste.
+
+
+
+
+
+ For Volunteers
+
+ How can I sign up to volunteer?
+
+
+ Attend a training session
+ {" "}
+ to get an assignment, or reach out to{" "}
+ jenny@foodoasis.la .
+
+ When can I volunteer?
+
+ Anytime. After you attend a training session, you can update the
+ details whenever you have time. That may mean calling in the
+ mornings or researching online in the evenings.
+
+ How do I set up an account to start my assignment?
+
+ Enter your info here , and look out for a
+ confirmation email from{" "}
+ foodoasishi@gmail.com .
+ Follow the instructions on the email.
+
+
+
+
+
+ For Donors
+
+ What is food insecurity?
+
+ Unable to consistently access or afford adequate food to live a
+ healthy life.
+
+ How is Food Oasis helping to diminish food insecurity?
+
+ Food Oasis is creating a directory of updated food resources.
+ There are countless groups helping to feed hungry Hawaiians. But
+ it’s difficult for those in need to find them because there’s no
+ one source of updated info. We’re working to change that.
+
+ What will my donation go toward?
+
+ Your donations help us with the human costs required to update the
+ food resources in Hawaii.
+
+
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/client/src/components/StaticPagesHI/README.md b/client/src/components/StaticPagesHI/README.md
new file mode 100644
index 000000000..d9b79cbb3
--- /dev/null
+++ b/client/src/components/StaticPagesHI/README.md
@@ -0,0 +1,5 @@
+This folder contains static pages that were imported from a static site.
+
+The css and scss folder have styles from the static site and should not
+be imported to react components. They are for reference only and should be
+deleted once the pages are styled correctly.
diff --git a/client/src/components/StaticPagesHI/assets/about-bg.png b/client/src/components/StaticPagesHI/assets/about-bg.png
new file mode 100644
index 000000000..964b5575a
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/about-bg.png differ
diff --git a/client/src/components/StaticPagesHI/assets/donate-bg.png b/client/src/components/StaticPagesHI/assets/donate-bg.png
new file mode 100644
index 000000000..446769230
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/donate-bg.png differ
diff --git a/client/src/components/StaticPagesHI/assets/faq-bg.png b/client/src/components/StaticPagesHI/assets/faq-bg.png
new file mode 100644
index 000000000..dfbbb74a9
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/faq-bg.png differ
diff --git a/client/src/components/StaticPagesHI/assets/farm-people.png b/client/src/components/StaticPagesHI/assets/farm-people.png
new file mode 100644
index 000000000..efae672c4
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/farm-people.png differ
diff --git a/client/src/components/StaticPagesHI/assets/favicon.ico b/client/src/components/StaticPagesHI/assets/favicon.ico
new file mode 100644
index 000000000..51d2d654c
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/favicon.ico differ
diff --git a/client/src/components/StaticPagesHI/assets/fola-logo-footer.png b/client/src/components/StaticPagesHI/assets/fola-logo-footer.png
new file mode 100644
index 000000000..35fea1736
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/fola-logo-footer.png differ
diff --git a/client/src/components/StaticPagesHI/assets/fola-logo.png b/client/src/components/StaticPagesHI/assets/fola-logo.png
new file mode 100644
index 000000000..189bb06ef
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/fola-logo.png differ
diff --git a/client/src/components/StaticPagesHI/assets/food-bank.png b/client/src/components/StaticPagesHI/assets/food-bank.png
new file mode 100644
index 000000000..63bee55c7
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-bank.png differ
diff --git a/client/src/components/StaticPagesHI/assets/food-cycle.png b/client/src/components/StaticPagesHI/assets/food-cycle.png
new file mode 100644
index 000000000..c6545cf27
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-cycle.png differ
diff --git a/client/src/components/StaticPagesHI/assets/food-forward.png b/client/src/components/StaticPagesHI/assets/food-forward.png
new file mode 100644
index 000000000..1f1023a77
Binary files /dev/null and b/client/src/components/StaticPagesHI/assets/food-forward.png differ
diff --git a/client/src/components/StaticPagesHI/assets/icon-menu.svg b/client/src/components/StaticPagesHI/assets/icon-menu.svg
new file mode 100644
index 000000000..4f5811bc0
--- /dev/null
+++ b/client/src/components/StaticPagesHI/assets/icon-menu.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg b/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg
new file mode 100644
index 000000000..bfe35194e
--- /dev/null
+++ b/client/src/components/StaticPagesHI/assets/icon-spacer-blue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg b/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg
new file mode 100644
index 000000000..f9f20f59d
--- /dev/null
+++ b/client/src/components/StaticPagesHI/assets/icon-spacer-gray.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/src/components/StaticPagesHI/assets/icon-spacer.svg b/client/src/components/StaticPagesHI/assets/icon-spacer.svg
new file mode 100644
index 000000000..97d0a6c37
--- /dev/null
+++ b/client/src/components/StaticPagesHI/assets/icon-spacer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/src/components/StaticPagesHI/css/custom.css b/client/src/components/StaticPagesHI/css/custom.css
new file mode 100644
index 000000000..f42cc6c42
--- /dev/null
+++ b/client/src/components/StaticPagesHI/css/custom.css
@@ -0,0 +1,108 @@
+/* Style */
+header {
+ background: var(--color-bg);
+ margin-bottom: 4px; }
+
+header nav {
+ padding: 0 1rem;
+ height: 60px; }
+
+header nav ul {
+ margin-left: auto; }
+
+header nav p {
+ color: var(--color-bg-heading);
+ padding-left: 20px; }
+
+h1.title {
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: center;
+ background: var(--color-bg);
+ margin: 0;
+ padding: 32px 0; }
+
+h1.title span {
+ color: var(--color-pantries); }
+
+main {
+ padding: 1.5rem 0;
+ max-width: var(--width-content); }
+
+section {
+ padding: 32px;
+ margin: 32px 0;
+ border-radius: var(--border-radius); }
+
+section .icon {
+ flex-basis: 100%; }
+
+section h2 {
+ flex-basis: 100%;
+ text-transform: uppercase;
+ text-align: center;
+ font-weight: 500;
+ font-size: 32px;
+ margin-top: 10px;
+ margin-bottom: 20px; }
+
+.mission {
+ color: #fff;
+ background: var(--color-pantries); }
+
+.team {
+ color: var(--color-bg-heading); }
+
+.team h2 {
+ color: var(--color-pantries); }
+
+.partners {
+ background: var(--color-bg);
+ padding: 48px 32px;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column; }
+
+.partners h2 {
+ color: var(--color-bg-heading);
+ margin-bottom: 60px; }
+
+.partners .logo {
+ max-width: 100%;
+ height: 100%;
+ margin-bottom: 40px; }
+
+footer {
+ background: var(--color-bg);
+ position: relative; }
+
+footer nav {
+ padding: 1.5rem 1rem;
+ justify-content: space-between;
+ align-items: flex-start; }
+
+footer nav li {
+ display: block;
+ text-align: right;
+ text-transform: uppercase; }
+
+footer nav a {
+ text-decoration: none; }
+
+@media only screen and (min-width: 64em) {
+ .partners {
+ flex-direction: row; }
+ .partners .logo {
+ margin-bottom: 0; }
+ footer nav {
+ justify-content: center;
+ align-items: center; }
+ footer nav li {
+ display: inline-block; }
+ .footer-logo {
+ position: absolute;
+ left: 1rem; } }
+
+@media only screen and (min-width: 75em) {
+ main {
+ padding: 1.5rem 2rem; } }
diff --git a/client/src/components/StaticPagesHI/css/styles.css b/client/src/components/StaticPagesHI/css/styles.css
new file mode 100644
index 000000000..509cfba80
--- /dev/null
+++ b/client/src/components/StaticPagesHI/css/styles.css
@@ -0,0 +1,942 @@
+:root {
+ /* MVP.css */
+ --border-radius: 24px;
+ --box-shadow: 2px 2px 10px;
+ /* System Colors */
+ --color-active: #19334D;
+ --color-hover: #4c99e5;
+ --color-success: #219653;
+ --color-error: #cc3333;
+ /* Icon Colors */
+ --color-pantries: #336699;
+ --color-meals: #e57109;
+ /* Greyscale */
+ --color-bg: #fff;
+ --color-bg-secondary: #f0f0f0;
+ --color-bg-icons: #999;
+ --color-bg-body: #1b1b1b;
+ --color-bg-heading: #4d4d4d;
+ --font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ --hover-brightness: 1.2;
+ --justify-important: center;
+ --justify-normal: left;
+ --line-height: 1.5;
+ --width-card: 285px;
+ --width-card-medium: 460px;
+ --width-card-wide: 800px;
+ --width-content: 1200px;
+ /* Flexbox Grid */
+ --gutter-width: 1rem;
+ --outer-margin: 2rem;
+ --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
+ --half-gutter-width: calc((var(--gutter-width) * 0.5));
+ --xs-min: 30;
+ --sm-min: 48;
+ --md-min: 64;
+ --lg-min: 75;
+ --screen-xs-min: var(--xs-min)em;
+ --screen-sm-min: var(--sm-min)em;
+ --screen-md-min: var(--md-min)em;
+ --screen-lg-min: var(--lg-min)em;
+ --container-sm: calc(var(--sm-min) + var(--gutter-width));
+ --container-md: calc(var(--md-min) + var(--gutter-width));
+ --container-lg: calc(var(--lg-min) + var(--gutter-width)); }
+
+@custom-media --sm-viewport only screen and (min-width: 48em);
+@custom-media --md-viewport only screen and (min-width: 64em);
+@custom-media --lg-viewport only screen and (min-width: 75em);
+/*
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color: #0097fc;
+ --color-accent: #0097fc4f;
+ --color-bg: #333;
+ --color-bg-secondary: #555;
+ --color-secondary: #e20de9;
+ --color-secondary-accent: #e20de94f;
+ --color-shadow: #bbbbbb20;
+ --color-text: #f7f7f7;
+ --color-text-secondary: #aaa;
+ }
+}
+*/
+/* Layout */
+article aside {
+ background: var(--color-secondary-accent);
+ border-left: 4px solid var(--color-secondary);
+ padding: 0.01rem 0.8rem; }
+
+body {
+ box-sizing: border-box;
+ background: var(--color-bg-secondary);
+ color: var(--color-bg-body);
+ font-family: var(--font-family);
+ line-height: var(--line-height);
+ margin: 0;
+ overflow-x: hidden;
+ padding: 0; }
+
+footer,
+header,
+main {
+ margin: 0 auto;
+ padding: 0; }
+
+hr {
+ background-color: var(--color-bg-secondary);
+ border: none;
+ height: 1px;
+ margin: 4rem 0; }
+
+section {
+ display: flex;
+ flex-wrap: wrap; }
+
+section aside {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin: 1rem;
+ padding: 1.25rem;
+ width: var(--width-card); }
+
+section aside:hover {
+ box-shadow: var(--box-shadow) var(--color-bg-secondary); }
+
+section aside img {
+ max-width: 100%; }
+
+[hidden] {
+ display: none; }
+
+/* Headers */
+article header,
+div header,
+main header {
+ padding-top: 0; }
+
+header {
+ text-align: var(--justify-important); }
+
+header a b,
+header a em,
+header a i,
+header a strong {
+ margin-left: 0.5rem;
+ margin-right: 0.5rem; }
+
+section header {
+ padding-top: 0;
+ width: 100%; }
+
+/* Nav */
+nav {
+ align-items: center;
+ display: flex;
+ justify-content: flex-start; }
+
+nav ul {
+ list-style: none;
+ padding: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem; }
+
+nav ul li {
+ display: inline-block;
+ margin: 0 0.5rem;
+ position: relative;
+ text-align: left; }
+
+/* Nav Dropdown */
+nav ul li:hover ul {
+ display: block; }
+
+nav ul li ul {
+ background: var(--color-bg);
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: none;
+ height: auto;
+ left: -2px;
+ padding: .5rem 1rem;
+ position: absolute;
+ top: 1.7rem;
+ white-space: nowrap;
+ width: auto; }
+
+nav ul li ul li,
+nav ul li ul li a {
+ display: block; }
+
+/* Typography */
+code,
+samp {
+ background-color: var(--color-accent);
+ border-radius: var(--border-radius);
+ color: var(--color-text);
+ display: inline-block;
+ margin: 0 0.1rem;
+ padding: 0 0.5rem; }
+
+details {
+ margin: 1.3rem 0; }
+
+details summary {
+ font-weight: bold;
+ cursor: pointer; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: var(--line-height); }
+
+mark {
+ padding: 0.1rem; }
+
+ol li,
+ul li {
+ padding: 0.2rem 0; }
+
+p {
+ margin: 0.75rem 0;
+ padding: 0; }
+
+pre {
+ margin: 1rem 0;
+ max-width: var(--width-card-wide);
+ padding: 1rem 0; }
+
+pre code,
+pre samp {
+ display: block;
+ max-width: var(--width-card-wide);
+ padding: 0.5rem 2rem;
+ white-space: pre-wrap; }
+
+small {
+ color: var(--color-text-secondary); }
+
+sup {
+ background-color: var(--color-secondary);
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ font-size: xx-small;
+ font-weight: bold;
+ margin: 0.2rem;
+ padding: 0.2rem 0.3rem;
+ position: relative;
+ top: -2px; }
+
+/* Links */
+a {
+ color: var(--color-secondary);
+ display: inline-block; }
+
+a:hover {
+ filter: brightness(var(--hover-brightness));
+ text-decoration: underline; }
+
+a b,
+a em,
+a i,
+a strong,
+button {
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-size: medium;
+ font-weight: bold;
+ line-height: var(--line-height);
+ margin: 0.5rem 0;
+ padding: 1rem 2rem; }
+
+button {
+ font-family: var(--font-family); }
+
+button:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness)); }
+
+a b,
+a strong,
+button {
+ background-color: var(--color);
+ border: 2px solid var(--color);
+ color: var(--color-bg); }
+
+a em,
+a i {
+ border: 2px solid var(--color);
+ border-radius: var(--border-radius);
+ color: var(--color);
+ display: inline-block;
+ padding: 1rem 2rem; }
+
+/* Images */
+figure {
+ margin: 0;
+ padding: 0; }
+
+figure img {
+ max-width: 100%; }
+
+figure figcaption {
+ color: var(--color-text-secondary); }
+
+/* Forms */
+button:disabled,
+input:disabled {
+ background: var(--color-bg-secondary);
+ border-color: var(--color-bg-secondary);
+ color: var(--color-text-secondary);
+ cursor: not-allowed; }
+
+button[disabled]:hover {
+ filter: none; }
+
+form {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: block;
+ max-width: var(--width-card-wide);
+ min-width: var(--width-card);
+ padding: 1.5rem;
+ text-align: var(--justify-normal); }
+
+form header {
+ margin: 1.5rem 0;
+ padding: 1.5rem 0; }
+
+input,
+label,
+select,
+textarea {
+ display: block;
+ font-size: inherit;
+ max-width: var(--width-card-wide); }
+
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline-block; }
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+ display: inline-block;
+ font-weight: normal;
+ position: relative;
+ top: 1px; }
+
+input,
+select,
+textarea {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ padding: 0.4rem 0.8rem; }
+
+input[readonly],
+textarea[readonly] {
+ background-color: var(--color-bg-secondary); }
+
+label {
+ font-weight: bold;
+ margin-bottom: 0.2rem; }
+
+/* Tables */
+table {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border-spacing: 0;
+ display: inline-block;
+ max-width: 100%;
+ overflow-x: auto;
+ padding: 0;
+ white-space: nowrap; }
+
+table td,
+table th,
+table tr {
+ padding: 0.4rem 0.8rem;
+ text-align: var(--justify-important); }
+
+table thead {
+ background-color: var(--color);
+ border-collapse: collapse;
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ margin: 0;
+ padding: 0; }
+
+table thead th:first-child {
+ border-top-left-radius: var(--border-radius); }
+
+table thead th:last-child {
+ border-top-right-radius: var(--border-radius); }
+
+table thead th:first-child,
+table tr td:first-child {
+ text-align: var(--justify-normal); }
+
+table tr:nth-child(even) {
+ background-color: var(--color-accent); }
+
+/* Quotes */
+blockquote {
+ display: block;
+ font-size: x-large;
+ line-height: var(--line-height);
+ margin: 1rem auto;
+ max-width: var(--width-card-medium);
+ padding: 1.5rem 1rem;
+ text-align: var(--justify-important); }
+
+blockquote footer {
+ color: var(--color-text-secondary);
+ display: block;
+ font-size: small;
+ line-height: var(--line-height);
+ padding: 1.5rem 0; }
+
+/* Flexbox Grid */
+.container-fluid, .container {
+ margin-right: auto;
+ margin-left: auto; }
+
+.container-fluid {
+ padding-right: var(--outer-margin, 2rem);
+ padding-left: var(--outer-margin, 2rem); }
+
+.row {
+ box-sizing: border-box;
+ display: flex;
+ flex: 0 1 auto;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-right: var(--gutter-compensation, -0.5rem);
+ margin-left: var(--gutter-compensation, -0.5rem); }
+
+.row.reverse {
+ flex-direction: row-reverse; }
+
+.col.reverse {
+ flex-direction: column-reverse; }
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-xs-offset-0,
+.col-xs-offset-1,
+.col-xs-offset-2,
+.col-xs-offset-3,
+.col-xs-offset-4,
+.col-xs-offset-5,
+.col-xs-offset-6,
+.col-xs-offset-7,
+.col-xs-offset-8,
+.col-xs-offset-9,
+.col-xs-offset-10,
+.col-xs-offset-11,
+.col-xs-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem); }
+
+.col-xs {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%; }
+
+.col-xs-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%; }
+
+.col-xs-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%; }
+
+.col-xs-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+
+.col-xs-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%; }
+
+.col-xs-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%; }
+
+.col-xs-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+
+.col-xs-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%; }
+
+.col-xs-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%; }
+
+.col-xs-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+
+.col-xs-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%; }
+
+.col-xs-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%; }
+
+.col-xs-12 {
+ flex-basis: 100%;
+ max-width: 100%; }
+
+.col-xs-offset-0 {
+ margin-left: 0; }
+
+.col-xs-offset-1 {
+ margin-left: 8.33333333%; }
+
+.col-xs-offset-2 {
+ margin-left: 16.66666667%; }
+
+.col-xs-offset-3 {
+ margin-left: 25%; }
+
+.col-xs-offset-4 {
+ margin-left: 33.33333333%; }
+
+.col-xs-offset-5 {
+ margin-left: 41.66666667%; }
+
+.col-xs-offset-6 {
+ margin-left: 50%; }
+
+.col-xs-offset-7 {
+ margin-left: 58.33333333%; }
+
+.col-xs-offset-8 {
+ margin-left: 66.66666667%; }
+
+.col-xs-offset-9 {
+ margin-left: 75%; }
+
+.col-xs-offset-10 {
+ margin-left: 83.33333333%; }
+
+.col-xs-offset-11 {
+ margin-left: 91.66666667%; }
+
+.start-xs {
+ justify-content: flex-start;
+ text-align: start; }
+
+.center-xs {
+ justify-content: center;
+ text-align: center; }
+
+.end-xs {
+ justify-content: flex-end;
+ text-align: end; }
+
+.top-xs {
+ align-items: flex-start; }
+
+.middle-xs {
+ align-items: center; }
+
+.bottom-xs {
+ align-items: flex-end; }
+
+.around-xs {
+ justify-content: space-around; }
+
+.between-xs {
+ justify-content: space-between; }
+
+.first-xs {
+ order: -1; }
+
+.last-xs {
+ order: 1; }
+
+@media only screen and (min-width: 48em) {
+ .container {
+ width: var(--container-sm, 46rem); }
+ .col-sm,
+ .col-sm-1,
+ .col-sm-2,
+ .col-sm-3,
+ .col-sm-4,
+ .col-sm-5,
+ .col-sm-6,
+ .col-sm-7,
+ .col-sm-8,
+ .col-sm-9,
+ .col-sm-10,
+ .col-sm-11,
+ .col-sm-12,
+ .col-sm-offset-0,
+ .col-sm-offset-1,
+ .col-sm-offset-2,
+ .col-sm-offset-3,
+ .col-sm-offset-4,
+ .col-sm-offset-5,
+ .col-sm-offset-6,
+ .col-sm-offset-7,
+ .col-sm-offset-8,
+ .col-sm-offset-9,
+ .col-sm-offset-10,
+ .col-sm-offset-11,
+ .col-sm-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem); }
+ .col-sm {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%; }
+ .col-sm-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%; }
+ .col-sm-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%; }
+ .col-sm-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+ .col-sm-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%; }
+ .col-sm-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%; }
+ .col-sm-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+ .col-sm-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%; }
+ .col-sm-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%; }
+ .col-sm-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+ .col-sm-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%; }
+ .col-sm-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%; }
+ .col-sm-12 {
+ flex-basis: 100%;
+ max-width: 100%; }
+ .col-sm-offset-0 {
+ margin-left: 0; }
+ .col-sm-offset-1 {
+ margin-left: 8.33333333%; }
+ .col-sm-offset-2 {
+ margin-left: 16.66666667%; }
+ .col-sm-offset-3 {
+ margin-left: 25%; }
+ .col-sm-offset-4 {
+ margin-left: 33.33333333%; }
+ .col-sm-offset-5 {
+ margin-left: 41.66666667%; }
+ .col-sm-offset-6 {
+ margin-left: 50%; }
+ .col-sm-offset-7 {
+ margin-left: 58.33333333%; }
+ .col-sm-offset-8 {
+ margin-left: 66.66666667%; }
+ .col-sm-offset-9 {
+ margin-left: 75%; }
+ .col-sm-offset-10 {
+ margin-left: 83.33333333%; }
+ .col-sm-offset-11 {
+ margin-left: 91.66666667%; }
+ .start-sm {
+ justify-content: flex-start;
+ text-align: start; }
+ .center-sm {
+ justify-content: center;
+ text-align: center; }
+ .end-sm {
+ justify-content: flex-end;
+ text-align: end; }
+ .top-sm {
+ align-items: flex-start; }
+ .middle-sm {
+ align-items: center; }
+ .bottom-sm {
+ align-items: flex-end; }
+ .around-sm {
+ justify-content: space-around; }
+ .between-sm {
+ justify-content: space-between; }
+ .first-sm {
+ order: -1; }
+ .last-sm {
+ order: 1; } }
+
+@media only screen and (min-width: 64em) {
+ .container {
+ width: var(--container-md, 61rem); }
+ .col-md,
+ .col-md-1,
+ .col-md-2,
+ .col-md-3,
+ .col-md-4,
+ .col-md-5,
+ .col-md-6,
+ .col-md-7,
+ .col-md-8,
+ .col-md-9,
+ .col-md-10,
+ .col-md-11,
+ .col-md-12,
+ .col-md-offset-0,
+ .col-md-offset-1,
+ .col-md-offset-2,
+ .col-md-offset-3,
+ .col-md-offset-4,
+ .col-md-offset-5,
+ .col-md-offset-6,
+ .col-md-offset-7,
+ .col-md-offset-8,
+ .col-md-offset-9,
+ .col-md-offset-10,
+ .col-md-offset-11,
+ .col-md-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem); }
+ .col-md {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%; }
+ .col-md-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%; }
+ .col-md-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%; }
+ .col-md-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+ .col-md-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%; }
+ .col-md-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%; }
+ .col-md-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+ .col-md-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%; }
+ .col-md-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%; }
+ .col-md-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+ .col-md-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%; }
+ .col-md-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%; }
+ .col-md-12 {
+ flex-basis: 100%;
+ max-width: 100%; }
+ .col-md-offset-0 {
+ margin-left: 0; }
+ .col-md-offset-1 {
+ margin-left: 8.33333333%; }
+ .col-md-offset-2 {
+ margin-left: 16.66666667%; }
+ .col-md-offset-3 {
+ margin-left: 25%; }
+ .col-md-offset-4 {
+ margin-left: 33.33333333%; }
+ .col-md-offset-5 {
+ margin-left: 41.66666667%; }
+ .col-md-offset-6 {
+ margin-left: 50%; }
+ .col-md-offset-7 {
+ margin-left: 58.33333333%; }
+ .col-md-offset-8 {
+ margin-left: 66.66666667%; }
+ .col-md-offset-9 {
+ margin-left: 75%; }
+ .col-md-offset-10 {
+ margin-left: 83.33333333%; }
+ .col-md-offset-11 {
+ margin-left: 91.66666667%; }
+ .start-md {
+ justify-content: flex-start;
+ text-align: start; }
+ .center-md {
+ justify-content: center;
+ text-align: center; }
+ .end-md {
+ justify-content: flex-end;
+ text-align: end; }
+ .top-md {
+ align-items: flex-start; }
+ .middle-md {
+ align-items: center; }
+ .bottom-md {
+ align-items: flex-end; }
+ .around-md {
+ justify-content: space-around; }
+ .between-md {
+ justify-content: space-between; }
+ .first-md {
+ order: -1; }
+ .last-md {
+ order: 1; } }
+
+@media only screen and (min-width: 75em) {
+ .container {
+ width: var(--container-lg, 71rem); }
+ .col-lg,
+ .col-lg-1,
+ .col-lg-2,
+ .col-lg-3,
+ .col-lg-4,
+ .col-lg-5,
+ .col-lg-6,
+ .col-lg-7,
+ .col-lg-8,
+ .col-lg-9,
+ .col-lg-10,
+ .col-lg-11,
+ .col-lg-12,
+ .col-lg-offset-0,
+ .col-lg-offset-1,
+ .col-lg-offset-2,
+ .col-lg-offset-3,
+ .col-lg-offset-4,
+ .col-lg-offset-5,
+ .col-lg-offset-6,
+ .col-lg-offset-7,
+ .col-lg-offset-8,
+ .col-lg-offset-9,
+ .col-lg-offset-10,
+ .col-lg-offset-11,
+ .col-lg-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem); }
+ .col-lg {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%; }
+ .col-lg-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%; }
+ .col-lg-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%; }
+ .col-lg-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+ .col-lg-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%; }
+ .col-lg-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%; }
+ .col-lg-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+ .col-lg-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%; }
+ .col-lg-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%; }
+ .col-lg-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+ .col-lg-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%; }
+ .col-lg-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%; }
+ .col-lg-12 {
+ flex-basis: 100%;
+ max-width: 100%; }
+ .col-lg-offset-0 {
+ margin-left: 0; }
+ .col-lg-offset-1 {
+ margin-left: 8.33333333%; }
+ .col-lg-offset-2 {
+ margin-left: 16.66666667%; }
+ .col-lg-offset-3 {
+ margin-left: 25%; }
+ .col-lg-offset-4 {
+ margin-left: 33.33333333%; }
+ .col-lg-offset-5 {
+ margin-left: 41.66666667%; }
+ .col-lg-offset-6 {
+ margin-left: 50%; }
+ .col-lg-offset-7 {
+ margin-left: 58.33333333%; }
+ .col-lg-offset-8 {
+ margin-left: 66.66666667%; }
+ .col-lg-offset-9 {
+ margin-left: 75%; }
+ .col-lg-offset-10 {
+ margin-left: 83.33333333%; }
+ .col-lg-offset-11 {
+ margin-left: 91.66666667%; }
+ .start-lg {
+ justify-content: flex-start;
+ text-align: start; }
+ .center-lg {
+ justify-content: center;
+ text-align: center; }
+ .end-lg {
+ justify-content: flex-end;
+ text-align: end; }
+ .top-lg {
+ align-items: flex-start; }
+ .middle-lg {
+ align-items: center; }
+ .bottom-lg {
+ align-items: flex-end; }
+ .around-lg {
+ justify-content: space-around; }
+ .between-lg {
+ justify-content: space-between; }
+ .first-lg {
+ order: -1; }
+ .last-lg {
+ order: 1; } }
diff --git a/client/src/components/StaticPagesHI/scss/custom.scss b/client/src/components/StaticPagesHI/scss/custom.scss
new file mode 100644
index 000000000..35c2c3997
--- /dev/null
+++ b/client/src/components/StaticPagesHI/scss/custom.scss
@@ -0,0 +1,115 @@
+/* Style */
+header {
+ background: var(--color-bg);
+ margin-bottom: 4px;
+}
+header nav {
+ padding: 0 1rem;
+ height: 60px;
+}
+header nav ul {
+ margin-left: auto;
+}
+header nav p {
+ color: var(--color-bg-heading);
+ padding-left: 20px;
+}
+h1.title {
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: center;
+ background: var(--color-bg);
+ margin: 0;
+ padding: 32px 0;
+}
+h1.title span {
+ color: var(--color-pantries);
+}
+main {
+ padding: 1.5rem 0;
+ max-width: var(--width-content);
+}
+section {
+ padding: 32px;
+ margin: 32px 0;
+ border-radius: var(--border-radius);
+}
+section .icon {
+ flex-basis: 100%;
+}
+section h2 {
+ flex-basis: 100%;
+ text-transform: uppercase;
+ text-align: center;
+ font-weight: 500;
+ font-size: 32px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
+.mission {
+ color: #fff;
+ background: var(--color-pantries);
+}
+.team {
+ color: var(--color-bg-heading);
+}
+.team h2 {
+ color: var(--color-pantries);
+}
+.partners {
+ background: var(--color-bg);
+ padding: 48px 32px;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+}
+.partners h2 {
+ color: var(--color-bg-heading);
+ margin-bottom: 60px;
+}
+.partners .logo {
+ max-width: 100%;
+ height: 100%;
+ margin-bottom: 40px;
+}
+footer {
+ background: var(--color-bg);
+ position: relative;
+}
+footer nav {
+ padding: 1.5rem 1rem;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+footer nav li {
+ display: block;
+ text-align: right;
+ text-transform: uppercase;
+}
+footer nav a {
+ text-decoration: none;
+}
+@media only screen and (min-width: 64em) {
+ .partners {
+ flex-direction: row;
+ }
+ .partners .logo {
+ margin-bottom: 0;
+ }
+ footer nav {
+ justify-content: center;
+ align-items: center;
+ }
+ footer nav li {
+ display: inline-block;
+ }
+ .footer-logo {
+ position: absolute;
+ left: 1rem;
+ }
+}
+@media only screen and (min-width: 75em) {
+ main {
+ padding: 1.5rem 2rem;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/StaticPagesHI/scss/styles.scss b/client/src/components/StaticPagesHI/scss/styles.scss
new file mode 100644
index 000000000..1e54bcacf
--- /dev/null
+++ b/client/src/components/StaticPagesHI/scss/styles.scss
@@ -0,0 +1,1278 @@
+:root {
+ /* MVP.css */
+ --border-radius: 24px;
+ --box-shadow: 2px 2px 10px;
+
+ /* System Colors */
+ --color-active: #19334D;
+ --color-hover: #4c99e5;
+ --color-success: #219653;
+ --color-error: #cc3333;
+
+ /* Icon Colors */
+ --color-pantries: #336699;
+ --color-meals: #e57109;
+
+ /* Greyscale */
+ --color-bg: #fff;
+ --color-bg-secondary: #f0f0f0;
+ --color-bg-icons: #999;
+ --color-bg-body: #1b1b1b;
+ --color-bg-heading: #4d4d4d;
+
+ --font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ --hover-brightness: 1.2;
+ --justify-important: center;
+ --justify-normal: left;
+ --line-height: 1.5;
+
+ --width-card: 285px;
+ --width-card-medium: 460px;
+ --width-card-wide: 800px;
+
+ --width-content: 1200px;
+
+ /* Flexbox Grid */
+ --gutter-width: 1rem;
+ --outer-margin: 2rem;
+ --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
+ --half-gutter-width: calc((var(--gutter-width) * 0.5));
+
+ --xs-min: 30;
+ --sm-min: 48;
+ --md-min: 64;
+ --lg-min: 75;
+
+ --screen-xs-min: var(--xs-min)em;
+ --screen-sm-min: var(--sm-min)em;
+ --screen-md-min: var(--md-min)em;
+ --screen-lg-min: var(--lg-min)em;
+
+ --container-sm: calc(var(--sm-min) + var(--gutter-width));
+ --container-md: calc(var(--md-min) + var(--gutter-width));
+ --container-lg: calc(var(--lg-min) + var(--gutter-width));
+}
+
+@custom-media --sm-viewport only screen and (min-width: 48em);
+@custom-media --md-viewport only screen and (min-width: 64em);
+@custom-media --lg-viewport only screen and (min-width: 75em);
+
+/*
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color: #0097fc;
+ --color-accent: #0097fc4f;
+ --color-bg: #333;
+ --color-bg-secondary: #555;
+ --color-secondary: #e20de9;
+ --color-secondary-accent: #e20de94f;
+ --color-shadow: #bbbbbb20;
+ --color-text: #f7f7f7;
+ --color-text-secondary: #aaa;
+ }
+}
+*/
+
+/* Layout */
+article aside {
+ background: var(--color-secondary-accent);
+ border-left: 4px solid var(--color-secondary);
+ padding: 0.01rem 0.8rem;
+}
+
+body {
+ box-sizing: border-box;
+ background: var(--color-bg-secondary);
+ color: var(--color-bg-body);
+ font-family: var(--font-family);
+ line-height: var(--line-height);
+ margin: 0;
+ overflow-x: hidden;
+ padding: 0;
+}
+
+footer,
+header,
+main {
+ margin: 0 auto;
+ padding: 0;
+}
+
+hr {
+ background-color: var(--color-bg-secondary);
+ border: none;
+ height: 1px;
+ margin: 4rem 0;
+}
+
+section {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+section aside {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin: 1rem;
+ padding: 1.25rem;
+ width: var(--width-card);
+}
+
+section aside:hover {
+ box-shadow: var(--box-shadow) var(--color-bg-secondary);
+}
+
+section aside img {
+ max-width: 100%;
+}
+
+[hidden] {
+ display: none;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+ padding-top: 0;
+}
+
+header {
+ text-align: var(--justify-important);
+}
+
+header a b,
+header a em,
+header a i,
+header a strong {
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+}
+
+section header {
+ padding-top: 0;
+ width: 100%;
+}
+
+/* Nav */
+nav {
+ align-items: center;
+ display: flex;
+ justify-content: flex-start;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+nav ul li {
+ display: inline-block;
+ margin: 0 0.5rem;
+ position: relative;
+ text-align: left;
+}
+
+/* Nav Dropdown */
+nav ul li:hover ul {
+ display: block;
+}
+
+nav ul li ul {
+ background: var(--color-bg);
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: none;
+ height: auto;
+ left: -2px;
+ padding: .5rem 1rem;
+ position: absolute;
+ top: 1.7rem;
+ white-space: nowrap;
+ width: auto;
+}
+
+nav ul li ul li,
+nav ul li ul li a {
+ display: block;
+}
+
+/* Typography */
+code,
+samp {
+ background-color: var(--color-accent);
+ border-radius: var(--border-radius);
+ color: var(--color-text);
+ display: inline-block;
+ margin: 0 0.1rem;
+ padding: 0 0.5rem;
+}
+
+details {
+ margin: 1.3rem 0;
+}
+
+details summary {
+ font-weight: bold;
+ cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: var(--line-height);
+}
+
+mark {
+ padding: 0.1rem;
+}
+
+ol li,
+ul li {
+ padding: 0.2rem 0;
+}
+
+p {
+ margin: 0.75rem 0;
+ padding: 0;
+}
+
+pre {
+ margin: 1rem 0;
+ max-width: var(--width-card-wide);
+ padding: 1rem 0;
+}
+
+pre code,
+pre samp {
+ display: block;
+ max-width: var(--width-card-wide);
+ padding: 0.5rem 2rem;
+ white-space: pre-wrap;
+}
+
+small {
+ color: var(--color-text-secondary);
+}
+
+sup {
+ background-color: var(--color-secondary);
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ font-size: xx-small;
+ font-weight: bold;
+ margin: 0.2rem;
+ padding: 0.2rem 0.3rem;
+ position: relative;
+ top: -2px;
+}
+
+/* Links */
+a {
+ color: var(--color-secondary);
+ display: inline-block;
+}
+
+a:hover {
+ filter: brightness(var(--hover-brightness));
+ text-decoration: underline;
+}
+
+a b,
+a em,
+a i,
+a strong,
+button {
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-size: medium;
+ font-weight: bold;
+ line-height: var(--line-height);
+ margin: 0.5rem 0;
+ padding: 1rem 2rem;
+}
+
+button {
+ font-family: var(--font-family);
+}
+
+button:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button {
+ background-color: var(--color);
+ border: 2px solid var(--color);
+ color: var(--color-bg);
+}
+
+a em,
+a i {
+ border: 2px solid var(--color);
+ border-radius: var(--border-radius);
+ color: var(--color);
+ display: inline-block;
+ padding: 1rem 2rem;
+}
+
+/* Images */
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+figure img {
+ max-width: 100%;
+}
+
+figure figcaption {
+ color: var(--color-text-secondary);
+}
+
+/* Forms */
+
+button:disabled,
+input:disabled {
+ background: var(--color-bg-secondary);
+ border-color: var(--color-bg-secondary);
+ color: var(--color-text-secondary);
+ cursor: not-allowed;
+}
+
+button[disabled]:hover {
+ filter: none;
+}
+
+form {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: block;
+ max-width: var(--width-card-wide);
+ min-width: var(--width-card);
+ padding: 1.5rem;
+ text-align: var(--justify-normal);
+}
+
+form header {
+ margin: 1.5rem 0;
+ padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+ display: block;
+ font-size: inherit;
+ max-width: var(--width-card-wide);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline-block;
+}
+
+input[type="checkbox"]+label,
+input[type="radio"]+label {
+ display: inline-block;
+ font-weight: normal;
+ position: relative;
+ top: 1px;
+}
+
+input,
+select,
+textarea {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ padding: 0.4rem 0.8rem;
+}
+
+input[readonly],
+textarea[readonly] {
+ background-color: var(--color-bg-secondary);
+}
+
+label {
+ font-weight: bold;
+ margin-bottom: 0.2rem;
+}
+
+/* Tables */
+table {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border-spacing: 0;
+ display: inline-block;
+ max-width: 100%;
+ overflow-x: auto;
+ padding: 0;
+ white-space: nowrap;
+}
+
+table td,
+table th,
+table tr {
+ padding: 0.4rem 0.8rem;
+ text-align: var(--justify-important);
+}
+
+table thead {
+ background-color: var(--color);
+ border-collapse: collapse;
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ margin: 0;
+ padding: 0;
+}
+
+table thead th:first-child {
+ border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+ border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+ text-align: var(--justify-normal);
+}
+
+table tr:nth-child(even) {
+ background-color: var(--color-accent);
+}
+
+/* Quotes */
+blockquote {
+ display: block;
+ font-size: x-large;
+ line-height: var(--line-height);
+ margin: 1rem auto;
+ max-width: var(--width-card-medium);
+ padding: 1.5rem 1rem;
+ text-align: var(--justify-important);
+}
+
+blockquote footer {
+ color: var(--color-text-secondary);
+ display: block;
+ font-size: small;
+ line-height: var(--line-height);
+ padding: 1.5rem 0;
+}
+
+/* Flexbox Grid */
+.container-fluid, .container {
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.container-fluid {
+ padding-right: var(--outer-margin, 2rem);
+ padding-left: var(--outer-margin, 2rem);
+}
+
+.row {
+ box-sizing: border-box;
+ display: flex;
+ flex: 0 1 auto;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-right: var(--gutter-compensation, -0.5rem);
+ margin-left: var(--gutter-compensation, -0.5rem);
+}
+
+.row.reverse {
+ flex-direction: row-reverse;
+}
+
+.col.reverse {
+ flex-direction: column-reverse;
+}
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-xs-offset-0,
+.col-xs-offset-1,
+.col-xs-offset-2,
+.col-xs-offset-3,
+.col-xs-offset-4,
+.col-xs-offset-5,
+.col-xs-offset-6,
+.col-xs-offset-7,
+.col-xs-offset-8,
+.col-xs-offset-9,
+.col-xs-offset-10,
+.col-xs-offset-11,
+.col-xs-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem);
+}
+
+.col-xs {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%;
+}
+
+.col-xs-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%;
+}
+
+.col-xs-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%;
+}
+
+.col-xs-3 {
+ flex-basis: 25%;
+ max-width: 25%;
+}
+
+.col-xs-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%;
+}
+
+.col-xs-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%;
+}
+
+.col-xs-6 {
+ flex-basis: 50%;
+ max-width: 50%;
+}
+
+.col-xs-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%;
+}
+
+.col-xs-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%;
+}
+
+.col-xs-9 {
+ flex-basis: 75%;
+ max-width: 75%;
+}
+
+.col-xs-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%;
+}
+
+.col-xs-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%;
+}
+
+.col-xs-12 {
+ flex-basis: 100%;
+ max-width: 100%;
+}
+
+.col-xs-offset-0 {
+ margin-left: 0;
+}
+
+.col-xs-offset-1 {
+ margin-left: 8.33333333%;
+}
+
+.col-xs-offset-2 {
+ margin-left: 16.66666667%;
+}
+
+.col-xs-offset-3 {
+ margin-left: 25%;
+}
+
+.col-xs-offset-4 {
+ margin-left: 33.33333333%;
+}
+
+.col-xs-offset-5 {
+ margin-left: 41.66666667%;
+}
+
+.col-xs-offset-6 {
+ margin-left: 50%;
+}
+
+.col-xs-offset-7 {
+ margin-left: 58.33333333%;
+}
+
+.col-xs-offset-8 {
+ margin-left: 66.66666667%;
+}
+
+.col-xs-offset-9 {
+ margin-left: 75%;
+}
+
+.col-xs-offset-10 {
+ margin-left: 83.33333333%;
+}
+
+.col-xs-offset-11 {
+ margin-left: 91.66666667%;
+}
+
+.start-xs {
+ justify-content: flex-start;
+ text-align: start;
+}
+
+.center-xs {
+ justify-content: center;
+ text-align: center;
+}
+
+.end-xs {
+ justify-content: flex-end;
+ text-align: end;
+}
+
+.top-xs {
+ align-items: flex-start;
+}
+
+.middle-xs {
+ align-items: center;
+}
+
+.bottom-xs {
+ align-items: flex-end;
+}
+
+.around-xs {
+ justify-content: space-around;
+}
+
+.between-xs {
+ justify-content: space-between;
+}
+
+.first-xs {
+ order: -1;
+}
+
+.last-xs {
+ order: 1;
+}
+
+@media only screen and (min-width: 48em) {
+ .container {
+ width: var(--container-sm, 46rem);
+ }
+
+ .col-sm,
+ .col-sm-1,
+ .col-sm-2,
+ .col-sm-3,
+ .col-sm-4,
+ .col-sm-5,
+ .col-sm-6,
+ .col-sm-7,
+ .col-sm-8,
+ .col-sm-9,
+ .col-sm-10,
+ .col-sm-11,
+ .col-sm-12,
+ .col-sm-offset-0,
+ .col-sm-offset-1,
+ .col-sm-offset-2,
+ .col-sm-offset-3,
+ .col-sm-offset-4,
+ .col-sm-offset-5,
+ .col-sm-offset-6,
+ .col-sm-offset-7,
+ .col-sm-offset-8,
+ .col-sm-offset-9,
+ .col-sm-offset-10,
+ .col-sm-offset-11,
+ .col-sm-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem);
+ }
+
+ .col-sm {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%;
+ }
+
+ .col-sm-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%;
+ }
+
+ .col-sm-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%;
+ }
+
+ .col-sm-3 {
+ flex-basis: 25%;
+ max-width: 25%;
+ }
+
+ .col-sm-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%;
+ }
+
+ .col-sm-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%;
+ }
+
+ .col-sm-6 {
+ flex-basis: 50%;
+ max-width: 50%;
+ }
+
+ .col-sm-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%;
+ }
+
+ .col-sm-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%;
+ }
+
+ .col-sm-9 {
+ flex-basis: 75%;
+ max-width: 75%;
+ }
+
+ .col-sm-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%;
+ }
+
+ .col-sm-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%;
+ }
+
+ .col-sm-12 {
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+
+ .col-sm-offset-0 {
+ margin-left: 0;
+ }
+
+ .col-sm-offset-1 {
+ margin-left: 8.33333333%;
+ }
+
+ .col-sm-offset-2 {
+ margin-left: 16.66666667%;
+ }
+
+ .col-sm-offset-3 {
+ margin-left: 25%;
+ }
+
+ .col-sm-offset-4 {
+ margin-left: 33.33333333%;
+ }
+
+ .col-sm-offset-5 {
+ margin-left: 41.66666667%;
+ }
+
+ .col-sm-offset-6 {
+ margin-left: 50%;
+ }
+
+ .col-sm-offset-7 {
+ margin-left: 58.33333333%;
+ }
+
+ .col-sm-offset-8 {
+ margin-left: 66.66666667%;
+ }
+
+ .col-sm-offset-9 {
+ margin-left: 75%;
+ }
+
+ .col-sm-offset-10 {
+ margin-left: 83.33333333%;
+ }
+
+ .col-sm-offset-11 {
+ margin-left: 91.66666667%;
+ }
+
+ .start-sm {
+ justify-content: flex-start;
+ text-align: start;
+ }
+
+ .center-sm {
+ justify-content: center;
+ text-align: center;
+ }
+
+ .end-sm {
+ justify-content: flex-end;
+ text-align: end;
+ }
+
+ .top-sm {
+ align-items: flex-start;
+ }
+
+ .middle-sm {
+ align-items: center;
+ }
+
+ .bottom-sm {
+ align-items: flex-end;
+ }
+
+ .around-sm {
+ justify-content: space-around;
+ }
+
+ .between-sm {
+ justify-content: space-between;
+ }
+
+ .first-sm {
+ order: -1;
+ }
+
+ .last-sm {
+ order: 1;
+ }
+}
+
+@media only screen and (min-width: 64em) {
+ .container {
+ width: var(--container-md, 61rem);
+ }
+
+ .col-md,
+ .col-md-1,
+ .col-md-2,
+ .col-md-3,
+ .col-md-4,
+ .col-md-5,
+ .col-md-6,
+ .col-md-7,
+ .col-md-8,
+ .col-md-9,
+ .col-md-10,
+ .col-md-11,
+ .col-md-12,
+ .col-md-offset-0,
+ .col-md-offset-1,
+ .col-md-offset-2,
+ .col-md-offset-3,
+ .col-md-offset-4,
+ .col-md-offset-5,
+ .col-md-offset-6,
+ .col-md-offset-7,
+ .col-md-offset-8,
+ .col-md-offset-9,
+ .col-md-offset-10,
+ .col-md-offset-11,
+ .col-md-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem);
+ }
+
+ .col-md {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%;
+ }
+
+ .col-md-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%;
+ }
+
+ .col-md-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%;
+ }
+
+ .col-md-3 {
+ flex-basis: 25%;
+ max-width: 25%;
+ }
+
+ .col-md-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%;
+ }
+
+ .col-md-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%;
+ }
+
+ .col-md-6 {
+ flex-basis: 50%;
+ max-width: 50%;
+ }
+
+ .col-md-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%;
+ }
+
+ .col-md-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%;
+ }
+
+ .col-md-9 {
+ flex-basis: 75%;
+ max-width: 75%;
+ }
+
+ .col-md-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%;
+ }
+
+ .col-md-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%;
+ }
+
+ .col-md-12 {
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+
+ .col-md-offset-0 {
+ margin-left: 0;
+ }
+
+ .col-md-offset-1 {
+ margin-left: 8.33333333%;
+ }
+
+ .col-md-offset-2 {
+ margin-left: 16.66666667%;
+ }
+
+ .col-md-offset-3 {
+ margin-left: 25%;
+ }
+
+ .col-md-offset-4 {
+ margin-left: 33.33333333%;
+ }
+
+ .col-md-offset-5 {
+ margin-left: 41.66666667%;
+ }
+
+ .col-md-offset-6 {
+ margin-left: 50%;
+ }
+
+ .col-md-offset-7 {
+ margin-left: 58.33333333%;
+ }
+
+ .col-md-offset-8 {
+ margin-left: 66.66666667%;
+ }
+
+ .col-md-offset-9 {
+ margin-left: 75%;
+ }
+
+ .col-md-offset-10 {
+ margin-left: 83.33333333%;
+ }
+
+ .col-md-offset-11 {
+ margin-left: 91.66666667%;
+ }
+
+ .start-md {
+ justify-content: flex-start;
+ text-align: start;
+ }
+
+ .center-md {
+ justify-content: center;
+ text-align: center;
+ }
+
+ .end-md {
+ justify-content: flex-end;
+ text-align: end;
+ }
+
+ .top-md {
+ align-items: flex-start;
+ }
+
+ .middle-md {
+ align-items: center;
+ }
+
+ .bottom-md {
+ align-items: flex-end;
+ }
+
+ .around-md {
+ justify-content: space-around;
+ }
+
+ .between-md {
+ justify-content: space-between;
+ }
+
+ .first-md {
+ order: -1;
+ }
+
+ .last-md {
+ order: 1;
+ }
+}
+
+@media only screen and (min-width: 75em) {
+ .container {
+ width: var(--container-lg, 71rem);
+ }
+
+ .col-lg,
+ .col-lg-1,
+ .col-lg-2,
+ .col-lg-3,
+ .col-lg-4,
+ .col-lg-5,
+ .col-lg-6,
+ .col-lg-7,
+ .col-lg-8,
+ .col-lg-9,
+ .col-lg-10,
+ .col-lg-11,
+ .col-lg-12,
+ .col-lg-offset-0,
+ .col-lg-offset-1,
+ .col-lg-offset-2,
+ .col-lg-offset-3,
+ .col-lg-offset-4,
+ .col-lg-offset-5,
+ .col-lg-offset-6,
+ .col-lg-offset-7,
+ .col-lg-offset-8,
+ .col-lg-offset-9,
+ .col-lg-offset-10,
+ .col-lg-offset-11,
+ .col-lg-offset-12 {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ padding-right: var(--half-gutter-width, 0.5rem);
+ padding-left: var(--half-gutter-width, 0.5rem);
+ }
+
+ .col-lg {
+ flex-grow: 1;
+ flex-basis: 0;
+ max-width: 100%;
+ }
+
+ .col-lg-1 {
+ flex-basis: 8.33333333%;
+ max-width: 8.33333333%;
+ }
+
+ .col-lg-2 {
+ flex-basis: 16.66666667%;
+ max-width: 16.66666667%;
+ }
+
+ .col-lg-3 {
+ flex-basis: 25%;
+ max-width: 25%;
+ }
+
+ .col-lg-4 {
+ flex-basis: 33.33333333%;
+ max-width: 33.33333333%;
+ }
+
+ .col-lg-5 {
+ flex-basis: 41.66666667%;
+ max-width: 41.66666667%;
+ }
+
+ .col-lg-6 {
+ flex-basis: 50%;
+ max-width: 50%;
+ }
+
+ .col-lg-7 {
+ flex-basis: 58.33333333%;
+ max-width: 58.33333333%;
+ }
+
+ .col-lg-8 {
+ flex-basis: 66.66666667%;
+ max-width: 66.66666667%;
+ }
+
+ .col-lg-9 {
+ flex-basis: 75%;
+ max-width: 75%;
+ }
+
+ .col-lg-10 {
+ flex-basis: 83.33333333%;
+ max-width: 83.33333333%;
+ }
+
+ .col-lg-11 {
+ flex-basis: 91.66666667%;
+ max-width: 91.66666667%;
+ }
+
+ .col-lg-12 {
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+
+ .col-lg-offset-0 {
+ margin-left: 0;
+ }
+
+ .col-lg-offset-1 {
+ margin-left: 8.33333333%;
+ }
+
+ .col-lg-offset-2 {
+ margin-left: 16.66666667%;
+ }
+
+ .col-lg-offset-3 {
+ margin-left: 25%;
+ }
+
+ .col-lg-offset-4 {
+ margin-left: 33.33333333%;
+ }
+
+ .col-lg-offset-5 {
+ margin-left: 41.66666667%;
+ }
+
+ .col-lg-offset-6 {
+ margin-left: 50%;
+ }
+
+ .col-lg-offset-7 {
+ margin-left: 58.33333333%;
+ }
+
+ .col-lg-offset-8 {
+ margin-left: 66.66666667%;
+ }
+
+ .col-lg-offset-9 {
+ margin-left: 75%;
+ }
+
+ .col-lg-offset-10 {
+ margin-left: 83.33333333%;
+ }
+
+ .col-lg-offset-11 {
+ margin-left: 91.66666667%;
+ }
+
+ .start-lg {
+ justify-content: flex-start;
+ text-align: start;
+ }
+
+ .center-lg {
+ justify-content: center;
+ text-align: center;
+ }
+
+ .end-lg {
+ justify-content: flex-end;
+ text-align: end;
+ }
+
+ .top-lg {
+ align-items: flex-start;
+ }
+
+ .middle-lg {
+ align-items: center;
+ }
+
+ .bottom-lg {
+ align-items: flex-end;
+ }
+
+ .around-lg {
+ justify-content: space-around;
+ }
+
+ .between-lg {
+ justify-content: space-between;
+ }
+
+ .first-lg {
+ order: -1;
+ }
+
+ .last-lg {
+ order: 1;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/Verification/SearchCriteria.js b/client/src/components/Verification/SearchCriteria.js
index 1a6381108..074ec7f77 100644
--- a/client/src/components/Verification/SearchCriteria.js
+++ b/client/src/components/Verification/SearchCriteria.js
@@ -20,6 +20,7 @@ import {
import RadioTrueFalseEither from "../RadioTrueFalseEither";
import LocationAutocomplete from "../LocationAutocomplete";
import AccountAutocomplete from "../AccountAutocomplete";
+import { defaultCoordinates } from "../../helpers/Configuration";
const useStyles = makeStyles((theme) => ({
card: {
@@ -57,8 +58,10 @@ const SearchCriteria = ({
: "custom"
);
- const [customLatitude, setCustomLatitude] = useState(34);
- const [customLongitude, setCustomLongitude] = useState(-118);
+ const [customLatitude, setCustomLatitude] = useState(defaultCoordinates.lat);
+ const [customLongitude, setCustomLongitude] = useState(
+ defaultCoordinates.LocationAutocomplete
+ );
const [customPlaceName, setCustomPlaceName] = useState("");
useEffect(() => {
diff --git a/client/src/containers/Home/index.js b/client/src/containers/Home/index.js
index 44414938a..b56d901e3 100644
--- a/client/src/containers/Home/index.js
+++ b/client/src/containers/Home/index.js
@@ -9,9 +9,10 @@ import Container from "@material-ui/core/Container";
import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box";
import Search from "components/Search";
-// The two tenant logos happen to be the same at the moment
+// The three tenant logos happen to be the same at the moment
import logo from "images/foodoasis.svg";
import logoCA from "images/foodoasis.svg";
+import logoHI from "images/foodoasis.svg";
import { getTenantId } from "helpers/Configuration";
const useStyles = makeStyles((theme) => ({
@@ -133,7 +134,9 @@ const Home = (props) => {
- {getTenantId() === 2 ? (
+ {getTenantId() === 3 ? (
+
+ ) : getTenantId() === 2 ? (
) : (
@@ -148,7 +151,11 @@ const Home = (props) => {
className={classes.form}
onSubmit={() => props.history.push("/organizations")}
>
- {getTenantId() === 2 ? (
+ {getTenantId() === 3 ? (
+
+ Locate free food resources in Hawaii
+
+ ) : getTenantId() === 2 ? (
Locate free food resources in California
diff --git a/client/src/helpers/Configuration.js b/client/src/helpers/Configuration.js
index 340ba34a3..83494b536 100644
--- a/client/src/helpers/Configuration.js
+++ b/client/src/helpers/Configuration.js
@@ -1,6 +1,21 @@
export const getTenantId = () =>
- window.location.hostname.toLowerCase().includes("ca.food") ||
- window.location.hostname.toLowerCase().includes("california") ||
- process.env.REACT_APP_TENANT_ID === "2"
+ window.location.hostname.toLowerCase().includes("hi.food") ||
+ window.location.hostname.toLowerCase().includes("hawaii") ||
+ process.env.REACT_APP_TENANT_ID === "3"
+ ? 3
+ : window.location.hostname.toLowerCase().includes("ca.food") ||
+ window.location.hostname.toLowerCase().includes("california") ||
+ process.env.REACT_APP_TENANT_ID === "2"
? 2
: 1;
+
+export const defaultCoordinates = (() => {
+ switch (getTenantId()) {
+ case 3:
+ return { lat: 21.33629, lon: -157.89435 };
+ case 2:
+ return { lat: 38.576711, lon: -121.493671 };
+ default:
+ return { lat: 34.07872, lon: -118.243328 };
+ }
+})();
diff --git a/client/src/hooks/useMapboxGeocoder.js b/client/src/hooks/useMapboxGeocoder.js
index 0cd853db0..f80b72665 100644
--- a/client/src/hooks/useMapboxGeocoder.js
+++ b/client/src/hooks/useMapboxGeocoder.js
@@ -7,6 +7,7 @@ const baseUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places`;
const losAngelesCountyLatLong = "-118.9517,33.6988,-117.6462,34.8233";
const californiaLatLong = "-124.389, 32.4796, -114.1723, 42.072";
+const hawaiiLatLong = "-160.25, 18.91, -154.58, 22.30";
const initialState = {
isLoading: false,
@@ -48,7 +49,11 @@ export function useMapboxGeocoder() {
const fetchMapboxResults = debounce(
async (searchString) => {
const bbox =
- getTenantId() === 1 ? losAngelesCountyLatLong : californiaLatLong;
+ getTenantId() === 1
+ ? losAngelesCountyLatLong
+ : getTenantId() === 2
+ ? californiaLatLong
+ : hawaiiLatLong;
const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`;
dispatch({ type: actionTypes.FETCH_REQUEST });
diff --git a/migrations/1602619516416_add-hawaii-tenant.js b/migrations/1602619516416_add-hawaii-tenant.js
new file mode 100644
index 000000000..ed7c91669
--- /dev/null
+++ b/migrations/1602619516416_add-hawaii-tenant.js
@@ -0,0 +1,11 @@
+/* eslint-disable camelcase */
+
+exports.shorthands = undefined;
+
+exports.up = (pgm) => {
+ pgm.sql(`INSERT INTO tenant (id, name, code) VALUES (3, 'Hawaii', 'HI')`);
+};
+
+exports.down = (pgm) => {
+ pgm.sql(`DELETE FROM tenant WHERE id = 3`);
+};
diff --git a/package.json b/package.json
index 157d58667..bcd44a96d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "foodoasis",
- "version": "1.0.24",
+ "version": "1.0.25",
"author": "Hack for LA",
"description": "Web API Server for Food Oasis",
"main": "server.js",