From 89a24502273f9de797ae45bcec9db3db8664e1d2 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 20 Jan 2022 17:11:45 +0200
Subject: [PATCH] Add workloads & stats secs

---
 gridsome.config.js                            |  18 +-
 .../feature-sections/SimpleColumns.vue        | 119 ++++++++
 .../sections/stats-sections/SimpleInCard.vue  | 268 ++++++++++++++++++
 src/templates/MarkdownPage.vue                |  34 +++
 4 files changed, 438 insertions(+), 1 deletion(-)
 create mode 100644 src/components/marketing/sections/feature-sections/SimpleColumns.vue
 create mode 100644 src/components/marketing/sections/stats-sections/SimpleInCard.vue

diff --git a/gridsome.config.js b/gridsome.config.js
index 265fda601..70855b3da 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -489,6 +489,20 @@ module.exports = {
                 path: './content/page/**/upTalks/**/*.md',
             }
         },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'WorkloadsMain',
+                path: './content/page/**/workloads/main/*.md',
+            }
+        },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Workloads',
+                path: './content/page/**/workloads/**/*.md',
+            }
+        },
 
         {
             use: '@gridsome/source-filesystem',
@@ -555,7 +569,9 @@ module.exports = {
                     info: 'Info',
                     dev: 'Dev',
                     conversationsMain: 'ConversationsMain',
-                    conversations: 'Conversations'
+                    conversations: 'Conversations',
+                    workloadsMain: 'WorkloadsMain',
+                    workloads: 'Workloads',
                 }
             }
         },
