CORE-4709: add logo section (#1022)

data/services/api.yml

@@ -154,3 +154,19 @@ related-services:
     title: CORE Discovery
     picture: /images/services/discovery.svg
     url: discovery
+
+apilogos:
+  items:
+    - img: /images/logos/iris.png
+      alt: "iris"
+    - img: /images/logos/audemic.svg
+      alt: "audemic"
+    - img: /images/logos/interac.svg
+      alt: "interac"
+    - img: /images/logos/flowcite.svg
+      alt: "flow"
+    - img: /images/logos/cypris.svg
+      alt: "cypris"
+  action:
+    caption: Show all
+    url: '/about/endorsements'

data/services/dataset.yml

@@ -136,3 +136,19 @@ related-services:
     - title: CORE Discovery
       picture: /images/services/discovery.svg
       url: discovery
+
+datasetLogos:
+  items:
+    - img: /images/logos/nvidia.svg
+      alt: "nvidia"
+    - img: /images/logos/anthropic.svg
+      alt: "anthropic"
+    - img: /images/logos/grammarly.svg
+      alt: "grammarly"
+    - img: /images/logos/lean.svg
+      alt: "lean"
+    - img: /images/logos/caktus.svg
+      alt: "caktus"
+  action:
+    caption: Show all
+    url: '/about/endorsements'

data/services/fastsync.yml

@@ -105,3 +105,19 @@ related-services:
     - title: CORE Discovery
       picture: /images/services/discovery.svg
       url: discovery
+
+fastsyncLogos:
+  items:
+    - img: /images/logos/turnitin.svg
+      alt: "turnitin"
+    - img: /images/logos/grammarly.svg
+      alt: "grammarly"
+    - img: /images/logos/naver.svg
+      alt: "naver"
+    - img: /images/logos/cypris.svg
+      alt: "cypris"
+    - img: /images/logos/ontochemIt.png
+      alt: "ontochem"
+  action:
+    caption: Show all
+    url: '/about/endorsements'

design-v2/components/pages/service.jsx

@@ -9,6 +9,9 @@ import styles from './styles.module.scss'
 import { Layout, Section } from '../layout'
 import Hero from '../hero'
 
+import api from 'data/services/api.yml'
+import dataset from 'data/services/dataset.yml'
+import fastsync from 'data/services/fastsync.yml'
 import { patchStats } from 'components/utils'
 import Collapsed from 'components/collapsed'
 import RegistrationModals from 'components/modal/registration'
@@ -105,6 +108,9 @@ const ServicePage = observe(
     additional, // @optional
     testimonials, // @optional
     form, // @optional
+    apilogos, // @optional
+    datasetLogos, // @optional
+    fastsyncLogos, // @optional
     relatedServices,
     hideButtons = false, // @optional
   }) => {
@@ -257,6 +263,69 @@ const ServicePage = observe(
               )}
             </Section>
           )}
+          {apilogos && (
+            <section className={styles.carouselWrapper}>
+              <div className={styles.carouselItems}>
+                {api.apilogos.items.map((slide) => (
+                  <img
+                    className={styles.apiCarouselItem}
+                    src={slide.img}
+                    alt="logo"
+                    key={slide.alt}
+                  />
+                ))}
+              </div>
+              <div className={styles.linkWrapper}>
+                <a className={styles.link} href={api.apilogos.action.url}>
+                  {api.apilogos.action.caption}
+                </a>
+              </div>
+            </section>
+          )}
+          {datasetLogos && (
+            <section className={styles.carouselWrapper}>
+              <div className={styles.carouselItems}>
+                {dataset.datasetLogos.items.map((slide) => (
+                  <img
+                    className={styles.dataCarouselItem}
+                    src={slide.img}
+                    alt="logo"
+                    key={slide.alt}
+                  />
+                ))}
+              </div>
+              <div className={styles.linkWrapper}>
+                <a
+                  className={styles.link}
+                  href={dataset.datasetLogos.action.url}
+                >
+                  {dataset.datasetLogos.action.caption}
+                </a>
+              </div>
+            </section>
+          )}
+          {fastsyncLogos && (
+            <section className={styles.carouselWrapper}>
+              <div className={styles.carouselItems}>
+                {fastsync.fastsyncLogos.items.map((slide) => (
+                  <img
+                    className={styles.fastCarouselItem}
+                    src={slide.img}
+                    alt="logo"
+                    key={slide.alt}
+                  />
+                ))}
+              </div>
+              <div className={styles.linkWrapper}>
+                <a
+                  className={styles.link}
+                  href={fastsync.fastsyncLogos.action.url}
+                >
+                  {fastsync.fastsyncLogos.action.caption}
+                </a>
+              </div>
+            </section>
+          )}
           {whatIsIncluded && (
             <Section id="what-is-included" className={styles.whatIsIncluded}>
               <div className={styles.section}>

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

@@ -335,3 +335,45 @@ $grid-responsive-for-cards: repeat(auto-fit, minmax(200px, 1fr));
     height: auto;
   }
 }
+
+.carousel-wrapper {
+  display: flex;
+  flex-direction: column;
+  .carousel-items {
+    display: flex;
+    justify-content: space-between;
+    gap: 35px;
+  }
+  .api-carousel-item {
+    border: 1px solid #b75400;
+    min-width: 212px;
+    height: 104px;
+    padding: 16px;
+    &:first-child {
+      padding: 28px;
+    }
+  }
+  .data-carousel-item {
+    border: 1px solid #b75400;
+    min-width: 212px;
+    height: 104px;
+    padding: 16px;
+  }
+  .fast-carousel-item {
+    border: 1px solid #b75400;
+    min-width: 212px;
+    height: 104px;
+    padding: 16px;
+    &:last-child {
+      padding: 28px;
+    }
+  }
+  .link-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+    .link {
+      padding: 8px 16px;
+    }
+  }
+}