Bump next from 10.2.3 to 11.1.3

components/service-groups/index.jsx

@@ -12,7 +12,7 @@ const ServiceGroups = ({ items, className = '', ...restProps }) => (
   >
     {items.map((group) => (
       <Col key={group.id} sm="6" lg="4" tag="li">
-        <ServiceGroupCard title={group.title} items={group.sections} />
+        <ServiceGroupCard title={group.title} items={group.features} />
       </Col>
     ))}
   </Row>

content/index.js

@@ -30,10 +30,7 @@ const processFile = (githubFile) => {
   // See more:
   // - https://nodejs.org/api/all.html#globals_atob_data
   // - https://stackoverflow.com/questions/23097928/node-js-throws-btoa-is-not-defined-error
-  const content =
-    typeof atob == 'function'
-      ? atob(githubFile.content)
-      : Buffer.from(githubFile.content, 'base64').toString()
+  const content = Buffer.from(githubFile.content, 'base64').toString()
 
   // Returning array to make it consistent with directory processing result.
   // It simplifies processing data in batch.

data/services.yml

@@ -1,14 +1,16 @@
 title: CORE Services
 description: |
-  CORE harvests, maintains, enriches and makes available metadata and full text
-  content - typically a PDF - from many Open Access journals and repositories.
-  We provide powerful services based on our huge dataset.
-
+ We deliver services for a wide range of audiences,
+ including researchers, libraries, universities, innovative
+ companies and funders. Process and analyse the largest structured
+ collection of open research with their full texts, manage your research
+ papers, make them more discoverable, and comply with funder mandates.
+ All this you can do with CORE Services.
+hero: /images/heros/services.svg
 headline:
   - Learn more about our
   - powerful services
 
-
 sections:
 -
   id: access-to-raw-data
@@ -19,41 +21,65 @@ sections:
     description: >
       Why we need raw data access to research papers
       and how CORE provides it
-
-  sections:
+  features:
   -
     id: api
-    title: API
-    short-description: Direct access to CORE data
+    logo: /images/services/api.svg
+    title: CORE API
     description: |
-      A unique and free API providing real-time machine access to metadata and full texts of research papers in CORE. One API for accessing data across all data providers. Perfect for developing and running innovative applications that need global access to research papers.
+      A unique and free API providing real-time machine access
+      to metadata and full texts of research papers in CORE.
+    short-description: Direct access to CORE data
+    recommender:
+    -
+      title: Companies
+    -
+      title: Academic institutions
+    -
+      title: Researchers
+    -
+      title: Funders
     action:
-      caption: Learn more about the CORE API
+      caption: Learn more
       url: ~services/api
-    logo: /images/services/api.svg
-    screenshot: /images/screenshots/api.png
+
   -
     id: dataset
-    title: Dataset
+    logo: /images/services/dataset.svg
+    title: CORE Dataset
     short-description: Download data in bulk
     description: |
-      Download all of CORE data and run processes in your own infrastructure. One data set with a harmonised format for accessing data across all of our data providers. Perfect for prototyping new methods, data analysis and text mining.
+     Download all of CORE
+     data and run processes in your own infrastructure.
+     Perfect for prototyping new methods, data analysis and text mining.
+    recommender:
+    -
+      title: Companies
+    -
+      title: Academic institutions
+    -
+      title: Researchers
+    -
+      title: Funders
     action:
-      caption: Learn more about the CORE Dataset
-      url: ~services/dataset
-    logo: /images/services/dataset.svg
-    screenshot: /images/screenshots/dataset.png
+      caption: Learn more
+      url: services/dataset
+
   -
     id: fastsync
     title: FastSync
+    logo: /images/services/fastsync.svg
     short-description: Stay in sync with CORE
     description: |
-      Keep an always up to date copy of all CORE data in your infrastructure. FastSync is our premium service offering fast enterprise incremental access to CORE for both commercial and non-commercial purposes. Ideal for all types of businesses, from  start-ups to large enterprises.
+      Keep an always up to date copy of all CORE data in your
+      infrastructure.
+    recommender:
+    -
+      title: Companies
     action:
-      caption: Learn more about the CORE FastSync
-      url: ~services/fastsync
-    logo: /images/services/fastsync.svg
-    screenshot: /images/screenshots/fastsync.png
+      caption: Learn more
+      url: services/fastsync
+
 -
   id: content-discovery
   title: Content discovery
@@ -63,59 +89,72 @@ sections:
     description: >
       How we aid the discovery of research papers
       and help manage repository content
-
-  sections:
+  features:
   -
     id: recommender
     title: Recommender
-    short-description: Find related content in CORE 
+    logo: /images/services/recommender.svg
+    short-description: Find related content in CORE
     description: |
-      The recommender is a plugin for repositories, journal systems and web interfaces to suggest similar articles. Its purpose is to support users in discovering articles of interest from across the network of open access repositories.
+      The recommender is a plugin for repositories, journal systems
+      and web interfaces to suggest similar articles.
+    recommender:
+    -
+      title: Companies
     action:
-      caption: Learn more about the CORE Recommender
-      url: ~services/recommender
-    logo: /images/services/recommender.svg
-    screenshot: /images/screenshots/recommender.png
+      caption: Learn more
+      url: services/recommender
   -
     id: discovery
     title: Discovery
     short-description: Locate open access versions of paywalled articles
+    logo: /images/services/discovery.svg
     description: |
-      CORE Discovery is our new service, available both as a browser extension and a repository plugin, that assists users in finding freely accessible copies of research papers that are often behind a paywall. It currently provides access to millions of full text open access papers from within CORE and other data providers.
+      Available both as a browser extension and a repository plugin,
+      that assists users in finding freely accessible copies of research
+      papers.
+    recommender:
+    -
+      title: General public
+    -
+      title: Researchers
+    -
+      title: Academic institutions
     action:
-      caption: Learn more about the CORE Discovery
-      url: ~services/discovery
-    logo: /images/services/discovery.svg
-    screenshot: /images/screenshots/discovery.png
+      caption: Learn more
+      url: services/discovery
 -
   id: managing-content
   title: Managing content
-  sections:
+  features:
   -
     id: repository-dashboard
     title: Repository Dashboard
+    logo: /images/services/repository-dashboard.svg
     short-description: Monitor and improve your repository output
     description: |
-      The Repository Dashboard is a free service for our data providers. It
-      provides an online interface offering valuable technical information and
-      statistics to content providers. It is the tool you need to check that
-      your repository is configured correctly to provide maximum visibility to
-      your research outputs.
+     A service for our data providers.
+     It provides an online interface offering valuable technical information and statistics.
+    recommender:
+    -
+      title: Academic institutions
+    -
+      title: Funders
     action:
-      caption: Learn more about the CORE Repository Dashboard
-      url: ~services/repository-dashboard
-    logo: /images/services/repository-dashboard.svg
-    screenshot: /images/screenshots/dashboard-overview.png
+      caption: Learn more
+      url: services/repository-dashboard
   -
     id: repository-edition
     title: Repository Edition
-    short-description: Enhance your repository’s discoverability 
+    logo: /images/services/repository-edition.svg
+    short-description: Enhance your repository’s discoverability
     description: |
-      Subscription to CORE Repository Edition comes with guaranteed support
-      levels to enable repositories to gain maximum exposure for their content
-      and help ensure compliance with Open Access policies. Also provided is
-      access to an enhanced version of the Repository Dashboard.
+     Provide guaranteed support levels to enable repositories
+     to gain maximum exposure for their content and help ensure
+     compliance with Open Access policies.
+    recommender:
+    -
+      title: Academic institutions
     action:
-      caption: Learn more about the CORE Repository Edition
-      url: ~services/repository-edition
-    logo: /images/services/repository-edition.svg
+      caption: Learn more
+      url: services/repository-edition

design-v2/components/hero/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Card, Button } from '@oacore/design/lib/elements'
+import { classNames } from '@oacore/design/lib/utils'
+
+import SearchForm from '../search-form'
+import styles from './styles.module.scss'
+
+const Hero = ({
+  title,
+  image: imgHref,
+  label,
+  description,
+  action,
+  actionLabel,
+  className,
+}) => (
+  <div className={classNames.use(styles.heroItem).join(className)}>
+    <Card variant="pure" className={styles.heroItemCard}>
+      <Card.Title tag="h2" className={styles.heroTitle}>
+        {title}
+      </Card.Title>
+      <Card.Description tag="div">
+        {action === 'Search' ? (
+          <SearchForm />
+        ) : (
+          <>
+            {description && (
+              <p className={styles.heroItemDescription}>{description}</p>
+            )}
+            {actionLabel && (
+              <Button tag="a" variant="contained" href={action}>
+                {actionLabel}
+              </Button>
+            )}
+          </>
+        )}
+      </Card.Description>
+    </Card>
+    <div className={styles.heroItemImgContainer}>
+      <img
+        src={imgHref}
+        alt={label}
+        className={classNames.use(styles.heroItemImg, {
+          [styles.heroItemImgBig]: action === 'Search',
+        })}
+      />
+    </div>
+  </div>
+)
+
+export default Hero

design-v2/components/hero/styles.module.scss

@@ -0,0 +1,47 @@
+@import 'design-v2/variables';
+
+.hero {
+  &-item {
+    display: flex;
+    @media (max-width: $breakpoint-sm) {
+      flex-wrap: wrap-reverse;
+    }
+    &-description {
+      font-size: 1.2rem;
+    }
+
+    &-card {
+      flex: 1;
+      @media (max-width: $breakpoint-sm) {
+        flex: auto;
+      }
+    }
+    &-img {
+      &-container {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        @media (max-width: $breakpoint-sm) {
+          flex: auto;
+          justify-content: center;
+        }
+      }
+      height: auto;
+      max-height: 20rem;
+      &-big {
+        margin-top: 1rem;
+        max-height: fit-content;
+      }
+      @media (max-width: $breakpoint-sm) {
+        margin-top: 2rem;
+      }
+    }
+  }
+  &-title {
+    line-height: 1.5;
+    @media (max-width: $breakpoint-sm) {
+      font-size: 2rem;
+      line-height: 1.3;
+    }
+  }
+}

design-v2/components/index.js

@@ -2,3 +2,5 @@ export * from './sections'
 export * from './layout'
 export { default as SearchForm } from './search-form'
 export { default as TestimonialCard } from './testimonial'
+export { default as Hero } from './hero'
+export { default as Video } from './video'

design-v2/components/layout/section.jsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 
 const Section = ({ className, children, ...props }) => (
   <section
-    className={classNames.use(styles.section).join(className)}
+    className={classNames.use(styles.container).join(className)}
     {...props}
   >
     {children}

design-v2/components/layout/styles.module.scss

@@ -1,7 +1,8 @@
 $main-spacer: 3rem;
+
 .layout {
   padding: var(--page-padding-y) var(--page-padding-x);
 }
-.section {
+.container {
   padding: $main-spacer 0;
 }

design-v2/components/video/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Modal } from '@oacore/design/lib'
+
+import styles from './styles.module.scss'
+
+const Video = ({ video, visibleModal, closeModal }) =>
+  visibleModal && (
+    <Modal
+      onClose={closeModal}
+      aria-label="Service video"
+      className={styles.modal}
+    >
+      <iframe
+        className={styles.video}
+        src={video.src}
+        title={video.title}
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;"
+        allowFullScreen
+      />
+    </Modal>
+  )
+
+export default Video

design-v2/components/video/styles.module.scss

@@ -0,0 +1,10 @@
+.modal {
+  height: 100vh;
+  max-width: 70vw;
+  background-color: transparent;
+  box-shadow: none;
+  .video {
+    margin-top: 2rem;
+    height: 100%;
+  }
+}