convert take apart sec

content/page/home/productData/product1/nodes.md

@@ -1,7 +1,9 @@
 ---
 id: nodes_home
-title: ''
+title: SET UP A NODE
-image : ./nodes.png
+image: ./nodes.png
-url : /farming
+button: Let's Do This!
+url: /farming/3node
 ---
 
+Plug in a 3Node and earn income by selling decentralized storage space to people looking for a more secure hosting space.

content/page/home/productData/product2/tokens.md

@@ -1,7 +1,9 @@
 ---
 id: tokens_home
-title: ''
+title: GET TOKEN
-image : ./tokens.png
+image: ./tokens.png
-url : /token
+button: Yes Please!
+url: /farming/token
 ---
 
+Get your hands on the ThreeFold Token (TFT), the only digital currency backed by the world’s fastest growing P2P network.

content/page/home/productData/product3/storage.md

@@ -1,7 +1,9 @@
 ---
 id: storage_home
-title: ''
+title: GET STORAGE
-image : ./storage.png
+image: ./storage.png
-url : /cloud
+button: Make Me Safer!
+url: /cloud
 ---
 
+Say goodbye to security concerns and move all your workloads easily to a more secure and private decentralized cloud.

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

@@ -20,10 +20,24 @@
         :href="product.url"
         class="m-auto rounded overflow-hidden transition duration-500"
       >
-        <div class="px-2 py-2">
+        <div class="take_apart text-center pb-8 my-5">
-          <g-image class="py-4" :src="img(product.image)" />
+          <g-image :src="img(product.image)" />
-          <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
+          <h3 class="font-bold text-2xl">{{ product.title }}</h3>
-          <div v-html="product.content" class="text-gray-600"></div>
+          <div v-html="product.content" class="pb-8 px-5 text-gray-600"></div>
+
+          <a
+            v-if="product.url.includes('http')"
+            target="_blank"
+            :href="product.url"
+            class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
+            >{{ product.button }}</a
+          >
+          <g-link
+            v-else
+            :href="product.url"
+            class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
+            >{{ product.button }}</g-link
+          >
         </div>
       </a>
     </div>
@@ -47,4 +61,8 @@ export default {
 .bannerFondo {
   height: 400px;
 }
+
+.take_apart {
+  background-color: #f5f5f5;
+}
 </style>

src/pages/Index.vue

@@ -18,7 +18,7 @@
         :header="$page.markdownPage.header"
       /> -->
 
-      <g-image 
+      <g-image
         class="m-auto w-2/4 lg:mt-20"
         v-if="$page.markdownPage.solution_image2"
         :src="$page.markdownPage.solution_image2.src"
@@ -152,6 +152,7 @@
          title
          content
          image
+         button
          url
        }
         cards{