init team

src/components/custom/HorizontalScroll.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="flex flex-col mt-5 p-auto">
+    <h1 class="flex py-5 mx-auto uppercase font-bold text-4xl text-gray-800">
+      {{ team.title }}
+    </h1>
+    <div
+      class="max-w-xl text-center mb-8 mx-auto leading-relaxed"
+      v-html="team.content"
+    ></div>
+    <div class="flex overflow-x-scroll pb-10 scrollable">
+      <div class="flex flex-nowrap ml-10 mt-10">
+        <div
+          class="inline-block px-3"
+          v-for="person in people"
+          :key="person.node.id"
+        >
+          <div
+            class="
+              box
+              max-w-xs
+              overflow-hidden
+              rounded-full
+              shadow-md
+              hover:shadow-xl
+              transition-shadow
+              duration-300
+              ease-in-out
+            "
+          >
+            <a :href="person.node.path" :title="person.node.name">
+              <g-image
+                :src="person.node.image.src"
+                class="rounded-full mx-auto mt-3"
+                :alt="person.node.name"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["id", "team", "people"],
+};
+</script>
+<style>
+.scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+.scrollable::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 20px;
+}
+.scrollable::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+  border-radius: 20px;
+}
+
+/* #70dfc9, #ee7bf7 */
+.box {
+  position: relative;
+  height: 150px;
+  width: 150px;
+}
+.box::before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  padding: 10px;
+  background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+}
+.box img {
+  filter: grayscale(100%);
+  height: 130px;
+  width: 130px;
+}
+.box img:hover {
+  filter: grayscale(0);
+}
+</style>

src/pages/Index.vue

@@ -86,7 +86,10 @@
         :cta="$page.markdownPage.cta3"
         :id="$page.markdownPage.id"
       /> -->
-
+      <HorizontalScroll
+        :team="$page.markdownPage.team"
+        :people="$page.entries.edges"
+      />
       <Blogs
         v-if="$page.markdownPage.blogs || $page.markdownPage.BlogsMain"
         :main="$page.markdownPage.BlogsMain"
@@ -108,13 +111,13 @@
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       /> -->
-   
+
       <SplitWithForm
         v-if="$page.markdownPage.subscribe"
         :id="$page.markdownPage.id"
         :subscribe="$page.markdownPage.subscribe"
       />
-      
+
       <CallToAction
         v-if="$page.markdownPage.cta2"
         :id="$page.markdownPage.id"
@@ -370,8 +373,23 @@
           link
           image
         }
+        team{
+          id
+          title
+          content
+        }
     }  
+  entries: allPerson (sortBy: "rank", order: ASC, filter: {memberships: { contains: ["foundation"]}}){
+    edges {
+      node {
+        path
+        name
+        image
+      }
+    }
   }
+}
+
 
 </page-query>
 
@@ -402,6 +420,7 @@ import SignUp from "~/components/custom/sections/SignUp.vue";
 import VideoPanel from "~/components/custom/VideoPanel.vue";
 import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
 import SplitWithForm from "~/components/custom/SplitWithForm.vue";
+import HorizontalScroll from "~/components/custom/HorizontalScroll.vue";
 export default {
   components: {
     Header,
@@ -423,6 +442,7 @@ export default {
     VideoPanel,
     Partenerships,
     SplitWithForm,
+    HorizontalScroll,
   },
   computed: {
     getImg() {