token open network

content/page/token/openNetwork/main/index.md

@@ -0,0 +1,4 @@
+---
+id: open_network
+title: AN INCENTIVIZED OPEN NETWORK
+---

content/page/token/openNetwork/nw1/index.md

@@ -0,0 +1,5 @@
+---
+id: nw1
+title: PoC
+---
+PoC: By connecting cloud capacity to the Threefold Grid, people earn TFT on a monthly basis as income.

content/page/token/openNetwork/nw2/index.md

@@ -0,0 +1,4 @@
+---
+id: nw2
+image: ./open_network.png
+---

content/page/token/openNetwork/nw3/index.md

@@ -0,0 +1,5 @@
+---
+id: nw3
+title: PoU
+---
+By charging your wallet with TFT, you can store files and run applications on the ThreeFold Grid autonomously and in full privacy.

content/page/token/token.md

@@ -16,4 +16,6 @@ mainItem: sec1
 marketInfo: [sec2, sec3, sec4]
 cta: token_cta
 tft: decentralized_cloud
+networkMain: open_network
+network: [nw1, nw2, nw3]
 ---

gridsome.config.js

@@ -402,6 +402,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'NetworkMain',
+                path: './content/page/**/openNetwork/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Network',
+                path: './content/page/**/openNetwork/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -456,7 +472,9 @@ module.exports = {
                     marketInfoMain: 'MarketInfoMain',
                     marketInfo: 'MarketInfo',
                     mainItem: 'MainItem',
-                    tft: 'AboutTft'
+                    tft: 'AboutTft',
+                    networkMain: 'NetworkMain',
+                    network: 'Network'
                 }
             }
         },

src/components/custom/sections/Features.vue

@@ -313,6 +313,42 @@
     </div>
   </section>
 
+  <section class="py-24 px-4 text-center" v-else-if="id == 'token'">
+    <h2
+      class="
+        text-4xl
+        lg:max-w-sm
+        mx-auto
+        leading-tight
+        mb-6
+        font-bold font-heading
+        uppercase
+      "
+    >
+      {{ main.title }}
+    </h2>
+    <div class="flex flex-wrap items-center -mx-4 mb-6">
+      <div
+        v-for="(feature, index) in features"
+        :key="index"
+        class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
+      >
+        <div v-if="index == 1">
+          <div class="w-full h-auto mx-auto px-2 order-1">
+            <g-image :src="feature.image" :alt="feature.title" />
+          </div>
+        </div>
+
+        <div v-else class="max-w-xs mx-auto">
+          <h5 class="lg:text-6xl capitalize font-light">
+            {{ feature.title }}
+          </h5>
+          <div v-html="feature.content" class="lg:text-xl text-gray-800"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class="py-12 px-4" v-else>
     <h2 class="text-4xl text-center mb-12 font-normal font-heading">
       {{ main.title }}

src/templates/MarkdownPage.vue

@@ -83,7 +83,7 @@
       /> -->
     </div>
 
-    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-visible">
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="
@@ -97,6 +97,12 @@
         :id="$page.markdownPage.id"
         :tft="$page.markdownPage.tft"
       />
+      <Features
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.network.length > 0"
+        :main="$page.markdownPage.networkMain"
+        :features="$page.markdownPage.network"
+      />
       <RoadMap
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.roadmap"
@@ -490,6 +496,16 @@
        button
        link
      }
+     networkMain{
+       id
+       title
+     }
+     network{
+       id
+       title
+       image
+       content
+     }
     }
     allCustomCta {
       edges {