clean short codes

content/community/index.md

@@ -15,7 +15,7 @@ extra:
 {% row( style="center mtop semiNarrow") %}
 
 
-<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in visible">Join the Community</h2>
+# Join the Community
 
 {% end %}
 
@@ -184,7 +184,7 @@ extra:
 {% row( style="center mtop semiNarrow") %}
 
 
-<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Keep up with ThreeFold Events</h2>
+## Keep up with ThreeFold Events
 
 {% end %}
 

content/header/_index_copy.md

@@ -1,84 +0,0 @@
----
-title: "Header"
-description: "NEAR is on a mission to empower everyone to take back control of their money, their data, and their identity. Join us."
-insert_anchor_links: "left"
-template: "partials/header.html"
-extra:
-  logoPath: "images/ourworld_logo2.png"
-  imgPath: ""
----
-
-- Learn
-
-{% row(style="lean") %}
-
-### PURPOSE
-
-<br>
-<br>
-
-#### [The Internot](/apage)
-
-Whats wrong with the [internet](/apage)
-
-<br>
-
-#### Our Internet
-
-Vision for the new internet
-
-|||
-
-### ECOSYSTEM
-
-<br>
-<br>
-
-#### OurWorld DAO
-
-Be a part of governance
-
-<br>
-
-#### Communities
-
-Explore communities in OurWorld
-
-<br>
-
-#### DAOs
-
-Decentralized autonomous organizations
-
-|||
-
-### APPLICATIONS
-
-<br>
-<br>
-
-#### DAPPs
-
-Decentralized applications
-
-<br>
-
-#### Projects
-
-Projects in OurWorld
-
-|||
-
-### FEATURED
-
-<br>
-<br>
-
-#### OurWorld is Live
-
-Be a part of the new internet
-
-- [Join us]("/join-us")
-- [Blog]("/blog")
-
-{% end %}

content/home/index.md

@@ -31,7 +31,7 @@ extra:
 
   <!-- left section -->
 
