Fix brandPanel && replace hard coded imgs of token page

content/page/token/comparison/main/main.md

@@ -1,7 +1,7 @@
 ---
 id: token_comparison
 title: THE TFT FUELS THE P2P INTERNET
-description: It is the official medium of exchange for capacity on the ThreeFold Grid.
+description: It is the official medium of exchange for capacity on the ThreeFold Grid
 button: Get Tokens
-link: 'https://threefold.io/info/threefold#/threefold__how_to_buy_and_sell' #add button link here
+link: https://threefold.io/info/threefold#/threefold__how_to_buy_and_sell #add button link here
 ---

content/page/token/comparison/section1/section1.md

@@ -1,5 +1,7 @@
 ---
 id: expand_grid
 svg: ./expand_grid.png
-title: ''
+title: EXPAND WITH THE GRID
 ---
+
+The ThreeFold Token becomes more valuable as more people and organizations add decentralized storage and compute to expand the ThreeFold Grid.

content/page/token/comparison/section2/section2.md

@@ -1,6 +1,7 @@
 ---
 id: invest_token
 svg: ./invest_token.png
-title: ''
+title: PARTICIPATE IN A TOKEN WITH AN ACTUAL PURPOSE
 ---
 
+Users, developers, and enterprises use TFT to reserve the capacity they need to create, use and share their workloads and applications on the network.

content/page/token/comparison/section3/section3.md

@@ -1,6 +1,7 @@
 ---
 id: earn_more
 svg: ./earn_more.png
-title: ''
+title: EARN MORE THROUGH VESTING
 ---
 
+When you vest your TFT you'll be able to help secure TFT and earn rewards. Earn interest by holding the token to stimulate a healthy economy.

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

@@ -67,7 +67,7 @@
         <div class="relative pb-3/5 -mt-6 md:pb-1/2">
           <g-image
             class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
-            :src="img(brand.img)"
+            :src="image"
             :alt="brand.title"
           />
         </div>
@@ -79,11 +79,11 @@
 <script>
 export default {
   props: ["brand", "id"],
-  methods: {
-    img(image) {
-      if (!image) return "";
-      if (image.src) return image.src;
-      return image;
+  computed: {
+    image() {
+      return this.brand.image.src
+        ? this.brand.image.src
+        : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
     },
   },
 };

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

@@ -0,0 +1,83 @@
+<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 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-3xl leading-9 font-extrabold tracking-tight sm:text-4xl"
+          >
+            {{ main.title }}
+          </h2>
+          <p class="text-xl leading-7 text-black-500">
+            {{ main.description }}
+          </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-3 lg:gap-x-8"
+        >
+          <div
+            v-for="(section, index) in sections"
+            :key="index"
+            class="tft_fuel space-y-4 p-5"
+            :class="{ active: index % 2 !== 0 }"
+          >
+            <div class="relative pb-2/3">
+              <g-image
+                class="object-cover mb-8 h-full w-full"
+                :src="img(section.svg)"
+                :alt="section.title"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-center leading-6 space-y-1">
+                <h4 class="text-xl font-normal">{{ section.title }}</h4>
+                <div v-html="section.content"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center">
+          <a
+            v-if="main.link.includes('http')"
+            target="_blank"
+            :href="main.link"
+            class="bg-blue-900 uppercase text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+            >{{ main.button }}</a
+          >
+          <g-link
+            v-else
+            :href="main.link"
+            class="bg-blue-900 uppercase text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+            >{{ main.button }}</g-link
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["main", "sections"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+<style scoped>
+.tft_fuel {
+  background-color: #66efc5;
+  border-radius: 20px;
+}
+.active {
+  background-color: #ff8acf;
+  border-radius: 20px;
+}
+</style>

src/templates/MarkdownPage.vue

@@ -23,7 +23,16 @@
         :signup="$page.markdownPage.signup"
       />
 
-      <Comparison
+      <!-- <Comparison
+        v-if="
+          $page.markdownPage.comparisonSecs &&
+          $page.markdownPage.comparisonSecs.length > 0
+        "
+        :main="$page.markdownPage.comparisonMain"
+        :sections="$page.markdownPage.comparisonSecs"
+      /> -->
+
+      <TFTFuel
         v-if="
           $page.markdownPage.comparisonSecs &&
           $page.markdownPage.comparisonSecs.length > 0
@@ -205,6 +214,7 @@ import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowc
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
 import Comparison from "~/components/custom/sections/Comparison.vue";
+import TFTFuel from "~/components/marketing/sections/team-sections/with_large_images.vue";
 import Roadmap from "~/components/custom/sections/Roadmap.vue";
 import FourTiersWithToggle from "~/components/marketing/sections/pricing/four_tiers_with_toggle.vue";
 import WithComparisonTable from "~/components/marketing/sections/pricing/with_comparison_table.vue";
@@ -226,6 +236,7 @@ export default {
     CallToAction,
     SignUp,
     Comparison,
+    TFTFuel,
     Roadmap,
     FourTiersWithToggle,
     WithComparisonTable,