Merge pull request #1761 from hotosm/feature/redesign-homepage

Add more homepage components

frontend/src/assets/styles/_extra.scss

@@ -10,10 +10,25 @@
   }
 }
 
+@media screen and (min-width: 60em) {
+  .bg-split-blue-white {
+    background: linear-gradient(to right, $blue-dark, $blue-dark 80%, white 20%, white);
+  }
+  .f-4rem-l {
+    font-size: 4rem;
+  }
+  .mw-36rem-l {
+    max-width: 36rem;
+  }
+}
+
 @media screen and (max-width: 60em) {
   .mw-20rem {
     max-width: 20rem;
   }
+  .bg-split-blue-white {
+    background: linear-gradient(to bottom, $blue-dark, $blue-dark 80%, white 20%, white);
+  }
 }
 
 .bg-jumbotron {
@@ -24,9 +39,3 @@
   background: rgba(0, 0, 0, .5) url('../img/children.jpg') left;
   background-blend-mode: darken;
 }
-
-@media screen and (min-width: 60em) {
-  .f-4rem-l {
-    font-size: 4rem;
-  }
-}

frontend/src/assets/styles/_organizations.scss

@@ -0,0 +1,18 @@
+.org-unicef {
+  background: no-repeat center url('../img/organizations/unicef.png');
+}
+.org-usaid {
+  background: no-repeat center url('../img/organizations/usaid.png');
+}
+.org-gfdrr {
+  background: no-repeat center url('../img/organizations/gfdrr.png');
+}
+.org-aws {
+  background: no-repeat center url('../img/organizations/aws.png');
+}
+.org-redcross {
+  background: no-repeat center url('../img/organizations/redcross.png');
+}
+.org-msf {
+  background: no-repeat center url('../img/organizations/msf.png');
+}

frontend/src/assets/styles/_testimonials.scss

@@ -0,0 +1,4 @@
+.testimonial-michaelyani {
+  background: no-repeat top right url('../img/testimonials/michaelyani.jpg');
+  background-size: 70% auto;
+}

frontend/src/assets/styles/index.scss

@@ -4,3 +4,5 @@
 @import "typography";
 @import "burgermenu";
 @import "extra";
+@import "organizations";
+@import "testimonials";

frontend/src/components/homepage/mappingFlow.js

@@ -1,19 +1,60 @@
 import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { MappingIcon, ValidationIcon, DataUseIcon } from '../svgIcons';
 
 import messages from './messages';
 
 
