finish build page

content/build/index.md

@@ -46,6 +46,74 @@ extra:
 
 
 
+<!-- section 3 (Build With ThreeFold) -->
+
+<div class="lg:py-24 py12 ">
+<div class="container max-w-7xl mx-auto">
+
+ 
+
+## Build with ThreeFold
+
+
+<div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-16 xl:mx-auto">
+    <div class="flex lg:flex-row flex-col">
+    
+{{ image_card(
+    header="Deploy",
+    target="_blank",
+    tooltip=" ",
+    card_link="https://dashboard.grid.tf/#/deploy/labs/"
+) }}
+
+{{ image_card(
+    header="Farm",
+    tooltip=" ",
+    card_link="/farm"
+) }}
+
+{{ image_card(
+    header="Manual",
+    target="_blank",
+    tooltip=" ",
+    card_link="https://manual.grid.tf/"
+) }}
+
+{{ image_card(
+    header="Demos",
+    target="_blank",
+    tooltip=" ",
+    card_link="https://www.youtube.com/playlist?list=PLTGQlepPqwUUhbtKZW2okEszK3AkDgC4Y"
+) }}
+
+</div>
+</div>
+</div>
+</div>
+
+
+
+
+<!--section 2 (horizontal_features)-->
+
+ <div class="lg:py-24 py-12 mx-auto max-w-7xl px-4 g:px-8">
+
+  ## Deploy with ThreeFold
+
+  Explore and deploy ready-to-use apps on the ThreeFold Grid.
+
+  <br>
+
+![Deploy with ThreeFold](/images/all_apps.png)
+
+<br>
+
+<div class="mt-6 lg:mt-10 flex items-center justify-center gap-x-6">
+        <a href="https://dashboard.grid.tf/#/deploy/labs/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Discover Labs</a>
+  </div>
+
+  
+</div>
 
  <!--section 2 (horizontal_features)-->
 
@@ -92,7 +160,7 @@ extra:
 </div> -->
 
 
-<!--section 3 (Portfolio)-->
+<!--section 5 (ThreeFold Stack)-->
 
 
 <div class="lg:py-24 py-12 mx-auto max-w-7xl lg:px-8">
@@ -101,8 +169,6 @@ extra:
 
  Products designed to power a decentralized, sustainable digital future.
 
-
-
 <dl class="pt-12 grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
 
 {{ portfolio(
@@ -169,9 +235,6 @@ extra:
 )}}
 
 </dl>
-
-
-
 </div>
 
 

templates/shortcodes/image_card.html

@@ -3,23 +3,35 @@
 {% set title = title | default(value="") %}
 {% set card_link = card_link | default(value="") %}
 {% set tooltip = tooltip | default(value="") %}
+{% set target = target | default(value="") %}
+{% set header = header | default(value="") %}
 
 
 
 
 
-        <a href="{{ card_link }}" class="flex-1 mx-2 mb-8" target="_blank">
+        <a href="{{ card_link }}" class="flex-1 mx-2 mb-8" target="{{ target }}">
-          {% if tooltip %}
+         
           <div class="tooltip">
+            {% if tooltip %}
             <span class="tooltiptext">{{ tooltip }}</span>
           {% endif %}
+         
         <div class="fade-in-box flex flex-col p-6 rounded-2xl  bg-white/5">
+          {% if header %}
+          <h2 class="flex justify-center items-center text-white">{{ header }}</h2>
+          {% endif %}
+
+          {% if image_src %}
           <img class="fade-in blinking-effect relative mx-auto mb-4" width="60%" src="{{ image_src }}" alt="{{ image_alt }}">
+          {% endif %}
         </div>
         </div>
+        {% if title %}
         <div class="flex justify-center my-4 items-center gap-x-3 lg:text-xl text-lg  font-semibold text-white">
           {{ title }}
         </div>
+        {% endif %}
       </a>