Skip to content

Commit

Permalink
Hook up Volunteer modal to Home page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@richardxia
richardxia committed Nov 11, 2020
1 parent 5d63d66 commit 5523480
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 152 deletions.
6 changes: 5 additions & 1 deletion src/components/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from "prop-types";
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";

import "../stylesheets/global.css";
import { BurgerMenu, Navigation } from "./grid-aware/Navigation";
Expand All @@ -14,6 +15,9 @@ const Layout = ({ children }) => {
const pageWrapperID = "page-wrapper";
const outerContainerID = "outer-container";
const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useState(false);
useEffect(() => {
ReactModal.setAppElement("#outer-container");
}, []);
return (
<div id={outerContainerID}>
<BurgerMenu
Expand Down
314 changes: 163 additions & 151 deletions src/pages/new/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from "react";
import React, { useState } from "react";

import ArticleSpotlightCard from "../../components/grid-aware/ArticleSpotlightCard";
import articleSpotlightImage from "../../components/grid-aware/ArticleSpotlightCard/stories/background.png";
import BlockQuoteBlock from "../../components/grid-aware/BlockQuoteBlock/BlockQuoteBlock";
import HomePageLargeParagraph from "../../components/grid-aware/HomePageLargeParagraph";
import Modal from "../../components/grid-aware/Modal";
import PartnersAndSponsorsBlock from "../../components/grid-aware/PartnersAndSponsorsBlock";
import benetechLogo from "../../components/grid-aware/PartnersAndSponsorsBlock/stories/benetech-logo.png";
import ciscoLogo from "../../components/grid-aware/PartnersAndSponsorsBlock/stories/cisco-logo.png";
Expand All @@ -24,157 +25,168 @@ import image3 from "../../components/grid-aware/ThreeParagraphBlock/stories/imag
import VideoHeader from "../../components/grid-aware/VideoHeader/VideoHeader";
import videoHeaderImage from "../../components/grid-aware/VideoHeader/stories/VideoHeader.png";
import Layout from "../../components/layout";
import VolunteerSignupForm from "../../components/thirdparty/mailchimp/VolunteerSignupForm";

export default () => (
<Layout>
<VideoHeader
title="Less than half of nearly 10,000 people experiencing homelessness in the Bay Area have reliable access to the internet."
description="ShelterTech is a nonprofit organization dedicated to supporting people who are experiencing homelessness or housing insecurity by leveraging technology and connectivity."
image={videoHeaderImage}
ctaButtons={[
{ text: "Donate", internalLink: "/new/donate" },
{ text: "Volunteer", internalLink: "/new/volunteer" },
]}
playButtonLink="https://www.youtube.com/watch?v=KCduRWJ1hQo"
/>
<HomePageLargeParagraph
title="We believe connectivity is a human right."
description="Access to the internet and technology makes it possible for people to find a job, human services, and contact family and friends."
/>
<ThreeParagraphBlock
title="Get involved"
paragraph1={{
title: "Volunteer",
description:
"Volunteers make our work possible. There are several ways to support our mission. Learn more and get involved.",
}}
paragraph2={{
title: "Partnerships",
description:
"We work with companies, nonprofits, and local governments to empower the community. Reach out to us.",
}}
paragraph3={{
title: "Donate",
description:
"Our programs are largely funded by donations from people who care about bridging the digital divide. Support ShelterTech today.",
}}
image1={{
url: image1,
alt: "Two volunteers working on a laptop together at a datathon.",
}}
image2={{
url: image2,
alt: "Team posing for a photo after a design workshop.",
}}
image3={{
url: image3,
alt: "Multiple volunteers working at a datathon.",
}}
ctaTitle="Volunteer, donate, or reach out to our partnerships team"
ctaButtons={[
{ text: "Volunteer", internalLink: "/new/volunteer" },
{ text: "Donate", internalLink: "/new/donate" },
{ text: "Work with us", onClick: () => {} },
]}
/>
<ProgramsBlock
title="Our programs"
programs={[
{
theme: "dark",
image: shelterConnectImg,
imageAlt: "Image of ShelterTech booth with 4 volunteers smiling.",
title: "ShelterConnect",
export default () => {
const [volunteerFormIsOpen, setVolunteerFormIsOpen] = useState(false);
return (
<Layout>
<Modal
isOpen={volunteerFormIsOpen}
setIsOpen={setVolunteerFormIsOpen}
contentLabel="Volunteer"
>
<VolunteerSignupForm />
</Modal>
<VideoHeader
title="Less than half of nearly 10,000 people experiencing homelessness in the Bay Area have reliable access to the internet."
description="ShelterTech is a nonprofit organization dedicated to supporting people who are experiencing homelessness or housing insecurity by leveraging technology and connectivity."
image={videoHeaderImage}
ctaButtons={[
{ text: "Donate", internalLink: "/new/donate" },
{ text: "Volunteer", internalLink: "/new/volunteer" },
]}
playButtonLink="https://www.youtube.com/watch?v=KCduRWJ1hQo"
/>
<HomePageLargeParagraph
title="We believe connectivity is a human right."
description="Access to the internet and technology makes it possible for people to find a job, human services, and contact family and friends."
/>
<ThreeParagraphBlock
title="Get involved"
paragraph1={{
title: "Volunteer",
description:
"Every year, our ShelterConnect program provides 3XXX homeless and housing insecure people with free and unlimited internet access and we plan to provide every homeless individual with the digital infrastructure that meets their needs by 2024.",
},
{
theme: "dark",
image: sfServiceGuideImg,
imageAlt:
"Image of the back of two people sitting where the woman on the left is pointing to the monitor of a Macbook as the man observes.",
title: "SF Service Guide",
"Volunteers make our work possible. There are several ways to support our mission. Learn more and get involved.",
}}
paragraph2={{
title: "Partnerships",
description:
"Anyone with access to a smartphone, tablet, or computer can utilize this online directory of human services provided in San Francisco.",
},
{
theme: "dark",
image: communityDevelopmentImg,
imageAlt: "Image of ShelterTech community member smiling.",
title: "Community Development",
"We work with companies, nonprofits, and local governments to empower the community. Reach out to us.",
}}
paragraph3={{
title: "Donate",
description:
"We depend on Community Representatives to inform our work from their lived experiences and rely on volunteers to continuously updated the resources we develop.",
},
]}
/>
<BlockQuoteBlock
quotes={[
{
quote:
"We've heard from San Franciscans, including as part of our recent strategic planning community outreach that it's hard to know where to go when you're looking for supportive services. It's hard to know where to start, and hard to navigate different resources to find accurate information. We're glad to be supporting ShelterTech and the broader community to build SF Service Guide - a one-stop, reliable place to help connect residents to the services they need.",
attribution:
"Barry Roeder, Mayor's Office of Housing and Community Development",
},
{
quote:
"Wi-fi has been a top request among young people here at Larkin Street. Now that we have it with ShelterTech we are seeing more young people come in and stay around and get the things they need so that they can move past homelessness, permanently.",
attribution:
"Veronica Pastore, Director of Communications, Larkin Street Youth Services",
},
{
quote:
"There’s an overwhelming number of resources for the vulnerable populations that live here and it’s important to have a place where they can go where they know all the information is accurate, up-to-date, and consistent with what their understanding has been of that particular resource. And if there are any changes that need to be made those will be reflected.",
attribution:
"Julie Rosenthal, Director of Social Services, Homeless Advocacy Project",
},
]}
/>
<PartnersAndSponsorsBlock
title="Partners and sponsors"
partnersAndSponsors={[
{
url: mohcdLogo,
alt:
"Logo of Mayor's Office of Housing and Community Development organization.",
},
{
url: justiceAndDiversityCenterLogo,
alt:
"Logo of Justice and Diversity Center of The Bar Association of San Francisco organization.",
},
{
url: benetechLogo,
alt: "Logo of Benetech nonprofit organization.",
},
{
url: larkinStreetLogo,
alt: "Logo of Larkin Street Youth Services nonprofit organization.",
},
{
url: sfFamiliesLogo,
alt:
"Logo of SF Families online public service directory organization.",
},
{
url: ciscoLogo,
alt: "Logo of Cisco Systems networking hardware company.",
},
{
url: pagerdutyLogo,
alt: "Logo of PagerDuty computer software company.",
},
{
url: uberLogo,
alt: "Logo of Uber Technologies Inc. company.",
},
]}
/>
<ArticleSpotlightCard
eyebrowText="Partnership Spotlight"
title="Digital Equity Team of San Francisco"
description="Free Fiber Initiative summary we're working together to find new and different ways of building lasting infrastructure"
button={{ text: "Read more", internalLink: "/foo" }}
backgroundImage={articleSpotlightImage}
/>
</Layout>
);
"Our programs are largely funded by donations from people who care about bridging the digital divide. Support ShelterTech today.",
}}
image1={{
url: image1,
alt: "Two volunteers working on a laptop together at a datathon.",
}}
image2={{
url: image2,
alt: "Team posing for a photo after a design workshop.",
}}
image3={{
url: image3,
alt: "Multiple volunteers working at a datathon.",
}}
ctaTitle="Volunteer, donate, or reach out to our partnerships team"
ctaButtons={[
{ text: "Volunteer", internalLink: "/new/volunteer" },
{ text: "Donate", internalLink: "/new/donate" },
{ text: "Work with us", onClick: () => setVolunteerFormIsOpen(true) },
]}
/>
<ProgramsBlock
title="Our programs"
programs={[
{
theme: "dark",
image: shelterConnectImg,
imageAlt: "Image of ShelterTech booth with 4 volunteers smiling.",
title: "ShelterConnect",
description:
"Every year, our ShelterConnect program provides 3XXX homeless and housing insecure people with free and unlimited internet access and we plan to provide every homeless individual with the digital infrastructure that meets their needs by 2024.",
},
{
theme: "dark",
image: sfServiceGuideImg,
imageAlt:
"Image of the back of two people sitting where the woman on the left is pointing to the monitor of a Macbook as the man observes.",
title: "SF Service Guide",
description:
"Anyone with access to a smartphone, tablet, or computer can utilize this online directory of human services provided in San Francisco.",
},
{
theme: "dark",
image: communityDevelopmentImg,
imageAlt: "Image of ShelterTech community member smiling.",
title: "Community Development",
description:
"We depend on Community Representatives to inform our work from their lived experiences and rely on volunteers to continuously updated the resources we develop.",
},
]}
/>
<BlockQuoteBlock
quotes={[
{
quote:
"We've heard from San Franciscans, including as part of our recent strategic planning community outreach that it's hard to know where to go when you're looking for supportive services. It's hard to know where to start, and hard to navigate different resources to find accurate information. We're glad to be supporting ShelterTech and the broader community to build SF Service Guide - a one-stop, reliable place to help connect residents to the services they need.",
attribution:
"Barry Roeder, Mayor's Office of Housing and Community Development",
},
{
quote:
"Wi-fi has been a top request among young people here at Larkin Street. Now that we have it with ShelterTech we are seeing more young people come in and stay around and get the things they need so that they can move past homelessness, permanently.",
attribution:
"Veronica Pastore, Director of Communications, Larkin Street Youth Services",
},
{
quote:
"There’s an overwhelming number of resources for the vulnerable populations that live here and it’s important to have a place where they can go where they know all the information is accurate, up-to-date, and consistent with what their understanding has been of that particular resource. And if there are any changes that need to be made those will be reflected.",
attribution:
"Julie Rosenthal, Director of Social Services, Homeless Advocacy Project",
},
]}
/>
<PartnersAndSponsorsBlock
title="Partners and sponsors"
partnersAndSponsors={[
{
url: mohcdLogo,
alt:
"Logo of Mayor's Office of Housing and Community Development organization.",
},
{
url: justiceAndDiversityCenterLogo,
alt:
"Logo of Justice and Diversity Center of The Bar Association of San Francisco organization.",
},
{
url: benetechLogo,
alt: "Logo of Benetech nonprofit organization.",
},
{
url: larkinStreetLogo,
alt: "Logo of Larkin Street Youth Services nonprofit organization.",
},
{
url: sfFamiliesLogo,
alt:
"Logo of SF Families online public service directory organization.",
},
{
url: ciscoLogo,
alt: "Logo of Cisco Systems networking hardware company.",
},
{
url: pagerdutyLogo,
alt: "Logo of PagerDuty computer software company.",
},
{
url: uberLogo,
alt: "Logo of Uber Technologies Inc. company.",
},
]}
/>
<ArticleSpotlightCard
eyebrowText="Partnership Spotlight"
title="Digital Equity Team of San Francisco"
description="Free Fiber Initiative summary we're working together to find new and different ways of building lasting infrastructure"
button={{ text: "Read more", internalLink: "/foo" }}
backgroundImage={articleSpotlightImage}
/>
</Layout>
);
};

0 comments on commit 5523480

Please sign in to comment.