Fix show products component

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

@@ -15,7 +15,26 @@
       </p>
     </div>
 
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center">
+    <div
+      class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
+      v-if="id == 'token'"
+    >
+      <a
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :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>
+          <div v-html="product.content" class="text-gray-700 text-base"></div>
+        </div>
+      </a>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center" v-else>
       <a
         v-for="(product, idx) in products"
         target="_blank"
@@ -58,7 +77,7 @@
 
 <script>
 export default {
-  props: ["products", "main"],
+  props: ["products", "main", "id"],
   methods: {
     img(image) {
       if (!image) return "";

src/templates/MarkdownPage.vue

@@ -61,6 +61,15 @@
         :main="$page.markdownPage.partenershipsMain"
         :partnerships="$page.markdownPage.partnerships"
       />
+      <ShowcaseProducts
+        v-if="
+          $page.markdownPage.productData &&
+          $page.markdownPage.productData.length > 0
+        "
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
+      />
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel"
@@ -78,16 +87,7 @@
       />
     </div>
 
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
-      <ShowcaseProducts
-        v-if="
-          $page.markdownPage.productData &&
-          $page.markdownPage.productData.length > 0
-        "
-        :main="$page.markdownPage.productsMain"
-        :products="$page.markdownPage.productData"
-      />
-    </div>
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5"></div>
   </Layout>
 </template>