From f3bb4784048ee9c289e8aa7061c1f9734d775d76 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 16 Sep 2021 16:45:56 +0200
Subject: [PATCH] fix showproduct part

---
 content/page/home/home.md                     |   2 +-
 content/page/home/{stats => map}/index.md     |   5 +-
 content/page/home/{stats => map}/map.png      | Bin
 gridsome.config.js                            |  11 +-
 .../sections/cta-sections/Header.vue          |   2 +-
 .../marketing/sections/cta-sections/Map.vue   | 130 ++++++++++++++++++
 .../cta-sections/ShowcaseProductsHome.vue     |   2 +-
 src/pages/Index.vue                           |  11 +-
 8 files changed, 150 insertions(+), 13 deletions(-)
 rename content/page/home/{stats => map}/index.md (88%)
 rename content/page/home/{stats => map}/map.png (100%)
 create mode 100644 src/components/marketing/sections/cta-sections/Map.vue

diff --git a/content/page/home/home.md b/content/page/home/home.md
index 0a555a857..bf6a96858 100644
--- a/content/page/home/home.md
+++ b/content/page/home/home.md
@@ -33,7 +33,7 @@ inTheNews: in_the_news
 solution_image: ./cta_image.png
 cta: home_cta
 videoPanel: home_videoPanel
-stats: stats
+map: map
 featuresMain2: Features_home_2
 features2:
   [
diff --git a/content/page/home/stats/index.md b/content/page/home/map/index.md
similarity index 88%
rename from content/page/home/stats/index.md
rename to content/page/home/map/index.md
index e3b175450..7f3a95f51 100644
--- a/content/page/home/stats/index.md
+++ b/content/page/home/map/index.md
@@ -1,6 +1,7 @@
 ---
-id: stats
-title: TOGETHER WE CO-CREATE THE NEW INTERNET 
+id: map
+title: THE THREEFOLD GRID
+subtitle: NOW OPERATIONAL
 button: More Stats
 link: https://explorer.threefold.io
 image: ./map.png
diff --git a/content/page/home/stats/map.png b/content/page/home/map/map.png
similarity index 100%
rename from content/page/home/stats/map.png
rename to content/page/home/map/map.png
diff --git a/gridsome.config.js b/gridsome.config.js
index 39d1ff7a9..cbbd66e90 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -345,6 +345,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Map',
+                path: './content/page/**/map/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -392,7 +400,8 @@ module.exports = {
                     farmingMain: 'FarmingProcessMain',
                     farmingProcess: 'FarmingProcess',
                     cultivationMain: 'CultivationProcessMain',
-                    cultivationProcess: 'CultivationProcess'
+                    cultivationProcess: 'CultivationProcess',
+                    map: 'Map'
                 }
             }
         },
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index 2521fe688..876279e7e 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -223,7 +223,7 @@
     </div>
 
     <div
-      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
       v-else
     >
       <div class="px-2 lg:py-40 lg:mt-10 order-1 lg:order-none mx-auto text-center">
diff --git a/src/components/marketing/sections/cta-sections/Map.vue b/src/components/marketing/sections/cta-sections/Map.vue
new file mode 100644
index 000000000..f9784e627
--- /dev/null
+++ b/src/components/marketing/sections/cta-sections/Map.vue
@@ -0,0 +1,130 @@
+<template>
+  <section
+    class="px-2 h-auto object-fi"
+    :style="{ 'background-image': 'url(' + img(section.image) + ')' }"
+  >
+    <div class="flex flex-wrap p-12 text-center -mx-auto t">
+      <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
+        <h2
+          class="
+            text-2xl text-black
+            leading-tight
+            font-light font-heading
+            uppercase
+          "
+        >
+          {{ section.title }}
+        </h2>
+        <h2
+          class="
+            text-5xl text-black
+            leading-tight
+            font-bold font-heading
+            uppercase
+          "
+        >
+          {{ section.subtitle }}
+        </h2>
+
+        <div class="rounded-lg py-10 mt-10 lg:mt-0">
+          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+            <dl class="">
+              <div
+                v-for="(item, index) in stats"
+                :key="index"
+                class="flex flex-col p-6 text-center"
+              >
+                <div v-for="(value, key) in item" :key="key">
+                  <dd
+                    class="leading-none font-bold green-color"
+                    :class="{ green: index % 2 !== 0 }"
+                    aria-describedby="item-1"
+                  >
+                    {{ value }}
+                  </dd>
+                  <dt class="mt-2 leading-6 text-black uppercase" id="item-1">
+                    {{ key }}
+                  </dt>
+                </div>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: ["section"],
+  data() {
+    return {
+      stats: [],
+    };
+  },
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+  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"
+      );
+      console.log(results.data);
+      let farms = getFarms.data.length;
+      let nodes = results.data.onlinenodes;
+      let hru = (results.data.hru / 1000).toFixed(); // To TB
+      let sru = results.data.sru.toFixed();
+      let capacity = hru + sru;
+      let cru = results.data.cru.toFixed();
+      let countries = results.data.countries;
+      this.stats.push(
+        { farms: farms },
+        { Nodes: nodes },
+        { "Storage TB": capacity },
+        { "Compute Cores": cru },
+        { Countries: countries }
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.blue {
+  background-color: #313f92;
+}
+
+.light-blue {
+  background-color: #48489f;
+}
+
+dd {
+  height: 100px;
+  width: 100px;
+  margin: auto;
+  border-radius: 50%;
+  line-height: 100px;
+  border: 3px solid #847fc2;
+  background-color: #313f92;
+  color: #dacef5;
+  font-size: 1.5rem;
+}
+
+.green {
+  background-color: #92f5d9;
+  color: #313f92;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
index 34397b22c..c661cb24b 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
@@ -21,7 +21,7 @@
         class="m-auto rounded overflow-hidden transition duration-500"
       >
         <div class="part text-center pb-8 my-5"
-        :class="{ active: index  !== 1 }"
+        :class="{ active: idx  !== 1 }"
         >
           <g-image :src="img(product.image)" />
           <h3 class="font-bold text-2xl">{{ product.title }}</h3>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index be9a3cef8..d2c17aac5 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -20,6 +20,7 @@
     <div class="container mx-auto sm:pxi-0 overflow-x-hidden">
       <!-- <VideoPanel :card="$page.markdownPage.videoPanel" /> -->
 
+      <!-- <Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" /> -->
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
@@ -30,10 +31,6 @@
         :products="$page.markdownPage.productData"
       />
 
-      <Map
-        v-if="$page.markdownPage.stats"
-        :section="$page.markdownPage.stats"
-      />
       <Features
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.featuresMain2"
@@ -332,10 +329,10 @@
          img
          content
        }
-       stats {
+       map {
           id
           title
-          content
+          subtitle
           button
           link
           btn1
@@ -365,7 +362,7 @@ import ShowcaseProducts from "~/components/marketing/sections/cta-sections/Showc
 import Comparison from "~/components/custom/sections/Comparison.vue";
 import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
 import Features from "~/components/custom/sections/Features.vue";
-import Map from "~/components/marketing/sections/cta-sections/StateMap.vue";
+import Map from "~/components/marketing/sections/cta-sections/Map.vue";
 import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
 import BrandPanel2 from "~/components/marketing/sections/cta-sections/BrandPanel2.vue";