CORE-4775: updates (#1058)

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

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

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 />
     </>

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;
+  }
+}

pages/about/about.module.scss

@@ -348,3 +348,7 @@
   flex-wrap: wrap;
   gap: 20px;
 }
+
+.how-button-wrapper {
+  display: flex;
+}

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"