token about tft

content/page/token/aboutTft/index.md

@@ -0,0 +1,9 @@
+---
+id: decentralized_cloud
+title: DECENTRALIZED CLOUD NEEDED A CURRENCY.
+subtitle: IT NOW HAS ONE
+image: ./decenterlize_cloud.png
+button: Learn about TFT
+link: '#'
+---
+TFT is a digital currency and utility token that allows people to hold current and future cloud capacity on the ThreeFold Grid. It incentivizes an open system where anyone can provide, sell and utilize compute, storage and network resources without any intermediaries

content/page/token/token.md

@@ -15,4 +15,5 @@ marketInfoMain: marketMain
 mainItem: sec1
 marketInfo: [sec2, sec3, sec4]
 cta: token_cta
+tft: decentralized_cloud
 ---

gridsome.config.js

@@ -393,6 +393,15 @@ module.exports = {
             }
         },
 
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'AboutTft',
+                path: './content/page/**/aboutTft/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -446,7 +455,8 @@ module.exports = {
                     roadmap: 'Roadmap',
                     marketInfoMain: 'MarketInfoMain',
                     marketInfo: 'MarketInfo',
-                    mainItem:'MainItem'
+                    mainItem: 'MainItem',
+                    tft: 'AboutTft'
                 }
             }
         },

src/components/custom/SplitWithImage.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="relative" :class="{ 'bg-token': id == 'token' }">
+    <main class="lg:relative">
+      <div class="relative w-full lg:absolute lg:left-0 lg:w-1/2 lg:h-auto">
+        <g-image
+          class="absolute w-100 lg:w-3/4 h-auto object-fit hidden md:block"
+          :src="img(tft.image)"
+          :alt="tft.title"
+        />
+      </div>
+      <div
+        class="
+          mx-auto
+          max-w-10xl
+          w-full
+          pt-16
+          pb-20
+          text-center
+          lg:py-48
+          lg:text-left
+        "
+      >
+        <div class="px-4 lg:w-1/2 lg:ml-auto sm:px-8 xl:pr-16">
+          <h2
+            class="
+              text-xl
+              tracking-tight
+              leading-10
+              font-bold
+              text-gray-900
+              sm:text-5xl
+              sm:leading-none
+              md:text-6xl
+              lg:text-5xl
+              xl:text-6xl
+            "
+          >
+            {{ tft.title }}
+            <br class="xl:hidden" />
+            <span class="block">{{ tft.subtitle }}</span>
+          </h2>
+          <div
+            class="
+              mt-3
+              max-w-md
+              text-lg text-gray-900
+              sm:text-xl
+              md:mt-5
+              md:max-w-xl
+            "
+            v-html="tft.content"
+          ></div>
+          <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
+            <a
+              :href="tft.link"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                my-4
+                border-2
+                shadow
+                border-black
+              "
+            >
+              {{ tft.button }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["id", "tft"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bg-token {
+  background: #70dfc9;
+  background: -webkit-linear-gradient(to bottom, #ea1ff7, #70dfc9);
+  background: linear-gradient(to bottom, #ea1ff7, #70dfc9);
+}
+</style>

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

@@ -360,7 +360,7 @@
         <div class="w-1/2 mx-auto px-2 self-center">
           <g-image :src="img" :alt="altImg" />
         </div>
-        <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
+        <h2 class="lg:text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
         <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>

src/templates/MarkdownPage.vue

@@ -45,7 +45,6 @@
         "
         :cta="$page.markdownPage.cta"
       />
-
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta2"
@@ -93,6 +92,11 @@
         "
         :cta="$page.markdownPage.cta"
       />
+      <SplitWithImage
+        v-if="$page.markdownPage.tft"
+        :id="$page.markdownPage.id"
+        :tft="$page.markdownPage.tft"
+      />
       <RoadMap
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.roadmap"
@@ -477,6 +481,15 @@
        image
        content
      }
+     tft {
+       id
+       image
+       title
+       subtitle
+       content
+       button
+       link
+     }
     }
     allCustomCta {
       edges {
@@ -518,6 +531,8 @@ 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";
+import SplitWithImage from "~/components/custom/SplitWithImage.vue";
+
 export default {
   components: {
     NewCard,
@@ -545,6 +560,7 @@ export default {
     Slider,
     RoadMap,
     MarketInfo,
+    SplitWithImage,
   },
   computed: {
     getImg() {