init team

content/page/home/home.md

@@ -50,6 +50,7 @@ partnerships: [tag, solidaridad]
 BlogsMain: blog_main
 blogs: [zero_os_blog, smart_contract_blog, threefold_regenerates]
 subscribe: home_subscribe
+team: team
 ---
 
 <!-- header: home_header

content/page/home/team/index.md

@@ -0,0 +1,5 @@
+---
+id: team
+title: The Team
+---
+The ThreeFold Foundation is a not-for-profit that expands the potential of ThreeFold Tech’s open-source technology. We are headquartered in Belgium, Dubai and Egypt, and have remote teams all around the world. Our team has worked on Internet storage and cloud technology since the ‘90s, and has earned world records for creating the world’s most advanced infrastructures. We aim to create a peer-to-peer Internet and cloud that can host all of humanity’s digital workloads via smart contracts and run on a fully autonomous infrastructure without the need of traditional IT

gridsome.config.js

@@ -426,6 +426,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Team',
+                path: './content/page/**/team/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -483,7 +491,8 @@ module.exports = {
                     tft: 'AboutTft',
                     networkMain: 'NetworkMain',
                     network: 'Network',
-                    subscribe: 'Subscribe'
+                    subscribe: 'Subscribe',
+                    team: '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"
@@ -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() {