Modal Join us (#44)

* Add 'Join us' modal * Add action button 'Join us' to top and bottom of Homepage * Add link 'Join us' in footer menu Co-authored-by: Jorge Samuel Mendes de Jesus <[email protected]>
Vizzuality · Nov 9, 2021 · 0604349 · 0604349
1 parent 7708c36
commit 0604349
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 6 deletions.
diff --git a/components/footer/component.js b/components/footer/component.js
@@ -3,15 +3,18 @@ import { Link } from 'lib/routes';
 
 import Icon from 'components/icon';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Footer = () => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <footer className="c-footer">
         <div className="container ">
           <div className="row py-4">
@@ -41,6 +44,15 @@ const Footer = () => {
                           About us
                         </button>
                       </li>
+                      <li>
+                        <button
+                          type="button"
+                          className="nav-link pb-0"
+                          onClick={() => setJoinUsModalOpen(true)}
+                        >
+                          Join us
+                        </button>
+                      </li>
                       <li>
                         <a href="mailto:[email protected]" className="nav-link pb-0">
                           Contact

diff --git a/components/homepage/section-1/component.js b/components/homepage/section-1/component.js
@@ -5,11 +5,13 @@ import Image from 'next/image';
 import { Link } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Section1 = () => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   const onClickExplore = useCallback(() => {
     logEvent('Homepage', 'click on calls to action buttons', 'explore map (top of page)');
@@ -20,9 +22,15 @@ const Section1 = () => {
     setAboutModalOpen(true);
   }, [setAboutModalOpen]);
 
+  const onClickJoinUs = useCallback(() => {
+    logEvent('Homepage', 'click on calls to action buttons', 'join us (top of page)');
+    setJoinUsModalOpen(true);
+  }, [setJoinUsModalOpen]);
+
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <section className="c-homepage-section-1">
         <div className="scroll-text-container">
           <div className="container text-center">
@@ -36,15 +44,15 @@ const Section1 = () => {
                 biggest impact.
               </div>
             </div>
-            <div className="row">
-              <div className="col-sm-12 col-md-4 offset-md-2 text-center text-md-right mb-3 mb-md-0">
+            <div className="row justify-content-center">
+              <div className="col-sm-12 col-md-auto mb-3 mb-md-0">
                 <Link to="explore">
                   <a className="btn btn-primary btn-fixed-width" onClick={onClickExplore}>
                     Explore map
                   </a>
                 </Link>
               </div>
-              <div className="col-sm-12 col-md-4 text-center text-md-left">
+              <div className="col-sm-12 col-md-auto mb-3 mb-md-0">
                 <button
                   type="button"
                   className="btn btn-outline-primary btn-fixed-width"
@@ -53,6 +61,15 @@ const Section1 = () => {
                   About us
                 </button>
               </div>
+              <div className="col-sm-12 col-md-auto">
+                <button
+                  type="button"
+                  className="btn btn-outline-primary btn-fixed-width"
+                  onClick={onClickJoinUs}
+                >
+                  Join us
+                </button>
+              </div>
             </div>
           </div>
           <div className="scroll-text">

diff --git a/components/homepage/section-7/component.js b/components/homepage/section-7/component.js
@@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
 import { Link } from 'lib/routes';
 import { logEvent } from 'utils/analytics';
 import AboutModal from 'components/about-modal';
+import JoinUsModal from 'components/join-us-modal';
 
 import './style.scss';
 
 const Section7 = ({ configuration }) => {
   const [aboutModalOpen, setAboutModalOpen] = useState(false);
+  const [joinUsModalOpen, setJoinUsModalOpen] = useState(false);
 
   const onClickExplore = useCallback(() => {
     logEvent('Homepage', 'click on calls to action buttons', 'explore map (bottom of page)');
@@ -19,9 +21,15 @@ const Section7 = ({ configuration }) => {
     setAboutModalOpen(true);
   }, [setAboutModalOpen]);
 
+  const onClickJoinUs = useCallback(() => {
+    logEvent('Homepage', 'click on calls to action buttons', 'join us (bottom of page)');
+    setJoinUsModalOpen(true);
+  }, [setJoinUsModalOpen]);
+
   return (
     <>
       <AboutModal open={aboutModalOpen} onClose={() => setAboutModalOpen(false)} />
+      <JoinUsModal open={joinUsModalOpen} onClose={() => setJoinUsModalOpen(false)} />
       <section id={configuration.anchor} className="c-homepage-section-7">
         <div className="container">
           <div className="row mb-5">
@@ -34,15 +42,15 @@ const Section7 = ({ configuration }) => {
               for future scenarios.
             </div>
           </div>
-          <div className="row">
-            <div className="col-sm-12 col-md-4 offset-md-2 text-center text-md-right mb-3">
+          <div className="row justify-content-center">
+            <div className="col-sm-12 col-md-auto mb-3 mb-md-0 text-center">
               <Link route="explore">
                 <a className="btn btn-secondary btn-fixed-width" onClick={onClickExplore}>
                   Explore map
                 </a>
               </Link>
             </div>
-            <div className="col-sm-12 col-md-4 text-center text-md-left">
+            <div className="col-sm-12 col-md-auto mb-3 mb-md-0 text-center">
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-fixed-width"
@@ -51,6 +59,15 @@ const Section7 = ({ configuration }) => {
                 About us
               </button>
             </div>
+            <div className="col-sm-12 col-md-auto text-center">
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-fixed-width"
+                onClick={onClickJoinUs}
+              >
+                Join us
+              </button>
+            </div>
           </div>
         </div>
       </section>

diff --git a/components/join-us-modal/component.js b/components/join-us-modal/component.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Image from 'next/image';
+
+import Modal from 'components/modal';
+
+import './style.scss';
+
+const JoinUsModal = ({ open, onClose }) => (
+  <Modal open={open} onClose={onClose} title="Join us" className="c-join-us-modal">
+    <h1 className="mb-4">Join us</h1>
+
+    <p>
+      Would you like to help us improve Soils Revealed? We need your assistance to expand
+      space-time, predictive modelling analyses of SOC stock changes, the{' '}
+      <a href="https://doi.org/10.1111/ejss.12998" target="_blank" rel="noopener noreferrer">
+        approach piloted for Argentina
+      </a>
+      , to the whole globe.
+    </p>
+
+    <p>
+      Please share your field-measured soil data with the Soils Revealed team. Shared data will be
+      safeguarded in the ISRIC World Data Centre (WDC)-Soils repository and standardised according
+      to the{' '}
+      <a
+        href="https://essd.copernicus.org/articles/12/299/2020/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        WoSIS
+      </a>{' '}
+      workflow in accord with the license defined by each{' '}
+      <a
+        href="https://www.isric.org/explore/wosis/wosis-contributing-institutions-and-experts"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        data provider
+      </a>
+      .
+    </p>
+
+    <p>
+      Prospective data contributors may email{' '}
+      <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
+        [email protected]
+      </a>{' '}
+      for details on desired formats and{' '}
+      <a
+        href="/files/data-sharing-agreement-soils-revealed-isric.pdf"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        licensing
+      </a>
+      . Upon registration, new data contributors will be acknowledged below with their logo. Thanks
+      for sharing your data!
+    </p>
+
+    <p>Present data contributors (through WoSIS):</p>
+    <div className="container mt-3">
+      <div className="row align-items-center text-center">
+        <div className="col-6 col-md-3 pl-md-0">
+          <a
+            href="https://www.isric.org/explore/wosis/wosis-contributing-institutions-and-experts"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src="/images/join-us-wosis-present-data-contributors.jpg"
+              alt="Location of soil profiles provided with the \'WoSIS September 2019 snapshot\'"
+              width={200}
+              height={100}
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <p className="mt-4">New data contributions from:</p>
+    <div className="container mt-3">
+      <div className="row align-items-center text-center">
+        <div className="col-6 col-md-3 pl-md-0 text-left">
+          <a href="https://www.argentina.gob.ar/inta" target="_blank" rel="noopener noreferrer">
+            <Image
+              src="/images/inta-logo.jpg"
+              alt="Instituto Nacional de Tecnología Agropecuaria"
+              width={75}
+              height={75}
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </Modal>
+);
+
+JoinUsModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default JoinUsModal;
diff --git a/components/join-us-modal/index.js b/components/join-us-modal/index.js
@@ -0,0 +1,3 @@
+import Component from './component';
+
+export default Component;
diff --git a/components/join-us-modal/style.scss b/components/join-us-modal/style.scss
@@ -0,0 +1,19 @@
+@import 'css/settings';
+
+.c-join-us-modal {
+  max-width: rem(850);
+
+  @include media-breakpoint-up(lg, $grid-breakpoints) {
+    padding: rem(50) rem(100);
+  }
+
+  h1 {
+    @include font-size($font-size-xxl);
+    text-align: center;
+  }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+  }
+}
diff --git a/public/files/data-sharing-agreement-soils-revealed-isric.pdf b/public/files/data-sharing-agreement-soils-revealed-isric.pdf
diff --git a/public/images/inta-logo.jpg b/public/images/inta-logo.jpg
diff --git a/public/images/join-us-wosis-present-data-contributors.jpg b/public/images/join-us-wosis-present-data-contributors.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Component from './component';

		export default Component;