Merge branch 'development' of github.com:threefoldfoundation/www_threefold_io into development

content/page/home/home.md

@@ -26,6 +26,7 @@ inTheNews: in_the_news
 solution_image: ./cta_image.svg
 cta: home_cta
 videoPanel: home_videoPanel
+stats: stats
 featuresMain2: Features_home_2
 features2:
   [

content/page/home/stats/index.md

@@ -0,0 +1,10 @@
+---
+id: stats
+title: TOGETHER WE CO-CREATE THE NEW INTERNET 
+button: More Stats
+link: https://explorer.threefold.io
+image: ./map.png
+---
+
+The ThreeFold Grid is formed by a global network of independent Farmers – people  <br />
+and organizations who expand the Internet capacity to where it is needed the most.

gridsome.config.js

@@ -245,6 +245,14 @@ module.exports = {
                 path: './content/page/**/videoPanel/*.md',
             }
         },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Stats',
+                path: './content/page/**/stats/*.md',
+            }
+        },
+
 
         {
             use: '@gridsome/source-filesystem',
@@ -288,6 +296,7 @@ module.exports = {
                     allSlides: 'About',
                     partenershipsMain: 'PartenershipsMain',
                     partnerships: 'Partenerships',
+                    stats: 'Stats',
                     videoPanel: 'VideoPanel'
                 }
             }

src/components/marketing/sections/cta-sections/StateMap.vue

@@ -0,0 +1,112 @@
+<template>
+  <section class="py-12 px-2">
+    <div class="flex flex-wrap blue p-12 text-center lg:text-left -mx-2">
+      <div
+        class="lg:w-1/4 light-blue text-center rounded-lg py-20 mt-10 lg:mt-0 order-1 lg:order-none"
+      >
+        <div class="relative 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="text-5xl leading-none font-bold green-color"
+                  :class="{ green: index % 2 !== 0 }"
+                  aria-describedby="item-1"
+                >
+                  {{ value }}
+                </dd>
+                <dt
+                  class="mt-2 text-lg leading-6 font-medium text-white uppercase"
+                  id="item-1"
+                >
+                  {{ key }}
+                </dt>
+              </div>
+            </div>
+          </dl>
+        </div>
+      </div>
+      <div
+        class="lg:w-3/4 text-center rounded lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none"
+      >
+        <h2
+          class="text-4xl mb-6 leading-tight text-center text-white font-normal font-heading"
+        >
+          {{ section.title }}
+        </h2>
+        <div
+          class="text-2xl font-light text-white leading-relaxed"
+          v-html="section.content"
+        ></div>
+        <g-image :src="img(section.image)" :alt="section.title" />
+      </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 results = await axios.get(
+        "https://explorer.threefold.io/api/stats"
+      );
+      let sru = (results.data.sru / 1000).toFixed();
+      let hru = (results.data.hru / 1000000).toFixed();
+      this.stats.push(
+        { countries: results.data.countries },
+        { "Internet Farms": results.data.cru },
+        // { "SSD storage capacity": sru },
+        { "storage capacity": hru }
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.blue {
+  background-color: #313f92;
+}
+
+.light-blue {
+  background-color: #48489f;
+}
+
+dd {
+  height: 200px;
+  width: 200px;
+  margin: auto;
+  border-radius: 50%;
+  line-height: 180px;
+  border: 10px solid #847fc2;
+  background-color: #313f92;
+  color: #dacef5;
+}
+
+.green {
+  background-color: #92f5d9;
+  color: #313f92;
+}
+</style>

src/pages/Index.vue

@@ -59,6 +59,9 @@
         v-if="$page.markdownPage.cta5"
         :cta="$page.markdownPage.cta5"
       /> -->
+      </div>
+    <Map v-if="$page.markdownPage.stats" :section="$page.markdownPage.stats" />
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
 
       <Features
         :id="$page.markdownPage.id"
@@ -345,6 +348,14 @@
          img
          content
        }
+       stats {
+          id
+          title
+          content
+          button
+          link
+          image
+        }
     }  
   }
 
@@ -363,6 +374,7 @@ import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.v
 import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue";
 import Comparison from "~/components/custom/sections/Comparison.vue";
 import Features from "~/components/custom/sections/Features.vue";
+import Map from "~/components/marketing/sections/cta-sections/StateMap.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";
@@ -379,6 +391,7 @@ export default {
   components: {
     Header,
     Features,
+    Map,
     SolutionsHeader,
     ShowcaseProducts,
     Comparison,