Merge branch '3.10.0' of github.com:threefoldfoundation/www_threefold_io into 3.10.0

content/about/index.md

@@ -5,26 +5,39 @@ insert_anchor_links: "left"
 ---
 <!-- section 1 (header) -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat" style="background-image:url(BG_wide.png);background-position:right">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="header_about.png" class="w-full h-full"/>
+                src="about_geometric_header.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
           <div class="flex flex-col items-start justify-center p-6">
-            <h1>Genesis</strong></h1>
-            <h3 class="my-1"><b>It all Started with a Vision About a Decade ago</b></h3>
+            <h2>It All Started a Decade Ago</strong></h2>
             <p>When we saw how the Internet's existing infrastructure was becoming increasingly centralized, controlled by a handful of tech giants, and posed a threat to privacy and sovereignty, we knew it was time for a change. That's why we founded ThreeFold.</p>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](about_header_geometric.png#mx-auto)
+
+|||
+
+## It All Started a Decade Ago
+
+When we saw how the Internet's existing infrastructure was becoming increasingly centralized, controlled by a handful of tech giants, and posed a threat to privacy and sovereignty, we knew it was time for a change. That's why we founded ThreeFold.
+
+
+{% end %}
 
 
 <!-- section 2 -->
@@ -39,16 +52,28 @@ insert_anchor_links: "left"
 
 {% row( style="center between") %}
 
+![Image](opensource.png#icon)
+
+<br>
+
 ### **Open-Source**
 Collaboration and openness are key to building a better world.
 
 |||
 
+![Image](simplicity.png#icon)
+
+<br>
+
 ### **Simplicity**
 Fostering clarity. Driving innovation. Enabling scalability.
 
 |||
 
+![Image](authenticity.png#icon)
+
+<br>
+
 ### **Authenticity**
 We are genuine and vulnerable.
 
@@ -56,11 +81,15 @@ We are genuine and vulnerable.
 
 {% row( style="center between mbottom") %}
 
+![Image](planetfirst.png#icon)
+
 ### **Planet-First**
 Our solutions must be sustainable.
 
 |||
 
+![Image](peoplefirst.png#icon)
+
 ### **People-Centric**
 We empower self-sovereignty and autonomy.
 
@@ -101,7 +130,7 @@ We empower self-sovereignty and autonomy.
 
 {% row(style="center narrow mbottom") %}
 
-![Image](earth.png#medium)
+![Image](earth2.png#medium)
 
 ### **Green Infrastructure**
 
@@ -109,7 +138,7 @@ There is no Planet B. And the Internet is consumed a surprisingly large amount o
 
 |||
 
-![Image](community.png#medium)
+![Image](community2.png#medium)
 
 ### **Driving Change Together**
 
@@ -144,24 +173,7 @@ Our mission is to realize the vision of a decentralized, self-sovereign digital
 ### <i>**"Never doubt that a small group of thoughtful, committed citizens <br> can change the world; indeed, it's the only thing that ever has."**</i> 
 ### - Margaret Mead
 
+</div>
+
 {% end %}
 
-<style>
-
-.bgtest{
-
-  background-image: url("checkerboard.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.bgtest2{
-
-  background-image: url("checker4.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-  
-  </style>

content/build/index.md

@@ -5,20 +5,19 @@ insert_anchor_links: "left"
 ---
 <!-- section 1  -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat" style="background-image:url(BG_wide.png);background-position:right">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="header_build.png" class="w-full h-full"/>
+                src="build_header_geometric.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
           <div class="flex flex-col items-start justify-center p-6">
-            <h1>Build the Future</strong></h1>
-            <h3 class="my-1"><b>Develop and Administer on a Decentralized Autonomous Edge Cloud</b></h3>
-            <p>Experience true ownership of your deployments with a decentralized framework. Evolve the way you create and deploy innovative solutions, with greater scalability, efficiency, privacy, and security.</p>
+            <h2>Build the Future</strong></h2>
+            <p>Deploy and administer on a decentralized autonomous edge infrastructure. Experience true ownership of your deployments with a decentralized framework. Evolve the way you create and deploy innovative solutions, with greater scalability, efficiency, privacy, and security.</p>
             <div class="flex flex-col md:flex-row">
             <button class="mx-1 my-2"><a target="_blank" href="https://manual.grid.tf">Our Manuals</a></button>
             <button class="mx-1 my-2"><a target="_blank" href="https://dashboard.grid.tf">Grid Dashboard</a></button>
@@ -27,7 +26,25 @@ insert_anchor_links: "left"
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
+
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](build_header_geometric.png)
+
+|||
+
+## Build the Future
+
+Deploy and administer on a decentralized autonomous edge infrastructure. Experience true ownership of your deployments with a decentralized framework. Evolve the way you create and deploy innovative solutions, with greater scalability, efficiency, privacy, and security.
+
+<button>[Our Manuals](https://manual.grid.tf)</button>
+<button>[Grid Dashboard](https://dashboard.grid.tf)</button>
+
+{% end %}
+
 
 
 
@@ -50,7 +67,7 @@ The ThreeFold Team and community have spent countless hours creating written and
 
 {% end %}
 
-
+</div>
 
 <!-- section 3  -->
 
@@ -141,7 +158,7 @@ ThreeFold has made it possible for anyone to run their own Mastodon instance, si
 
 Deploy solutions with ease using Weblets, our user-friendly and decentralized web components. Access a variety of environments and ready-to-use community solutions – such as full Virtual Machines, Kubernetes, CapRover, and Umbrel – in our interactive playground. The simplest way to build on top of the grid.
 
-<button>[Visit the Playground](https://manual.grid.tf/weblets/weblets_home.html)</button>
+<button>[Visit the Playground](https://play.grid.tf/#/)</button>
 
 |||
 
@@ -163,6 +180,8 @@ Deploy solutions with ease using Weblets, our user-friendly and decentralized we
 
 {% row(style="center mbottom between") %}
 
+![Image](iac.png#medium)
+
 ### **Infrastructure as Code**
 
 Revolutionize your IT deployments with machine-readable definition files, and enjoy seamless integration with industry standards such as Terraform. Enhance provisioning with deterministic smart contracts, minimize overheads, and boost your efficiency.
@@ -173,6 +192,8 @@ Revolutionize your IT deployments with machine-readable definition files, and en
 
 |||
 
+![Image](dedicated.png#medium)
+
 ### **Dedicated Nodes**
 
 Achieve ultimate control and flexibility by reserving entire nodes tailored for your projects.
@@ -186,6 +207,8 @@ Optimize security and customization for high-demand workloads, such as blockchai
 
 |||
 
+![Image](quantum.png#medium)
+
 ### **Quantum Safe Storage**
 
 Experience the boundless possibilities of a distributed, quantum-proof storage system – designed to encrypt, compress, shard, and distribute your data, empowering you with unmatched security, scalability, and efficiency.
@@ -237,7 +260,7 @@ Earn up to 50% of the utilization revenues of solutions that you create, promote
 
 <!-- <a href="https://forum.threefold.io/" target="_blank"><h3>Forum</h3></a> -->
 
-![Image](Forum.png#icon)
+![Image](forum1.png#icon)
 
 ### **Forum**
 
@@ -250,7 +273,7 @@ Connect with our vibrant community, share ideas, and contribute to collective kn
 
 <!-- <a href="https://github.com/threefoldtech/home" target="_blank"><h3>Open Source</h3></a> -->
 
-![Image](Open-Source.png#icon)
+![Image](open-source1.png#icon)
 
 ### **Open Source**
 
@@ -270,7 +293,7 @@ Help shape ThreeFold's decentralized ecosystem on GitHub. Collaboration is key t
 
 <!-- <a href="/farm" target="_blank"><h3>Farming</h3></a> -->
 
-![Image](Farming.png#icon)
+![Image](farming1.png#icon)
 
 ### **Farming**
 
@@ -283,7 +306,7 @@ Contribute resources and earn rewards while supporting the growth of the ThreeFo
 
 <!-- <a href="/support"><h3>Support</h3></a> -->
 
-![Image](Support.png#icon)
+![Image](support1.png#icon)
 
 ### **Support**
 

content/expand/index.md

@@ -6,32 +6,42 @@ insert_anchor_links: "left"
 
 <!-- section 1 (be the Internet) -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat" style="background-image:url(BG_wide.png);background-position:right">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="togethericon.png" class="w-full h-full"/>
+                src="expand_geometric_header.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
           <div class="flex flex-col items-start justify-center p-6">
-            <h1>Be the <strong>Internet</strong></h1>
-            <h3 class="my-1"><b>Host a node, support a decentralized future</b></h3>
-            <p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
+            <h2>Be the <strong>Internet</strong></h2>
+            <p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Support a decentralized future. Take part in shaping a new Internet era governed by all of us.</p>
             <button class="mx-0"><a target="_blank" href="https://manual.grid.tf/TF_Farmer_Guide/tf_farmer_guide_readme.html">Get Started</a></button>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 
-<br>
 
-<br>
+<div class="container mx-auto">
 
-<br>
+{% row(style="header") %}
+
+![Image](expand_header.png#mx-auto)
+
+|||
+
+## Be the **Internet**
+
+By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Support a decentralized future. Take part in shaping a new Internet era governed by all of us.
+
+<button>[Get Started](https://manual.grid.tf/TF_Farmer_Guide/tf_farmer_guide_readme.html)</button>
+
+{% end %}
 
 
 
@@ -58,7 +68,7 @@ insert_anchor_links: "left"
 
 {% row(style="center between mbottom") %}
 
-![Image](host.png#mx-auto)
+![Image](step1.png#mx-auto)
 
 <br>
 
@@ -68,7 +78,7 @@ All you need to get started is a modern computer, electricity and network. Once
 
 |||
 
-![Image](verif.png#mx-auto)
+![Image](step2.png#mx-auto)
 
 <br>
 
@@ -78,7 +88,7 @@ The capacity of the node gets verified and registered in the ThreeFold Blockchai
 
 |||
 
-![Image](earn.png#mx-auto)
+![Image](step3.png#mx-auto)
 
 <br>
 
@@ -91,9 +101,9 @@ After your node is set up and verified, you’ll be rewarded for the compute, st
 
 <!-- section 4  -->
 
-{% row(style="center between margin") %}
+{% row(style="between margin") %}
 
-![](nodeheader.png#mx-auto)
+![](expand_findyourfit_geometric.png#medium#mx-auto)
 
 |||
 
@@ -134,3 +144,5 @@ The more people use TFT, the more TFT will be ‘burnt’, reducing the overall
 
 
 {% end %}
+
+</div>

content/footer/_index.md

@@ -10,43 +10,37 @@ extra:
 
 {% row(style="lean") %}
 
-##### PARTICIPATE
+##### TAKE ACTION
 
 <br>
 
-###### [Talk to ThreeFolders](https://t.me/threefold)
+###### [Manuals](https://manual.grid.tf/)
 
 ###### [Buy the Token](https://library.threefold.me/info/threefold#/tokens/threefold__token_howtos)
 
 ###### [Start Farming](https://manual.grid.tf/TF_Farmer_Guide/tf_farmer_guide_readme.html)
 
-###### [Farming Community](https://t.me/threefoldfarmers)
-
 ###### [Use the Dashboard](https://dashboard.grid.tf/)
 
-###### [Testing Community](https://t.me/threefoldtesting)
-
 ###### [ThreeFold Connect: iOS](https://apps.apple.com/us/app/3bot-login/id1459845885)
 
 ###### [ThreeFold Connect: Android](https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en_US)
 
 |||
 
-##### KNOWLEDGEBASE
+##### TALK TO HUMANS
 
 <br>
 
-###### [ThreeFold Grid](https://library.threefold.me/info/threefold#/tfgrid/threefold__tfgrid_home)
+###### [Main Community](https://t.me/threefold)
 
-###### [ThreeFold Technology](https://library.threefold.me/info/threefold/#/technology/threefold__zos)
+###### [Farming Community](https://t.me/threefoldfarmers)
 
-###### [ThreeFold Farming](https://library.threefold.me/info/threefold/#/tfgrid/farming/threefold__farming_home)
+###### [Grid User Community](https://t.me/threefoldtesting)
 
-###### [ThreeFold Token](https://library.threefold.me/info/threefold/#/tokens/threefold__tokens_home)
+###### [Forum](https://forum.threefold.io/)
 
-###### [Manuals](https://manual.grid.tf/)
-
-###### [ThreeFold Glossary](https://library.threefold.me/info/threefold/#/threefold__definitions_concepts)
+<h6><a target="_self" onclick="window.location.href='/support'">Support</a></h6>
 
 |||
 
@@ -58,12 +52,10 @@ extra:
 
 <h6><a target="_self" onclick="window.location.href='/partners'">Partners</a></h6>
 
+<h6><a target="_self" onclick="window.location.href='/people'">People</a></h6>
+
 <h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
 
 <h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
 
-###### [Forum](https://forum.threefold.io/)
-
-<h6><a target="_self" onclick="window.location.href='/support'">Support</a></h6>
-
 {% end %}

content/header/index.md

@@ -67,14 +67,6 @@ extra:
 
 #### Resources 
 
-<button onclick="openInNewTab('https&#58;//library.threefold.me/info/threefold#/')">
-
-[Library](https://library.threefold.me/info/threefold#/)
-<br>
-<p class="text-sm">Explore the Documentation</p>
-
-</button>
-
 <button onclick="openInNewTab('https&#58;//manual.grid.tf')">
 
 [Manual](https://manual.grid.tf)
@@ -83,7 +75,7 @@ extra:
 
 </button>
 
-<button onclick="openInNewTab('https&#58;//github.com/')">
+<button onclick="openInNewTab('https&#58;//github.com/threefoldtech')">
 
 [GitHub](https://github.com/threefoldtech/)
 <br>

content/home/index.md

@@ -11,28 +11,41 @@ extra:
 
 <!-- section 1 (header) -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat" style="background-image:url(home/BG_wide.png);background-position:right">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="home/header_home2.png" class="w-full h-full"/>
+                src="home/home_header_geometric.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
           <div class="flex flex-col items-start justify-center p-6">
-            <h1>Welcome to ThreeFold</strong></h1>
-            <!-- <h3 class="my-1">Host a node, support a decentralized future</h3> -->
-            <p>ThreeFold is a decentralized, peer-to-peer, open-source Internet platform, allowing people to provide and utilize Internet capacity directly – without intermediaries.
-            <br>
-            A sovereign alternative to the centralized Internet.</p>
+            <h2>Decentralized. Autonomous. Internet Infrastructure.</strong></h1>
+            <p>ThreeFold is a globally-distributed grid of storage, compute, and network capacity, acting as "no middleman" Internet resources between independent capacity providers and users.</p>
             <button class="mx-0"><a target="_blank" href="https://manual.grid.tf/intro/intro_readme.html">Get Started</a></button>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
+
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](home_header_geometric.png#mx-auto)
+
+|||
+
+## Decentralized. Autonomous. Internet Infrastructure.
+
+ThreeFold is a globally-distributed grid of storage, compute, and network capacity, acting as "no middleman" Internet resources between independent capacity providers and users.
+
+<button>[Get Started](#take_action)</button>
+
+{% end %}
 
 
 
@@ -58,9 +71,13 @@ The current Internet is **not scalable**. Over 3 billion people lack reliable In
 
 The current Internet is **not sustainable**. It consumes between 5-10% of the world’s energy.
 
+<br>
+
+Your digital life depends on hyperscale data centers controlled by a handful of tech giants. The majority of web 2 and even web 3 services are built on these foundations.
+
 |||
 
-![Image](internet_outdated.png#medium)
+![Image](home_alternativeblock.png#medium#mx-auto)
 
 {% end %}
 
@@ -72,12 +89,16 @@ The current Internet is **not sustainable**. It consumes between 5-10% of the wo
 
 {% row(style="center margin" bgPath="images/checkerboard2.jpg") %}
 
-### **Over a decade ago, a group of early Internet pioneers, <br>who understood the problems of the centralized Internet model first-hand, <br>came together to re-imagine the infrastructure for an open and decentralized Internet.**
+## Internet Re-Imagined. Internet Re-Built.
 
-### **But we didn't just imagine it – we built it. Join us in evolving the Internet, together.**
+### Over a decade ago, a group of early Internet pioneers, <br>who understood the problems of the centralized Internet model first-hand, <br>came together to re-imagine the infrastructure for an open and decentralized Internet.
+
+### But we didn't just imagine it – we built it. Join us in evolving the Internet, together.
 
 {% end %}
 
+</div>
+
 <br>
 
 <br>
@@ -99,13 +120,47 @@ The current Internet is **not sustainable**. It consumes between 5-10% of the wo
 
 <!-- section 5 -->
 
-{% row(style="center margin narrow") %}
+{% row(style="center narrow") %}
 
-### **The ThreeFold Grid is community-owned and managed. The stack was built around principles of open-source and simplicity, and to be compatibile with current and future IT standards – from Kubernetes to Docker to IPFS and S3. It is an alternative to the centralized Internet model – a decentralized infrastructure for the builders of tomorrow.**
+## ThreeFold is Different
 
 {% end %}
 
-{% row(style="center mtop narrow") %}
+{% row(style="center mbottom narrow") %}
+
+![Image](beyond.png#icon)
+
+<br>
+
+### **Beyond a Protocol**
+
+The ThreeFold Grid is not just another protocol, it's a community-owned and managed low level decentralized Internet capacity layer and infrastructure, on top of which any protocol can run.
+
+|||
+
+![Image](complementing.png#icon)
+
+<br>
+
+### **Complementing Web3**
+
+ThreeFold is not a Web3 project, but we love Web3 and the ThreeFold Grid can host and complement any Web3 project, finally providing a truly decentralized backbone for the space.
+
+|||
+
+![Image](compatible.png#icon)
+
+<br>
+
+### **Highly-Compatible**
+
+The stack was built around open-source and simplicity, and to be compatibile with current and future IT standards such as Kubernetes, Docker, IPFS and S3. If it runs on Linux, it can be hosted on ThreeFold.
+
+<!-- It is an alternative to the centralized Internet model – a decentralized infrastructure for the builders of tomorrow.** -->
+
+{% end %}
+
+{% row(style="center mtop narrow" id="take_action") %}
 
 ## Take Action Today
 
@@ -115,11 +170,11 @@ The current Internet is **not sustainable**. It consumes between 5-10% of the wo
 
 {% row(style="center narrow mbottom") %}
 
-![Image](expandicon.png#medium)
+![Image](expand_icon1.png#medium)
 
 ### **Expand**
 
-Independent people and organizations connect hardware to the ThreeFold Grid. Provide Internet capacity for the people around you, and earn for it. 
+People and organizations are connecting hardware to the ThreeFold Grid. Find your fit, provide Internet capacity for people around you, and earn for it.
 
 <br>
 
@@ -127,11 +182,11 @@ Independent people and organizations connect hardware to the ThreeFold Grid. Pro
 
 |||
 
-![Image](buildicon.png#medium)
+![Image](build_icon1.png#medium)
 
 ### **Build**
 
-Developers and Sysadmins use ThreeFold technology to build, deploy, and store on top of community-owned Internet capacity. They pay with $TFT.
+Developers and Sysadmins use ThreeFold technology to build, deploy, and store on top of a community-owned edge infrastructure. You pay with $TFT.
 
 <br>
 
@@ -139,11 +194,11 @@ Developers and Sysadmins use ThreeFold technology to build, deploy, and store on
 
 |||
 
-![Image](togethericon.png#medium)
+![Image](together_icon1.png#medium)
 
 ### **Together**
 
-Join a group of people around the globe who believe the world needs ThreeFold and take action to bring the project forward.
+This project is all of ours. Join a group of people around the globe who believe the world needs ThreeFold and take action to bring ThreeFold forward.
 
 <br>
 
@@ -180,7 +235,7 @@ We're open-source and decentralized, so we use a token called $TFT to fuel the m
 
 .bgtest{
 
-  background-image: url("home/checker4.png");
+  background-image: url("home/Bg.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

content/token/index.md

@@ -7,25 +7,39 @@ insert_anchor_links: "left"
 
 <!-- section 1  -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat" style="background-image:url(BG_wide.png);background-position:right">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="header_token.png" class="w-full h-full"/>
+                src="token_geometric_header.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
           <div class="flex flex-col items-start justify-center p-6">
-            <h1>Introducing TFT</strong></h1>
-            <h3 class="my-1"><b>The Currency Powering the Decentralized Internet</b></h3>
+            <h2>TFT Powers the<br>Decentralized Internet</strong></h2>
             <p>Join the Internet revolution with the ThreeFold Token (TFT), an innovative utility token used to build, store and exchange on the ThreeFold Grid. Through many of its unique properties, TFT opens a whole new world of possibilities that was previously unimaginable with centralized infrastructures.</p>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
+
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](high_token_header_geometric.png#mx-auto)
+
+|||
+
+## TFT Powers the<br>Decentralized Internet
+
+Join the Internet revolution with the ThreeFold Token (TFT), an innovative utility token used to build, store and exchange on the ThreeFold Grid. Through many of its unique properties, TFT opens a whole new world of possibilities that was previously unimaginable with centralized infrastructures.
+
+
+{% end %}
 
 
 
@@ -34,16 +48,22 @@ insert_anchor_links: "left"
 
 {% row(style="center narrow between mtop") %}
 
+![](utility.png#icon)
+
 ### **Real Utility**
 Users, developers, and enterprises use TFT to store data, build applications, and create P2P ecosystems on the ThreeFold Grid.
 
 |||
 
+![](fast.png#icon)
+
 ### **Super Fast**
 Send TFT in milliseconds to anyone, anywhere – and as the network grows and hardware gets more efficient, so will the network..
 
 |||
 
+![](fundamentals.png#icon)
+
 ### **Strong Fundamentals**
 With a limited supply of 4 billion TFT and a burning mechanism, the token is backed by the continuous growth of the network.
 
@@ -51,17 +71,21 @@ With a limited supply of 4 billion TFT and a burning mechanism, the token is bac
 
 {% row(style="center between narrow mbottom") %}
 
+![](cryptography.png#icon)
+
 ### **Secured by Cryptography**
 TFT transactions and smart contracts on the ThreeFold Grid are secured by advanced cryptography.
 
 |||
 
+![](scalable.png#icon)
 
 ### **Ultra-Scalable**
 ThreeFold is made to handle thousands of transactions and smart contracts per second, with incredibly low fees.
 
 |||
 
+![](efficient.png#icon)
 
 ### **Energy-efficient**
 ThreeFold’s innovative infrastructure is incredibly sustainable, ensuring the tokens sustainability and longevity.
@@ -69,6 +93,7 @@ ThreeFold’s innovative infrastructure is incredibly sustainable, ensuring the
 {% end %}
 
 
+</div>
 
 <!-- section 3 -->
 
@@ -99,29 +124,27 @@ developers have unlimited possibilities to build the future.
 
 {% end %}
 
-{% row(style="center between mbottom") %}
+{% row(style="center between") %}
 
-![](use_icon.png#medium)
+![](use_icon1.png#icon)
 
 ### **Use TFT**
-Build applications, store data and access decentralized services on the ThreeFold Grid
+Build applications, store data and access decentralized services on the ThreeFold Grid.
 
 |||
 
-![](earn_icon.png#medium)
+![](earn_icon1.png#icon)
 ### **Earn Discounts**
 Hold your TFT and earn up to 60% discounts on Internet capacity.  
 
 |||
 
-![](stake_icon.png#medium)
+![](stake_icon1.png#icon)
 ### **Stake TFT**
 Soon you will be able to partake in the network's decentralization and earn rewards.
 
 {% end %}
 
-
-
 <!-- section 5 -->
 
 {% row(style="reverse center between margin") %}
@@ -130,47 +153,24 @@ Soon you will be able to partake in the network's decentralization and earn rewa
 
 TFT exists on four different blockchains: Stellar, TF Chain (Polkadot), Ethereum, and Binance Smart Chain. This brings more accessibility to the token and more opportunities to collaborate with the greater blockchain community.
 
-<button>[Read About TFT](https://library.threefold.me/info/threefold#/tokens/threefold__tokens_home)</button>
-
 |||
 
-![](tft_network.png#mx-auto)
+![](multipleblockchains.png#mx-auto)
 
 {% end %}
 
-
-
 <!-- section 6 -->
 
-{% row(style="center margin between") %}
+{% row(style="center between margin") %}
 
-![](tft_burn.jpg#mx-auto)
+![](startjourney.png#mx-auto)
 
 |||
 
 ## Start Your **TFT Journey**
 
-You can buy TFT from decentralized exchanges or wallets directly. We have compiled tutorials and manuals to help you out, including how to buy, trade, and store TFT.
+You can buy TFT from decentralized exchanges or wallets directly. We have compiled tutorials on the easiest ways to buy and store TFT.
 
-<button>[Discover Your Options](https://library.threefold.me/info/threefold#/tokens/threefold__tft_ecosystem)</button>
-
-{% end %}
-
-
-
-<!-- section 7 -->
-
-
-{% row(style="reverse center margin between") %}
-
-## Drive **Liquidity**
-
-ThreeFold believes in the organic and sustainable growth of ThreeFold Token. And one of our key goals is to strengthen the foundation of the ecosystem by enhancing the stability and liquidity of TFT.
-
-<button>[Drive TFT Liquidity](https://library.threefold.me/info/threefold#/tokens/threefold__tft_liquidity)</button>
-
-|||
-
-![](tft_loyalty.jpg#mx-auto)
+<button>[Discover Your Options](https://manual.grid.tf/concepts/buying_storing_tft.html)</button>
 
 {% end %}

css/index.css

@@ -136,7 +136,7 @@ h1 {
     color: #3d7200;
   }
   h3 strong {
-    @apply font-semibold;
+    @apply font-normal;
   }
   h4 {
     @apply text-sm lg:text-2xl font-normal;
@@ -164,7 +164,7 @@ h1 {
     @apply 
     inline-block
     lg:text-lg
-    lg:mx-3
+    lg:mr-3
     py-1
     my-4
     border

templates/partials/header.html

@@ -34,24 +34,16 @@
                 {% if '<a' in header_label %}
                     {% set link_label = header_label | striptags %}
                     {% set link_path = header_label | split(pat="%22") | safe%}
-                    {% set current = get_url(path=link_path[1]) ~ "/" %}
                     {% if header_label is containing("http") %}
                         {% if header_label is not containing("threefold") %}
                         <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                             {{link_label}}
                         </a>
                         {% endif %}
-
-                    {% elif current == current_url %}
-                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium active hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                      {{ link_label }}
-                    </a>
-
                     {% else %}
                     <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                      {{ link_label }}
+                      {{link_label}}
                     </a>
-   
                     {% endif %}
                 {% else %}
                     <div class="relative">
@@ -112,7 +104,7 @@
                     </li>
                   </ul>
                   <div class="rounded-full border-2 mt-1 border-gray-400">
-                    <a href="https://library.threefold.me/info/threefold#/tokens/threefold__token_howtos" target="_blank" class="mt-2">
+                    <a href="https://library.threefold.me/info/threefold#/tokens/threefold__how_to_buy" target="_blank" class="mt-2">
                       <img
                         src="{{ get_url(path=section.extra.button_Path) }}"
                         class="mr-5"
@@ -126,7 +118,26 @@
             </div>
         </div>
         </div>
+{% for header_item in header_items %}
+{% if not loop.first %}
+    {% set header_arr = header_item | split(pat="</li>") %}
+    {% set header_label = header_arr[0] %}
+    {% set header_menu = header_arr[1] %}
+    {% set menu_id = header_label ~ "-menu" | slugify %}
 
+<nav>
+    <div id="{{menu_id}}" class="nav_menu mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+            <div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
+                {{header_menu | safe }}
+            </div>
+        </div>            
+        </div>
+    </nav>
+
+
+{% endif %}
+{% endfor %}
 
     
         <!--
@@ -142,7 +153,7 @@
     <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
             <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                <div class="pb-6 sm:px-12 md:px-16 mt-2 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+                <div class="pb-6 sm:px-12 md:px-16 mt-6 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
 
                     <nav class="flex flex-col justify-around pb-12">
                     {% for header_item in header_items %}
@@ -153,17 +164,12 @@
                             {% if '<a' in header_label %}
                                 {% set link_label = header_label | striptags %}
                                 {% set link_path = header_label | split(pat="%22") | safe%}
-                                {% set current = get_url(path=link_path[1]) ~ "/" %}
                                 {% if header_label is containing("http") %}
                                     {% if header_label is not containing("threefold") %}
                                     <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                         {{link_label}}
                                     </a>
                                     {% endif %}
-                                {% elif current == current_url %}
-                                    <a href="{{ get_url(path=link_path[1])}}" class="active text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                      {{link_label}}
-                                  </a>
                                 {% else %}
                                 <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}

templates/shortcodes/row.html

@@ -83,6 +83,12 @@ Parameters:
         {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
     {% endif %}
 
+    <!-- makes row with margins -->
+    {% if "header" in style %}
+        {% set row_class = row_class ~ " h-screen mt-4" %}
+        {% set col_class = col_class ~ " m-4 lg:m-0" %}
+    {% endif %}
+
     {% if "mtop" in style %}
         {% set row_class = row_class ~ " lg:pt-28 pt-2" %}
         {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}