update tech page

content/deploy/index.md

@@ -80,7 +80,9 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 
 
 
-<!-- section 2 Key Features -->
+
+
+<!-- section 2 Endless -->
 
 
 <div style="background-color:#F6F6F6">

content/header/index.md

@@ -8,9 +8,9 @@ extra:
 ---
 
 - [About]("/about")
-- [Deploy]("/deploy")
+- [Technology]("/technology")
 - [Host]("/host")
-- [Utilization]("/utilization")
+- [Deploy]("/deploy") 
 - [TFT]("/tft")
 - Info
 

content/technology/index.md

@@ -0,0 +1,102 @@
+---
+title: "Technology"
+template: "page.html"
+insert_anchor_links: "left"
+---
+
+
+<!-- section 1  -->
+
+<div class="container mx-auto">
+
+{% row(style="header reverse") %}
+
+#### <span class="green_text">ENABLING A GLOBAL NETWORK OF INTERCONNECTED NODES</span>
+
+## **A decentralized infrastructure stack for any digital workload**
+
+Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime. ThreeFold provides features that emerging IT workloads require, and that traditional cloud infrastructures cannot deliver.
+
+<br>
+
+<button class="blue_b">[Dive Deeper](https://manual.grid.tf/)</button>
+
+
+|||
+
+![Image](tech_here.png#mx-auto)
+
+{% end %}
+
+
+<!-- section 2  -->
+
+{% row( style="center semiNarrow") %}
+
+#### <span class="green_text">KEY INNOVATIONS</span>
+
+## **Let's together create the <span class="blue">*Unbreakable Internet*</span>.**
+
+{% end %}
+
+{% tabs_tech() %}
+
+# test
+
+{% end %}
+
+
+
+
+<!-- section 3  -->
+
+{% row( style="mtop center semiNarrow") %}
+
+#### <span class="blue">WHAT MAKES US UNIQUE?</span>
+
+## **Key Features**
+
+{% end %}
+
+{% row( style="mbottom center semiNarrow") %}
+
+<div class="rounded_img rounded-lg p-4 bg-gray-100 card_h">
+
+The Bare Metal Operating System can be hosted by everyone on any computer hardware and doesn’t need human intervention.
+
+</div>
+
+|||
+
+<div class="rounded_img rounded-lg p-4 bg-gray-100 card_h">
+
+The Mycelium Network is compatible with any Existing Internet connection and is capable to find the shortest path between participants (apps and people)
+
+</div>
+
+
+|||
+
+<div class="rounded_img rounded-lg p-4 bg-gray-100 card_h">
+
+The Quantum Safe Storage system is upto 10x more efficient, allows data to be stored with full control over locality, data can not be lost nor corrupted.
+
+</div>
+
+{% end %}
+
+
+</div>
+
+<style>
+
+.card_h{
+  height: 170px !important;
+}
+     .road_border{
+    
+      border-left: 1px solid #cbcbcb;
+
+    }
+
+</style>

content/utilization/index.md

@@ -1,159 +0,0 @@
----
-title: "Utilization"
-template: "page.html"
-insert_anchor_links: "left"
----
-
-
-<!-- section 1  -->
-
-<div class="container mx-auto">
-
-{% row(style="header reverse") %}
-
-### **<span class="green">The First Experiences</span>**
-
-# **Utilization & <span class="blue">Ecosystem</span>**
-
-ThreeFold's decentralized autonomous cloud is in its third generation and ready to go commercial. It will empower many projects and digital experiences as we
-grow.
-
-|||
-
-![Image](utilization_section1.png#mx-auto)
-
-{% end %}
-
-
-
-
-
-<!-- section 2  -->
-
-{% row( style="center between mtop") %}
-
-### **<span class="blue">Core Partners</span>**
-
-## **Building with ThreeFold**
-
-<br>
-
-Meet the projects with whom we are working closely this year to drive utilization on top of the ThreeFold Grid. Each of these projects alone has the potential to use up all of ThreeFold's existing capacity – and the team is preparing methods for the grid to scale quickly.
-
-{% end %}
-
-
-<br>
-
-
-{% row( style="semiNarrow") %}
-
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](social_logo.png#icon#mx-auto)](/partners/social-network)
-
-<br>
-
-**Scaling Bitcoin**
-
-<p class="text-base mt-2">Bitcoin is the clear leader when it comes to the “future of money,” but the network faces key blockchain challenges like scalability, reliability.. </P>
-
-<span class="text-base">[Read More](/partners/social-network)</span>
-
-
-
-</div>
-
-
-|||
-
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](ourworld_logo.png#icon#mx-auto)](/partners/our-world-free-zone)
-
-<br>
-
-**A Sovereign Economic Zone**
-
-<p class="text-base">In July 2023, Dr. Hussein Ali Mwinyi, President of Zanzibar, spoke at a summit hosted by ThreeFold to announce our collaboration... </P>
-
-<span class="text-base">[Read More](/partners/social-network)</span>
-
-</div>
-
-
-|||
-
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](ict_logo.png#icon#mx-auto)](/partners/tanzania-sovereign-internet)
-
-<br>
-
-**A Sovereign Internet, By and For Tanzania**
-
-<p class="text-base">Most countries lose numerous benefits from not owning their own Internet. Digital sovereignty is inexistent and economic gains are lost... </P>
-
-<span class="text-base">[Read More](/partners/tanzania-sovereign-internet)</span>
-
-</div>
-
-{% end %}
-
-
-{% row( style="semiNarrow") %}
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](sikana_logo.png#icon#mx-auto)](/partners/sikana)
-
-<br>
-
-**Education For All**
-
-<p class="text-base">Sikana has delivered over 400 million lessons via free educational videos but because of this incredible scale they could not afford hosting costs... </P>
-
-<span class="text-base">[Read More](/partners/sikana)</span>
-
-</div>
-
-|||
-
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](veverse_logo.png#icon#mx-auto)](/partners/veverse)
-
-<br>
-
-**Own Your Metaverse**
-
-<p class="text-base">We met the founder of VeVerse several years ago, who had the vision to democratize access to art globally through metaverse technology... </P>
-
-<span class="text-base">[Read More](/partners/veverse)</span>
-
-</div>
-
-|||
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-4 md:p-6 mypartners">
-
-[![Image](vverse_logo.png#icon#mx-auto)](/partners/vverse/)
-
-<br>
-
-**Metaverse Meets Edge Cloud**
-
-<p class="text-base">VVerse (not to be confused with VeVerse) is one of the most capable metaverse technologies... </P>
-
-<span class="text-base">[Read More](/partners/vverse/)</span>
-
-</div>
-
-{% end %}
-
-</div>
-

css/index.css

@@ -594,6 +594,10 @@ header {
     height: auto;
   }
 
+  .card_h {
+         height: auto !important;
+  }
+
   .key_card{
     height: auto;
   }

templates/_default/base.html

@@ -48,6 +48,7 @@
   <div class="px-4 md:px-8">
     {% include "partials/footer.html" %}
   </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
 </body>
 

templates/shortcodes/tabs_tech.html

@@ -0,0 +1,109 @@
+
+<div class="container mx-auto mb-0 md:mb-24  mt-0 md:mt-4">
+   <div class="mb-4">
+        <div class="grid grid-cols-3 gap-2 mx-2 px-0 lg:px-2 font-medium text-center text-gray-500 rounded-lg shadow sm:flex" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600" data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600  data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" role="tablist">
+            <div class="w-full md:w-1/3 mx-0 md:mx-2 list-none  focus-within:z-10" role="presentation">
+                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-4 focus:ring-cyan-400 active focus:outline-none id="profile-styled-tab" data-tabs-target="#styled-profile" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Bare Metal OS<br><span class="font-semibold">Zero-OS</span></button>
+            </div>
+            <div class="w-full md:w-1/3 mx-0 md:mx-2 list-none  focus-within:z-10" role="presentation">
+                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-4 focus:ring-cyan-400 active focus:outline-none id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Quantum Safe Network<br><span class="font-semibold">MYCELIUM</span></button>
+            </div>
+            <div class="w-full md:w-1/3 md:mx-2 list-none  focus-within:z-10" role="presentation">
+                <button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-4 focus:ring-cyan-400 active focus:outline-none id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Quantum Safe Storage<br><span class="font-semibold">FUNGISTOR</span></button>
+            </div>
+           
+        </div>
+    </div>
+    <div id="default-styled-tab-content">
+        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
+            
+              
+            <div class="flex flex-wrap justify-center items-center">
+
+               <div class="w-full p-2 md:p-8">
+                <h4 class="blue my-0 md:my-4 font-semibold">Zero-OS: A Bare Metal Stateless Operating System</h4>
+                
+                
+                <p>Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more sovereign manner, without compromising on security, control, and monitoring.</p>
+                 <br>
+                <p>
+                    As the engine of the ThreeFold Cloud, Zero-OS is compatible with nearly all computer hardware.</p>
+                    <br>
+                <p>
+                    It enables anyone to become a cloud service provider without needing cloud expertise.<br> The operating system functions fully autonomously, requiring no interventions.</p>
+                    
+                    <div class="flex flex-wrap  items-center my-6">
+                    <p class="font-semibold">SELF HEALING    </p>
+                    <p class="mx-4 font-semibold"> |  </p>
+                    <p class="font-semibold"> AUTONOMOUS</p>
+                    <p class="mx-4 font-semibold"> |  </p>
+                    <p class="font-semibold"> LINUX KERNEL</p>
+                   </div>
+                </div>
+                {# <div class="w-full md:w-1/2">
+                <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_3node.png" alt="" />
+                </div> #}
+            </div>
+            
+        
+        </div>
+        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+            <div class="flex flex-wrap justify-center items-center">
+
+                <div class="w-full p-2 md:p-8">
+                    <h4 class="green_text my-0 md:my-4 font-semibold">Mycelium: A Quantum Safe Storage Network</h4>
+                    
+                    
+                    <p>Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.</p>
+                     <br>
+                    <p>Our goal was to create a network that can identify and utilize the fastest and most direct paths between participants, remain operational even in challenging conditions (such as fiber cuts), and secure all traffic.</p>
+                        <br>
+                    <p>
+                        ith Mycelium, data travels the most efficient routes, leveraging any available internet connection, including peer-to-peer networks like mesh wireless. All traffic is end-to-end encrypted, effectively preventing man-in-the-middle attacks.</p>
+                        
+                        <div class="flex flex-wrap  items-center my-6">
+                        <p class="font-semibold uppercase">End-to-end encrypted</p>
+                        <p class="mx-4 font-semibold"> |  </p>
+                        <p class="font-semibold uppercase"> shortest path route </p>
+                        <p class="mx-4 font-semibold"> |  </p>
+                        <p class="font-semibold uppercase"> unbreakable </p>
+                       </div>
+                    </div>
+                 {# <div class="w-full md:w-1/2">
+                  <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_zero_os.png" alt="" />
+                 </div> #}
+            </div>
+            
+        </div>
+        <div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
+            <div class="flex flex-wrap justify-center items-center">
+
+                <div class="w-full p-2 md:p-8">
+                    <h4 class="blue my-0 md:my-4 font-semibold">FungiStor: A Quantum Safe Storage System</h4>
+                    
+                    
+                    <p>The Quantum-Safe Storage System is a decentralized, globally distributed data storage system.</p>
+                     <br>
+                    <p>
+                        The benefits are incredible: Up to 10x more efficient (power and usage of hardware). Super reliable, data can not be lost or corrupted. Safe, private and scalable.</p>
+                        <br>
+                    <p>
+                        Sovereign, data is close to you in the country of your choice. Truly peer-to-peer, by everyone for everyone.</p>
+                        
+                        <div class="flex flex-wrap  items-center my-6">
+                        <p class="font-semibold">ULTRA RELIABLE AND SCALABLE    </p>
+                        <p class="mx-4 font-semibold"> |  </p>
+                        <p class="font-semibold"> HACKER PROOF  AND SECURE</p>
+                        <p class="mx-4 font-semibold"> |  </p>
+                        <p class="font-semibold">LOW OVERHEAD AND SELF-HEALING</p>
+                       </div>
+                    </div>
+                 {# <div class="w-full md:w-1/2">
+                  <img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_qsfs.png" alt="" />
+                 </div> #}
+            </div>
+        </div>
+    </div>
+</div>
+
+