Implement About page components from the Figma design

frontend/src/assets/styles/_extra.scss

@@ -616,3 +616,7 @@ a[href="https://www.mapbox.com/map-feedback/"]
 .link:focus {
   outline: revert;
 }
+
+.drop-shadow-1 {
+  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));
+}

frontend/src/assets/styles/index.scss

@@ -4,7 +4,6 @@
 @import 'typography';
 @import 'extra';
 @import 'testimonials';
-@import 'organizations';
 @import 'calendarheatmap';
 @import 'datepicker';
 @import 'accordion';

frontend/src/components/about/coordinationCards.js

@@ -0,0 +1,49 @@
+import { FormattedMessage } from 'react-intl';
+
+import { MappingIcon, ValidationIcon, ProjectManagementIcon } from '../svgIcons';
+import messages from './messages';
+
+const cards = [
+  {
+    image: <MappingIcon />,
+    label: 'mappers',
+  },
+  {
+    image: <ValidationIcon />,
+    label: 'validators',
+  },
+  {
+    image: <ProjectManagementIcon />,
+    label: 'projectManagers',
+  },
+];
+
+export function CoordinationCards() {
+  return (
+    <section className="ph6-l ph4 pb4">
+      <div className="coordination-cards-container-parent mv6">
+        <div className="flex flex-column flex-row-l coordination-cards-container">
+          {cards.map((card) => (
+            <CoordinationCard key={card.label} image={card.image} label={card.label} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CoordinationCard({ image, label }) {
+  return (
+    <article className="pv3 drop-shadow-1 bg-white">
+      <div className="pa4 ph3-m flex flex-column items-center tc">
+        <div className="red dib">{image}</div>
+        <h4 className="blue-dark b f125 mb3 mt4">
+          <FormattedMessage {...messages[`${label}`]} />
+        </h4>
+        <p className="blue-grey f125 ma0">
+          <FormattedMessage {...messages[`${label}Desc`]} />
+        </p>
+      </div>
+    </article>
+  );
+}

frontend/src/components/about/creatingChange.js

@@ -0,0 +1,64 @@
+import { FormattedMessage } from 'react-intl';
+
+import {
+  DisasterResponseIcon,
+  HealthIcon,
+  RefugeeResponseIcon,
+  WaterSanitationIcon,
+} from '../svgIcons';
+import messages from './messages';
+
+export function CreatingChange() {
+  const categories = [
+    {
+      label: 'refugeeResponse',
+      icon: RefugeeResponseIcon,
+    },
+    {
+      label: 'publicHealth',
+      icon: HealthIcon,
+    },
+    {
+      label: 'disasterResponse',
+      icon: DisasterResponseIcon,
+    },
+    {
+      label: 'waterAndSanitation',
+      icon: WaterSanitationIcon,
+    },
+  ];
+
+  return (
+    <section className="bg-blue-dark ph6-l ph4 pt5 pb6">
+      <div className="bg-red ph3 pv2 dib white ttu fw5 f2 barlow-condensed mb5">
+        <FormattedMessage {...messages.creatingChange} />
+      </div>
+      <div className="category-cards-ctr mt4">
+        {categories.map((category) => (
+          <InterestCard key={category.label} label={category.label} Icon={category.icon} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function InterestCard({ Icon, label }) {
+  const iconClass = 'red';
+  const iconStyle = { height: '69px' };
+
+  return (
+    <article className="interest bg-white tc">
+      <div className="w-100 tc bg-mask flex items-center justify-center card-image br1 br--top ">
+        <Icon className={iconClass} style={iconStyle} />
+      </div>
+      <div className="detail-container">
+        <h6 className="fw7 f125 mt0 mb2 blue-dark">
+          <FormattedMessage {...messages[`${label}`]} />
+        </h6>
+        <p className="blue-grey lh-title f6 f5-ns ma0">
+          <FormattedMessage {...messages[`${label}Desc`]} />
+        </p>
+      </div>
+    </article>
+  );
+}

frontend/src/components/about/crisisStats.js

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+import { StatsNumber } from '../homepage/stats';
+import './styles.scss';
+
+export function CrisisStats() {
+  const crises = [
+    {
+      title: 'Refugee Response',
+      description: 'Shelter and buildings mapped in earthquake-affected areas of Turkey and Syria',
+      projectIds: [14232, 14264, 14220, 14226, 14246, 14315],
+    },
+    {
+      title: 'Ecuador Floods',
+      description: 'Shelter and buildings mapped in earthquake-affected areas of Turkey and Syria',
+      projectIds: [14979, 14991],
+    },
+  ];
+
+  return (
+    <section className="ph6-l ph4 pv5 category-cards-ctr">
+      {crises.map(({ title, description, projectIds }) => (
+        <CrisisStatCard
+          key={title}
+          title={title}
+          description={description}
+          projectIds={projectIds}
+        />
+      ))}
+    </section>
+  );
+}
+
+function CrisisStatCard({ title, description, projectIds }) {
+  const [stats, setStats] = useState(null);
+  const hashtags = projectIds.map((projectId) => `hotosm-project-${projectId}`).join(',');
+
+  const buildingsCount =
+    stats && Object.values(stats).reduce((sum, project) => sum + project.buildings, 0);
+
+  useEffect(() => {
+    axios
+      .get(`https://demo.contributions-stats.ohsome.org/api/stats/${hashtags}`)
+      .then(({ data }) => setStats(data));
+  }, [hashtags]);
+
+  return (
+    <article className="tc mv3 blue-grey fw5 ph3">
+      <p className="f1 lh-solid red barlow-condensed ma0">
+        <StatsNumber value={buildingsCount || 0} />
+      </p>
+      <h6 className="f7 ttu pt2 pb1 ma0 fw5">{title}</h6>
+      <p className="ma0">{description}</p>
+    </article>
+  );
+}

frontend/src/components/about/getInTouch.js

@@ -0,0 +1,19 @@
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+
+export function GetInTouch() {
+  return (
+    <section className="ph6-l ph4 bg-blue-grey pt5 pb6 flex flex-column flex-row-l justify-between get-in-touch">
+      <div className="bg-red ph3 pv2 dib white ttu fw5 f2 barlow-condensed mb6 heading mr5">
+        <FormattedMessage {...messages.getInTouchHeader} />
+      </div>
+      <div className="white description">
+        <FormattedMessage {...messages.generalQuestions} />
+        <p className="fw7">info@hotosm.org</p>
+        <hr className="solid" />
+        <FormattedMessage {...messages.mappingHelp} />
+      </div>
+    </section>
+  );
+}

frontend/src/components/about/index.js

@@ -0,0 +1,6 @@
+export { CoordinationCards } from './coordinationCards';
+export { CreatingChange } from './creatingChange';
+export { CrisisStats } from './crisisStats';
+export { SponsorshipAndFunding } from './sponsorshipAndFunding';
+export { OpenSource } from './openSource';
+export { GetInTouch } from './getInTouch';

frontend/src/components/about/messages.js

@@ -0,0 +1,107 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  mappers: {
+    id: 'about.coordination.mappers',
+    defaultMessage: 'Mappers',
+  },
+  mappersDesc: {
+    id: 'about.coordination.mappersDesc',
+    defaultMessage:
+      'Tasking manager streamline the mapping process by creating smaller, easier tasks.',
+  },
+  validators: {
+    id: 'about.coordination.validators',
+    defaultMessage: 'Validators',
+  },
+  validatorsDesc: {
+    id: 'about.coordination.validatorsDesc',
+    defaultMessage:
+      'Through the Tasking Manager, validators have an overarching view of the projects, optimizing their efforts. ',
+  },
+  projectManagers: {
+    id: 'about.coordination.projectManagers',
+    defaultMessage: 'Project Managers',
+  },
+  projectManagersDesc: {
+    id: 'about.coordination.projectManagersDesc',
+    defaultMessage: '(text missing)',
+  },
+  creatingChange: {
+    id: 'about.coordination.creating_change',
+    defaultMessage: 'We are creating change',
+  },
+  floss: {
+    id: 'pages.about.floss.title',
+    defaultMessage: 'Free and Open Source Software',
+  },
+  openSource: {
+    id: 'about.open_source',
+    defaultMessage: 'Open Source',
+  },
+  flossDescription: {
+    id: 'pages.about.floss.description',
+    defaultMessage:
+      'The Tasking Manager is Free and Open Source software developed by the {hotLink}. The application’s code can be accessed through {code}, where you can report issues and make contributions.',
+  },
+  refugeeResponse: {
+    id: 'pages.about.categories.refugeeResponse',
+    defaultMessage: 'Refugee Response',
+  },
+  refugeeResponseDesc: {
+    id: 'pages.about.categories.refugeeResponseDesc',
+    defaultMessage: 'Track human displacement, resettlement, and access to services.',
+  },
+  publicHealth: {
+    id: 'pages.about.categories.publicHealth',
+    defaultMessage: 'Public Health',
+  },
+  publicHealthDesc: {
+    id: 'pages.about.categories.publicHealthDesc',
+    defaultMessage:
+      'Connect local people to health services, and improve public health provision and quality.',
+  },
+  disasterResponse: {
+    id: 'pages.about.categories.disasterResponse',
+    defaultMessage: 'Disaster Response',
+  },
+  disasterResponseDesc: {
+    id: 'pages.about.categories.disasterResponseDesc',
+    defaultMessage:
+      'First responders need fast, reliable information to reach affected areas post-disaster and prioritize aid.',
+  },
+  waterAndSanitation: {
+    id: 'pages.about.categories.waterAndSanitation',
+    defaultMessage: 'Water And Sanitation',
+  },
+  waterAndSanitationDesc: {
+    id: 'pages.about.categories.waterAndSanitationDesc',
+    defaultMessage: 'Improve local sanitation and waste management systems.',
+  },
+  getInTouchHeader: {
+    id: 'pages.about.get_in_touch.header',
+    defaultMessage: 'Get in touch and let us know how we can help',
+  },
+  generalQuestions: {
+    id: 'pages.about.get_in_touch.general_questions',
+    defaultMessage:
+      'General questions or comments about Humanitarian OpenStreetMap Team, please email:',
+  },
+  mappingHelp: {
+    id: 'pages.about.get_in_touch.for_mapping_help',
+    defaultMessage: 'For help with mapping or mapping related questions, please email:',
+  },
+  sponsorshipAndFunding: {
+    id: 'pages.about.label.sponsorship_and_funding',
+    defaultMessage: 'Sponsorship And Funding',
+  },
+  sponsorshipAndFundingDesc: {
+    id: 'pages.about.label.sponsorship_and_funding_description',
+    defaultMessage:
+      'The Tasking Manager was designed and built for the Humanitarian OpenStreetMap Team. With the invaluable support of:',
+  },
+  applySponsorship: {
+    id: 'pages.about.label.apply_sponsorship',
+    defaultMessage: 'Want to become a sponsor?',
+  },
+});

frontend/src/components/about/openSource.js

@@ -0,0 +1,36 @@
+import { FormattedMessage } from 'react-intl';
+
+import osiStandardLogo from '../../assets/img/osi_standard_logo_0.png';
+import messages from './messages';
+
+export function OpenSource() {
+  return (
+    <section className="ph6-l ph4 flex flex-row-l flex-column justify-between open-source">
+      <h1 className="v-mid f2 barlow-condensed ttu fw5">
+        <FormattedMessage {...messages.openSource} />
+      </h1>
+      <div className="w-40-l flex items-center">
+        <img className="mw3 mr2" src={osiStandardLogo} alt="OSI aproved license" />
+        <div className="v-mid pl3">
+          <p className="ma0">
+            <FormattedMessage
+              {...messages.flossDescription}
+              values={{
+                hotLink: (
+                  <a className="link red fw5" href="https://hotosm.org">
+                    Humanitarian OpenStreetMap Team
+                  </a>
+                ),
+                code: (
+                  <a className="link red fw5" href="https://github.com/hotosm/tasking-manager">
+                    GitHub
+                  </a>
+                ),
+              }}
+            />
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}