init products part

content/page/token/productData/main/main.md

@@ -0,0 +1,7 @@
+---
+id: token_product
+title:
+subtitle:
+button: Get Tokens
+link:
+---

content/page/token/productData/product1/index.md

@@ -0,0 +1,8 @@
+---
+id: swiptft
+title: SWAP TFT
+image: ./swiptft.png
+url:
+---
+
+Exchange your TFT with other tokens including Bitcoin.

content/page/token/productData/product2/index.md

@@ -0,0 +1,8 @@
+---
+id: spendft
+title: SPEND TFT
+image : ./spendft.png
+url :
+---
+
+Purchase products and services on the threefold grid.

content/page/token/productData/product3/index.md

@@ -0,0 +1,8 @@
+---
+id: earn_interst
+title: EARN INTEREST
+image : ./earn_interst.png
+url :
+---
+
+Earn even more by staking your TFTs (coming 2021).

content/page/token/token.md

@@ -12,4 +12,6 @@ comparisonSecs: [expand_grid, invest_token, earn_more]
 partenershipsMain: cryptocurrency_main
 partnerships:
   [be_ur_bank, secure, transact_p2p, backed, decentralized, lives_stellar]
+productsMain: token_product
+productData: [swiptft, spendft, earn_interst]
 ---

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

@@ -2,17 +2,20 @@
   <div class="py-0 mb-5">
     <div class="w-full text-center">
       <h2
-        v-if="main !== null"
+        v-if="main !== null && main.title"
         class="text-4xl font-semibold leading-tight font-heading"
       >
         {{ main.title }}
       </h2>
-      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">
+      <p
+        v-if="main !== null && main.subtitle"
+        class="mb-6 text-m tracking-widest text-gray-800"
+      >
         {{ main.subtitle }}
       </p>
     </div>
 
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center">
       <a
         v-for="(product, idx) in products"
         target="_blank"
@@ -22,11 +25,33 @@
       >
         <div class="px-2 py-2">
           <g-image class="py-4" :src="img(product.image)" />
-          <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
+          <div class="font-bold text-xl mb-2">{{ product.title }}</div>
-          <p v-html="product.content" class="text-gray-700 text-base"></p>
+          <div v-html="product.content" class="text-gray-700 text-base"></div>
         </div>
       </a>
     </div>
+    <div v-if="main.button" class="my-10 text-center">
+      <!-- <a
+        v-if="main.button"
+        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
+        :href="main.link"
+        >{{ main.button }}</a
+      > -->
+
+      <a
+        v-if="main.link.includes('http')"
+        target="_blank"
+        :href="main.link"
+        class="bg-blue-900 text-sm uppercase learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
+        >{{ main.button }}</a
+      >
+      <g-link
+        v-else
+        :href="main.link"
+        class="bg-blue-900 text-sm uppercase learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
+        >{{ main.button }}</g-link
+      >
+    </div>
   </div>
 </template>
 

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

@@ -1,14 +1,18 @@
 <template>
   <div class="py-12 mb-5" id="home">
     <div class="w-full text-center">
-      <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
+      <h2
+        v-if="main !== null"
+        class="text-4xl font-semibold leading-tight font-heading"
+      >
         {{ main.title }}
       </h2>
-      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
+      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">
+        {{ main.subtitle }}
+      </p>
     </div>
 
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-
       <a
         v-for="(product, idx) in products"
         target="_blank"
@@ -16,20 +20,16 @@
         :href="product.url"
         class="m-auto rounded overflow-hidden transition duration-500"
       >
-        
         <div class="px-2 py-2">
           <g-image class="py-4" :src="img(product.image)" />
           <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
-            <p v-html="product.content" class="text-gray-700 text-base"></p>
+          <div v-html="product.content" class="text-gray-700 text-base"></div>
         </div>
-          
       </a>
-      
     </div>
   </div>
 </template>
 
-
 <script>
 export default {
   props: ["products", "main"],

src/templates/MarkdownPage.vue

@@ -61,15 +61,6 @@
         :main="$page.markdownPage.partenershipsMain"
         :partnerships="$page.markdownPage.partnerships"
       />
-    </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">
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
@@ -79,6 +70,14 @@
         :products="$page.markdownPage.productData"
       />
     </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>
 
@@ -101,6 +100,8 @@
           title
           subtitle
           content
+          button
+          link
        #  image
         }
        productData{
@@ -235,9 +236,6 @@ export default {
       return name;
     },
   },
-  mounted() {
-    console.log(this.$page.markdownPage);
-  },
 };
 </script>
 <style scoped>