From 011307170ad698d1d7e2a98c0711396f522ac205 Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <65679299+ekachxaidze98@users.noreply.github.com>
Date: Mon, 8 Jan 2024 21:42:16 +0400
Subject: [PATCH] CORE-4775: updates (#1058)

---
 core.routes.yml                  |  2 +-
 data/openAccess.yml              | 13 ++++++
 main/index.jsx                   | 34 ++++++++++++++-
 main/styles.module.scss          | 71 ++++++++++++++++++++++++++++++++
 pages/about/about.module.scss    |  4 ++
 pages/about/index.jsx            | 24 ++++++-----
 public/images/services/guide.svg |  3 ++
 7 files changed, 139 insertions(+), 12 deletions(-)
 create mode 100644 data/openAccess.yml
 create mode 100644 main/styles.module.scss
 create mode 100644 public/images/services/guide.svg

diff --git a/core.routes.yml b/core.routes.yml
index b8b08d24..ee68a196 100644
--- a/core.routes.yml
+++ b/core.routes.yml
@@ -196,4 +196,4 @@ static: /
 images: /images
 documents: /documents
 ref-audit: /ref-audit
-advantages-of-being-harvested: /advantages-of-being-harvested
+how-core-supports-open-access: /how-core-supports-open-access
diff --git a/data/openAccess.yml b/data/openAccess.yml
new file mode 100644
index 00000000..2e83463e
--- /dev/null
+++ b/data/openAccess.yml
@@ -0,0 +1,13 @@
+services:
+  - title: Become a CORE data provider
+    picture: /images/services/membership.svg
+    description: Join the data providers community and facilitate access of your scientific research outputs to everyone in the world.
+    action:
+      - title: Find out more
+        url: benefits
+  - title: CORE Data provider’s guide
+    picture: /images/services/guide.svg
+    description: The guide aims to assist institutions and repository managers in configuring their repositories in way that enables CORE to correctly index them.
+    action:
+      - title: Find out more
+        url: documentations
diff --git a/main/index.jsx b/main/index.jsx
index 4c3fc2e9..6f7eedc0 100644
--- a/main/index.jsx
+++ b/main/index.jsx
@@ -1,10 +1,13 @@
 import React, { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Header, Cookies as CookiesPopup } from '@oacore/design'
+import { Button } from '@oacore/design/lib/elements'
 
 import { useAnalytics } from '../hooks'
+import styles from './styles.module.scss'
+import openAccess from '../data/openAccess.yml'
 
-import { Layout } from 'components'
+import { Layout, Markdown } from 'components'
 import { patchStats } from 'components/utils'
 import config from 'data/core.yml'
 
@@ -46,7 +49,36 @@ const Main = ({ children }) => {
         activeRoute={router.route}
         onNavigate={handleNavigation}
       >
+        {router.asPath.includes('how-core-supports-open-access') && (
+          <div className={styles.spacer} />
+        )}
         {children}
+        {router.asPath.includes('how-core-supports-open-access') && (
+          <div className={styles.serviceMainWrapper}>
+            <div className={styles.serviceWrapper}>
+              {openAccess.services.map((service) => (
+                <div className={styles.service}>
+                  <div className={styles.headerWrapper}>
+                    <img
+                      className={styles.titlePicture}
+                      src={service.picture}
+                      alt={service.title}
+                    />
+                    <span className={styles.serviceTitle}>{service.title}</span>
+                  </div>
+                  <div>
+                    <Markdown className={styles.serviceDescription}>
+                      {service.description}
+                    </Markdown>
+                    <Button variant="outlined" href={service.action[0].url}>
+                      {service.action[0].title}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
       </Layout>
       <CookiesPopup />
     </>
diff --git a/main/styles.module.scss b/main/styles.module.scss
new file mode 100644
index 00000000..dde3efaa
--- /dev/null
+++ b/main/styles.module.scss
@@ -0,0 +1,71 @@
+@import 'design-v2/variables';
+
+.spacer {
+  height: 24px;
+}
+
+.service-main-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .service-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 2.5rem 0;
+    padding: 0 calc(50vw - 60rem / 2);
+    .service {
+      flex: 1;
+      padding: 1.5rem;
+      background: #f5f5f5;
+      border-radius: 2px;
+
+      @media (max-width: $breakpoint-sm) {
+        flex: auto;
+      }
+
+      @media (max-width: 768px) {
+        width: 100%;
+      }
+
+      .headerWrapper {
+        display: flex;
+        align-items: center;
+        .title-picture {
+          margin-right: 10px;
+          width: 70px;
+          height: 46px;
+        }
+      }
+
+      .service-title {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 32px;
+        line-height: 32px;
+        color: #212121;
+      }
+
+      .service-description {
+        margin: 18px 0 34px 0;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 24px;
+        color: #212121;
+        min-height: 75px;
+        height: max-content;
+      }
+
+      &-title {
+        color: var(--primary);
+      }
+    }
+  }
+  @media (max-width: 990px) {
+    padding: 0 16px;
+  }
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+  }
+}
diff --git a/pages/about/about.module.scss b/pages/about/about.module.scss
index 74759d15..c649165a 100644
--- a/pages/about/about.module.scss
+++ b/pages/about/about.module.scss
@@ -348,3 +348,7 @@
   flex-wrap: wrap;
   gap: 20px;
 }
+
+.how-button-wrapper {
+  display: flex;
+}
diff --git a/pages/about/index.jsx b/pages/about/index.jsx
index 360141fa..9947cad5 100644
--- a/pages/about/index.jsx
+++ b/pages/about/index.jsx
@@ -163,22 +163,26 @@ const AboutPage = ({ data }) => {
             <Markdown>
               {patchStats(data.howItWorks.body, data.statistics)}
             </Markdown>
+            <ButtonToolbar className={styles.howButtonWrapper}>
+              <Button
+                variant="contained"
+                color="primary"
+                outline
+                href="benefits"
+              >
+                {data.howItWorks.actionLabels.primary}
+              </Button>
+
+              <Button color="link" href="data-providers">
+                {data.howItWorks.actionLabels.secondary}
+              </Button>
+            </ButtonToolbar>
           </Col>
 
           <Col xs="12" md="6">
             <RepositoriesMap />
           </Col>
         </Row>
-
-        <ButtonToolbar align="center" className="flex-row-reverse">
-          <Button color="primary" outline href="benefits">
-            {data.howItWorks.actionLabels.primary}
-          </Button>
-
-          <Button color="link" href="data-providers">
-            {data.howItWorks.actionLabels.secondary}
-          </Button>
-        </ButtonToolbar>
       </Section>
       <RelatedContentSection
         id="communities"
diff --git a/public/images/services/guide.svg b/public/images/services/guide.svg
new file mode 100644
index 00000000..d8add97d
--- /dev/null
+++ b/public/images/services/guide.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="46" height="40" viewBox="0 0 46 40" fill="none">
+  <path d="M7.66671 9.99992H3.83337V33.3332C3.83337 35.1666 5.55837 36.6666 7.66671 36.6666H34.5V33.3332H7.66671V9.99992ZM38.3334 3.33325H15.3334C13.225 3.33325 11.5 4.83325 11.5 6.66658V26.6666C11.5 28.4999 13.225 29.9999 15.3334 29.9999H38.3334C40.4417 29.9999 42.1667 28.4999 42.1667 26.6666V6.66658C42.1667 4.83325 40.4417 3.33325 38.3334 3.33325ZM36.4167 18.3332H17.25V14.9999H36.4167V18.3332ZM28.75 24.9999H17.25V21.6666H28.75V24.9999ZM36.4167 11.6666H17.25V8.33325H36.4167V11.6666Z" fill="#B75400"/>
+</svg>