update developer page2

content/page/developer/brandPanel3/index.md

@@ -7,7 +7,5 @@ btnTxt : Start Testing
 sourceUrl : https://forum.threefold.io/t/diy-nodes-guide/837
 ---
 We have different use cases for you to take ThreeFold’s technology on a test drive. 
-
 <br>
-
 From zero to hero –- are you ready for the challenge?

content/page/developer/developer.md

@@ -14,5 +14,7 @@ header_excerpt: A builder’s manual for ThreeFold. Built by visionaries, for vi
 brandPanel3: developer_brandPanel3
 brandPanel2 : developer_brandPanel2
 cta3 : developer_cta3
+productsMain: developer_page
+productData: [developer1, developer2, developer3, developer4, developer5, developer6]
 
 ---

content/page/developer/productData/main/main.md

@@ -0,0 +1,6 @@
+---
+id: developer_page
+title: WHERE WOULD YOU LIKE TO START?
+subtitle: 
+---
+ThreeFold's open source infrastructure has been built from the ground-up on the Linux Kernel to create a fully decentralized Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, this is the most powerful Internet infrastructure ever created.

content/page/developer/productData/product1/index.md

@@ -0,0 +1,6 @@
+---
+id: developer1
+title: Operating System
+image: ./operating_system.png
+link: ''
+---

content/page/developer/productData/product2/index.md

@@ -0,0 +1,6 @@
+---
+id: developer2
+title: Automation Components
+image: ./automation.png
+link: ''
+---

content/page/developer/productData/product3/index.md

@@ -0,0 +1,6 @@
+---
+id: developer3
+title: Developer Tooling
+image: ./tooling.png
+link: /tech/zstor
+---

content/page/developer/productData/product4/index.md

@@ -0,0 +1,6 @@
+---
+id: developer4
+title: Quantum-Safe Storage
+image: ./qsfs.png
+link: ''
+---

content/page/developer/productData/product5/index.md

@@ -0,0 +1,6 @@
+---
+id: developer5
+title: ThreeFold Bloackchain
+image: ./blockchain.png
+link: /tech/zflist
+---

content/page/developer/productData/product6/index.md

@@ -0,0 +1,6 @@
+---
+id: developer6
+title: Software Development Kits
+image: ./sdk.png
+link: ''
+---

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-5 lg:mx-40">
+  <div class="my-5 lg:my-40 lg:mx-40">
     <div class="text-center mx-auto my-20" v-if="id == 'farm'">
       <h1 class="text-9xl uppercase leading-none font-heading">
         {{ main.title }}
@@ -13,7 +13,7 @@
     <div class="w-full text-center" v-else>
       <h2
         v-if="main !== null && main.title"
-        class="lg:text-6xl pb-10 uppercase font-semibold leading-tight font-heading"
+        class="lg:text-6xl uppercase font-semibold leading-tight font-heading"
       >
         {{ main.title }}
       </h2>
@@ -23,6 +23,10 @@
       >
         {{ main.subtitle }}
       </p>
+      <div
+        class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide"
+        v-html="main.content"
+      ></div>
     </div>
 
     <!-- tft -->
@@ -142,6 +146,36 @@
       </div>
     </div>
 
+
+     <!-- developer -->
+    <div
+      class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-40"
+      v-else-if="id == 'developer'"
+    >
+      <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-3 text-center max-w-7xl mx-auto"

src/templates/MarkdownPage.vue

@@ -90,7 +90,6 @@
           $page.markdownPage.id !== 'grid' &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'farm'
-          
         "
         :cta="$page.markdownPage.cta"
       />
@@ -135,8 +134,6 @@
         :sections="$page.markdownPage.comparisonSecs"
       /> -->
 
-      
-
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="
@@ -218,7 +215,7 @@
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
-          $page.markdownPage.productData.length > 0
+          $page.markdownPage.id !== 'developer'
         "
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.productsMain"
@@ -279,9 +276,21 @@
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel3"
-        v-if="$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'developer'"
+        v-if="
+          $page.markdownPage.brandPanel3 && $page.markdownPage.id == 'developer'
+        "
         :brandPanel3="true"
       />
+
+      <ShowcaseProducts
+        v-if="
+          $page.markdownPage.productData && $page.markdownPage.id == 'developer'
+        "
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
+      />
+
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta3 && $page.markdownPage.id == 'developer'"
@@ -292,11 +301,12 @@
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel2"
-        v-if="$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'developer'"
+        v-if="
+          $page.markdownPage.brandPanel2 && $page.markdownPage.id == 'developer'
+        "
         :brandPanel2="true"
       />
 
-
       <AppListItem
         v-if="
           $page.markdownPage.appData && $page.markdownPage.appData.length > 0