Add farming process

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

@@ -0,0 +1,5 @@
+---
+id: FP_main
+title: PROOF OF CAPACITY
+subtitle: THE FARMING PROCESS
+---

content/page/tft/farmingProcess/process_1/index.md

@@ -0,0 +1,5 @@
+---
+id: process_1
+image: ./tft_hardware.png
+---
+Anyone can connect hardware to the ThreeFold Grid and become a Farmer (miner). 

content/page/tft/farmingProcess/process_2/index.md

@@ -0,0 +1,4 @@
+---
+id: process_2
+image: ./tft_process.png
+---

content/page/tft/farmingProcess/process_3/index.md

@@ -0,0 +1,5 @@
+---
+id: process_3
+image: ./tft_farmers_earn.png
+---
+Farmers earn TFT for achieving a certain uptime and as proof of  capacity. We call that ‘Farming’.

content/page/tft/tft.md

@@ -17,4 +17,6 @@ carousel: [slide1, slide2, slide3, slide4, slide5, slide6 , slide7]
 sliderMain: slider_main
 useTftMain: useTft_main
 tftUses: [col1, col2, col3]
+farmingMain: FP_main
+farmingProcess: [process_1, process_2, process_3]
 ---

gridsome.config.js

@@ -403,6 +403,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'FarmingProcessMain',
+                path: './content/page/**/farmingProcess/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'FarmingProcess',
+                path: './content/page/**/farmingProcess/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -465,7 +481,9 @@ module.exports = {
                     carousel: 'Carousel',
                     sliderMain: 'CarouselMain',
                     useTftMain: 'TftUsesMain',
-                    tftUses: 'TftUses'
+                    tftUses: 'TftUses',
+                    farmingMain: 'FarmingProcessMain',
+                    farmingProcess: 'FarmingProcess'
                 }
             }
         },

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

@@ -1,26 +1,9 @@
 <template>
   <div class="bg-white">
     <div
-      v-if="id == 'tft'"
+      v-if="id == 'tft' && !farmingProcess"
       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
@@ -46,6 +29,142 @@
       <g-image class="mt-0" :src="main.image" />
     </div>
 
+    <div
+      v-else-if="id == 'tft' && farmingProcess"
+      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
+          "
+        >
+          <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
+            {{ main.title }}
+          </h2>
+          <h1 class="text-6xl mb-2 leading-tight font-extrabold font-heading">
+            {{ main.subtitle }}
+          </h1>
+        </div>
+        <div
+          class="
+            space-y-12
+            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="space-y-4 p-5"
+            :class="{ arrowsHolder: index % 2 !== 0 }"
+          >
+            <div class="relative pb-2/3">
+              <g-image
+                class="object-cover mb-8 h-full w-full"
+                :src="img(section.image)"
+                :alt="section.title"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-center leading-6 space-y-1">
+                <h4 class="text-xl font-normal uppercase">
+                  {{ section.title }}
+                </h4>
+                <div v-html="section.content"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="inline-flex" v-if="main.button">
+            <a
+              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
+              "
+              >{{ 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
+              "
+              >{{ main.button }}</a
+            >
+          </div>
+
+          <div class="inline-flex" v-if="main.button2">
+            <a
+              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
+              "
+              >{{ 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
+              "
+              >{{ main.button2 }}</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div
       v-else
       class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24"
@@ -186,7 +305,7 @@
 
 <script>
 export default {
-  props: ["id", "main", "sections"],
+  props: ["id", "farmingProcess", "main", "sections"],
   methods: {
     img(image) {
       if (!image) return "";

src/templates/MarkdownPage.vue

@@ -121,7 +121,17 @@
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.useTftMain"
         :sections="$page.markdownPage.tftUses"
+        :farmingProcess="false"
       />
+
+      <TFTFuel
+        v-if="$page.markdownPage.farmingProcess.length > 0"
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.farmingMain"
+        :sections="$page.markdownPage.farmingProcess"
+        :farmingProcess="true"
+      />
+
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -477,6 +487,16 @@
        title
        content
      }
+     farmingMain {
+       id
+       title
+       subtitle
+     }
+     farmingProcess{
+       id
+       image
+       content
+     }
     }
     allCustomCta {
       edges {