fix conflict

content/about/index.md

@@ -9,8 +9,6 @@ extra:
 ---
 
 <!-- section 1 (header) -->
-
-
 <div class="container mx-auto">
 
 {% row(style="header") %}
@@ -19,125 +17,328 @@ extra:
 
 |||
 
+### **<span class="green">Meet the Project</span>**
+
 ## Founded by <span class="blue">**Internet 1.0 Pioneers**</span>
 
 About a decade ago, a group of passionate Internet & cloud veterans came together to build a system which can grow to a scalable, safe, compatible, and co-owned IT infrastructure.
 
 {% end %}
 
-
-
-
-<!-- section 2  -->
-
-{% row( style="center narrow mtop") %}
-
-## **Our Why**
-
-Pioneering a new digital era, ThreeFold empowers communities to reclaim digital sovereignty and promote collective prosperity online.
-
-{% end %}
-
-{% row( style="center semiNarrow") %}
-
-<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-![Image](nations.png#mx-auto)
-
-<br>
-
-#### **Empower Nations**
-
-Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure.
-
-
 </div>
 
-|||
+<!-- section 2 our Story  -->
 
-<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-![Image](own.png#mx-auto)
-
-<br>
-
-#### **Own Your Data**
-
-Today, most of the cloud is owned and operated by few major companies taking all the profits and control of Internet.
-
-</div>
-
-{% end %}
-
-{% row( style="center semiNarrow mbottom") %}
-
-<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-![Image](human_right.png#mx-auto)
-
-<br>
-
-#### **A Basic Human Right**
-
-Billions of people are being left behind due to the IT landscape’s centralized infrastructure.
-
-</div>
-
-|||
-
-<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-![Image](greener.png#mx-auto)
-
-<br>
-
-#### **A Greener Planet Earth**
-
-Current IT infrastructures consume far too much energy. It's time we do something about it.
-
-</div>
-
-{% end %}
-
-
-</div>
-
-
-<!-- section 3  -->
-
-<div class="bg-gray-200">
+<div style="background-color:#F6F6F6">
 
 <div class="container mx-auto">
 
-{% row( style="centerItem center semiNarrow margin") %}
+{% row( style="center narrow mtop") %}
+
+## **Our <span class="blue">Story</span>**
+
+### **Enabling True <span class="green_text">Decentralization</span>**
+
+{% end %}
+
+{% storymap() %}
+
+## **storymap**
+
+{% end %}
+
+</div>
+</div>
 
 
-## **Our Mission**
 
-![Image](mission.png#mx-auto)
+
+
+
+
+<!-- section 3  -->
+<div class="container mx-auto">
+
+{% row( style="center mtop") %}
+
+## **<span class="blue">30+ Years</span> Of Technology Development**
+
+{% end %}
 
 <br>
 
-#### To Empower Human Potential
+{% row( style="center mbottom") %}
 
-The world needs a safe infrastructure to deploy cutting edge technology, where everyone can take part. We exist to make cloud capacity available everywhere on Earth, to help others host and create new digital experiences and to enable true decentralization.
+<div class="myscale border rounded-md p-4">
+
+![Image](datacenter.png#mx-auto)
+
+
+
+-------------------
+
+<br>
+
+Market Cap
+<p class="text-2xl blue font-bold">8 Billion $</p>
+
+</div>
 
 |||
 
-## **Our Vision**
+<div class="myscale border rounded-md p-4">
 
-![Image](vision.png#mx-auto)
+![Image](dedigate.png#mx-auto)
+
+-------------------
 
 <br>
 
-#### A Better Digital World
+Market Cap
+<p class="text-2xl blue font-bold">34 Billion $</p>
 
-We believe in an Internet where everyone can communicate freely, exchange fairly, access educational information, and own their own data. Our digital experiences should not addict nor manipulate, rather empower.
+</div>
 
+|||
+
+<div class="myscale border rounded-md p-4">
+
+![Image](hostbasket.png#mx-auto)
+
+-------------------
+
+<br>
+
+Market Cap
+<p class="text-2xl blue font-bold">8 Billion $</p>
+
+</div>
+
+|||
+
+<div class="myscale border rounded-md p-4">
+
+![Image](qlayer.png#mx-auto)
+
+-------------------
+
+<br>
+
+Market Cap
+<p class="text-2xl blue font-bold">205 Billion $</p>
+
+</div>
+
+|||
+
+<div class="myscale border rounded-md p-4">
+
+![Image](amplidata.png#mx-auto)
+
+-------------------
+
+<br>
+
+Market Cap
+<p class="text-2xl blue font-bold">25 Billion $</p>
+
+</div>
 
 {% end %}
 
 </div>
 
 
-</div>
+
+
+<!-- section 4  -->
+<div style="background-color:#F6F6F6">
+
+<div class="container mx-auto">
+
+{% row( style="mtop") %}
+
+## **Roadmap**
+
+{% end %}
+
+{% roadmap() %}
+
+## **roadmap**
+
+{% end %}
+
+</div>
+</div>
+
+
+
+
+
+<!-- section 5  -->
+<div class="container mx-auto">
+
+{% row( style="mtop") %}
+
+## **The <span class="blue">Team</span>**
+
+{% end %}
+
+<br>
+
+{% row( style="") %}
+
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](kristof_de_spiegeleer.jpeg#mx-auto)
+</div>
+<div class="mx-3">
+
+**KRISTOF DE SPIEGELEER** <br>
+
+<p class="blue text-base font-semibold">Co-Founder & CEO</p>
+
+<p class="text-base leading-tight">Serial entrepreneur with 30 years of experience in Internet infrastructure and cloud technology. Passionate about tech for good, 500m USD in exits.</p>
+
+</div>
+</div>
+
+|||
+
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](jan_de_landtsheer.jpeg#mx-auto)
+</div>
+<div class="mx-3">
+
+**JAN DE LANDTSHEER** <br>
+
+<p class="blue text-base font-semibold">Co-Founder & Master Architect</p>
+
+<p class="text-base leading-tight">Network guru who has been innovating the internet from the early days and has witnessed the rise of centralization. </p>
+
+</div>
+</div>
+
+|||
+
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](adnan_fatayerji.jpg#mx-auto)
+</div>
+<div class="mx-3">
+
+**ADNAN FATAYERJI** <br>
+
+<p class="blue text-base font-semibold">Co-Founder & CEO of TF DMCC</p>
+
+<p class="text-base leading-tight">Social entrepreneur and startup investor, responsible for driving the ThreeFold Foundation. Built successful grass-root businesses in the UAE for the past 20 years.</p>
+
+</div>
+</div>
+
+{% end %}
+
+{% row( style="mbottom") %}
+
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](sabrina_sadik.jpg#mx-auto)
+</div>
+<div class="mx-3">
+
+**SABRINA SADIK** <br>
+
+<p class="blue text-base font-semibold">Operations Manager</p>
+
+<p class="text-base leading-tight">As the Internal and Grid Operations Lead, Sabrina handles customer communications and logistics. Sabrina prioritizes people and fosters and inclusive workplace culture.</p>
+
+</div>
+</div>
+
+|||
+
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](florian_fournier.jpeg#mx-auto)
+</div>
+<div class="mx-3">
+
+**FLORIAN FOURNIER** <br>
+
+<p class="blue text-base font-semibold">Ecosystem Developer</p>
+
+<p class="text-base leading-tight">Experienced social entrepreneur and marketing executive with extensive network in the US and Latam. Spearheaded all marketing at Apple in Latam.</p>
+
+</div>
+</div>
+
+|||
+
+<a href="/people">
+<div class="person flex md:flex-row flex-col items-start">
+
+<div class="">
+
+![Image](plus2.png#mx-auto)
+</div>
+<div class="mx-3">
+
+<p class="font-semibold">Plus over 50+ engineers, developers and other excellent team members</p>
+
+</div>
+</div>
+
+</a>
+
+{% end %}
+
+
+
+
+<!-- section 6  -->
+
+
+
+{% hovevision() %}
+
+## **Vision**
+
+{% end %}
+
+</div>
+
+
+
+
+<style>
+
+.rounded_img img {
+  border-radius: 8px;
+}
+
+.person img{
+  border-radius: 100%;
+  max-width:100px;
+  
+}
+
+.myscale{
+  transition: transform .5s; 
+}
+
+.myscale:hover{
+  transform: scale(1.2); 
+  background-color: whitesmoke;
+}
+  </style>

content/deploy/index.md

@@ -0,0 +1,252 @@
+---
+title: "Deploy"
+description: "About a decade ago, a group of passionate Internet & Cloud veterans came together to build a system." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+  author: Your name here
+  imgPath: about/deploy_hero.png
+---
+
+<!-- section 1 (header) -->
+<div class="container mx-auto">
+
+{% row(style="header") %} 
+
+![Image](deploy_hero.png#mx-auto)
+
+|||
+
+### **<span class="green">Deploy On The Grid</span>**
+
+## **Build <span class="blue">Your Own</span> Digital Experiences**
+
+ThreeFold has developed extensive technology and tools for <span class="blue">developers</span> and <span class="blue">system administrators.</span>
+
+<br>
+
+From decentralized cloud computing and blockchain integration to overseeing infrastructures and optimizing performance, there is a breadth of options for smooth and efficient operations.
+
+<br>
+
+<button class="green">[Developer Documentation](https://www.manual.grid.tf/documentation/developers/developers.html)</button> 
+<button class="blue_b">[Sysadmin Documentation](https://www.manual.grid.tf/documentation/system_administrators/system_administrators.html)</button>
+
+
+{% end %}
+
+</div>
+
+
+
+<!-- section 2 Key Features -->
+
+
+<div style="background-color:#F6F6F6">
+
+<div class="container mx-auto">
+
+
+{% row( style="mtop semiNarrow") %}
+
+### **<span class="">Deploy With ThreeFold**
+
+## **Key Features**
+
+{% end %}
+
+{% row( style="semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue">ANYTHING LINUX CAN RUN ON THE GRID</span>**
+
+
+<p class="text-base mt-1 leading-snug">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">VIRTUAL MACHINES & GATEWAY TECHNOLOGY</span>**
+
+
+<p class="text-base mt-1 leading-snug">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">ONE-CLICK SOLUTION FOR WORKLOADS</span>**
+
+
+<p class="text-base mt-1 leading-snug">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
+
+</div>
+
+{% end %}
+
+
+{% row( style="semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue">OPEN SOURCE LOW LEVEL OPERATING SYSTEM</span>**
+
+
+<p class="text-base mt-1 leading-snug">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">PEER TO PEER MESH NETWORK</span>**
+
+
+<p class="text-base mt-1 leading-snug">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">QUANTUM SAFE STORAGE SYSTEM</span>**
+
+
+<p class="text-base mt-1 leading-snug">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
+
+
+</div>
+
+
+{% end %}
+
+
+{% row( style="semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue">TOOLS AVAILABLE FOR SYSADMINS</span>**
+
+
+<p class="text-base mt-1 leading-snug">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
+
+
+</div>
+
+|||
+
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">AI AND MACHINE LEARNING WORKLOADS WITH GPU</span>**
+
+
+
+<p class="text-base mt-1 leading-snug">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
+
+
+</div>
+
+
+|||
+
+
+<!-- don't write here -->
+
+<div class="hidden key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue">AI AND MACHINE LEARNING WORKLOADS WITH GPU</span>**
+
+
+
+<p class="text-base mt-1 leading-snug">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
+
+
+</div>
+
+{% end %}
+
+<br>
+
+
+
+{% row( style="center mbottom semiNarrow") %}
+
+<button class="green">[Dive Deeper](https://manual.grid.tf/documentation/developers/developers.html)</button>
+
+{% end %}
+
+</div>
+
+</div>
+
+
+
+
+<!-- section 3 applications  -->
+
+<div class="container mx-auto">
+
+{% row( style="narrow mtop") %}
+
+## **Ready Community Applications**
+
+#### **Easily <span class="blue">deploy</span> your favorite applications on the ThreeFold Grid with a <span class="blue">click of a button</span>**
+
+<br>
+
+![Image](application.png)
+
+<br>
+
+<button class="green">[Learn More](https://manual.grid.tf/documentation/dashboard/deploy/applications.html?highlight=ready#)</button> 
+<button class="blue_b">[Deploy Now](https://dashboard.grid.tf)</button>
+
+{% end %}
+
+</div>
+
+
+
+<style>
+
+.rounded_img img {
+  border-radius: 8px;
+}
+
+.person img{
+  border-radius: 100%;
+  max-width:100px;
+  
+}
+
+.myscale{
+  transition: transform .5s; 
+}
+
+.myscale:hover{
+  transform: scale(1.2); 
+  background-color: whitesmoke;
+}
+  </style>

content/footer/_index.md

@@ -52,7 +52,7 @@ extra:
 
 <h6><a target="_self" onclick="window.location.href='/people'">People</a></h6>
 
-<h6><a target="_self" onclick="window.location.href='/utilization'">Partners</a></h6>
+<h6><a target="_self" onclick="window.location.href='/partners'">Partners</a></h6>
 
 <h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
 

content/header/index.md

@@ -8,9 +8,52 @@ extra:
 ---
 
 - [About]("/about")
+- [Deploy]("/deploy")
 - [Host]("/host")
 - [Utilization]("/utilization")
-- [News]("/newsroom")
-- [Blog]("/blog")
-- [People]("/people")
-- [Documentation]("https://manual.grid.tf")
+- [TFT]("/tft")
+- Info
+
+
+{% row() %}
+
+<button class="dropdown" onclick="window.location.href='/newsroom'">
+
+[Newsroom](/newsroom)
+<br>
+<p class="text-sm">Check the Latest Updates</p>
+
+</button>
+
+|||
+
+<button class="dropdown" onclick="window.location.href='/blog'">
+
+[Blog](/blog)
+<br>
+<p class="text-sm">Explore the Blogs</p>
+
+</button>
+
+|||
+
+<button class="dropdown" onclick="window.location.href='/people'">
+
+[Our People](/people)
+<br>
+<p class="text-sm">Team, stories, & more</p>
+
+</button>
+
+|||
+
+<button class="dropdown" onclick="openInNewTab('https&#58;//library.threefold.me/info/threefold#/')">
+
+[Documentation](https://manual.grid.tf)
+<br>
+<p class="text-sm">Explore the Documentation</p>
+
+</button>
+
+
+{% end %}

content/home/index.md

@@ -16,18 +16,19 @@ extra:
 
 {% row(style="reverse header") %}
 
-# **ThreeFold**
-## **Decentralized<br>Autonomous <span class="blue">Cloud</span>**
+## **<span class="blue">Decentralized</span><br><span class="green_text">Autonomous</span> Cloud**
 
-ThreeFold’s self-healing autonomous system empowers anyone to become a cloud service provider – no technical expertise required – allowing people and organizations to buy, sell and use cloud resources autonomously and securely.
+ThreeFold empowers anyone to become a cloud service provider – no technical expertise required – allowing people and organizations to buy, sell, and use cloud resources autonomously and securely.
 
 <br>
 
-<span class="blue">**Together we are creating a cloud for everyone, owned by everyone.**</span>
+Together we are creating a cloud for everyone, owned by everyone.
 
 <br>
 
-<button>[Host](/host)</button> <button>[Deploy](https://dashboard.grid.tf)</button> <button>[Learn](https://manual.grid.tf)</button>
+<button class="blue_b">[Host The Cloud](/host)</button> <button class="green">[Deploy](https://dashboard.grid.tf)</button> 
+
+<!-- <button>[Learn](https://manual.grid.tf)</button> -->
 
 |||
 
@@ -35,12 +36,26 @@ ThreeFold’s self-healing autonomous system empowers anyone to become a cloud s
 
 {% end %}
 
+</div>
 
-<!-- section 2 (Map) -->
+
+
+<!-- section 2 (logos) -->
+
+{% logo_slider() %}
+
+## **logo**
+
+{% end %}
+
+
+
+<!-- section 3 (Map) -->
+<div class="container mx-auto">
 
 {% grid_stats() %}
 
-### Become a cloud & Internet service provider on
+### **Become a cloud & Internet service provider on**
 
 ## **The ThreeFold Grid**
 
@@ -49,111 +64,160 @@ Provide cloud and Internet capacity in your area and become a part of the larges
 {% end %}
 
 
-<!-- section 3 (3Node) -->
 
 
+<!-- section 4 (Host2 Earn) -->
+
 {% row(style="reverse margin") %}
 
-## **It Starts with <span class="blue">3Nodes</span>**
+<h1 class="big_header">Host2<span class="blue">Earn</span></h1>
 
-**<span class="blue">3Nodes</span>**, powered by our stateless operating system, Zero-OS, allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud. Pre-configured plug and earn 3Nodes for beginners, or do it yourself 3Nodes for builders
+<br>
 
-<button>[Get Started](/host)</button>
+#### **It starts with <span class="green_text">Nodes</span>**
+
+<br>
+
+3Nodes allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud: pre-configured plug-and-earn nodes for beginners, or do-it-yourself nodes for builders. 
+
+<br>
+
+Earn TFT by adding capacity to the grid.
+
+<br>
+
+<button class="green">[Host The Cloud](/host)</button>
+<button class="blue_b">[Explore Rewards](https://manual.grid.tf/knowledge_base/farming/farming_reward.html)</button>
 
 |||
 
-![Image](node_home.png#mx-auto)
+![Image](host2_earn.png#mx-auto)
 
 {% end %}
 
+</div>
 
-<!-- section 4 (Partners) -->
 
-{% row( style="center between mtop") %}
 
-## **Our Partners**
+<!-- section 5 (Partners) -->
+<div style="background-color:#F6F6F6">
+<div class="container mx-auto">
 
-### Driving utilization on top of our decentralized autonomous cloud
+{% row(style="margin") %}
+
+![Image](power_ecosystem.png#mx-auto)
+
+|||
+
+
+# **TFT**
+
+### **<span class="green_text">Used For Every Transaction</span>**
+
+## **Powering Our Ecosystem**
+
+TFT powers ThreeFold and the expansion of a truly decentralized infrastructure that can scale any current or future technologies to the edge.
+
+<br>
+
+<button class="green">[Learn More](https://manual.grid.tf/documentation/threefold_token/threefold_token.html)</button>
+<button class="blue_b">[TFT Market Price](https://www.coinbase.com/en-gb/price/threefold)</button>
 
 {% end %}
 
-{% row( style="center between") %}
+</div>
+</div>
 
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
 
-[![](social_network.png#mx-auto)](/partners/social-network)
+
+
+<!-- section extra (Deploy) -->
+
+<div class="container mx-auto">
+
+
+{% row( style="center mtop semiNarrow") %}
+
+#### What’s Possible With ThreeFold
+
+<br>
+
+## **<span class="blue">Deploy</span> On The Grid**
+
+{% end %}
+
+{% row( style="center semiNarrow") %}
+
+<div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
+
+
+Anything that runs on Linux can run on the ThreeFold grid
 
 </div>
 
 |||
 
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
+<div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
 
-[![](ourworld.png#mx-auto)](/partners/our-world-free-zone)
+
+Virtual machines & gateways for easy deploying
 
 </div>
 
 |||
 
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-[![](ict.png#mx-auto)](/partners/tanzania-sovereign-internet)
-
-</div>
-
-{% end %}
+<div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
 
 
-{% row( style="mbottom center between") %}
-
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-[![](sikana.png#mx-auto)](/partners/sikana)
+Use our one-click solutions or build your own
 
 </div>
 
 |||
 
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
+<div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
 
-[![](vevrse.png#mx-auto)](/partners/veverse)
 
-</div>
-
-|||
-
-<div class="shadow-md rounded-md p-2 lg:p-4 my-0 lg:my-4">
-
-[![](vverse.png#mx-auto)](/partners/vverse)
+Flexible advanced deployment options for experienced users
 
 </div>
 
 {% end %}
 
+{% row( style="center mbottom semiNarrow") %}
 
-{% row( style="center between") %}
-
-<button>[View Partners](/partners)</button>
+<button class="green">[Deploy Now](https://dashboard.grid.tf)</button>
+<button class="blue_b">[Dive Deeper](/deploy)</button>
 
 {% end %}
 
-<!-- section 5 (ecentralized) -->
+</div>
+
+
+
+
+<!-- section 6 (ecentralized) -->
+
+<div style="background-color:#F6F6F6">
+<div class="container mx-auto">
 
 {% row( style="mtop center between ") %}
 
 ## **Why Decentralized Cloud**
 
-### How bringing data closer to the end user is beneficial for everyone
+#### <span class="blue">How bringing data closer to the end user is beneficial for everyone</span>
 
 {% end %}
 
+<br>
+
 {% row( style="center semiNarrow") %}
 
 ![Image](latency_reduction.png#tft_img#mx-auto)
 
 <br>
 
-### **Latency Reduction**
+#### **Latency Reduction**
 
 For real-time apps, central cloud delay is prohibitive. Edge Cloud cuts latency locally.
 
@@ -163,7 +227,7 @@ For real-time apps, central cloud delay is prohibitive. Edge Cloud cuts latency
 
 <br>
 
-### **Privacy & Security**
+#### **Privacy & Security**
 
 By processing data locally, edge cloud reduces the exposure to data breaches and cyberattacks.
 
@@ -173,19 +237,19 @@ By processing data locally, edge cloud reduces the exposure to data breaches and
 
 <br>
 
-### **Data Sovereignity**
+#### **Data Sovereignity**
 
 Empowers emerging markets with local data storage, granting digital sovereignty and autonomy.
 
 {% end %}
 
-{% row( style="center semiNarrow") %}
+{% row( style="mbottom center semiNarrow") %}
 
 ![Image](performance.png#tft_img#mx-auto)
 
 <br>
 
-### **Performance**
+#### **Performance**
 
 Provides optimized bandwidth, reliability, and real-time processing which streamlines operations.
 
@@ -195,7 +259,7 @@ Provides optimized bandwidth, reliability, and real-time processing which stream
 
 <br>
 
-### **Cost Efficiency**
+#### **Cost Efficiency**
 
 Minimizes data transmission over networks, cutting costs and reducing central server demand.
 
@@ -205,41 +269,130 @@ Minimizes data transmission over networks, cutting costs and reducing central se
 
 <br>
 
-### **Scalability**
+#### **Scalability**
 
 As devices multiply, central data centers face data overload. Edge cloud distributes processing and boosts scalability.
 
 {% end %}
 
+</div>
+</div>
 
 
-<!-- section 6 (Ecosystem) -->
 
+<!-- section 7 (Ecosystem) -->
 
-{% row( style="center between mtop") %}
+<div class="container mx-auto">
 
-## **Around the Ecosystem**
+{% row( style="center mtop narrow") %}
 
-### News & Happenings
+## **Ecosystem**
+
+### <span class="blue">**Utilization Partners**</span>
+
+ThreeFold’s decentralized autonomous cloud will empower many projects and digital experiences as we grow. Here are some of the first projects to come alive.
 
 {% end %}
 
-{% row( style="center between") %}
+{% row( style="semiNarrow") %}
 
-[![Image](dunia_yetu.png)](/blog/dunia-yetu)
+<div class="rounded_img border-2 rounded-lg shadow-lg">
+
+[![Image](partner_social.png)](/partners/social-network/)
+
+
+<div class="p-6 lg:p-3 mycard">
+
+#### **Social Network**
+
+
+Earth Staking’s Social Network is the first Bitcoin Staking Layer 2 on Earth, collaborating with ThreeFold to improve security, scalability, and energy-efficiency.
+        
+
+</div>
+</div>
+
+|||
+
+<div class="rounded_img border-2 rounded-lg shadow-lg">
+
+[![Image](partner_ourworld.png)](/partners/our-world-free-zone/)
+
+
+
+<div class="p-6 lg:p-3 mycard">
+
+#### **Our World Free Zone**
+
+
+ThreeFold is working with ZICTIA, on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all.
+        
+
+</div>
+</div>
+
+|||
+
+<div class="rounded_img border-2 rounded-lg shadow-lg">
+
+[![Image](partner_sikana.png)](/partners/sikana/)
+
+<div class="p-6 lg:p-3 mycard">
+
+#### **Sikana**
+
+
+Sikana is on a mission to empower individuals with practical skills through free educational videos – local content in local languages on top of local infrastructure.
+        
+
+</div>
+</div>
+
+{% end %}
 
 <br>
 
-#### **A Sovereign Internet in Tanzania**
+{% row( style="center") %}
+
+<button class="blue_b">[Learn More](/partners)</button>
+
+{% end %}
+
+
+<br>
+
+</div>
+
+
+
+
+<!-- section 8 (news) -->
+<div style="background-color:#F6F6F6">
+<div class="container mx-auto">
+
+{% row( style="mtop semiNarrow") %}
+
+## **Latest News**
+
+{% end %}
+
+{% row( style="mbottom semiNarrow") %}
+
+[![Image](latest1.png)](/blog/dunia-yetu)
+
+<br>
+
+##### **A Sovereign Internet in Tanzania**
 
 Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the digital landscape in Tanzania.
 
 |||
 
-[![Image](threefold_cooperative.png)](/blog/threefold-cooperative)
+[![Image](latest2.png)](/blog/threefold-cooperative)
 
 <br>
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <button>[Main Chat](https://t.me/threefold)</button>
 <button>[Our Forum](https://forum.threefold.io)</button>
@@ -247,46 +400,91 @@ Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the
 <button>[More Resources](/community)</button>
 =======
 #### **Cooperative Model is Coming**
+=======
+##### **A Cooperative Model is Coming**
+>>>>>>> development
 
 Cooperatives represent a well-tested form of collective organization and democratic governance.
 
+|||
+
+[![Image](latest4.png)](/blog/edge-computing/)
+
+<br>
+
+##### **Meeting Digital Demand at the Edge**
+
+Learn what edge computing means and what it offers compared to centralized cloud infrastructures.
+
 {% end %}
 
+</div>
+</div>
 
 
 
-<!-- section 7 (Join In) -->
+
+<!-- section 9 (Join In) -->
+<div class="container mx-auto">
 
 {% row(style="center mtop between") %}
 
 ## **Join In**
-
-### Connect & Collaborate: Let's Kickstart Your ThreeFold Journey 
+ 
 
 {% end %}
 
-{% row(style="center between") %}
 
-[![](join3.png)](https://manual.grid.tf)
 
-Dive Deeper into ThreeFold Technologies
+{% row(style="center semiNarrow") %}
+
+<div class="border rounded-md mb-4">
+
+[![](join3.png#icon)](https://manual.grid.tf)
+
+</div>
+
+Dive deeper into our technology
+
+
+
 
 |||
 
-[![](join2.png)](https://threefoldfaq.crisp.help/en/)
+<div class="border rounded-md mb-4">
+
+[![](join2.png#icon)](https://threefoldfaq.crisp.help/en/)
+
+</div>
+
+
 
 Get assistance from our support team
 
+
+
 |||
 
-[![](join1.png)](https://t.me/threefold)
+<div class="border rounded-md mb-4">
 
-Meet the community and join the conversation
+[![](join1.png#icon)](https://t.me/threefold)
 
+</div>
+
+Participate in the conversation
 
 {% end %}
 
-
->>>>>>> 6dca5fcee8852eff3ce5475732c8a34c8b97bebd
-
  </div>
+
+<style>
+
+.card_h{
+  height: 110px !important;
+}
+
+ 
+.rounded_img img {
+  border-radius: 8px;
+}
+  </style>

content/host/index.md

@@ -10,64 +10,69 @@ insert_anchor_links: "left"
 
 {% row(style="header") %}
 
-![Image](header_host.png#mx-auto)
+![Image](hero_host3.png#semilarge#mx-auto)
 
 |||
 
-## **Host <span class="blue">The Cloud,</span><br>Empower Human Potential**
+### **<span class="green">Host the Cloud</span>**
 
-Regardless of technical knowledge, anyone can now become a cloud service provider, bringing local capacity to where people need it most while earning for your contributions. We call this process <span class="blue">**farming**</span>.
+## **<span class="blue">Empower</span> Human Potential**
+
+Regardless of technical knowledge, anyone can now become a cloud service provider, bringing local capacity to where people need it most while earning for your contributions. We call this process <span class="blue">farming</span>.
+
+<br>
+
+<button class="blue_b">[Get A Node](https://manual.grid.tf/documentation/threefold_token/buy_sell_tft/buy_sell_tft.html)</button>
 
 {% end %}
 
-</div>
+
 
 
 
 <!-- section 2 -->
 
-<div class="bg-gray-100">
-
-<div class="container mx-auto">
-
 {% row(style="center narrow mtop") %}
 
 ## How It Works
 
-Three simple steps enabling anyone to become a cloud service provider.
+#### <span class="blue">Three simple steps</span> enabling anyone to become a cloud service provider.
 
 {% end %}
 
 {% row(style="center between") %}
 
-![Image](step1.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 1
-### Host a Node
+![Image](host_node.png#mx-auto)
 
-<br>
+</div>
+
+### **Host a Node**
 
 All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.
 
 |||
 
-![Image](step2.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 2
-### Offer Capacity
+![Image](offer_capacity.png#mx-auto)
 
-<br>
+</div>
+
+### **Offer Capacity**
 
 The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.
 
 |||
 
-![Image](step3.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 3
-### Earn Rewards
+![Image](earn_rewards.png#mx-auto)
 
-<br>
+</div>
+
+### **Earn Rewards**
 
 After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
 
@@ -75,24 +80,24 @@ After your node is set up and verified, you’ll be rewarded for the capacity th
 
 {% row(style="center between mbottom") %}
 
-<button>[Dive Deeper](https://www.manual.grid.tf/knowledge_base/technology/grid3_howitworks.html)</button>
+<button class="green">[Dive Deeper](https://www.manual.grid.tf/knowledge_base/technology/grid3_howitworks.html)</button>
 
 {% end %}
 
 </div>
-</div>
 
 
 
-<div class="container mx-auto">
-
 <!-- section 3 -->
 
+<div style="background-color:#F6F6F6">
+<div class="container mx-auto">
+
 {% row( style="center between mtop") %}
 
 ## **Kickstart Your Journey**
 
-### Documentation and Knowledge
+### **<span class="blue"> Documentation and Knowledge</span>**
 
 You can become a cloud service provider and bring local capacity <br> to where people need it most while earning for your contributions.
 
@@ -100,47 +105,69 @@ You can become a cloud service provider and bring local capacity <br> to where p
 
 <br>
 
-{% row( style="centerItem center semiNarrow mbottom") %}
+{% row( style="centerItem center narrow mbottom") %}
 
 [![Image](get_a_node.png#mx-auto)](https://marketplace.3node.global/)
 
 <br>
 
-#### **Get a Node**
+<div class="text-left">
 
-Today, the best way to buy a node is from independent vendors serving various geographical regions. Nodes are optimized for performance and rewards across different price points.
+#### **Buy a Node**
+
+The best way to buy a node is from independent vendors serving various regions. Nodes are optimized for performance and rewards across different price points.
 
 <br>
 
-<button>[Get](https://marketplace.3node.global/)</button>
+<span class="blue pt-4"> [Learn More](https://marketplace.3node.global/)</span>
+
+<br>
+
+<!-- <button class="blue_b">[Get](https://marketplace.3node.global/)</button> -->
+
+</div>
 
 |||
 
-[![Image](build_a_node.png#mx-auto)](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)
+[![Image](build_node.png#mx-auto)](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)
 
 <br>
 
+<div class="text-left">
+
 #### **Build a Node**
 
 Read our informative guide on how to set up your own 3Node. Optimize your own specs and configuration to ensure a reliable node to join the cloud network.
 
 <br>
 
-<button>[Build](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</button>
+<span class="blue pt-4"> [Learn More](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</span>
+
+<br>
+
+<!-- <button class="blue_b">[Build](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</button> -->
+
+</div>
 
 {% end %}
 
+</div>
+
+</div>
+
+
+
 
 
 
 <!-- section 4 -->
-
+<div class="container mx-auto">
 
 {% row(style="center narrow mtop") %}
 
-## The ThreeFold Dashboard
+## **The ThreeFold <span class="green_text">Dashboard</span>**
 
-The ThreeFold Dashboard is today's go-to-interface for hosters (farmers) and grid users. Create, update and monitor your nodes, estimate your potential earnings, explore and find available nodes on the grid, and much more.
+The ThreeFold Dashboard is today's <span class="blue">go-to-interface</span> for hosters (farmers) and grid users. Create, update and monitor your nodes, estimate your potential earnings, explore and find available nodes on the grid, and much more.
 
 {% end %}
 
@@ -150,13 +177,14 @@ The ThreeFold Dashboard is today's go-to-interface for hosters (farmers) and gri
 
 <br>
 
-<button>[Visit the Dashboard](https://dashboard.grid.tf/)</button>
+<button class="green">[Visit the Dashboard](https://dashboard.grid.tf/)</button>
+<button class="blue_b">[Dasboard walkthrough](https://dashboard.grid.tf/)</button>
 
 {% end %}
 
 <!-- section 5 -->
 
-{% row(style="margin") %}
+{% row(style="mtop") %}
 
 ![Image](people_planet_you.png#mx-auto)
 
@@ -176,4 +204,5 @@ By joining us on this cloud journey, you're not just investing in technology –
 
 {% end %}
 
-</div>
+</div>
+

content/newsroom/wordpress_demo/index.md

@@ -0,0 +1,20 @@
+---
+id: wordpress_demo
+title: 📺 Watch the WordPress Demo & Discussion 
+image_caption: WordPress demo
+description:  Mik and Scott guide us on how to deploy WordPress on the grid in two simple methods
+date: 2024-06-07
+taxonomies:
+    people: [marion_ravarino]
+    tags: [technology,update,threefold_grid,community,news]
+    news-category: [foundation]
+extra:
+    imgPath: wordpress_demo.png
+---
+
+On this week's call, Scott and Mik's discussed and walked us through two simple methods for deploying WordPress on the network: one using a gateway domain and the other using a custom domain both on a planetary network. They provide detailed step-by-step instructions for each method, making the process simple and easy to follow.
+
+<br/>
+
+- Watch the session [here](https://www.youtube.com/watch?v=kd2M03fJeE0)
+- [WordPress docs on the Manual](https://manual.grid.tf/documentation/dashboard/solutions/wordpress.html)

content/tft/index.md

@@ -0,0 +1,169 @@
+---
+title: "TFT"
+description: "About a decade ago, a group of passionate Internet & Cloud veterans came together to build a system." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+  author: Your name here
+  imgPath: tfy/tft_header.png
+---
+
+<!-- section 1 (header) -->
+<div class="container mx-auto">
+
+{% row(style="header reverse") %} 
+
+### <span class="green">**The Medium of Exchange**</span>
+
+<h1 class="leading-none font-semibold"> All Transactions Use One Token: <span class="blue">TFT</span></h1>
+
+<br>
+
+Whether you are hosting the cloud or deploying solutions on the Grid, you will earn or use TFT. Peer-to-peer transactions, no intermediaries.
+
+<br>
+
+<button class="green">[Get A Node](https://marketplace.3node.global/?sl=en)</button> 
+<button class="blue_b">[How To Buy TFT](https://manual.grid.tf/documentation/threefold_token/buy_sell_tft/buy_sell_tft.html)</button>
+
+|||
+
+![Image](tft_header.png#mx-auto)
+
+{% end %}
+
+</div>
+
+
+
+<!-- section 2 arming Process -->
+
+
+<div style="background-color:#F6F6F6">
+
+<div class="container mx-auto">
+
+
+{% row( style="mtop semiNarrow") %}
+
+### **<span class="green_text font-semibold">EARN TFT**</span>
+
+## **The Farming Process**
+
+#### <span class="blue">Host The Cloud </span> And Become A ThreeFold Farmer.
+
+{% end %}
+
+<br>
+
+{% row( style="center semiNarrow") %}
+
+![Image](step1.png#mx-auto)
+
+<br>
+
+**Set up and connect a node to the ThreeFold Grid.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](step2.png#mx-auto)
+
+<br>
+
+**Your node and its capacity is verified by the ThreeFold blockchain.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](step3.png#mx-auto)
+
+<br>
+
+**Earn TFT for the uptime and capacity you provide to the Grid.**
+
+{% end %}
+
+<br>
+
+{% row( style="mbottom center semiNarrow") %}
+
+<button class="green">[Dive Deeper](https://manual.grid.tf/documentation/farmers/farmers.html)</button> 
+
+{% end %}
+
+</div>
+
+</div>
+
+
+
+
+<!-- section 3 Utilization Process -->
+
+<div class="container mx-auto">
+
+{% row( style="mtop semiNarrow") %}
+
+### **<span class="green_text font-semibold">USE TFT**</span>
+
+## **The Utilization Process**
+
+#### <span class="blue">Access  </span> ThreeFold Grid Capacity and <span class="blue">Build</span>
+
+{% end %}
+
+<br>
+
+{% row( style="center narrow") %}
+
+![Image](step3.png#mx-auto)
+
+<br>
+
+**Users pay utilization fees (using TFT) to use compute, storage and network capacity.**
+
+|||
+
+<div class="arrow">
+
+![Image](arrow_right2.png#mx-auto)
+
+</div>
+
+|||
+
+![Image](capacity_2.png#mx-auto)
+
+<br>
+
+**They can then use this capacity to build or deploy on top of the ThreeFold Grid.**
+
+
+{% end %}
+
+<br>
+
+{% row( style="center semiNarrow") %}
+
+<button class="green">[Dive Deeper](https://manual.grid.tf/knowledge_base/cloud/cloud_toc.html)</button> 
+
+{% end %}
+
+</div>
+
+

content/utilization/index.md

@@ -9,49 +9,32 @@ insert_anchor_links: "left"
 
 <div class="container mx-auto">
 
-{% row(style="header") %}
+{% row(style="header reverse") %}
 
-![Image](header_ecosystem.png)
+### **<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.
 
 |||
 
-## **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 (community utilization) -->
 
-{% row(style="reverse margin") %}
-
-## **Community Utilization**
-
-ThreeFold has developed extensive technology and tools for developers and system administrators. ThreeFold is designed for compatibility. Grid users are provided with familiar ways of deploying and managing resources. From decentralized cloud computing and blockchain integration to overseeing infrastructures and optimizing performance, there is a breadth of options for smooth and efficient operation.
-
-<br>
-
-<button>[Developer Docs](https://www.manual.grid.tf/documentation/developers/developers.html)</button>
-<button>[Sysadmin Docs](https://www.manual.grid.tf/documentation/system_administrators/system_administrators.html)</button>
-
-|||
-
-![Image](utilization_community.png#mx-auto)
-
-{% end %}
-
-
-
-
-<!-- section 3  -->
+<!-- section 2  -->
 
 {% row( style="center between mtop") %}
 
-### Core Partners
-## **Building with ThreeFold in 2024**
+### **<span class="blue">Core Partners</span>**
+
+## **Building with ThreeFold**
 
 <br>
 
@@ -60,147 +43,117 @@ Meet the projects with whom we are working closely this year to drive utilizatio
 {% end %}
 
 
-{% row( style="centerItem mtop") %}
+<br>
 
-<div class="my-2 lg:my-6">
 
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
+{% 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)
 
-</div>
-
 <br>
 
-#### Scaling Bitcoin
-<!-- ### <span class="blue">**Social Network**</span> -->
+**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>
 
-<br>
 
-Bitcoin is the clear leader when it comes to the “future of money,” but the network faces key blockchain challenges like scalability, reliability, and energy efficiency. We have known the team behind Earth Staking’s Social Network for some years now and have decided to tackle these issues together. [Visit](/partners/social-network)
 
 </div>
 
-<br>
 
 |||
 
-<div class="my-2 lg:my-6">
 
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
+<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)
 
-</div>
-
 <br>
 
-#### A Sovereign Economic Zone
-<!-- ### <span class="blue">**OurWorld Free Zone**</span> -->
+**A Sovereign Economic Zone**
 
-<br>
+<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>
 
-In July 2023, Dr. Hussein Ali Mwinyi, President of Zanzibar, spoke at a summit hosted by ThreeFold to announce our collaboration (via the Zanzibar Communication Corporation) on the OurWorld Digital Free Zone, the first 100% digital free zone in the world. In 2024, the free zone will come alive, with ThreeFold as the underlying infrastructure. [Visit](/partners/our-world-free-zone)
+<span class="text-base">[Read More](/partners/social-network)</span>
 
 </div>
 
-<br>
 
-{% end %}
+|||
 
 
-{% row( style="centerItem") %}
-
-<div class="my-2 lg:my-6">
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
+<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)
 
-</div>
-
 <br>
 
-#### A Sovereign Internet, By and For Tanzania
-<!-- ### <span class="blue">**ICT Commission (TZ)**</span> -->
+**A Sovereign Internet, By and For Tanzania**
 
-<br>
+<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>
 
-Most countries lose numerous benefits from not owning their own Internet. Digital sovereignty is inexistent and economic gains are lost. Together, with Tanzania's ICT Commission and the tech community in Dar Es Salaam, we will create a sovereign cloud & Internet infrastructure to empower a self-reliant digital ecosystem for Tanzania. [Visit](/partners/tanzania-sovereign-internet)
+<span class="text-base">[Read More](/partners/tanzania-sovereign-internet)</span>
 
 </div>
 
-<br>
+{% end %}
 
-|||
 
-<div class="my-2 lg:my-6">
+{% row( style="semiNarrow") %}
 
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
+<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)
 
-</div>
-
 <br>
 
-#### Education For All
-<!-- ### <span class="blue">**Sikana**</span> -->
+**Education For All**
 
-<br>
+<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>
 
-Sikana has delivered over 400 million lessons via free educational videos but because of this incredible scale they could not afford hosting costs. With ThreeFold, Sikana will be able to extend their reach, creating and distributing local content in local languages on top of local infrastructure. [Visit](/partners/sikana)
+<span class="text-base">[Read More](/partners/sikana)</span>
 
 </div>
 
-<br>
-
-{% end %}
-
-{% row( style="centerItem") %}
-
-<div class="my-2 lg:my-6">
-
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
-
-[![Image](veverse_logo.png#icon#mx-auto)](/partners/veverse)
-
-</div>
-<br>
-
-#### Own Your Metaverse
-<!-- ### <span class="blue">**VeVerse**</span> -->
-
-<br>
-
-We met the founder of VeVerse several years ago, who had the vision to democratize access to art globally through metaverse technology. Together we agreed that we would work to turn that vision into reality in a fair and just way. Now in 2024, we plan to bring VeVerse on top of the ThreeFold Grid. [Visit](/partners/veverse) 
-
-</div>
-
-<br>
-
 |||
 
-<div class="my-2 lg:my-6">
 
-<div class="shadow-md rounded-md border-solid border-2 border-gray-100 p-2 lg:p-4 my-0 lg:my-4">
+<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)
-
-</div>
-<br>
-
-#### Metaverse Meets Edge Cloud
-<!-- ### <span class="blue">**VVerse**</span> -->
+[![Image](veverse_logo.png#icon#mx-auto)](/partners/veverse)
 
 <br>
 
-VVerse (not to be confused with VeVerse) is one of the most capable metaverse technologies. The ThreeFold Grid will render it in the cloud and use low-latency connection to stream VVerse’s virtual environments with video-like quality. Significant capacity is required to roll out this metaverse. [Visit](/partners/vverse) 
+**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>
 
-</div>

css/index.css

@@ -8,9 +8,7 @@
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 /* Custom CSS for header partial */
 .backdrop-blur {
@@ -54,6 +52,10 @@ img[src*="#social"] {
   margin: auto;
 }
 
+img[src*="#semilarge"] {
+  width: 500px;
+  margin: auto;
+}
 
 img[src*="#large"] {
   width: 700px;
@@ -76,6 +78,78 @@ a img:hover{
   cursor: pointer;
 }
 
+/* new theme */
+
+.dropdown { 
+  @apply
+  lg:text-lg
+  px-6
+  py-1
+  lg:mr-5
+  my-3
+  shadow
+  bg-white
+  border-black
+  capitalize 
+  leading-6 
+  border-transparent 
+  flex 
+  flex-col
+  border-2 
+  w-full 
+  items-start
+  rounded 
+  transition 
+  hover:first:text-gray-500 
+  hover:border-stone-200 
+  hover:bg-stone-100 
+  p-2 
+  text-left
+}
+
+.dropdown a{
+  @apply
+  px-0
+}
+
+.green{
+
+  background-color:#58CF77 !important;
+  color: #fff !important;
+
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+.green a{
+   color: #fff !important;
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+
+.green_text{
+color: #58CF77 ;
+}
+
+
+  .blue_b{
+
+  background-color:#2E83FF !important;
+  color: #fff !important;
+
+}
+.blue_b a{
+   color: #fff !important;
+}
+
+.blue_b:hover {
+background-color:#5596f5 !important;
+}
+
+
 .footer-cust a{
   color: #999; 
   cursor: pointer;
@@ -93,9 +167,7 @@ a img:hover{
   width:200px
 }
 
-h1 {
-  line-height: 3rem;
-}
+
 .blue{
   color:#2E83FF
 }
@@ -134,14 +206,38 @@ h1 {
   background-color: rgb(245 245 244 / var(--tw-bg-opacity));
 }
 
+.big_header{
+  font-size: 6rem !important;
+  font-weight: 500 !important;
+}
+
+.mycard{
+  height: 240px !important;
+}
+
+
+.mypartners{
+  height: 300px !important;
+
+}
+
+.key_card{
+
+  height: 210px;
+
+}
+
+
 @layer components {
   h1 {
     @apply text-4xl lg:text-6xl font-normal;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h2 {
     @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
@@ -149,22 +245,27 @@ h1 {
   h3 {
     @apply text-2xl lg:text-3xl my-4 font-extralight;
     color: #2b2b2b;
+    font-family: "Lato", sans-serif !important;
   }
   h3 strong {
     @apply font-normal;
   }
   h4 {
     @apply text-xl lg:text-2xl font-normal;
+    font-family: "Lato", sans-serif !important;
   }
   h5 {
-    @apply text-md my-1 tracking-widest text-zinc-500 font-semibold;
+    @apply text-lg my-1 tracking-normal font-semibold;
+    font-family: "Lato", sans-serif !important;
   }
   h6 {
     @apply text-md not-italic font-normal my-1;
+    font-family: "Lato", sans-serif !important;
   }
   p {
     @apply text-lg;
     color: #3d3d3d;
+    font-family: "Lato", sans-serif !important;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -178,10 +279,11 @@ h1 {
   button {
     @apply 
     inline-block
-    lg:text-lg
+    md:text-md
+    text-sm
     lg:mr-3
     py-1
-    my-4
+    my-2
     border
     rounded
     shadow
@@ -204,23 +306,25 @@ h1 {
 
   }
 
+ 
+
 
   .article h2{
     font-size: 2.25rem;
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
     line-height: 1.5;
     font-weight: 700;
     color:#333;
   }
   
   .article h1{
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
   }
 
   }
   .article p{
     font-size: 1.125rem;
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
     line-height: 1.7;
     color:#333
   }
@@ -234,10 +338,10 @@ h1 {
   }
 
   .article li{
-    font-size: 1.125rem;
+    font-size: 1rem;
   }
   .main-title {
-    font-family: Lato,sans-serif!important;
+    font-family: "Lato", sans-serif;
   }
 
 
@@ -254,7 +358,7 @@ button a {
   line-height: 1.3;
   @apply
   text-black
-  px-12
+  px-8
 }
 
 .long-text a{
@@ -269,7 +373,7 @@ a {
 }
 
 header {
-  font-family: "Work Sans";
+  font-family: "Lato", sans-serif;
 }
 
 .nav_btn {
@@ -413,15 +517,15 @@ header {
 }
 
 .my-test{
-  font-family: "Work Sans", sans-serif !important;
+  font-family: "Lato", sans-serif;
 } 
 .post-content-text .my-test  {
-  font-family: "Work Sans", sans-serif !important;
+  font-family: "Lato", sans-serif;
   line-height: 1.7;
 }
 
 .post-content-text h2 {
-  font-family: Lato,sans-serif!important;
+  font-family: "Lato", sans-serif;
   line-height: 1.5;
   font-size: 2.25rem;
   font-weight: 700;
@@ -454,6 +558,12 @@ header {
   .banner h2 svg {
     font-size: 30px;
   }
+  .arrow img{
+    -moz-transform:rotate(90deg);
+   -webkit-transform:rotate(90deg);
+   -ms-transform:rotate(90deg);
+   transform: rotate(90deg);   
+   }
 }
 
 @media (max-width: 480px) {
@@ -474,36 +584,24 @@ header {
   img[src*="#sm_none"] {
     display: none;
   }
+
+  .big_header{
+    font-size: 4rem !important;
+   
+  }
+
+  .mytest{
+    height: auto;
+  }
+
+  .key_card{
+    height: auto;
+  }
+
+  .mypartners{
+    height: auto;
+  
+  }
+  
 }
 
-header #menu button { 
-  @apply
-  lg:text-lg
-  px-6
-  py-1
-  lg:mr-5
-  my-3
-  shadow
-  bg-white
-  border-black
-  capitalize 
-  leading-6 
-  border-transparent 
-  flex 
-  flex-col
-  border-2 
-  w-full 
-  items-start
-  rounded 
-  transition 
-  hover:first:text-gray-500 
-  hover:border-stone-200 
-  hover:bg-stone-100 
-  p-2 
-  text-left
-}
-
-header #menu button a{
-  @apply
-  px-0
-}

tailwind.config.js

@@ -51,6 +51,15 @@ module.exports = {
           '2xl': '1450px',
           // => @media (min-width: 992px) { ... }
         },
+        animation: {
+          'infinite-scroll': 'infinite-scroll 25s linear infinite',
+      },
+      keyframes: {
+          'infinite-scroll': {
+              from: { transform: 'translateX(0)' },
+              to: { transform: 'translateX(-100%)' },
+          }
+      }                    
       },
   },
   plugins: [], // if we add forms, do it here

templates/_default/base.html

@@ -45,7 +45,7 @@
   <div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
     {% block content %}{% endblock %}
   </div>
-  <div class="p-8">
+  <div class="px-4 md:px-8">
     {% include "partials/footer.html" %}
   </div>
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>

templates/partials/footer.html

@@ -8,9 +8,9 @@
 
 <html>
     <head /><body>
-        <div class="mt-6 border-t border-gray-200 pt-2"></div>
+        <div class="mt-20 border-t border-gray-200"></div>
         <footer class="bg-white">
-          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
             <div class="xl:flex xl:gap-4">
               <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
                 <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
@@ -25,7 +25,7 @@
             </div>
               
               </div>
-              <div  class="mt-12 mx-auto border-t border-gray-200 pt-8">
+              <div  class="mt-6 mx-auto border-t border-gray-200 pt-8">
                 <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
                 © <span id="year"></span> ThreeFold, All rights reserved.
                 <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |

templates/partials/header.html

@@ -186,7 +186,7 @@
                                         <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
                                     {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
-                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
                                         {{ header_arr[1] | safe }}
                                     </div>
                     
@@ -196,7 +196,7 @@
                     {% endfor %}
                     {% set section = get_section(path="footer/_index.md")%}
                     {%- set logoPath = section.extra.logoPath %}
-                    <div class="mx-8 mt-8">
+                    {# <div class="mx-8 mt-8">
                         <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
                           <img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
                           <p class="text-gray-500 text-base leading-6 ">
@@ -205,7 +205,7 @@
                           {% include "partials/socialLinks.html" %}
                       </div>
                     </nav>                    
-                </div>
+                </div> #}
             
         </div>
         

templates/shortcodes/grid_stats.html

@@ -1,64 +1,75 @@
 {% set styles = "background-image: url('images/V3.png');" %}
 <section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
-    <div class="relative lg:max-w-6xl mx-auto">
+    <div class="relative mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
-            <div class="items my-10 grid lg:grid-cols-4 lg:gap-8 animate-pulse">
+            <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                 <!-- capacity -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
-                        width="150"
+                        width="130"
                         alt=""
                     >
-                    <div id="capacity" class="leading-none font-extrabold text-3xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
-                </div>
-                <!-- Nodes -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img
-                        class="mx-auto p-4"
-                        src="images/V3-09.png"
-                        width="150"
-                        alt=""
-                    >
-                    <div id="nodes" class="leading-none font-extrabold text-3xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
-                </div>
-                <!-- countries -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img
-                        class="mx-auto p-4"
-                        src="images/V3-10.png"
-                        width="150"
-                        alt=""
-                    >
-                    <div id="countries" class="leading-none font-extrabold text-3xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
+                    <div id="capacity" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- cores -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"
-                        width="150"
+                        width="130"
                         alt=""
                     >
-                    <div id="cores" class="leading-none font-extrabold text-3xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                    <div id="cores" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">cores</span>
+                </div>
+                <!-- Nodes -->
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-09.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="nodes" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">nodes</span>
+                </div>
+                <!-- countries -->
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-10.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="countries" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">countries</span>
+                </div>
+                 <!-- farms -->
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <img
+                        class="mx-auto p-4"
+                        src="images/farm.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
+                    <span class="block text-md mt-4 font-normal capitalize">farms</span>
                 </div>
             </div>
-            <button class="my-8">
+            <button class="my-8 blue_b">
                 <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
-                    Explore ThreeFold Grid Capacity
+                    Explore Grid Capacity
                 </a>
             </button>
-            <button class="my-8">
+            {# <button class="my-8">
                 <a href="/host" target="_self">
                     Become a Cloud Provider
                 </a>
-            </button>
+            </button> #}
         </div>
     </div>
 </section>
@@ -77,4 +88,27 @@
     .bg-pink {
         background-color: #ea1ff7;
     }
+
+    .blue_b{
+  
+        background-color:#2E83FF !important;
+        color: #fff !important;
+    
+      }
+      .blue_b a{
+         color: #fff !important;
+      }
+    
+    .blue_b:hover {
+      background-color:#5596f5 !important;
+    }
+
 </style>
+
+
+
+ 
+  
+
+    
+   

templates/shortcodes/hovevision.html

@@ -0,0 +1,59 @@
+
+<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
+    <div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
+     <h1 class="font-semibold">The Vision</h1>
+     <h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
+    </div>
+    <div class="w-full md:w-2/3">
+        <div class="flex flex-wrap justify-center md:justify-end">
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+
+<style>
+
+    .cardhover{
+        background-color: rgba(224, 224, 224, 0);
+
+        
+    }
+
+    .cardhover:hover{ 
+        background-color: rgba(224, 224, 224, 0.8);
+        animation-duration: 200;
+        
+    }
+
+
+    @media (max-width: 640px) {
+        .cardhover{ 
+            background-color: rgba(224, 224, 224, 0.8);
+            
+            
+        }
+    }
+</style>
+
+
+

templates/shortcodes/logo_slider.html

@@ -0,0 +1,97 @@
+
+{# <div class="flex space-x-12 justify-center">
+    <img loading="lazy" src="images/zictia_black.png" class="test" alt="Image 1" />
+    <img loading="lazy" src="images/vverse_black.png" class="test" alt="Image 2" />
+    <img loading="lazy" src="images/social_network_black.png" class="test" alt="Image 3" />
+    <img loading="lazy" src="images/vevrse_black.png" class="test" alt="Image 4" />
+    <img loading="lazy" src="images/sikana_black.png" class="test" alt="Image 5" />
+    <img loading="lazy" src="images/ourworld_black.png" class="test" alt="Image 6" />
+    <img loading="lazy" src="images/ict_black.png" class="test" alt="Image 7" />
+    <img loading="lazy" src="images/holochain_black.png" class="test" alt="Image 8" />
+    <img loading="lazy" src="images/temple_black.png" class="test" alt="Image 9" />
+    
+  </div> #}
+  
+
+  <div class="border-t-2 mb-6 border-gray-200"></div>
+
+  <div
+  x-data="{}"
+  x-init="$nextTick(() => {
+      let ul = $refs.logos;
+      ul.insertAdjacentHTML('afterend', ul.outerHTML);
+      ul.nextSibling.setAttribute('aria-hidden', 'true');
+  })"
+  class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
+>
+
+<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
+    <li>
+        <img src="images/zictia_black.png" alt="Facebook" />
+    </li>
+    <li>
+        <img src="images/vverse_black.png" alt="Disney" />
+    </li>
+    <li>
+        <img src="images/social_network_black.png" alt="Airbnb" />
+    </li>
+    <li>
+        <img src="images/vevrse_black.png" alt="Apple" />
+    </li>
+    <li>
+        <img src="images/ict_black.png" alt="Spark" />
+    </li>
+    <li>
+        <img src="images/holochain_black.png" alt="Samsung" />
+    </li>
+    <li>
+        <img src="images/sikana_black.png" alt="Quora" />
+    </li>
+    <li>
+        <img src="images/ourworld_black.png" alt="Sass" />
+    </li>
+    <li>
+        <img src="images/temple_black.png" alt="Sass" />
+    </li>
+</ul> 
+<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
+    <li>
+        <img src="images/zictia_black.png" alt="Facebook" />
+    </li>
+    <li>
+        <img src="images/vverse_black.png" alt="Disney" />
+    </li>
+    <li>
+        <img src="images/social_network_black.png" alt="Airbnb" />
+    </li>
+    <li>
+        <img src="images/vevrse_black.png" alt="Apple" />
+    </li>
+    <li>
+        <img src="images/ict_black.png" alt="Spark" />
+    </li>
+    <li>
+        <img src="images/holochain_black.png" alt="Samsung" />
+    </li>
+    <li>
+        <img src="images/sikana_black.png" alt="Quora" />
+    </li>
+    <li>
+        <img src="images/ourworld_black.png" alt="Sass" />
+    </li>
+    <li>
+        <img src="images/temple_black.png" alt="Sass" />
+    </li>
+</ul> 
+
+</div>
+<div class="border-t-2 mt-6 border-gray-200"></div>
+
+
+<style>
+    ul {
+        list-style-type: none;
+      }
+</style>
+
+

templates/shortcodes/roadmap.html

@@ -0,0 +1,99 @@
+<!-- Timeline section -->
+<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
+    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
+      <div>
+        <time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 1
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">CREATION OF CORE TECH</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+              +10 years of development.
+            </li>
+            <br>
+            <li>
+              A new operating system and quantum safe storage  system.
+            </li>
+            <br>
+            <li>
+              A custom blockchain and self healing engine for autonomous operation.
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 2
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">PROOF OF CONCEPT</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+              Grow to global deployment: prove the autonomous operation and scalability.
+            </li>
+            <br>
+            <li>
+              Largest and most advanced decentralized autonomous cloud network in the world.
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="blue" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 3 
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">EXPANSION | CURRENT PHASE</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                +1 million nodes.
+            </li>
+            <br>
+            <li>
+                Open Source Mode & Commercial Mode
+                Version 3 (TFT) & Version 4 (INCA)
+            </li>
+            <br>
+            <li>
+              Service Levels & Supportability
+            </li>
+            <br>
+            <li>
+                Utilization on larger scale (but can only happen once enough nodes)
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="text-gray-500" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 4
+          <div class=""></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">FULLY FLEDGED ECOSYSTEM</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                Millions of Nodes Enabled.
+            </li>
+            <br>
+            <li>
+                Grow Utilization to +60%.
+            </li>
+            <br>
+            <li>
+                A credible and widespread alternative to centralized clouds.
+            </li>
+        </ul>
+      </div>
+    </div>
+  </div>

templates/shortcodes/row.html

@@ -51,7 +51,7 @@ Parameters:
     {% set row_class = row_class ~ " lg:items-center" %}
 {% endif %}
 
-{% set col_class = "flex-1 mb-6 md:mb-0 px-4 md:px-12" %}
+{% set col_class = "flex-1 mb-6 md:mb-0 px-2 md:px-4" %}
 {% set row_id = '' %}
 
 {% if id %}
@@ -74,7 +74,7 @@ Parameters:
 
     {% if "center" in style %}
         {% set row_class = row_class ~ " text-center mx-auto justify-center" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     {% if "text-white" in style %}
@@ -84,23 +84,23 @@ Parameters:
     <!-- makes row with margins -->
     {% if "margin" in style %}
         {% set row_class = row_class ~ " lg:py-24 py-10" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     <!-- makes row with margins -->
     {% if "header" in style %}
         {% set row_class = row_class ~ " h-auto md:h-screen mt-4 lg:mt-0" %}
-        {% set col_class = col_class ~ " m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " mt-3" %}
     {% endif %}
 
     {% if "mtop" in style %}
         {% set row_class = row_class ~ " lg:pt-24 pt-2" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     {% if "mbottom" in style %}
         {% set row_class = row_class ~ " lg:pb-24" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     <!-- makes row full screen width, strips margins -->

templates/shortcodes/storymap.html

@@ -0,0 +1,118 @@
+<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
+
+    <!-- Item #1 -->
+    <div class="relative hidden flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        {# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Order Placed</div>
+                <time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
+            </div>
+            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
+        </div> #}
+    </div>
+    
+    <!-- Item #2 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 1:</div> #}
+                {# <div class="font-caveat font-semibold text-lg">OUR JOURNEY BEGAN</div> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue">OUR JOURNEY BEGAN </span>with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #3 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 2:</div> #}
+                {# <time class="font-caveat font-semibold green_text">In response,</time> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">In response, </span>we came together with a shared mission—to design a revolutionary decentralized, open-source, inclusive, and sustainable Cloud solution for all.  </p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #4 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 3:</div> #}
+                {# <div class="font-caveat font-semibold blue">Today</div> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Today </span>
+                as we embark on the commercialization phase, the ThreeFold Grid is in its third generation technology and live in ±60 countries, significant milestones in our ongoing commitment to redefine the future of the digital landscape.
+            </p>
+           
+        </div>
+    </div>
+
+    <!-- Item #5 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 2:</div> #}
+                {# <time class="font-caveat font-semibold green_text">In response,</time> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Project Internet Capacity</span> is the fourth generation of the ThreeFold Grid, the accumulation of years of work by ThreeFold. Project INCA aims to be a Layer 0 for the DePIN community and involves the launch of a new token, INCA, on the Solana blockchain. Learn more <a href="https://internetcapacity.org/">here.</a></p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #6 -->
+    {# <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+                <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Delivered</div>
+                <time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
+            </div>
+            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
+        </div>
+    </div> #}
+
+</div>
+