init marketInfo sec

content/page/token/marketInfo/main/main.md

@@ -0,0 +1,5 @@
+---
+id: marketMain
+title: JOIN THE MOST VALUABLE MARKET IN THE WORLD
+---
+With rising demand for capacity to hold the most valuable commodity on earth –  data, TFT is the gateway to enter the largest and fastest growing industry in the world, the Internet and cloud

content/page/token/marketInfo/mainItem/index.md

@@ -0,0 +1,5 @@
+---
+id: sec1
+image: ./125zb.png
+---
+125 zetabytes of storage capacity needs to be created to meet demand for data in the upcoming years. That is a number with 21 zeroes!

content/page/token/marketInfo/sec2/index.md

@@ -0,0 +1,5 @@
+---
+id: sec2
+image: ./800b.png
+---
+$800 billion of revenue is expected for the cloud market by 2025

content/page/token/marketInfo/sec3/index.md

@@ -0,0 +1,5 @@
+---
+id: sec3
+image: ./70b.png
+---
+Over seventy billion new devices are expected to be online by 2025

content/page/token/marketInfo/sec4/index.md

@@ -0,0 +1,5 @@
+---
+id: sec4
+image: ./1b.png
+---
+Over one billion people are still expected to get digital access by 2025

content/page/token/token.md

@@ -1,14 +1,17 @@
 ---
 id: token
 metaTitle: ThreeFold | Token
-metaDesc:  A digital currency that enables a peer-to-peer digital economy.
+metaDesc:  A digital currency that enables a peer-to-peer digital economy
 metaImg: ./token_header.png
 header_slogan: 
 header_title: INSPIRED BY AUTONOMY
 header_image: ./token_header.png
 header_altImg: threefold
-header_excerpt: A digital currency that enables a peer-to-peer digital economy.
+header_excerpt: A digital currency that enables a peer-to-peer digital economy
 solution_image: 
 button: 
 link: 
+marketInfoMain: marketMain
+mainItem: sec1
+marketInfo: [sec2, sec3, sec4]
 ---

gridsome.config.js

@@ -369,6 +369,30 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'MarketInfoMain',
+                path: './content/page/**/marketInfo/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'MarketInfo',
+                path: './content/page/**/marketInfo/**/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'MainItem',
+                path: './content/page/**/marketInfo/mainItem/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -419,7 +443,10 @@ module.exports = {
                     cultivationMain: 'CultivationProcessMain',
                     cultivationProcess: 'CultivationProcess',
                     map: 'Map',
-                    roadmap: 'Roadmap'
+                    roadmap: 'Roadmap',
+                    marketInfoMain: 'MarketInfoMain',
+                    marketInfo: 'MarketInfo',
+                    mainItem:'MainItem'
                 }
             }
         },

src/components/custom/MarketInfo.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-wrap -mx-auto">
+    <div class="text-center mx-auto my-4">
+      <h1 class="text-6xl text-gray-900 font-bold sm:text-9xl leading-tight">
+        {{ main.title }}
+      </h1>
+      <div
+        class="my-5 max-w-2xl lg:text-xl mx-auto text-gray-900 sm:mt-4"
+        v-html="main.content"
+      ></div>
+    </div>
+    <div class="flex flex-col my-1 px-1 w-1/2 overflow-hidden">
+      <g-image :src="mainItem.image" class="w-3/4 mx-auto " />
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+        <div class="flex-1">
+          <div
+            class="mt-3 lg:text-2xl leading-tight text-gray-800"
+            v-html="mainItem.content"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="my-1 px-1 w-1/2 overflow-hidden">
+      <!-- Column Content -->
+      <div class="flex my-14 mx-5" v-for="info in marketInfo" :key="info">
+        <div class="flex-shrink-0">
+          <div
+            class="
+              flex
+              items-center
+              justify-center
+              h-24
+              w-24
+              rounded-md
+              text-white
+            "
+          >
+            <g-image :src="info.image" class="w-full" />
+          </div>
+        </div>
+        <div class="ml-4">
+          <div
+            class="mt-4 lg:text-2xl max-w-md leading-6 text-gray-900"
+            v-html="info.content"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["id", "main", "mainItem", "marketInfo"],
+};
+</script>

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

@@ -4,7 +4,7 @@
     :style="[
       id == 'home'
         ? { background: 'url(' + img + ') center no-repeat' }
-        : { background: transparent },
+        : { background: 'transparent' },
     ]"
   >
     <div

src/templates/MarkdownPage.vue

@@ -34,18 +34,6 @@
         v-if="$page.markdownPage.brandPanel3"
         :brandPanel3="true"
       />
-      <!-- <CustomCTA
-        :header="true"
-        :image="$page.markdownPage.pageHeader.image"
-        :title="$page.markdownPage.pageHeader.title"
-      /> -->
-      <!-- <div class="singlePic">
-        <g-image
-          class="w-100 mx-auto"
-          v-if="$page.markdownPage.solution_image"
-          :src="$page.markdownPage.solution_image.src"
-        />
-      </div> -->
     </div>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <CallToAction
@@ -61,6 +49,13 @@
         :textOnly="true"
       />
 
+      <MarketInfo
+        v-if="$page.markdownPage.marketInfo.length > 0"
+        :main="$page.markdownPage.marketInfoMain"
+        :mainItem="$page.markdownPage.mainItem"
+        :marketInfo="$page.markdownPage.marketInfo"
+      />
+
       <!-- <SignUp
         v-if="$page.markdownPage.signup"
         :signup="$page.markdownPage.signup"
@@ -460,6 +455,21 @@
        image
        content
      }
+     marketInfoMain{
+       id
+       title
+       content
+     }
+     mainItem{
+       id
+       image
+       content
+     }
+     marketInfo {
+       id
+       image
+       content
+     }
     }
     allCustomCta {
       edges {
@@ -500,7 +510,7 @@ import CenteredAccordion from "~/components/marketing/sections/faq-sections/Cent
 import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
 import Slider from "~/components/custom/Slider.vue";
 import RoadMap from "~/components/custom/Roadmap.vue";
-
+import MarketInfo from "~/components/custom/MarketInfo.vue";
 export default {
   components: {
     NewCard,
@@ -527,6 +537,7 @@ export default {
     CustomCTA,
     Slider,
     RoadMap,
+    MarketInfo,
   },
   computed: {
     getImg() {