-  {{ left_text( 
+  {{ text_left( 
     title="ThreeFold is a Decentralized Infrastructure Layer for The Internet",
     description_1="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
     button_text="Discover How It Works",
@@ -154,7 +154,7 @@ extra:
 
 <div class="container mx-auto lg:max-w-7xl lg:py-24 py-12 px-4 lg:px-0">
 
-  {{ left_text( 
+  {{ text_left( 
       title="How it works",
       description_1="At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.",
       description_2="Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'"

content/why/index.md

@@ -29,7 +29,7 @@ The Internet brings the world together, yet much of it is now concentrated in th
 
 <!-- section 2 -->
 
-{{ desciption_blockquote(
+{{ description_blockquote(
     title="The Reason Behind It All",
 
     description_1="The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: data centers are extremely expensive to build and maintain, privacy and security are compromised, misinformation is rampant, and half the world remains poorly connected.",

templates/jobPage.html

@@ -1,40 +0,0 @@
-{% extends "_default/base.html" %}
-{% block content %}
-
-<div class="container sm:pxi-0 mx-auto min-h-screen pt-24 mt-5">
-  <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
-    <div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
-      <h3 class="
-          uppercase
-          leading-none
-          text-bold
-           text-gray-800
-          font-black font-heading
-        ">
-        {{ page.title }}
-      </h3>
-    </div>
-  </div>
-  <section class="post-content mx-auto relative font-serif text-gray-700">
-    <div class="mt-6 mb-8 text-gray-900">{{ page.content | safe }}</div>
-    <button class="
-        inline-block
-        bg-green-500
-        text-sm
-        learn-button
-        hover:bg-green-600
-        px-8
-        py-2
-        mr-2
-        my-0
-        shadow
-        rounded-full
-        active--exact active
-      ">
-      <a href="{{page.extra.link}}" target="_blank" aria-current="page">
-        {{ page.extra.button }}
-      </a>
-    </button>
-  </section>
-</div>
-{% endblock content %}

templates/oldheader.html

@@ -1,252 +0,0 @@
-<!--
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
-  Read the documentation to get started: https://tailwindui.com/documentation
--->
-<!-- This example requires Tailwind CSS v1.4.0+ -->
-<script type="text/javascript">
-    
-    var displayedMenu = "";
-    var hamburgerShown = false;
-    let width = screen.width;
-    var isMobile = width < 1024;
-
-    function toggleMenu(button) {
-        if (displayedMenu === button.id.split("-")[0]) { 
-            button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
-            hideMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
-            displayedMenu = "";
-        }
-        else { 
-            showMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
-            button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
-            displayedMenu = button.id.split("-")[0]
-        }
-    }
-
-    function handleClick(button) {
-        if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
-        if (button.id.indexOf("menu") !== -1 ) { 
-            toggleMenu(button) 
-        }
-    }
-
-    function toggleHamburger() {
-        if (hamburgerShown) { 
-            hideHamburger();
-            hamburgerShown = false;
-        }
-        else { 
-            showHamburger();
-            hamburgerShown = true;
-        }
-    }
-
-    function showMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace(" hidden" , "");
-        setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
-    }
-
-    function hideMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
-        setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
-    }
-
-    function showHamburger() {
-        document.getElementById('header-container').className = "overflow-hidden";
-        document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
-        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-    }
-
-    function hideHamburger() {
-        document.getElementById('header-container').className = "";
-        document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        if (displayedMenu !== "") { hideMenu(displayedMenu); }
-    }
-
-    window.onload = function(){
-        let elements = document.getElementsByTagName("button");
-        let buttons = [...elements]
-        buttons.forEach((button) => {
-            button.addEventListener( 'click', function() { handleClick(button) });
-        })
-        document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
-    }
-</script>
-<!-- set variables used for header template -->
-{% set section = get_section(path="_index.md") %}
-{% set subsections_str = section.subsections | join(sep=" ") %}
-{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
-
-{% if "header/_index.md" in subsections_str %}
-    {% set section = get_section(path="header/_index.md") %}
-    {% set header_items = section.content | safe | split(pat="
-<li>
-    ") %}
-    {% include "partials/header_custom.html" %}
-{% else %}
-    <header id="header-container">
-        {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
-            <div class="relative z-50 shadow">
-                <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
-                    <div>
-                        <a href="/" class="flex">
-                            <img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo">
-                        </a>
-                    </div>
-                    <div class="-mr-2 -my-2 lg:hidden">
-                        <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
-                            <!-- Heroicon name: menu -->
-                            <svg
-                                class="h-6 w-6"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M4 6h16M4 12h16M4 18h16"
-                                />
-                            </svg>
-                        </button>
-                        <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
-                            <!-- Heroicon name: x -->
-                            <svg
-                                class="h-6 w-6"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M6 18L18 6M6 6l12 12"
-                                />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-                        <nav class="flex space-x-10">
-                            {% for page in section.pages %}
-                    {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
-                            <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                                {{page.title}}
-                            </a>
-                            <div class="relative"></div>
-                            {% endfor %}
-                    {% for subsection in section.subsections %}
-                        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
-                        {% set button_id = subsection ~ "-menu-btn" | slugify %}
-                            <div class="relative">
-                                <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
-                                    <span>{{ subsection }}</span>
-                                    <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>
-                            </div>
-                            {% endfor %}
-                        </nav>
-                    </div>
-                </div>
-            </div>
-            {% for subsection in section.subsections %}
-        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}        
-        {% set submenu_id = subsection ~ "-menu" | slugify %}
-            <nav>
-                <div id="{{submenu_id}}" class="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 class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
-                            {{subsection | safe }}
-                        </div>
-                    </div>
-                </div>
-            </nav>
-            {% endfor %}
-            <!--
-            Mobile menu, show/hide based on mobile menu state.
-        
-            Entering: "duration-200 ease-out"
-                From: "opacity-0 scale-95"
-                To: "opacity-100 scale-100"
-            Leaving: "duration-100 ease-in"
-                From: "opacity-100 scale-100"
-                To: "opacity-0 scale-95"
-            -->
-            <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 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 page in section.pages %}
-                            {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
-                                <a href="{{page.permalink}}" 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">
-                                    {{page.title}}
-                                </a>
-                                <hr>
-                                {% endfor %}
-                        {% for subsection in section.subsections %}
-                            {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
-                            {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
-                            {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
-                                <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                    <span>{{ subsection }}</span>
-                                    <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>
-                                <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">
-                                    {{ subsection | safe }}
-                                </div>
-                                <hr>
-                                {% endfor %}
-                        {% if "footer/_index.md" in subsections_str %}
-                        {% set section = get_section(path="footer/_index.md")%}
-                                <div class="mx-8 mt-8">
-                                    <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
-                                        <img class="w-48 h-auto" src="{{logo_path}}" alt="Company name">
-                                        <p class="text-gray-500 text-base leading-6 ">
-                                            {{section.description}}
-                                        </p>
-                                    </div>
-                                    {% endif %}
-                                </nav>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </header>
-            {% endif %}

templates/partials/header_custom.html

@@ -1,86 +0,0 @@
-<header id="header-container" class="bg-inherit">
-    <div class="z-10 bg-dark1 w-screen">
-        <div class="relative z-50">
-            <div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
-                <div>
-                    <a href="/" class="flex">
-                        <img  src="images/tf_dark.png" alt="ODFZ Logo" />
-                    </a>
-                </div>
-                <div class="-mr-2 -my-2 lg:hidden">
-                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
-                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                    </button>
-                    <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
-                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-                    <nav class="flex space-x-10">
-                        {% for header_item in header_items %}
-                        {% if not loop.first %}
-                            {% set header_arr = header_item | split(pat="</li>") %}
-                            {% set header_label = header_arr[0] %}
-                            {% 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 py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                        {{link_label}}
-                                    </a>
-                                    {% endif %}
-                                  {% elif current_url and current == current_url %}
-                                      <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active 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 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 %}
-                            {% else %}
-                            <div class="relative">
-                                {% set button_id = header_label ~ "-menu-btn" | slugify %}
-                            <button type="button" id="{{button_id}}" class="nav_btn py-3  text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
-                                <span>{{ header_label }}</span>
-                                <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>
-                            </div>
-        
-                        {% endif %}  
-                    {% endif %}
-                    {% endfor %}
-            </nav>
-                </div>
-            </div>
-        </div>
-        
-        {% for header_item in header_items %}
-            {% set header_parts = header_item | split(pat="</li>") %}
-            {% set header_label = header_parts[0] %}
-            {% set header_menu = header_parts[1] %}
-            {% set menu_id = header_label ~ "-menu" | slugify %}
-            <nav>
-                <div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-                    <div class="bg-gray-800 lg:bg-gray-900">
-                        <div class="mx-8 lg:mx-20 px-6 py-4 text-white">
-                            {{ header_menu | safe }}
-                        </div>
-                    </div>            
-                </div>
-            </nav>
-        {% endfor %}
-    </div>
-</header>
-
-<style>
-    .bg-dark1 {
-      background: rgba(15,15,15,1);
-    }
-</style>

templates/shortcodes/accordion.html

@@ -1,3 +1,7 @@
+{% set question = question | default(value="") %}
+{% set id_accordion = id_accordion | default(value="") %}
+{% set description = description | default(value="") %}
+
 <div class="rounded-lg overflow-hidden my-2 border border-gray-500">
             <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
             <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">

templates/shortcodes/cloud_header.html

@@ -1,57 +0,0 @@
-{% set base = config.base_url %}
-
-<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10  lg:mt-4 pb-10">
-    <div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
-        <div class="w-full mb-4 border-b border-gray-600">
-            <div class="arrow_up"></div>
-            <a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
-                class="text-5xl font-extrabold uppercase">Store</a>
-        </div>
-        <div class="mb-4">
-            {% if 'www_threefold_io' in base  %}
-            {% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}
-
-            <img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
-            {% else %}
-            <img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
-            {% endif %}
-        </div>
-        <div class="w-full mb-4 border-b border-gray-600">
-            <a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
-                class="text-5xl font-extrabold uppercase">Build</a>
-            <div class="arrow_down"></div>
-        </div>
-    </div>
-</div>
-
-<style>
-    .arrow_up,
-    .arrow_down {
-        display: inline-block;
-        margin-right: 10px;
-        width: 0;
-        height: 0;
-        border-width: 0 12.5px 30px 12.5px;
-        border-color: transparent transparent #000000 transparent;
-        border-style: solid;
-    }
-
-    .arrow_down {
-        margin-left: 10px;
-
-        border-width: 35px 12.5px 0 12.5px;
-        border-color: #000000 transparent transparent transparent;
-    }
-
-    a {
-        font-family: "Orbitron", sans-serif !important;
-        color: black;
-    }
-
-    hr {
-        height: 1px;
-        border-width: 0;
-        color: gray;
-        background-color: gray;
-    }
-</style>

templates/shortcodes/cloud_stats.html

@@ -1,174 +0,0 @@
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-  {% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-  {% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
-<div class="lg:py-24 py-10 sm:pt-10">
-  <div class="mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="lg:max-w-xl mx-auto text-center">
-      <h2 class="
-            
-          lg:text-6xl
-          text-center
-          capitalize
-          my-2
-          leading-none
-          font-light 
-        
-          ">
-        A Global Edge <br><span class="font-medium"> Infrastructure</span>
-      </h2>
-    </div>
-  </div>
-  <div class="mt-10 pb-12 sm:pb-16">
-    <div class="relative">
-      <div class="absolute inset-0 h-1/2"></div>
-      <div class="relative mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="max-w-8xl mx-auto">
-          <dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
-            <div class="
-                  flex flex-col
-                  border-b border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-r
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  " id="item-1">
-                Nodes
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  " aria-describedby="item-1">
-                {{ nodes }}
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-b border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l sm:border-r
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Capacity
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ capacity | round(precision=2) }}PB
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Cores
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ cores | num_format }}
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Countries
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ countries }}
-              </dd>
-            </div>
-          </dl>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="block text-center mt-5">
-    <a target="_blank" href="https://explorer.threefold.io/all" class="
-          inline-block
-            bg-white
-            text-lg
-            learn-button
-            text-gray-700
-            hover:text-gray-500
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-        ">Explore Capacity</a>
-  </div>
-</div>
-{% endif %}

templates/shortcodes/community_banner.html

@@ -1,16 +0,0 @@
-{% block content %}
-
-<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20">
-    <a href="/careers" class="section banner">
-        <div class="center">
-            <h2 class="h1">
-                <strong>Join our Team</strong>
-            </h2>
-        </div>
-        {% set background = "background-image: url(" ~ page.permalink ~ "tf_people.jpg)" %}
-
-        <div class="back" style="{{background}}"></div>
-    </a>
-</div>
-
-{% endblock content %}

templates/shortcodes/cta.html

@@ -1,4 +1,4 @@
-{% set title_1 = title_1 | default(value="Built") %}
+{% set title_1 = title_1 | default(value="") %}
 {% set title_2 = title_2 | default(value="") %}
 {% set title_3 = title_3 | default(value="") %}
 {% set button_text_1 = button_text_1 | default(value="") %}

templates/shortcodes/faq.html

@@ -1,290 +0,0 @@
-
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        inter: ['Inter', 'sans-serif'],
-                    },
-                },
-            },
-        };
-    </script>
-    <main class="relative flex flex-col justify-center overflow-hidden">
-        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 lg:py-24 py-12">
-
-            <h1 class="lg:text-4xl text-3 font-normal tracking-tight text-white">Frequently Asked Questions</h1>
-
-            <!-- Accordion component -->
-            <div class="divide-y divide-white/50 my-10">
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-01"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-01"
-                        >
-                            <span style="color: #fff;">Is this a separate new Internet?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-01"
-                        role="region"
-                        aria-labelledby="faqs-title-01"
-                        class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
-                                No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-02"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-02"
-                        >
-                            <span style="color: #fff;">Why do we need a new Internet?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-02"
-                        role="region"
-                        aria-labelledby="faqs-title-02"
-                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
-                                The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed.
-                        </div>
-                    </div>
-                </div>  
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-05"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-05"
-                        >
-                            <span style="color: #fff;">How can I participate?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-05"
-                        role="region"
-                        aria-labelledby="faqs-title-05"
-                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
-                                You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.
-                            </p>
-                        </div>
-                    </div>
-                </div> 
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-04"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-04"
-                        >
-                            <span style="color: #fff;">How can I get V4 nodes?                                ?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-04"
-                        role="region"
-                        aria-labelledby="faqs-title-04"
-                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
-                                
-                            Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. <A href="docs.threefold.io/docs/become-a-farmer/get_started">Click here</a> to get V4 nodes.
-                            </p>
-                        </div>
-                    </div>
-                </div> 
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-07"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-07"
-                        >
-                            <span style="color: #fff;">What can I do with the ThreeFold Grid?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-07"
-                        role="region"
-                        aria-labelledby="faqs-title-07"
-                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
-                                ThreeFold grid can be used to host any web2, web3 and future workload.
-                                For more details see <a href="https://docs.threefold.io/docs/category/how-to-use" target="_blank" rel="noopener noreferrer">our docs</a>.
-                            </p>
-                        </div>
-                    </div>
-                </div>                   
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                    <h2>
-                        <button
-                            id="faqs-title-07"
-                            type="button"
-                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                            @click="expanded = !expanded"
-                            :aria-expanded="expanded"
-                            aria-controls="faqs-text-07"
-                        >
-                            <span style="color: #fff;">How secure and private is my data?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div
-                        id="faqs-text-07"
-                        role="region"
-                        aria-labelledby="faqs-title-07"
-                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                        >
-                        <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
-                                ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.
-                            </p>
-                        </div>
-                    </div>
-                </div>    
-                <!-- Accordion item -->
-                <div x-data="{ expanded: false }" class="py-2">
-                <h2>
-                    <button
-                        id="faqs-title-07"
-                        type="button"
-                        class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                        @click="expanded = !expanded"
-                        :aria-expanded="expanded"
-                        aria-controls="faqs-text-07"
-                    >
-                        <span style="color: #fff;">Who should use the ThreeFold Grid ?</span>
-                        <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                            <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                        </svg>
-                    </button>
-                </h2>
-                <div
-                    id="faqs-text-07"
-                    role="region"
-                    aria-labelledby="faqs-title-07"
-                    class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                    >
-                    <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
-                            Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.
-
-                        </p>
-                    </div>
-                </div>
-            </div>                                                                                              
-            <!-- Accordion item
-            <div x-data="{ expanded: false }" class="py-2">
-                <h2>
-                    <button
-                        id="faqs-title-04"
-                        type="button"
-                        class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
-                        @click="expanded = !expanded"
-                        :aria-expanded="expanded"
-                        aria-controls="faqs-text-04"
-                    >
-                        <span style="color: #fff;">You have 2 tokens, TFT and INCA, why?</span>
-                        <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-                            <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                            <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
-                        </svg>
-                    </button>
-                </h2>
-                <div
-                    id="faqs-text-04"
-                    role="region"
-                    aria-labelledby="faqs-title-04"
-                    class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
-                    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
-                    >
-                    <div class="overflow-hidden">
-                         <p class="pb-3 text-gray-300 text-base font-light">
-                            TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid capacity. From the start, ThreeFold had 4 billion tokens planned. The ThreeFold community decided to stop minting at 1 billion tokens on Stellar via a DAO vote. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. <br><br>We are now building generation 4 of the ThreeFold Grid capacity, and we need a new token to build this new generation. There will be 3 billion new INCA tokens and all TFT holders can transfer their TFT into INCA (one-way bridge).
-
-                        </p>
-                    </div>
-                </div>
-            </div> -->
-    </div>
-            <!-- End: Accordion component -->
-
-        </div>
-    </main>
-
-
-
-   

templates/shortcodes/farmers.html

@@ -1,85 +0,0 @@
-<div class="bg-transparent lg:py-24 py-12">
-  <div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
-    <div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
-      <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
-      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
-        At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.
-      </p>
-      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
-        Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
-      </p>
-  </div>
-<section class="bg-transparent">
-  <div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
-    <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
-            1. HOST A NODE
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
-            <p class="mt-6">
-            </p>
-          </dd>
-        </div>
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
-            2. OFFER CAPACITY
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud.</p>
-            <p class="mt-6">
-            
-            </p>
-          </dd>
-        </div>
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
-            3. EARN REWARDS
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
-            </p>
-            <p class="mt-6">
-              
-            </p>
-          </dd>
-        </div>
-      </div>
-      <div class="mt-6 flex items-center justify-center gap-x-6">
-        <a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
-      </div>
-    </div>
-      </dl>
-    </div>
-  </div>
-</section>
-
-<style>
-  /* Fade-in animation for the grid items */
-  .fade-in-box {
-    opacity: 0;
-    animation: fadeIn 0.6s ease-in-out forwards;
-  }
-
-  /* Fading in each grid item with a slight delay */
-  .fade-in-box:nth-child(1) { animation-delay: 0s; }
-  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
-  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
-  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
-  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
-  .fade-in-box:nth-child(6) { animation-delay: 1s; }
-  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
-  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
-  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
-  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
-  .fade-in-box:nth-child(11) { animation-delay: 2s; }
-  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
-
-  @keyframes fadeIn {
-    to {
-      opacity: 1;
-    }
-  }
-</style>

templates/shortcodes/featured_stories.html

@@ -1,70 +0,0 @@
-<div class="relative px-4 sm:px-6 py-12 lg:py-28 lg:px-8">
-    <div class="absolute inset-0">
-        <div class="bg-white h-1/3 sm:h-2/3"></div>
-    </div>
-    <div class="relative max-w-7xl mx-auto">
-        <div class="text-center">
-            <h2 class="
-                lg:text-6xl
-                leading-tight
-                font-normal font-heading
-                
-                sm:leading-10
-                lg:pb-10
-              ">
-              Dive Deeper
-            </h2>
-        </div>
-        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/planet_first_people_first.png" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="blog/planet-first-people-first" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                Planet first. People first.
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together with our community and partners, we're taking action and making productive choices for our planet and humanity.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/internet_of_internets.png" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="/blog/internet-of-internets/" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                Welcome to the Internet of Internets
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together, we’re building our own future through the Internet of Internets – decentralized, open, inclusive, regenerative, and resilient.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/tft_vedio.jpg" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="https://www.youtube.com/watch?v=5DtVU66Z74s" target="_blank" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                ThreeFold Explained in 2 Minutes
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
-                                opportunities universal. Our technology ensures data ownership and a democratized
-                                Internet. Discover how.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

templates/shortcodes/grid_stats_expand.html

@@ -1,82 +0,0 @@
-{% set styles = "background-image: url('V3.png');" %}
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-{% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
-<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="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
-            {{body | markdown | safe }}
-
-            <div class="my-10 grid lg:grid-cols-4 lg:gap-8">
-                
-
-                <!-- capacity -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ capacity | round(precision=2) }}PB
-                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
-                </div>
-            </div>
-                
-
-                <!-- Nodes -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ nodes }}
-                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
-                </div>
-            </div>
-                
-                
-
-                <!-- countries -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ countries }}
-                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
-                </div>
-            </div>
-
-              <!-- cores -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                   <img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                {{ cores | num_format }}
-                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
-                </div>
-            </div>
-
- 
-            </div>
-            
-        <button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
-        <button><a href="/host">Become a Host</a></button>
-        </div>
-    </div>
-</section>
-{% endif %}
-<style>
-    dd {
-        display: inline-block;
-        margin: auto;
-        border-radius: 50%;
-        line-height: 100px;
-    }
-
-    .bg-green {
-        background-color: #70dfc9;
-    }
-
-    .bg-pink {
-        background-color: #ea1ff7;
-    }
-</style>

templates/shortcodes/header_new.html

@@ -1,20 +0,0 @@
-<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
-    <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="expand/togethericon.png" class="w-full h-full"/>
-          </div>
-        </div>
-        <div class="flex flex-col items-start justify-center w-full py-24 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-0">Host a node, support a decentralized future</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>
-            <button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>

templates/shortcodes/hovevision.html

@@ -1,59 +0,0 @@
-
-<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/jobs.html

@@ -1,209 +0,0 @@
-<div class="container-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
-    <div class="bg-white">
-        <div class="max-w-screen-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
-            <div class="
-          mt-12
-          space-y-4
-          sm:mt-8
-          sm:space-y-0
-          sm:grid sm:grid-cols-2
-          sm:gap-6
-          lg:max-w-4xl
-          lg:mx-auto
-          xl:max-w-none
-          xl:mx-0
-          xl:grid-cols-3
-        ">
-                <div class="
-            border border-gray-200
-            rounded-lg
-            shadow-sm
-            divide-y divide-gray-200
-          ">
-                    <div class="p-6">
-                        <h2 class="
-                text-xl
-                leading-8
-                 font-extrabold
-                text-gray-900
-              ">
-                            ThreeFold Grid Operations Lead
-                        </h2>
-                        <p class="mb-8 text-gray-600 leading-relaxed">
-                            The ThreeFold Grid will eventually connect millions of nodes. You'll be in charge of finding
-                            the best ways to operate such a network.
-                        </p>
-                        <button class="
-                inline-block
-                bg-white
-                text-lg
-                learn-button
-                lg:px-12
-                px-6
-                py-1
-                mr-5
-                my-4
-                border-2
-                shadow
-                border-black
-              ">
-                            <a href="/careers/grid-operations-manager">See Position</a>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="
-            border border-gray-200
-            rounded-lg
-            shadow-sm
-            divide-y divide-gray-200
-          ">
-                    <div class="p-6">
-                        <h2 class="
-                text-xl
-                leading-8
-                 font-extrabold
-                text-gray-900
-              ">
-                            ThreeFold Grid Developer Lead
-                        </h2>
-                        <p class="mb-8 text-gray-600 leading-relaxed">
-                            Take ownership of the ongoing development and documentation of the tech components that
-                            constitute the ThreeFold Grid.
-                        </p>
-                        <button class="
-                inline-block
-                bg-white
-                text-lg
-                learn-button
-                lg:px-12
-                px-6
-                py-1
-                mr-5
-                my-4
-                border-2
-                shadow
-                border-black
-              ">
-                            <a href="/careers/grid-development-manager">See Position</a>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="
-            border border-gray-200
-            rounded-lg
-            shadow-sm
-            divide-y divide-gray-200
-          ">
-                    <div class="p-6">
-                        <h2 class="
-                text-xl
-                leading-8
-                 font-extrabold
-                text-gray-900
-              ">
-                            Master Technical Architect
-                        </h2>
-                        <p class="mb-8 text-gray-600 leading-relaxed">
-                            Take the lead on the architectural design of the Digital Twin tech and ecosystem defining a
-                            new paradigm for the tech industry.
-                        </p>
-                        <button class="
-                inline-block
-                bg-white
-                text-lg
-                learn-button
-                lg:px-12
-                px-6
-                py-1
-                mr-5
-                my-4
-                border-2
-                shadow
-                border-black
-              ">
-                            <a href="/careers/master-architect-dt">See Position</a>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="
-            border border-gray-200
-            rounded-lg
-            shadow-sm
-            divide-y divide-gray-200
-          ">
-                    <div class="p-6">
-                        <h2 class="
-                text-xl
-                leading-8
-                 font-extrabold
-                text-gray-900
-              ">
-                            Quality Assurance Engineer
-                        </h2>
-                        <p class="mb-8 text-gray-600 leading-relaxed">
-                            ThreeFold is developing infrastructures and products like never before. Join the testing
-                            team and ensure optimum tech releases.
-                        </p>
-                        <button class="
-                inline-block
-                bg-white
-                text-lg
-                learn-button
-                lg:px-12
-                px-6
-                py-1
-                mr-5
-                my-4
-                border-2
-                shadow
-                border-black
-              ">
-                            <a href="/careers/qa-engineer">See Position</a>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="
-            border border-gray-200
-            rounded-lg
-            shadow-sm
-            divide-y divide-gray-200
-          ">
-                    <div class="p-6">
-                        <h2 class="
-                text-xl
-                leading-8
-                 font-extrabold
-                text-gray-900
-              ">
-                            Senior Developer
-                        </h2>
-                        <p class="mb-8 text-gray-600 leading-relaxed">
-                            Join the core developer team working on our operating system Zero-OS, Digital Twin,
-                            blockchain layers or other products we are building.
-                        </p>
-                        <button class="
-                inline-block
-                bg-white
-                text-lg
-                learn-button
-                lg:px-12
-                px-6
-                py-1
-                mr-5
-                my-4
-                border-2
-                shadow
-                border-black
-              ">
-                            <a href="/careers/senior-developer">See Position</a>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

templates/shortcodes/roadmap.html

@@ -1,126 +0,0 @@
-<!-- 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>
-        <div class="road_border_green px-3">
-        <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>
-              Built decentralized, autonomous, edge internet technology
-            </li>
-        </ul>
-      </div>
-      </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>
-        <div class="road_border_green px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">TRACTION & EXPANSION</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-              Open Source Development<br> 
-              60+ Countries<br>  
-              30,000+ Cores<br>  
-              30,000,000 GB of Storage
-            </li>
-            <br>
-            <li>
-              Signed with Government of Zanzibar for a digital FreeZone and connected cyber city
-            </li>
-            <br>
-            <li>
-              Multiple global partners want to be part of the global expansion
-            </li>
-        </ul>
-      </div>
-      </div>
-      <div>
-        <time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 blue">
-          <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>
-          Current | 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>
-        <div class="road_border_blue px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">THREEFOLD EXPANSION</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-                Open Source Mode & Commercial Mode
-                Version 3 & Version 4
-            </li>
-            <br>
-            <li>
-              Service Levels & Supportability
-            </li>
-            <br>
-            <li>
-              Launch Project Internet Capacity
-            </li>
-            <br>
-            <li>
-              Expansion towards 1 million nodes
-          </li>
-        </ul>
-      </div>
-      </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>
-        <div class="road_border px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">SOVEREIGNTY FOR ALL</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-              +1 Million Nodes enabled
-            </li>
-            <br>
-            <li>
-              +100 Million people using our system platform.
-            </li>
-            <br>
-            <li>
-                A credible and widespread alternative to centralized clouds
-            </li>
-        </ul>
-      </div>
-      </div>
-    </div>
-  </div>
-
-  <style>
-
-    .road_border{
-    
-      border-left: 1px solid rgb(156, 156, 156);
-    }
-
-    .road_border_green{
-      border-left: 1px solid #58CF77;
-    }
-
-    .road_border_blue{
-      border-left: 1px solid #2E83FF;
-    }
-
-  </style>

templates/shortcodes/self_healing.html

@@ -1,55 +0,0 @@
-<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
-    <div class="mx-auto max-w-7xl px-4 lg:px-8">
-      <div class="mx-auto max-w-2xl lg:max-w-none">
-        <div class="text-center">
-          <h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Internet Infrastructure</h2>
-          <br>
-          <h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
-
-          <div class="fade-in relative -mx-4 my-8" aria-hidden="true">
-            <img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">
-        </div>
-
-        {# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
-          <a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
-        </div> #}
-        
-        </div>
-      </div>
-    </div>
-  </div>
-
-<style>
-    /* Define the fade-in animation */
-    @keyframes fadeIn {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  
-    /* Apply the fade-in animation to elements with the 'fade-in' class */
-    .fade-in {
-      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
-    }
-  
-    /* Optional: Delay the animation for a more staggered effect */
-    h2 {
-      animation-delay: 0.5s; /* Delay for header */
-    }
-  
-    p {
-      animation-delay: 1s; /* Delay for paragraphs */
-    }
-
-      
-    /* Apply the blinking animation to the link */
-    .blinking-effect {
-      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
-    }
-
-  </style>
-  
-  

templates/shortcodes/storymap.html

@@ -1,118 +0,0 @@
-<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://www.threefold.io/blog/introducing-project-inca/">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>
-

templates/shortcodes/tabs_tech.html

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

templates/shortcodes/web4.html

@@ -1,76 +0,0 @@
-<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
-    <div class="mx-auto max-w-7xl px-4 lg:px-8">
-      <div class="mx-auto max-w-2xl lg:max-w-none">
-        <div class="text-center">
-          <h2 class="fade-in text-balance text-4xl lg:text-6xl font-normal tracking-tight text-white ">More Resilient, More Powerful, More Diverse With You</h2>
-          <br>
-          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.</p>
-          <p class="mx-auto mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.</p>
-          <!--
-          <div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
-                <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
-                    <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
-                        <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
-                    </g>
-                </g>
-            </svg>
-            <a href="/action" class="fade-in  text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
-        </div>
-        -->
-        <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
-          <a href="/action" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Join ThreeFold</a>
-          {# <a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> #}
-        </div>
-        
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      // Initialize the countUp for each of the numbers
-      new CountUp('capacity', 0, 1910, 0, 2.5).start();
-      new CountUp('cores', 0, 46934, 0, 2.5).start();
-      new CountUp('nodes', 0, 1596, 0, 2.5).start();
-      new CountUp('countries', 0, 40, 0, 2.5).start();
-      new CountUp('farms', 0, 900, 0, 2.5).start();
-    });
-  </script>
-  
-
-<style>
-    /* Define the fade-in animation */
-    @keyframes fadeIn {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  
-    /* Apply the fade-in animation to elements with the 'fade-in' class */
-    .fade-in {
-      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
-    }
-  
-    /* Optional: Delay the animation for a more staggered effect */
-    h2 {
-      animation-delay: 0.5s; /* Delay for header */
-    }
-  
-    p {
-      animation-delay: 1s; /* Delay for paragraphs */
-    }
-
-      
-    /* Apply the blinking animation to the link */
-    .blinking-effect {
-      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
-    }
-
-  </style>
-  
-