Merge pull request #465 from adamkendis/448-FRONT-about311

About311 page

src/components/about/About.jsx

@@ -1,8 +1,18 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import Button from '@components/common/Button';
+import HeroImage from './HeroImage';
+import WhatIs311Data from './WhatIs311Data';
+import HowItWorks from './HowItWorks';
 
 const About = () => (
-  <div>
-    About
+  <div className="about-311">
+    <HeroImage />
+    <WhatIs311Data />
+    <HowItWorks />
+    <Link to="/">
+      <Button id="about-311" label="Let's Get Started" />
+    </Link>
   </div>
 );
 

src/components/about/HeroImage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const HeroImage = () => (
+  <div className="about-hero">
+    <div className="overlay-text">
+      <span className="text-about">About&nbsp;</span>
+      <span className="text-311">311</span>
+      <span className="text-data">DATA</span>
+    </div>
+  </div>
+);
+
+export default HeroImage;

src/components/about/HowItWorks.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import mobile from '@assets/mobile.svg';
+import dataserver from '@assets/dataserver.svg';
+import growth from '@assets/growth.svg';
+import datavisualization from '@assets/datavisualization.svg';
+
+const HowItWorks = () => (
+  <div className="how-it-works">
+    <h1>How It Works</h1>
+    <div className="grid-container">
+      <img src={mobile} alt="" />
+      <img src={dataserver} alt="" />
+      <img src={datavisualization} alt="" />
+      <img src={growth} alt="" />
+      <p>Community members post reports via the City&apos;s easy-to-use mobile application.</p>
+      <p>
+        Reports are consolidated and entered into a central database and requests are
+        assigned to the appropriate department to resolve.
+      </p>
+      <p>
+        Our site draws data from the City’s database to create easy-to-view visualizations and
+        files to export at the neighborhood level.
+      </p>
+      <p>
+        Communities are empowered and equipped to identify areas of improvement to uplift and
+        thrive.
+      </p>
+    </div>
+  </div>
+);
+
+export default HowItWorks;

src/components/about/WhatIs311Data.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const WhatIs311Data = () => (
+  <div className="main-text">
+    <h1>What is 311 Data?</h1>
+    <p>
+      Each day, residents of the City of LA submit thousands of requests to deal with issues
+      such as illegal dumping and homeless encampments. These requests are received by the
+      relevant agencies, such as the Police, Building and Safety, or Department of Transportation.
+      The agency responds to the request, addresses it, and then closes it when resolved. The data
+      associated with some of these requests is available online, but is difficult to make
+      actionable at the neighborhood level.
+    </p>
+    <p>
+      That’s where this site comes in.
+      {' '}
+      <a href="https://empowerla.org/">EmpowerLA</a>
+      {' '}
+      has partnered with
+      {' '}
+      <a href="https://www.hackforla.org/">Hack For LA</a>
+      {' '}
+      to create the
+      {' '}
+      <a href="https://www.hackforla.org/projects/311-data">311 Data project</a>
+      {' '}
+      to empower local residents and Neighborhood Councils to make informed decisions about how to
+      improve their communities using an intuitive app. We make navigating the wealth of 311 data
+      easier using an open source app built and maintained by volunteers throughout our community.
+    </p>
+  </div>
+);
+
+export default WhatIs311Data;