CORE-4825 new posi title (#1099) (#1100)

data/home.yml

@@ -46,6 +46,8 @@ features:
 
 join:
   title: Join CORE
+  subTitle: An open scholarly infrastructure for researchers by researchers
+  subPart: Committed to the [POSI](https://openscholarlyinfrastructure.org/posse/)
   children:
     - caption: Become a data provider
       action: '/benefits'

pages/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Carousel, Button, Card } from '@oacore/design/lib'
 import { classNames } from '@oacore/design/lib/utils'
 
+import posi from '../public/images/posi.svg'
 import styles from './index.module.scss'
 import Testimonial from '../components/testimonial'
 
@@ -135,6 +136,14 @@ const IndexPage = () => {
         </Section>
         <Section className={styles.sectionJoin} useFullPageWidth>
           <h3 className={styles.title}>{page.join.title}</h3>
+          <div className={styles.posiTitleWrapper}>
+            <img src={posi} alt="posi" />
+            <div className={styles.subTitle}>
+              {page.join.subTitle}
+              <span className={styles.divider}>|</span>
+              <Markdown>{page.join.subPart}</Markdown>
+            </div>
+          </div>
           <JoinList className={styles.sectionJoinList}>
             {page.join.children.map(({ caption, url, picture }) => (
               <JoinItem

pages/index.module.scss

@@ -92,6 +92,31 @@
   }
 }
 
+.posi-title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 36px;
+  .sub-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 130%;
+    letter-spacing: 0.024px;
+  }
+  .divider {
+    margin: 0 10px;
+    font-weight: 800;
+  }
+  img {
+    margin-right: 10px;
+  }
+}
+
 .section {
   &-oai {
     background-color: var(--gray-200);
@@ -120,7 +145,7 @@
 }
 
 .title {
-  margin-bottom: 3rem;
+  margin-bottom: 20px;
 }
 
 .statistic-label {