diff --git a/src/components/marketing/sections/feature-sections/SimpleColumns.vue b/src/components/marketing/sections/feature-sections/SimpleColumns.vue
new file mode 100644
index 000000000..07b5635b8
--- /dev/null
+++ b/src/components/marketing/sections/feature-sections/SimpleColumns.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="py-20 bg-white">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-screen-2xl lg:px-8">
+      <div v-if="main" class="mx-auto mb-24 lg:text-center">
+        <h2
+          class="
+            lg:text-5xl
+            max-w-3xl
+            uppercase
+            mb-6
+            leading-none
+            font-black font-heading
+            mx-auto
+          "
+        >
+          {{ main.title }}
+        </h2>
+        <div
+          class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900"
+          v-html="main.content"
+        ></div>
+      </div>
+      <div
+        class="lg:grid lg:gap-8"
+        :class="{
+          'lg:grid-cols-3': id == 'storage',
+          'lg:grid-cols-4': id == 'cloud',
+        }"
+      >
+        <div
+          class="my-10 text-center lg:mt-0"
+          v-for="section in sections"
+          :key="section.id"
+        >
+          <div class="flex items-center justify-center rounded-md text-white">
+            <g-image
+              :src="section.image"
+              class="w-3/4 mx-auto"
+              :class="{
+                'w-full mx-auto': id == 'storage',
+                'w-3/4 mx-auto': id == 'cloud',
+              }"
+            />
+          </div>
+          <div class="mt-5">
+            <h2
+              class="
+                text-3xl
+                uppercase
+                mb-6
+                leading-none
+                font-black font-heading
+                py-8
+              "
+            >
+              {{ section.title }}
+            </h2>
+            <div
+              class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900 pb-6"
+              v-html="section.content"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="block text-center mt-10">
+        <a
+          v-if="main.link.includes('http')"
+          target="_blank"
+          :href="main.link"
+          class="
+            green
+            bg-green-300
+            lg:text-2xl
+            text-lg
+            font-extrabold
+            px-12
+            hover:bg-green-200
+            rounded-lg
+            py-4
+            mb-4
+            shadow
+          "
+          >{{ main.button }}</a
+        >
+        <a
+          v-else
+          :href="main.link"
+          class="
+            green
+            bg-green-300
+            lg:text-2xl
+            text-lg
+            font-extrabold
+            px-12
+            hover:bg-green-200
+            rounded-lg
+            py-4
+            mb-4
+            shadow
+          "
+          >{{ main.button }}</a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["id", "main", "sections"],
+};
+</script>
+
+<style scoped>
+.green {
+  /* background-color: #70dfc9; */
+  font-family: "Orbitron", sans-serif !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/marketing/sections/stats-sections/SimpleInCard.vue b/src/components/marketing/sections/stats-sections/SimpleInCard.vue
new file mode 100644
index 000000000..19b88555c
--- /dev/null
+++ b/src/components/marketing/sections/stats-sections/SimpleInCard.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="lg:py-20 py-10 sm:pt-16">
+    <div class="mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="lg:max-w-xl mx-auto text-center">
+        <h2
+          class="
+            lg:text-5xl
+            uppercase
+            mb-6
+            leading-none
+            font-black font-heading
+            mx-auto
+          "
+        >
+          {{ info.title }}
+        </h2>
+        <div
+          class="py-10 lg:text-2xl text-xl leading-normal text-gray-900 sm:mt-4"
+          v-html="info.content"
+        ></div>
+      </div>
+    </div>
+    <div class="mt-10 pb-12 sm:pb-16">
+      <div class="relative">
+        <div class="absolute inset-0 h-1/2"></div>
+        <div class="relative mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="max-w-8xl mx-auto">
+            <dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
+              <div
+                class="
+                  flex flex-col
+                  border-b border-gray-400
+                  p-6
+                  text-center
+                  sm:border-0 sm:border-r
+                "
+              >
+                <dt
+                  class="
+                    order-2
+                    mt-2
+                    text-2xl
+                    leading-6
+                    font-medium
+                    text-gray-900
+                    uppercase
+                  "
+                  id="item-1"
+                >
+                  Nodes
+                </dt>
+                <dd
+                  class="
+                    order-1
+                    text-5xl
+                    leading-none
+                    font-extrabold
+                    text-black
+                    mb-4
+                  "
+                  aria-describedby="item-1"
+                >
+                  {{ stats[1] }}
+                </dd>
+              </div>
+              <div
+                class="
+                  flex flex-col
+                  border-t border-b border-gray-400
+                  p-6
+                  text-center
+                  sm:border-0 sm:border-l sm:border-r
+                "
+              >
+                <dt
+                  class="
+                    order-2
+                    mt-2
+                    text-2xl
+                    leading-6
+                    font-medium
+                    text-gray-900
+                    uppercase
+                  "
+                >
+                  Capacity
+                </dt>
+                <dd
+                  class="
+                    order-1
+                    text-5xl
+                    leading-none
+                    font-extrabold
+                    text-black
+                    mb-4
+                  "
+                >
+                  {{ stats[0] }}PB
+                </dd>
+              </div>
+              <div
+                class="
+                  flex flex-col
+                  border-t border-gray-400
+                  p-6
+                  text-center
+                  sm:border-0 sm:border-l
+                "
+              >
+                <dt
+                  class="
+                    order-2
+                    mt-2
+                    text-2xl
+                    leading-6
+                    font-medium
+                    text-gray-900
+                    uppercase
+                  "
+                >
+                  Cores
+                </dt>
+                <dd
+                  class="
+                    order-1
+                    text-5xl
+                    leading-none
+                    font-extrabold
+                    text-black
+                    mb-4
+                  "
+                >
+                  {{ stats[2] }}
+                </dd>
+              </div>
+              <div
+                class="
+                  flex flex-col
+                  border-t border-gray-400
+                  p-6
+                  text-center
+                  sm:border-0 sm:border-l
+                "
+              >
+                <dt
+                  class="
+                    order-2
+                    mt-2
+                    text-2xl
+                    leading-6
+                    font-medium
+                    text-gray-900
+                    uppercase
+                  "
+                >
+                  Countries
+                </dt>
+                <dd
+                  class="
+                    order-1
+                    text-5xl
+                    leading-none
+                    font-extrabold
+                    text-black
+                    mb-4
+                  "
+                >
+                  {{ stats[3] }}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block text-center mt-5">
+      <a
+        v-if="info.link.includes('http')"
+        target="_blank"
+        :href="info.link"
+        class="
+          green
+          bg-green-300
+          lg:text-2xl
+          text-lg
+          font-extrabold
+          px-12
+          hover:bg-green-200
+          rounded-lg
+          py-4
+          mb-4
+          shadow
+        "
+        >{{ info.button }}</a
+      >
+      <a
+        v-else
+        :href="info.link"
+        class="
+          green
+          bg-green-300
+          lg:text-2xl
+          text-lg
+          font-extrabold
+          px-12
+          hover:bg-green-200
+          rounded-lg
+          py-4
+          mb-4
+          shadow
+        "
+        >{{ info.button }}</a
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: ["id", "info"],
+  data() {
+    return {
+      stats: [],
+    };
+  },
+  async mounted() {
+    try {
+      // const getFarms = await axios.get(
+      //   "https://explorer.threefold.io/api/farms?network=all"
+      // );
+      const results = await axios.get(
+        "https://explorer.threefold.io/api/stats"
+      );
+      // let farms = getFarms.data.length;
+      let nodes = results.data.onlinenodes;
+      let hru = parseInt(results.data.hru);
+      let sru = parseInt(results.data.sru) / 1000; // To TB
+      let capacity = (hru + sru)
+        .toFixed()
+        .slice(0, 4)
+        .toString()
+        .replace(/\B(?=(\d{2})+(?!\d))/g, ",");
+      let cores = results.data.cru
+        .toFixed()
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      let countries = results.data.countries;
+      this.stats.push(capacity, nodes, cores, countries);
+    } catch (error) {
+      console.log(error);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.green {
+  /* background-color: #70dfc9; */
+  font-family: "Orbitron", sans-serif !important;
+}
+
+dd {
+  font-family: "Orbitron", sans-serif !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index 22f85e3f3..5d3e80cdd 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -250,6 +250,17 @@
         :cta="$page.markdownPage.cta3"
         :lastCta="true"
       />
+      <SimpleColumns
+        v-if="$page.markdownPage.workloads.length > 0"
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.workloadsMain"
+        :sections="$page.markdownPage.workloads"
+      />
+      <Stats
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.stats"
+        :info="$page.markdownPage.stats"
+      />
     </div>
     <div class="container mx-auto">
       <ConversationSec
@@ -953,6 +964,25 @@
       title
       content
       }
+    workloadsMain {
+         id
+         title
+         button
+         link
+       }
+       workloads{
+         id
+         title
+         image
+         content
+       }
+    stats{
+         id
+         title
+         content
+         button
+         link
+       }
     }
     allCustomCta {
       edges {
@@ -1000,6 +1030,8 @@ import SplitWithImage from "~/components/custom/SplitWithImage.vue";
 import ConversationSec from "~/components/custom/ConversationSec.vue";
 import SplitWithForm from "~/components/custom/SplitWithForm.vue";
 import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
+import SimpleColumns from "~/components/marketing/sections/feature-sections/SimpleColumns.vue";
+import Stats from "~/components/marketing/sections/stats-sections/SimpleInCard.vue";
 
 export default {
   components: {
@@ -1034,6 +1066,8 @@ export default {
     ConversationSec,
     SplitWithForm,
     Blogs,
+    SimpleColumns,
+    Stats,
   },
   computed: {
     getImg() {