Add CTA & fix brandPanel

content/page/token/cta/cta.md

@@ -0,0 +1,13 @@
+---
+id: token_cta
+title: TFT underpins the ThreeFold financial system
+slogan:
+button:
+link:
+button2:
+link2:
+button3:
+link3:
+---
+
+Not satisfied with payments, the ThreeFold community is building a whole financial system that's peer-to-peer and accessible to everyone. In 2021, TFT will run on a peer-to-peer exchange, providing the ThreeFold community with protection mechanisms for a resilient economy.

content/page/token/cta2/cta2.md

@@ -0,0 +1,25 @@
+---
+id: token_cta2
+title: Why does TFT have value?
+slogan:
+button:
+link:
+button2:
+link2:
+button3:
+link3:
+---
+
+The TFT is valuable in different ways to different people.
+
+<br />
+
+For TFT holders, TFT is valuable because it is worth actual compute and storage capacity.
+
+<br />
+
+Today, TFT is becoming valuable to developers and enterprises deploying their solutions on the ThreeFold Grid. That's because you can use TFT to reserve fully private and secure capacity in the most technologically advanced Internet architecture.
+
+<br />
+
+Of course many also see it as an investment, similar to Bitcoin or other cryptocurrencies. But it shouldn’t be seen as an investment vehicle or way for short term gains or speculation as it is just a way to participate in the p2p Internet.

content/page/token/token.md

@@ -15,4 +15,6 @@ partnerships:
 productsMain: token_product
 productData: [swiptft, spendft, earn_interst]
 brandPanel: dive_TFT
+cta: token_cta
+cta2: token_cta2
 ---

src/components/custom/sections/CallToAction.vue

@@ -111,8 +111,5 @@ export default {
       this.showModal = false;
     },
   },
-  mounted() {
-    console.log(this.id);
-  },
 };
 </script>

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

@@ -66,7 +66,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="brand.img.src"
+            :src="img(brand.img)"
             :alt="brand.title"
           />
         </div>
@@ -78,12 +78,12 @@
 <script>
 export default {
   props: ["brand", "id"],
-  // computed: {
-  //   image() {
-  //     return this.brand.image.src
-  //       ? this.brand.image.src
-  //       : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
-  //   },
-  // },
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
 };
 </script>

src/templates/MarkdownPage.vue

@@ -40,7 +40,7 @@
 
       <CallToAction
         :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta"
+        v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
         :cta="$page.markdownPage.cta"
       />
 
@@ -61,6 +61,24 @@
         :main="$page.markdownPage.partenershipsMain"
         :partnerships="$page.markdownPage.partnerships"
       />
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel"
+        v-if="$page.markdownPage.brandPanel"
+      />
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.cta"
+        :cta="$page.markdownPage.cta"
+      />
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.cta2"
+        :cta="$page.markdownPage.cta2"
+      />
+    </div>
+
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
@@ -69,21 +87,7 @@
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
       />
-
-      <BrandPanel
-        :id="$page.markdownPage.id"
-        :brand="$page.markdownPage.brandPanel"
-        v-if="$page.markdownPage.brandPanel"
-      />
     </div>
-
-    <CallToAction
-      :id="$page.markdownPage.id"
-      v-if="$page.markdownPage.cta2"
-      :cta="$page.markdownPage.cta2"
-    />
-
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5"></div>
   </Layout>
 </template>