init how-it-works page & rm duplicated ids

content/page/how-it-works/how-it-works.md

@@ -0,0 +1,8 @@
+---
+id: how-it-works
+metaTitle: ThreeFold | How It Works
+metaDesc: Be part of a better tomorrow by expanding the peer-to-peer Internet and set yourself free from the centralized applications and services that exploit your data today.
+metaImg: ./universe_header.png
+productsMain: product_page
+productData: [zero_os, zdb, zstor, zdbfs, zflist, smart_contract, tf_chain, planetary_network, web_gateway, peer_to_peer ]
+---

content/page/how-it-works/productData/main/main.md

@@ -0,0 +1,5 @@
+---
+id: product_page
+title: DIVE INTO OUR TECH
+subtitle: 
+---

content/page/how-it-works/productData/product1/index.md

@@ -0,0 +1,6 @@
+---
+id: zero_os
+title: Zero-OS
+image: ./zero_os.jpg
+link: '#'
+---

content/page/how-it-works/productData/product10/index.md

@@ -0,0 +1,6 @@
+---
+id: peer_to_peer
+title: Peer-to-Peer
+image: ./peer_to_peer.jpg
+link: '#'
+---

content/page/how-it-works/productData/product2/index.md

@@ -0,0 +1,6 @@
+---
+id: zdb
+title: ZDB
+image: ./zdb.jpg
+link: '#'
+---

content/page/how-it-works/productData/product3/index.md

@@ -0,0 +1,6 @@
+---
+id: zstor
+title: Zstor
+image: ./zstor.jpg
+link: '#'
+---

content/page/how-it-works/productData/product4/index.md

@@ -0,0 +1,6 @@
+---
+id: zdbfs
+title: Zdbfs
+image: ./zdbfs.jpg
+link: '#'
+---

content/page/how-it-works/productData/product5/index.md

@@ -0,0 +1,6 @@
+---
+id: zflist
+title: ZFlist
+image: ./zflist.jpg
+link: '#'
+---

content/page/how-it-works/productData/product6/index.md

@@ -0,0 +1,6 @@
+---
+id: smart_contract
+title: Smart Contract for IT
+image: ./smart_contract.jpg
+link: '#'
+---

content/page/how-it-works/productData/product7/index.md

@@ -0,0 +1,6 @@
+---
+id: tf_chain
+title: TF Chain
+image: ./tf_chain.jpg
+link: '#'
+---

content/page/how-it-works/productData/product8/index.md

@@ -0,0 +1,6 @@
+---
+id: planetary_network
+title: Planetary Network
+image: ./planetary_network.jpg
+link: '#'
+---

content/page/how-it-works/productData/product9/index.md

@@ -0,0 +1,6 @@
+---
+id: web_gateway
+title: Web Gateway
+image: ./web_gateway.jpg
+link: '#'
+---

content/page/universe/productData/main/main.md

@@ -1,5 +1,5 @@
 ---
-id: product_page
+id: oldproduct_page
 title: JOIN THE P2P UNIVERSE
 subtitle: Be part of a better tomorrow, and set yourself free from the centralized applications and services that exploit your data today. 
 ---

content/page/universe/universe.md

@@ -3,6 +3,4 @@ id: universe
 metaTitle: ThreeFold | Universe
 metaDesc: Be part of a better tomorrow by expanding the peer-to-peer Internet and set yourself free from the centralized applications and services that exploit your data today.
 metaImg: ./universe_header.png
-productsMain: product_page
-productData: [farming, cloud, marketplace, twin, tech, aci]
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: peer_to_peer
+id: oldpeer_to_peer
 title: Peer-to-Peer puts people back in control
 image: ./peer_to_peer.png
 button: Learn More

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

@@ -109,6 +109,35 @@
       </div>
     </div>
 
+    <!-- How it works -->
+    <div
+      class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center"
+      v-else-if="id == 'how-it-works'"
+    >
+      <div
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.link"
+        class="
+          mx-auto
+          my-3
+          rounded
+          overflow-hidden
+          transition
+          duration-500
+          bg-gray-100
+        "
+      >
+        <a :href="product.link">
+          <g-image :src="img(product.image)" />
+          <div class="font-bold text-xl py-5 mx-4">
+            {{ product.title }}
+          </div>
+        </a>
+      </div>
+    </div>
+
     <!-- why -->
     <div
       class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"

src/templates/MarkdownPage.vue

@@ -174,7 +174,7 @@
         :products="$page.markdownPage.appData"
         :main="$page.markdownPage.appsMain"
       /> -->
-      <!-- <ShowcaseProducts
+      <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
@@ -182,7 +182,7 @@
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
-      /> -->
+      />
 
       <!-- <Partenerships
         v-if="