convert universe hardcoded imgs

content/page/universe/productData/product1/farming.md

@@ -1,7 +1,9 @@
 ---
 id: farming
-title: ''
+title: THE 3NODE
 image: ./farming.png
-url : /farming
+button: Tell Me More!
+link: /farming
 ---
 
+Join the Internet economy by hosting a server at your home or office.

content/page/universe/productData/product2/cloud.md

@@ -1,7 +1,9 @@
 ---
 id: cloud
-title: ''
+title: THE THREEFOLD P2P CLOUD
 image: ./cloud.png
-url : /token
+button: Tell Me More!
+link: /token
 ---
 
+Build secure software, applications and open Internet services.

content/page/universe/productData/product3/marketplace.md

@@ -1,7 +1,9 @@
 ---
 id: marketplace
-title: ''
+title: THE THREEFOLD MARKETPLACE
 image: ./marketplace.png
-url : /marketplace
+button: Tell Me More!
+link: /marketplace
 ---
 
+Empower your community with peer-to-peer applications and tools.

content/page/universe/productData/product4/twin.md

@@ -1,7 +1,9 @@
 ---
 id: twin
-title: ''
+title: THE DIGITAL TWIN
 image: ./twin.png
-url : /twin
+button: Tell Me More!
+link: https://mydigitaltwin.io/
 ---
 
+Your private and secure access to the P2P internet.

content/page/universe/productData/product5/tech.md

@@ -1,7 +1,9 @@
 ---
 id: tech
-title: ''
+title: THE THREEFOLD TECH
 image: ./tech.png
-url : https://threefold.tech
+button: Tell Me More!
+link: https://threefold.tech
 ---
 
+Dig deeper into the technology behind the TF Grid.

content/page/universe/productData/product6/aci.md

@@ -1,7 +1,9 @@
 ---
 id: aci
-title: ''
+title: ALLIANCE FOR A CONSCIOUS INTERNET
 image: ./aci.png
-url : /aci
+button: Tell Me More!
+link: /aci
 ---
 
+A collective ecosystem of planet and human centric projects.

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

@@ -7,10 +7,7 @@
       >
         {{ main.title }}
       </h2>
-      <p
+      <p v-if="main !== null && main.subtitle" class="mb-6 text-gray-600">
-        v-if="main !== null && main.subtitle"
-        class="mb-6 text-gray-600"
-      >
         {{ main.subtitle }}
       </p>
     </div>
@@ -34,6 +31,45 @@
       </a>
     </div>
 
+    <div
+      class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
+      v-else-if="id == 'universe'"
+    >
+      <div
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.link"
+        class="m-auto rounded overflow-hidden transition duration-500"
+      >
+        <div>
+          <g-image :src="img(product.image)" />
+          <div class="bg-gray-100 font-bold text-xl pt-5">
+            {{ product.title }}
+          </div>
+          <div
+            v-html="product.content"
+            class="bg-gray-100 py-2 text-gray-600"
+          ></div>
+          <div v-if="product.button" class="bg-gray-100 mb-2 py-5 text-center">
+            <a
+              v-if="product.link.includes('http')"
+              target="_blank"
+              :href="product.link"
+              class="bg-transparent text-sm learn-button border-gray-900 text-gray-900 px-12 py-2 mr-5 shadow rounded-full"
+              >{{ product.button }}</a
+            >
+            <g-link
+              v-else
+              :href="product.link"
+              class="bg-transparent text-sm learn-button border-gray-900 text-gray-900 px-12 py-2 mr-5 shadow rounded-full"
+              >{{ product.button }}</g-link
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center" v-else>
       <a
         v-for="(product, idx) in products"
@@ -85,6 +121,9 @@ export default {
       return image;
     },
   },
+  mounted() {
+    console.log(this.products);
+  },
 };
 </script>
 

src/templates/MarkdownPage.vue

@@ -128,6 +128,7 @@
          title
          content
          image
+         button
          link
        }
       appsMain{