From f2e8937bd8a17c578b30860eac52b1bc5cb79a3e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 22 Sep 2021 15:41:31 +0200
Subject: [PATCH] init team

---
 content/page/home/home.md                  |  1 +
 content/page/home/team/index.md            |  5 ++
 gridsome.config.js                         | 11 ++-
 src/components/custom/HorizontalScroll.vue | 90 ++++++++++++++++++++++
 src/pages/Index.vue                        | 26 ++++++-
 5 files changed, 129 insertions(+), 4 deletions(-)
 create mode 100644 content/page/home/team/index.md
 create mode 100644 src/components/custom/HorizontalScroll.vue

diff --git a/content/page/home/home.md b/content/page/home/home.md
index 46b429f96..d7be247ee 100644
--- a/content/page/home/home.md
+++ b/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
diff --git a/content/page/home/team/index.md b/content/page/home/team/index.md
new file mode 100644
index 000000000..aa0738a8d
--- /dev/null
+++ b/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
diff --git a/gridsome.config.js b/gridsome.config.js
index 11a99f99e..c48e201c1 100644
--- a/gridsome.config.js
+++ b/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'
                 }
             }
         },
diff --git a/src/components/custom/HorizontalScroll.vue b/src/components/custom/HorizontalScroll.vue
new file mode 100644
index 000000000..b5b8766b2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 1c298fb67..cef4be516 100644
--- a/src/pages/Index.vue
+++ b/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() {