Add brandpanel

content/page/token/brandPanel/brandPanel.md

@@ -0,0 +1,10 @@
+---
+id: dive_TFT
+title: Dive Deeper into TFT
+subtitle:
+sourceUrl:
+btnTxt: Learn More
+img: ./dive-into.png
+---
+
+TFT represents a unit of compute and storage capacity (CPU, RAM, SDD/HDD) on the ThreeFold Grid. From our favourite application to our chats and videos, everything we use digitally needs compute and storage to be live.

content/page/token/token.md

@@ -14,4 +14,5 @@ partnerships:
   [be_ur_bank, secure, transact_p2p, backed, decentralized, lives_stellar]
 productsMain: token_product
 productData: [swiptft, spendft, earn_interst]
+brandPanel: dive_TFT
 ---

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

@@ -2,6 +2,42 @@
   <div class="">
     <div class="max-w-screen-xl mx-auto py-24">
       <div
+        v-if="id == 'token'"
+        class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+      >
+        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+          <g-image
+            class="absolute brandpanel inset-0 w-full h-full translate-x-0 translate-y-center rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            :src="brand.img.src"
+            :alt="brand.title"
+          />
+        </div>
+        <div
+          class="pt-10 pb-10 px-6 sm:pt-16 sm:px-10 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+        >
+          <div class="lg:self-center">
+            <h2 class="text-3xl leading-9 font-extrabold sm:leading-10">
+              <span class="block">{{ brand.title }}</span>
+              <span class="block" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="py-6 mt-4 text-lg leading-6"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              :href="brand.sourceUrl"
+              class="bg-gray-800 text-sm learn-button hover:bg-57EEF8-400 text-white px-12 py-2 mr-3 shadow rounded-full"
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
         class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
       >
         <div
@@ -30,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="image"
+            :src="brand.img.src"
             :alt="brand.title"
           />
         </div>
@@ -41,13 +77,13 @@
 
 <script>
 export default {
-  props: ["brand"],
-  computed: {
-    image() {
-      return this.brand.image.src
-        ? this.brand.image.src
-        : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
-    },
-  },
+  props: ["brand", "id"],
+  // computed: {
+  //   image() {
+  //     return this.brand.image.src
+  //       ? this.brand.image.src
+  //       : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
+  //   },
+  // },
 };
 </script>

src/templates/MarkdownPage.vue

@@ -69,6 +69,12 @@
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
       />
+
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel"
+        v-if="$page.markdownPage.brandPanel"
+      />
     </div>
 
     <CallToAction
@@ -163,7 +169,7 @@
          content
          sourceUrl
          btnTxt
-         image
+         img
        }
        partenershipsMain{
          id