finos · JamieSlome · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -14,6 +14,56 @@ module.exports = {
   organizationName: 'FINOS',
   customFields: {
     version,
+    posts: [
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7092203565380722688',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7181933362339549184',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7175490880689057792',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7201603784194629633',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7184554793741230080',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7189253601540624385',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7077564318463995904',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7189256993470099456',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7181643315405033472',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7196479535876325377',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7167196087143899136',
+      },
+      {
+        platform: 'linkedin',
+        url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7196479537872859137',
+      },
+    ],
   },
   scripts: ['https://buttons.github.io/buttons.js'],
   stylesheets: ['https://fonts.googleapis.com/css?family=Overpass:400,400i,700'],

diff --git a/website/package.json b/website/package.json
@@ -17,7 +17,10 @@
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.23.2",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-slick": "^0.30.2",
+    "react-social-media-embed": "^2.5.13",
+    "slick-carousel": "^1.8.1"
   },
   "browserslist": {
     "production": [

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -1,14 +1,14 @@
 .header-github-link:hover,
 .header-star-link:hover,
 .header-fork-link:hover,
-.header-read-doc-link:hover  {
+.header-read-doc-link:hover {
   opacity: 0.6;
 }
 
 .header-github-link:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
-  content: "";
+  content: '';
   display: flex;
   height: 24px;
   width: 24px;
@@ -22,7 +22,7 @@
 .header-star-link:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='orange' d='M 8 0.25 a 0.75 0.75 0 0 1 0.673 0.418 l 1.882 3.815 l 4.21 0.612 a 0.75 0.75 0 0 1 0.416 1.279 l -3.046 2.97 l 0.719 4.192 a 0.751 0.751 0 0 1 -1.088 0.791 L 8 12.347 l -3.766 1.98 a 0.75 0.75 0 0 1 -1.088 -0.79 l 0.72 -4.194 L 0.818 6.374 a 0.75 0.75 0 0 1 0.416 -1.28 l 4.21 -0.611 L 7.327 0.668 A 0.75 0.75 0 0 1 8 0.25 Z'/%3E%3C/svg%3E")
     no-repeat;
-  content: "";
+  content: '';
   display: flex;
   height: 24px;
   width: 24px;
@@ -36,7 +36,7 @@
 .header-fork-link:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'/%3E%3C/svg%3E")
     no-repeat;
-  content: "";
+  content: '';
   display: flex;
   height: 24px;
   width: 24px;
@@ -50,13 +50,12 @@
 .header-read-doc-link:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")
     no-repeat;
-  content: "";
+  content: '';
   display: flex;
   height: 24px;
   width: 24px;
 }
 
-
 [data-theme='dark'] .header-read-doc-link::before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")
     no-repeat;
@@ -65,7 +64,7 @@
 .header-slack-link:before {
   background: url('data:image/svg+xml,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>')
     no-repeat;
-  content: "";
+  content: '';
   display: flex;
   height: 24px;
   width: 24px;
@@ -100,7 +99,7 @@
 }
 
 .terminal-window header {
-  background: #E0E8F0;
+  background: #e0e8f0;
   height: 30px;
   border-radius: 8px 8px 0 0;
   padding-left: 10px;
@@ -115,22 +114,22 @@
 }
 
 .terminal-window header .btn.green {
-  background: #3BB662;
+  background: #3bb662;
 }
 
 .terminal-window header .btn.yellow {
-  background: #E5C30F;
+  background: #e5c30f;
 }
 
 .terminal-window header .btn.red {
-  background: #E75448;
+  background: #e75448;
 }
 
 .terminal-window section.terminal {
   color: white;
-  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
+  font-family: Menlo, Monaco, 'Consolas', 'Courier New', 'Courier';
   font-size: 11pt;
-  background: #30353A;
+  background: #30353a;
   padding: 10px;
   box-sizing: border-box;
   position: absolute;
@@ -148,21 +147,48 @@
   -moz-animation: blink 0.7s infinite;
   animation: blink 0.7s infinite;
 }
-@keyframes blink{
-  0% { opacity:1; }
-  50% { opacity:0; }
-  100% { opacity:1; }
-}
-@-webkit-keyframes blink{
-  0% { opacity:1; }
-  50% { opacity:0; }
-  100% { opacity:1; }
-}
-@-moz-keyframes blink{
-  0% { opacity:1; }
-  50% { opacity:0; }
-  100% { opacity:1; }
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.terminal-window .gray {
+  color: gray;
+}
+.terminal-window .green {
+  color: green;
+}
+
+.slick-slide {
+  padding: 0 10px;
+  box-sizing: border-box;
 }
-
-.terminal-window .gray { color: gray; }
-.terminal-window .green { color: green;}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Avatar from '../components/avatar';
+import Testimonials from './testimonials';
 
 /**
  * Home page component
@@ -107,7 +108,7 @@ function Home() {
         </div>
       </div>
       <div className='container text--center margin-top--xl'>
-        <h2 className='margin-top--md'>Meet the Team</h2>
+        <h1 className='margin-top--md'>Meet the Team 👋</h1>
         <div className='row margin-top--xl margin-bottom--xl'>
           <div className='col col--4'>
             <div className='col-demo'>
@@ -140,18 +141,19 @@ function Home() {
               />
             </div>
           </div>
-          <div className="col col--4">
-            <div className="col-demo">
+          <div className='col col--4'>
+            <div className='col-demo'>
               {' '}
               <Avatar
-                name="Miklos Sagi"
-                description="OSPO Engineering Lead at NatWest Group"
-                username="msagi"
+                name='Miklos Sagi'
+                description='OSPO Engineering Lead at NatWest Group'
+                username='msagi'
               />
             </div>
           </div>
         </div>
       </div>
+      <Testimonials />
     </Layout>
   );
 }

diff --git a/website/src/pages/testimonials.js b/website/src/pages/testimonials.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { LinkedInEmbed } from 'react-social-media-embed';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+/**
+ * Home page component
+ * @return {JSX.Element}
+ */
+function Testimonials() {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  const { posts } = siteConfig.customFields;
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    swipeToSlide: true,
+    swipe: true,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 800,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 1,
+        },
+      },
+    ],
+    dots: true,
+    arrows: true,
+  };
+
+  return (
+    <div className='margin-top--md'>
+      <div className='container text--center'>
+        <h1 className=''>Testimonials 📣</h1>
+      </div>
+
+      <div className='container margin-top--xl margin-bottom--xl'>
+        <Slider {...settings}>
+          {posts
+            .filter((post) => post.platform === 'linkedin')
+            .map((post) => {
+              return (
+                <div key={post.url}>
+                  <LinkedInEmbed url={post.url} />
+                </div>
+              );
+            })}
+        </Slider>
+      </div>
+    </div>
+  );
+}
+
+export default Testimonials;