Merge pull request #1648 from ClimateWatch-Vizzuality/trainings-page

Trainings page
ClimateWatch-Vizzuality · Dec 12, 2022 · 381699b · 381699b
2 parents 073b6e8 + 4a8eb01
commit 381699b
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 0 deletions.
diff --git a/app/helpers/seo_helper.rb b/app/helpers/seo_helper.rb
@@ -25,6 +25,7 @@ module SeoHelper
     about: 'about',
     aboutPartners: 'aboutPartners',
     aboutPermissions: 'aboutPermissions',
+    aboutTrainings: 'aboutTrainings',
     aboutContact: 'aboutContact',
     aboutFAQ: 'aboutFAQ',
     myCW: 'myCW',
@@ -52,6 +53,7 @@ module SeoHelper
     SEO_PAGES[:about] => 'About',
     SEO_PAGES[:aboutPartners] => 'Climate Watch Partners',
     SEO_PAGES[:aboutContact] => 'Sign Up for Updates',
+    SEO_PAGES[:aboutTrainings] => 'Trainings',
     SEO_PAGES[:aboutPermissions] => 'Permissions & Licensing',
     SEO_PAGES[:aboutFAQ] => 'Frequently Asked Questions',
     SEO_PAGES[:myCW] => 'My Climate Watch',

diff --git a/app/javascript/app/components/about/about-trainings/about-trainings-component.jsx b/app/javascript/app/components/about/about-trainings/about-trainings-component.jsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import cx from 'classnames';
+import ReactPlayer from 'react-player';
+import layout from 'styles/layout';
+import { SEO_PAGES } from 'data/seo';
+import SEOTags from 'components/seo-tags';
+import AbbrReplace from 'components/abbr-replace';
+import styles from './about-trainings-styles.scss';
+
+const AboutTrainings = () => (
+  <div className={cx(layout.content, styles.aboutTrainings)}>
+    <SEOTags page={SEO_PAGES.aboutTrainings} href={location.href} />
+    <AbbrReplace>
+      <p>
+        Climate Watch offers open trainings on a regular basis to connect with
+        users and explain how to make the best use of the platform and all its
+        data. During the trainings, the Climate Watch team shares the latest
+        developments and updates on the tool and allocates plenty of time to
+        respond to questions.
+      </p>
+      <p>
+        Subscribe to our{' '}
+        <a
+          href="https://www.climatewatchdata.org/about/contact"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          monthly newsletter
+        </a>{' '}
+        to find out when the next training will take place.
+      </p>
+      <p>
+        For any questions about our trainings, please contact{' '}
+        <a
+          href="mailto:[email protected]"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          [email protected]
+        </a>
+      </p>
+      <p className={styles.recordingIntro}>
+        You can watch a recording of one of our trainings here:
+      </p>
+      <ReactPlayer
+        className={styles.video}
+        width="100%"
+        height="500px"
+        url="https://www.youtube.com/watch?v=jUIAICboxrY"
+        controls
+        config={{
+          youtube: {
+            preload: true
+          }
+        }}
+      />
+      <p className={styles.bold}>Speakers:</p>
+      <ul>
+        <li>
+          <span className={styles.name}>Leandro Vigna</span>, Data Partnerships
+          and Outreach Manager, Climate Watch, World Resources Institute
+        </li>
+        <li>
+          <span className={styles.name}>Mengpin Ge</span>, Associate, Climate
+          Program, World Resources Institute
+        </li>
+        <li>
+          <span className={styles.name}>Mollie Freeman</span>, Social Media
+          Specialist, Climate Program, World Resources Institute (Moderator)
+        </li>
+      </ul>
+      <p className={styles.recordingIntro}>
+        A recording of a training conducted in Spanish is available here:
+      </p>
+      <ReactPlayer
+        className={styles.video}
+        width="100%"
+        height="500px"
+        url="https://www.youtube.com/watch?v=dKCU1R5-pNE"
+        controls
+        config={{
+          youtube: {
+            preload: true
+          }
+        }}
+      />
+      <p className={styles.bold}>Speakers:</p>
+      <ul>
+        <li>
+          <span className={styles.name}>Daniel Galvan Perez</span>, Technical
+          Officer, Regional Collaboration Centre for Latin America, (UNFCCC -
+          UNEP)
+        </li>
+        <li>
+          <span className={styles.name}>Leandro Vigna</span>, Data Partnerships
+          and Outreach Manager, Climate Watch, World Resources Institute
+        </li>
+        <li>
+          <span className={styles.name}>Jamie Bindon</span>, Enhancement
+          Knowledge Specialist, NDC Partnership
+        </li>
+        <li>
+          <span className={styles.name}>Molly McGregor</span>, Knowledge Tools &
+          Research Associate, NDC Partnership
+        </li>
+      </ul>
+    </AbbrReplace>
+  </div>
+);
+
+export default AboutTrainings;
diff --git a/app/javascript/app/components/about/about-trainings/about-trainings-styles.scss b/app/javascript/app/components/about/about-trainings/about-trainings-styles.scss
@@ -0,0 +1,32 @@
+@import '~styles/layout.scss';
+@import '~styles/settings.scss';
+
+.aboutTrainings {
+  padding-top: 50px;
+  line-height: $line-height-medium;
+  font-size: $font-size-m;
+  color: $theme-color;
+
+  .bold,
+  .name,
+  .recordingIntro {
+    font-weight: $font-weight-bold;
+  }
+
+  p,
+  .video {
+    margin-bottom: 40px;
+  }
+
+  ul {
+    margin-bottom: 40px;
+    list-style: initial;
+    margin-left: 35px;
+  }
+
+  a {
+    color: $theme-color;
+    border-bottom: solid 1px $theme-secondary;
+    word-wrap: break-word;
+  }
+}
diff --git a/app/javascript/app/components/about/about-trainings/about-trainings.js b/app/javascript/app/components/about/about-trainings/about-trainings.js
@@ -0,0 +1,3 @@
+import Component from './about-trainings-component';
+
+export default Component;
diff --git a/app/javascript/app/components/footer/site-map-footer/site-map-footer-data.js b/app/javascript/app/components/footer/site-map-footer/site-map-footer-data.js
@@ -35,6 +35,7 @@ export const siteMapData = [
       { title: 'Climate Watch Partners', href: '/about/partners' },
       { title: 'Key Visualizations', href: '/key-visualizations' },
       { title: 'Sign up for updates', href: '/about/contact' },
+      { title: 'Trainings & Tutorials', href: '/about/trainings' },
       { title: 'Permissions & Licensing', href: '/about/permissions' },
       { title: 'FAQ', href: '/about/faq/general_questions' }
     ]

