init tft uses part

content/page/tft/tft.md

@@ -15,4 +15,6 @@ brandPanel: tft_brandPanel
 card: tft_card
 carousel: [slide1, slide2, slide3, slide4, slide5, slide6 , slide7]
 sliderMain: slider_main
+useTftMain: useTft_main
+tftUses: [col1, col2, col3]
 ---

content/page/tft/tftUses/col1/index.md

@@ -0,0 +1,4 @@
+---
+id: col1
+title: TFT USES
+---

content/page/tft/tftUses/col2/col2.md

@@ -0,0 +1,4 @@
+---
+id: col2
+---
+A TFT is crearted everytime someone adds capacity to the ThreeFold Grid.  This is rewarded to the person adding the capacity.

content/page/tft/tftUses/col3/col3.md

@@ -0,0 +1,4 @@
+---
+id: col3
+---
+Developers and solution providers also use TFT to purchase capacity, storage or compute on the ThreeFold Grid.

content/page/tft/tftUses/main/index.md

@@ -0,0 +1,4 @@
+---
+id: useTft_main
+image: ./tft_uses.jpg
+---

gridsome.config.js

@@ -387,6 +387,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'TftUsesMain',
+                path: './content/page/**/tftUses/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'TftUses',
+                path: './content/page/**/tftUses/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -447,7 +463,9 @@ module.exports = {
                     pageHeader: 'PageHeader',
                     card: 'Card',
                     carousel: 'Carousel',
-                    sliderMain: 'CarouselMain'
+                    sliderMain: 'CarouselMain',
+                    useTftMain: 'TftUsesMain',
+                    tftUses: 'TftUses'
                 }
             }
         },

src/components/marketing/sections/team-sections/with_large_images.vue

@@ -1,9 +1,65 @@
 <template>
   <div class="bg-white">
-    <div class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24">
+    <div
+      v-if="id == 'tft'"
+      class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
+    >
+      <!-- <div
+          class="
+            space-y-5
+            text-center
+            sm:space-y-4
+            md:max-w-xl
+            lg:max-w-3xl
+            xl:max-w-none
+          "
+        >
+          <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
+            {{ main.title }}
+          </h2>
+          <p class="text-gray-600">
+            {{ main.description }}
+          </p>
+        </div> -->
+      <div
+        class="
+          sm:grid sm:grid-cols-3
+          sm:gap-x-6 sm:gap-y-12
+          sm:space-y-0
+          lg:grid-cols-3
+          lg:gap-x-8
+        "
+      >
+        <div v-for="(section, index) in sections" :key="index" class="p-5">
+          <div class="leading-6">
+            <h2 class="text-8xl font-bold uppercase" v-if="section.title">
+              {{ section.title }}
+            </h2>
+            <div
+              v-if="section.content"
+              class="text-2xl"
+              v-html="section.content"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <g-image class="mt-0" :src="main.image" />
+    </div>
+
+    <div
+      v-else
+      class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
+    >
       <div class="space-y-12">
         <div
-          class="space-y-5 text-center sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none"
+          class="
+            space-y-5
+            text-center
+            sm:space-y-4
+            md:max-w-xl
+            lg:max-w-3xl
+            xl:max-w-none
+          "
         >
           <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
             {{ main.title }}
@@ -13,7 +69,14 @@
           </p>
         </div>
         <div
-          class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-2 lg:gap-x-8"
+          class="
+            space-y-12
+            sm:grid sm:grid-cols-2
+            sm:gap-x-6 sm:gap-y-12
+            sm:space-y-0
+            lg:grid-cols-2
+            lg:gap-x-8
+          "
         >
           <div
             v-for="(section, index) in sections"
@@ -45,13 +108,35 @@
               v-if="urlChecker(main.link)"
               target="_blank"
               :href="main.link"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-gray-100
+                px-12
+                py-2
+                mr-5
+                shadow
+                rounded-full
+              "
               >{{ main.button }}</a
             >
             <a
               v-else
               :href="main.link"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-gray-100
+                px-12
+                py-2
+                mr-5
+                shadow
+                rounded-full
+              "
               >{{ main.button }}</a
             >
           </div>
@@ -61,13 +146,35 @@
               v-if="urlChecker(main.link2)"
               target="_blank"
               :href="main.link2"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-gray-100
+                px-12
+                py-2
+                mr-5
+                shadow
+                rounded-full
+              "
               >{{ main.button2 }}</a
             >
             <a
               v-else
               :href="main.link2"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-gray-100
+                px-12
+                py-2
+                mr-5
+                shadow
+                rounded-full
+              "
               >{{ main.button2 }}</a
             >
           </div>
@@ -79,7 +186,7 @@
 
 <script>
 export default {
-  props: ["main", "sections"],
+  props: ["id", "main", "sections"],
   methods: {
     img(image) {
       if (!image) return "";

src/templates/MarkdownPage.vue

@@ -115,6 +115,13 @@
         :slides="$page.markdownPage.carousel"
         :main="$page.markdownPage.sliderMain"
       />
+
+      <TFTFuel
+        v-if="$page.markdownPage.tftUses.length > 0"
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.useTftMain"
+        :sections="$page.markdownPage.tftUses"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -461,6 +468,15 @@
        button
        link
      }
+     useTftMain {
+       id
+       image
+     }
+     tftUses{
+       id
+       title
+       content
+     }
     }
     allCustomCta {
       edges {
@@ -499,6 +515,7 @@ import Partenerships from "~/components/marketing/sections/team-sections/grid_wi
 import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
 import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
 import Slider from "~/components/custom/Slider.vue";
+
 export default {
   components: {
     NewCard,