+function MappingCard({ image, title, description }: Object) {
+  return(
+    <div className="w-third-l w-100 dib fl ph2-l pv3">
+      <div className="shadow-4 mh2">
+        <div className="pa4 ph3-m">
+          <div className="red dib">
+            {image}
+          </div>
+          <h4 className="blue-dark b"><FormattedMessage {...title} /></h4>
+          <p className="blue-grey"><FormattedMessage {...description} /></p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
 export function MappingFlow() {
+  const imageHeight = "5rem";
+  const cards = [
+    {
+      image: <MappingIcon style={{height: imageHeight}} />,
+      title: messages.mappingCardTitle,
+      description: messages.mappingCardDescription
+    },
+    {
+      image: <ValidationIcon  style={{height: imageHeight}} />,
+      title: messages.validationCardTitle,
+      description: messages.validationCardDescription
+    },
+    {
+      image: <DataUseIcon  style={{height: imageHeight}} />,
+      title: messages.usingDataCardTitle,
+      description: messages.usingDataCardDescription
+    },
+  ];
   return(
     <div className="bg-white black">
-      <div className="pl6-l pl4 pv3">
-        <h3 className="mb4 mw7-l lh-copy f2 fw6">
-          <FormattedMessage {...messages.mappingFlowTitle} values={{number: <FormattedNumber value={100000} />}} />
+      <div className="ph6-l ph4 pv3">
+        <h3 className="mb4 mw-36rem-l lh-copy f3 fw6">
+          <FormattedMessage {...messages.mappingFlowTitle}
+            values={{number: <FormattedNumber value={100000} />}}
+          />
         </h3>
         <p className="pr2 f5 f4-ns blue-dark lh-title mw7 mb4">
           <FormattedMessage {...messages.mappingFlowHeadline} />
         </p>
+        <div className="cf">
+          {cards.map((card, n) => <MappingCard { ...card } key={n} />)}
+        </div>
       </div>
     </div>
   );

frontend/src/components/homepage/messages.js

@@ -1,8 +1,7 @@
-import { defineMessages } from 'react-intl'
-
+import { defineMessages } from 'react-intl';
 
 /**
- * Internationalized messages for use on header.
+ * Internationalized messages for use on homepage.
  */
 export default defineMessages({
   jumbotronTitle: {
@@ -64,5 +63,49 @@ export default defineMessages({
   mappingFlowHeadline: {
     id: 'home.mappingFlow.headLine',
     defaultMessage: "Through the Tasking Manager this mapping  projects are divided into smaller tasks allowing them to be completed by many different people working in the same area in a more streamlined and quick way."
+  },
+  mappingCardTitle: {
+    id: 'home.mappingFlow.cards.mapping.title',
+    defaultMessage: "Mapping"
+  },
+  validationCardTitle: {
+    id: 'home.mappingFlow.cards.validation.title',
+    defaultMessage: "Validation"
+  },
+  usingDataCardTitle: {
+    id: 'home.mappingFlow.cards.usingData.title',
+    defaultMessage: "Using the data"
+  },
+  mappingCardDescription: {
+    id: 'home.mappingFlow.cards.mapping.description',
+    defaultMessage: "Volunteers trace satellite imagery into OpenStreetMap using Tasking Manager."
+  },
+  validationCardDescription: {
+    id: 'home.mappingFlow.cards.validation.description',
+    defaultMessage: "Afterwards, seasoned volunteers double check the data entered assuring its quality."
+  },
+  usingDataCardDescription: {
+    id: 'home.mappingFlow.cards.usingData.description',
+    defaultMessage: "Humanitarian organizations use mapped data to plan risk reduction and disaster response activities."
+  },
+  whoIsMappingTitle: {
+    id: 'home.whoIsMapping.title',
+    defaultMessage: "Who's mapping"
+  },
+  whoIsMappingHeadline: {
+    id: 'home.whoIsMapping.headline',
+    defaultMessage: "Global trusted organizations use Tasking Manager to reach those in need through maps."
+  },
+  organizationContactTitle: {
+    id: 'home.whoIsMapping.contact.title',
+    defaultMessage: "Does your organization want to work with us?"
+  },
+  organizationContactHeadline: {
+    id: 'home.whoIsMapping.contact.headline',
+    defaultMessage: "Contact us to find out how we can work together."
+  },
+  organizationContactButton: {
+    id: 'home.whoIsMapping.contact.button',
+    defaultMessage: "Contact us"
   }
 });

frontend/src/components/homepage/testimonials/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+// import {RightIcon, LeftIcon} from '../../svgIcons';
+
+
+export function Testimonials() {
+  const testimonials = [
+    {
+      name: 'Michael Yani',
+      bio: messages.michaelYaniBio,
+      citation: messages.michaelYaniCitation,
+      cssCode: 'michaelyani'
+    }
+  ];
+  return(
+    <div className="pt4-l pb5 ph5-l ph4">
+      <h3 className="barlow-condensed blue-dark f1-l f2 fw8 ttu"><FormattedMessage {...messages.testimonialsTitle} /></h3>
+      {
+      // enable it when we have the carousel ready
+      // <div className="red cf tr pb4">
+      //   <LeftIcon className="pr2" /> <RightIcon />
+      // </div>
+      }
+      <div>
+        {testimonials.map((person, n) =>
+          <div key={n} className={`blue-dark cf testimonial-${person.cssCode}`}>
+            <div className="w-40-l w-50-m fl ml2-l mt4-ns mt6">
+              <div className="bg-red white f3-l f4 pv2 mt5-l pl3 pr1">
+                <FormattedMessage {...person.citation} />
+              </div>
+              <div className="w-70-l w-60-m mh3 mh0-ns ph3 pb5-l pt4-l">
+                <p className="f4 fw6 mb1 tc">{ person.name },</p>
+                <p className="f6 tc mt2 mw-3">
+                  <FormattedMessage {...person.bio} />
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/homepage/testimonials/messages.js

@@ -0,0 +1,19 @@
+import { defineMessages } from 'react-intl';
+
+/**
+ * Internationalized messages for use on homepage.
+ */
+export default defineMessages({
+  testimonialsTitle: {
+    id: 'home.testimonials.title',
+    defaultMessage: "You can make a difference"
+  },
+  michaelYaniCitation: {
+    id: 'home.testimonials.michaelYani.citation',
+    defaultMessage: "Mapping has made me learn how to use a smart phone to collect data and direct people to places they didn't know around the district. I have also started teaching other people how to use smart phones to locate places around the district."
+  },
+  michaelYaniBio: {
+    id: 'home.testimonials.michaelYani.bio',
+    defaultMessage: "a refugee from Sudan who currently resides in Rhino Refugee Settlement"
+  },
+});

frontend/src/components/homepage/whoIsMapping.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import { Button } from '../button';
+
+
+function contactCard() {
+  return(
+    <div className="w-25-l w-100 fl pv2 ph3 bg-white blue-dark shadow-4">
+      <h3 className="ma1 pb3 w-70-l w-60-m f3 fw8 ttu barlow-condensed">
+        <FormattedMessage {...messages.organizationContactTitle} />
+      </h3>
+      <div className="tc cf mb2">
+        <p className="w-100 w-60-m fl tl pr2 f5 lh-title mb4">
+        <FormattedMessage {...messages.organizationContactHeadline} />
+      </p>
+        <p>
+          <Link to={"/contact"}>
+            <Button className="w-100 w-40-m fl tc bg-red white">
+              <FormattedMessage {...messages.organizationContactButton} />
+            </Button>
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function WhoIsMapping() {
+  const organizations = [
+    {url: 'https://www.gfdrr.org/', name: 'gfdrr'},
+    {url: 'https://www.usaid.gov/', name: 'usaid'},
+    {url: 'https://www.redcross.org/', name: 'redcross'},
+    {url: 'https://www.unicef.org/', name: 'unicef'},
+    {url: 'http://aws.amazon.com/', name: 'aws'},
+    {url: 'https://www.msf.org/', name: 'msf'}
+  ];
+  return(
+    <div className="cf v-mid bg-split-blue-white">
+      <div className="ph6-l ph4 pt3 pb5 white cf">
+        <div className="bg-red mw5">
+          <h3 className="pa1 f2 fw8 tc lh-copy white ttu barlow-condensed">
+            <FormattedMessage {...messages.whoIsMappingTitle} />
+          </h3>
+        </div>
+        <div className="w-75-l w-100 fl">
+          <p className="pr2 mb4 f5 f4-ns lh-title mw6">
+            <FormattedMessage {...messages.whoIsMappingHeadline} />
+          </p>
+          <div className="cf pb4 pb2-l">
+            {organizations.map((org, n) =>
+              <div key={n} className="w-50 w-third-l fl pr5 pv4">
+                <a href={org.url}>
+                  <div className={`contain org-${org.name} w-auto h3`}></div>
+                </a>
+              </div>
+            )}
+          </div>
+        </div>
+        {contactCard()}
+      </div>
+    </div>
+  );
+}

frontend/src/components/svgIcons/bell.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export class BellIcon extends React.PureComponent {
   render() { return <svg width="18" height="18" viewBox="0 0 18 18" {...this.props}><title>799394FA-214C-49BC-8A43-B2ED83317A79</title><g fill="none" fillRule="evenodd"><path d="M-11-11h40v40h-40z"/><g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.872"><path d="M16.4 13.069H1a2.31 2.31 0 0 0 2.31-2.31v-3.85a5.39 5.39 0 0 1 10.78 0v3.85a2.31 2.31 0 0 0 2.31 2.31zM10.032 16.148a1.54 1.54 0 0 1-2.664 0h2.664z"/></g></g></svg>; }

frontend/src/components/svgIcons/chevron-down.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export class ChevronDownIcon extends React.PureComponent {
   render() { return <svg width="15px" height="15px" viewBox="0 0 15 15" {...this.props}><path fill="currentColor" d="M 13.636364,3.0544845 7.5,9.1908485 1.363636,3.0544845 0,4.4455155 7.5,11.945515 15,4.4455155 Z"/></svg>; }

frontend/src/components/svgIcons/chevron-right.js

@@ -1,4 +1,4 @@
-    const React = require('react');
+    import React from 'react';
 
     export class ChevronRightIcon extends React.PureComponent {
       render() { return <svg width="15" height="15" viewBox="0 0 15 15" {...this.props}><path fill="currentColor" d="M 3.054485,1.3636359 9.1908489,7.4999999 3.0544849,13.636364 4.4455158,15 11.945515,7.4999999 4.4455158,-1.25e-7 Z"/></svg>; }

frontend/src/components/svgIcons/chevron-up.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export class ChevronUpIcon extends React.PureComponent {
   render() { return <svg width="15" height="15" viewBox="0 0 15 15" {...this.props}><path fill="currentColor" d="M 1.363636,11.945515 7.5,5.8091511 13.636364,11.945515 15,10.554484 7.5,3.054485 -5.625e-8,10.554484 Z"/></svg>; }

frontend/src/components/svgIcons/facebook.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export class FacebookIcon extends React.PureComponent {
   render() { return <svg width="15" height="14" viewBox="0 0 15 14" {...this.props}><title>AE6AACF3-A697-425A-9611-447BA940FB79</title><g fill="none" fillRule="evenodd"><path d="M-13-13h40v40h-40z"/><path d="M.917 0a.773.773 0 0 0-.773.773v12.454c0 .427.346.773.773.773h6.705V8.578H5.797V6.466h1.825V4.907c0-1.808 1.104-2.792 2.717-2.792.773 0 1.437.057 1.63.083v1.89h-1.118c-.877 0-1.047.417-1.047 1.029v1.349h2.092l-.272 2.112h-1.82V14h3.567a.773.773 0 0 0 .773-.773V.773A.773.773 0 0 0 13.37 0H.917z" fill="currentColor" fillRule="nonzero"/></g></svg>; }

frontend/src/components/svgIcons/flag.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export class FlagIcon extends React.PureComponent {
   render() { return <svg width="12" height="18" viewBox="0 0 12 18" {...this.props}><title>2EE34FFA-ECD1-47EC-9B6B-CCBB8C583C4B</title><g fill="none" fillRule="evenodd"><path d="M-14-11h40v40h-40z"/><path d="M.007 0v17.955l5.56-3.943 5.56 3.943V0z" fill="currentColor" fillRule="nonzero"/></g></svg>; }