init product part

content/page/why/productData/better_solution/better_solution.md

@@ -0,0 +1,6 @@
+---
+id: better_solution
+title: ""
+image: ./better_solution.png
+link: https://threefold.io/threefold/blog/post/for_our_planet/
+---

content/page/why/productData/internet_available/internet_available.md

@@ -0,0 +1,6 @@
+---
+id: internet_available
+title: ""
+image: ./internet_available.png
+link: https://threefold.io/threefold/blog/post/more_inclusive_internet/
+---

content/page/why/productData/main/main.md

@@ -0,0 +1,7 @@
+---
+id: product_main
+title: "WE TACKLE "
+slogan: "THE ROOT ISSUES."
+---
+
+This is a not a fixed internet. It is a new Internet. One that is safer, more private, more accessible and keeps our planet’s well-being in mind.

content/page/why/productData/peer_to_peer/peer_to_peer.md

@@ -0,0 +1,6 @@
+---
+id: peer_to_peer
+title: ""
+image: ./peer_to_peer.png
+link: https://threefold.io/threefold/blog/post/what_is_peer_to_peer/
+---

content/page/why/why.md

@@ -7,6 +7,8 @@ header_altImg: threefold
 header_excerpt: Our mission is accelerate the transition of the data economy to a decentralized P2P model and make it possible for every person to learn, partake and succeed.
 solution_image: ./404.png
 cta: why_cta
+productsMain: "product_main"
+productData: [peer_to_peer, internet_available, better_solution]
 ---
 
 <!-- header: home_header

src/components/AppListItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
+    <div class="text-center mx-auto my-10">
+      <h1 class="text-3xl text-gray-900 font-light sm:text-9xl sm:leading-10">
+        {{ main.title }} <span class="font-extrabold">{{ main.slogan }}</span>
+      </h1>
+      <div
+        class="mt-3 max-w-2xl mx-auto text-xl leading-7 text-gray-700 sm:mt-4"
+        v-html="main.content"
+      ></div>
+    </div>
+    <div
+      class="flex w-1/2 app px-0 sm:px-4 pb-4"
+      v-for="product in products"
+      :key="product.id"
+    >
+      <div class="post-card-image-link px-1">
+        <g-link :href="product.link">
+          <g-image
+            :src="img(product.image)"
+            :alt="product.title"
+            class="post-card-image"
+          ></g-image>
+        </g-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["products", "main"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.post-card-excerpt {
+  font-family: "Roboto", sans-serif;
+  line-height: 1.2;
+}
+.post-card-image {
+  max-width: 100%;
+  height: auto;
+}
+.app:last-child {
+  width: auto !important;
+}
+@media (max-width: 768px) {
+  .app {
+    flex: 1 1 auto;
+  }
+}
+</style>

src/templates/MarkdownPage.vue

@@ -41,6 +41,15 @@
         :cta="$page.markdownPage.cta"
       />
 
+      <div class="container sm:pxi-0 mx-auto mt-8 overflow-x-hidden">
+        <AppListItem
+          :products="$page.markdownPage.productData"
+          :main="$page.markdownPage.productsMain"
+        />
+      </div>
+    </div>
+
+    <!-- <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
@@ -49,7 +58,7 @@
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
       />
-    </div>
+    </div> -->
   </Layout>
 </template>
 
@@ -68,7 +77,8 @@
        productsMain{
           id
           title
-          subtitle
+          slogan
+          content
        #  image
         }
        productData{
@@ -76,7 +86,7 @@
          title
          content
          image
-         url
+         link
        }
         comparisonMain{
           id
@@ -134,6 +144,7 @@ import Roadmap from "~/components/custom/sections/Roadmap.vue";
 import FourTiersWithToggle from "~/components/marketing/sections/pricing/four_tiers_with_toggle.vue";
 import WithComparisonTable from "~/components/marketing/sections/pricing/with_comparison_table.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
+import AppListItem from "~/components/AppListItem.vue";
 
 export default {
   components: {
@@ -153,6 +164,7 @@ export default {
     FourTiersWithToggle,
     WithComparisonTable,
     BrandPanel,
+    AppListItem,
   },
 
   metaInfo() {