diff --git a/app/javascript/app/data/seo.js b/app/javascript/app/data/seo.js
@@ -25,6 +25,7 @@ export const SEO_PAGES = {
   pathways: 'pathways',
   about: 'about',
   aboutPartners: 'aboutPartners',
+  aboutTrainings: 'aboutTrainings',
   aboutPermissions: 'aboutPermissions',
   aboutContact: 'aboutContact',
   aboutFAQ: 'aboutFAQ',
@@ -55,6 +56,7 @@ const CANONICAL_URLS = {
   about: '/about',
   aboutPartners: '/about/partners',
   aboutPermissions: '/about/permissions',
+  aboutTrainings: '/about/trainings',
   aboutContact: '/about/contact',
   aboutFAQ: '/about/faq',
   myCW: '/my-climate-watch',
@@ -95,6 +97,7 @@ export const STATIC_TITLE_PARTS = {
   [SEO_PAGES.aboutPartners]: 'Climate Watch Partners',
   [SEO_PAGES.aboutContact]: 'Sign Up for Updates',
   [SEO_PAGES.aboutPermissions]: 'Permissions & Licensing',
+  [SEO_PAGES.aboutTrainings]: 'Trainings',
   [SEO_PAGES.aboutFAQ]: 'Frequently Asked Questions',
   [SEO_PAGES.myCW]: 'My Climate Watch',
   [SEO_PAGES.dataExplorer]: 'Data Explorer',

diff --git a/app/javascript/app/routes/app-routes/about-nested-routes/about-nested-routes.js b/app/javascript/app/routes/app-routes/about-nested-routes/about-nested-routes.js
@@ -21,6 +21,11 @@ export default [
     label: 'Permissions & Licensing',
     activeId
   },
+  {
+    path: '/about/trainings',
+    label: 'Trainings & Tutorials',
+    activeId
+  },
   {
     path: '/about/faq/general_questions',
     label: 'FAQ',

diff --git a/app/javascript/app/routes/app-routes/about-routes/about-routes.js b/app/javascript/app/routes/app-routes/about-routes/about-routes.js
@@ -4,6 +4,7 @@ import { Redirect } from 'react-router-dom';
 import AboutContact from 'components/about/about-contact';
 import AboutDescription from 'components/about/about-description';
 import AboutPartners from 'components/about/about-partners';
+import AboutTrainings from 'components/about/about-trainings';
 import AboutPermissions from 'components/about/about-permissions';
 import AboutFaq from 'components/about/about-faq';
 
@@ -36,6 +37,13 @@ export default [
     anchor: true,
     label: 'Permissions & Licensing'
   },
+  {
+    path: '/about/trainings',
+    component: AboutTrainings,
+    exact: true,
+    anchor: true,
+    label: 'Trainings & Tutorials'
+  },
   {
     path: '/about/faq/general_questions',
     component: () =>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Component from './about-trainings-component';

		export default Component;