CORE-5076: creat sdg page

data/sdg.yml

@@ -0,0 +1,43 @@
+header:
+  title: Classification of research papers according to United Nations Sustainable Development Goals
+  image: /images/services/goals.svg
+  description: The Sustainable Development Goals or Global Goals are a collection of 17 interlinked global goals designed to be a "blueprint to achieve a better and more sustainable future for all". The SDGs were set up in 2015 by the United Nations General Assembly and are intended to be achieved by 2030.
+  subTitle: CORE labs
+
+upload:
+  default:
+    title: Identify SDG in your paper
+    subTitle: Drag and drop your file here
+    action:
+      title: Browse files
+  success:
+    title: SDG labels found
+    description: "Found SDG labels:"
+    image: /images/success.svg
+    action:
+      title: Upload new file
+  fail:
+    title: SDG labels not found
+    description: SDG labels not found in this paper.
+    image: /images/fail.svg
+    action:
+      title: Upload new file
+  noSupport:
+    title: This format is not supported
+    sizeTitle: File is too big
+    image: /images/fail.svg
+    action: Upload new file
+  subInfo:
+    format: |
+      Supported formats: pdf, doc
+    size: |
+      Maximum  size: 10MB
+
+
+purpose:
+  title: How it work
+  image: /images/services/openUniversity.svg
+  description: |
+    The new CORE SDG Dashboard module allows institutions to gain rapid insights into the current mapping of their research outputs to the 17 UN SDG goals, significantly reducing the manual effort required to map research outputs to global sustainability objectives.
+
+    On the video below you can see how SDG insights tab in the CORE dashboard works (using the example of Open Research Online Repository (Open University).

pages/labs/sdg.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import textData from '../../data/sdg.yml'
+import { Page } from '../../components'
+import SdgPageTemplate from '../../templates/sdg'
+
+const SdgPage = () => (
+  <Page title={textData.header.title} description={textData.header.description}>
+    <SdgPageTemplate data={textData} />
+  </Page>
+)
+
+export default SdgPage

templates/sdg/index.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+
+import { Layout, Section } from '../../design-v2/components'
+import styles from './styles.module.scss'
+import { Markdown } from '../../components'
+import FileUpload from '../../components/pdf-upload'
+
+const SdgPageTemplate = ({ data }) => {
+  const [uloadResult, setUploadResult] = useState('')
+  const [rrsPdfLoading, setRrsPdfLoading] = useState(false)
+  const uploadPdf = async (file, dataProviderId) => {
+    setRrsPdfLoading(true)
+    try {
+      const url = new URL(
+        '/internal/data-providers/rights-retention-upload-file',
+        process.env.API_URL
+      )
+      const fd = new FormData()
+      fd.set('file', file)
+      fd.set('dataProviderId', dataProviderId)
+
+      const response = await fetch(url, {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: fd,
+      })
+
+      if (!response.ok) throw new Error('Network response was not ok')
+
+      const result = await response.json()
+      setUploadResult(result)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setRrsPdfLoading(false)
+    }
+  }
+
+  return (
+    <Layout className={styles.sponsorshipMainWrapper}>
+      <Section id="header" className={styles.header}>
+        <div className={styles.cardWrapper}>
+          <span className={styles.demo}>{data.header.subTitle}</span>
+          <h2 className={styles.title}>{data.header.title}</h2>
+          <Markdown className={styles.description}>
+            {data.header.description}
+          </Markdown>
+        </div>
+        <div className={styles.imgWrapper}>
+          <img className={styles.logo} src={data.header.image} alt="logo" />
+        </div>
+      </Section>
+      <FileUpload
+        rrsPdfLoading={rrsPdfLoading}
+        uploadPdf={uploadPdf}
+        uploadResults={uloadResult}
+      />
+      <Section id="purpose" className={styles.howItWorks}>
+        <div className={styles.imageWrapper}>
+          <img src={data.purpose?.image} alt={data.howItWorks?.title} />
+        </div>
+        <article className={styles.content}>
+          <h3>{data.purpose?.title}</h3>
+          <Markdown>{data.purpose?.description}</Markdown>
+        </article>
+      </Section>
+    </Layout>
+  )
+}
+
+export default SdgPageTemplate

templates/sdg/styles.module.scss

@@ -0,0 +1,58 @@
+$grid-responsive-for-sections: repeat(auto-fit, minmax(300px, 1fr));
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  .card-wrapper {
+    width: 70%;
+  }
+  .img-wrapper {
+    width: 400px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .description {
+    max-width: 70ch;
+    font-size: 1.3rem;
+    color: var(--gray-700);
+    margin-bottom: 3rem;
+  }
+  .title {
+    position: relative;
+    max-width: 25ch;
+    margin-top: 9px;
+  }
+  @media (max-width: 992px) {
+    flex-wrap: wrap-reverse;
+    justify-content: center;
+  }
+}
+
+.demo {
+  border-radius: 2px;
+  background: #8bc34a;
+  padding: 3px 7px;
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.026px;
+}
+
+.how-it-works {
+  display: grid;
+  grid-template-columns: $grid-responsive-for-sections;
+  align-items: center;
+
+  .content {
+    .button {
+      float: right;
+      margin-top: 2rem;
+      margin-right: 10px;
+    }
+  }
+}