Files
www_threefold_io/docs/header/index.html
2022-07-21 06:16:29 +02:00

1223 lines
44 KiB
HTML

<header id="header-container">
<div class="z-10 bg-white fixed w-full top-0">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div>
<a href="/" class="flex">
<img class="w-20 h-auto sm:w-15" style="max-width: none;" src="&#x2F;images&#x2F;tft_log.svg" alt="Ourworld 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">
<!-- 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">
<!-- 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-between lg:space-x-6">
<nav class="flex space-x-10">
<a href="&#x2F;mission" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Mission
</a>
<a href="&#x2F;grid" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Grid
</a>
<a href="&#x2F;cloud" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Cloud
</a>
<a href="&#x2F;farm" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Farm
</a>
<a href="&#x2F;tft" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
TFT
</a>
<div class="relative">
<button type="button" id="ecosystem-menu-btn" class="nav_btn font-medium text-gray-900 hover:text-gray-500 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>Ecosystem</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>
<div class="relative">
<button type="button" id="community-menu-btn" class="nav_btn font-medium text-gray-900 hover:text-gray-500 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>Community</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>
<div class="relative">
<button type="button" id="moreinfo-menu-btn" class="nav_btn font-medium text-gray-900 hover:text-gray-500 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>MoreInfo</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>
</nav>
<div class="hidden md:inline-block md:order-last">
<div class="inline-flex">
<ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4">
<a href="https://t.me/threefoldnews" target="_blank" class="text-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
fill="currentColor"
class="bi bi-telegram"
viewBox="0 0 16 16"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
/>
</svg>
</a>
</li>
<li class="ml-4">
<a
href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-black"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="envelope"
class="h-5 w-5"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
></path>
</svg>
</a>
</li>
</ul>
<div class="rounded-full border-2 mt-1 border-gray-400">
<a href="https://gettft.com/gettft/" target="_blank" class="mt-2">
<img
src="&#x2F;images&#x2F;gettft_white.png"
class="mr-5"
style="max-width: none;"
alt=""
/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<nav>
<div id="a-href-22-mission-22-mission-a-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-grid-22-grid-a-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-cloud-22-cloud-a-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-farm-22-farm-a-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</div>
</div>
</div>
</nav>
<nav>
<div id="a-href-22-tft-22-tft-a-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</div>
</div>
</div>
</nav>
<nav>
<div id="ecosystem-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;partners'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/partners">Our Partners</a>
<br>
Explore Our Partners</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.open('https:&#x2F;&#x2F;consciousinternet.org&#x2F;', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://consciousinternet.org/">Alliance</a>
<br>
Alliance For A Conscious Internet</p>
<p>
</button>
</div>
</div>
<ul>
</div>
</div>
</div>
</nav>
<nav>
<div id="community-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;people'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/people">Our People</a>
<br>
Team, stories, &amp; more</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;community'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/community">ThreeFold Community</a>
<br>
Welcome To The Fold</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;developer'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/developer">Developers Resources</a>
<br>
Join The Developer Community</p>
<p>
</button>
</div>
</div>
<ul>
</div>
</div>
</div>
</nav>
<nav>
<div id="moreinfo-menu" 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-40 xl:mx-40 px-6 sm:p-6 md:p-8">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<h4 id="resources">RESOURCES</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.open('https:&#x2F;&#x2F;explorer.threefold.io&#x2F;all', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://explorer.threefold.io/all">Explorer</a></p>
<p>ThreeFold Capacity Explorer</p>
<p>
</button>
<button onclick="window.open('https:&#x2F;&#x2F;library.threefold.me&#x2F;info&#x2F;threefold#&#x2F;', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://library.threefold.me/info/threefold#/">Library</a>
<br>
Explorer The documentation</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<h4 id="dive-deeper">DIVE DEEPER</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;blog'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/blog">Blog</a>
<br>
Explorer The Blogs</p>
<p>
</button>
<button onclick="window.location='&#x2F;newsroom'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a href="/newsroom">Newsroom</a>
<br>
Check Last Updates</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<h4 id="support-and-help">SUPPORT AND HELP</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;careers'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/careers">Careers</a>
<br>
Join The TEAM</p>
<p>
</button>
<button onclick="window.location='&#x2F;support'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a href="/support">Support</a>
<br>
Get In Touch With ThreeFold</p>
<p>
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--
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 mt-6 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12">
<a href="&#x2F;mission" 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">
Mission
</a>
<hr/>
<a href="&#x2F;grid" 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">
Grid
</a>
<hr/>
<a href="&#x2F;cloud" 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">
Cloud
</a>
<hr/>
<a href="&#x2F;farm" 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">
Farm
</a>
<hr/>
<a href="&#x2F;tft" 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">
TFT
</a>
<hr/>
<button type="button" id="ecosystem-mobile-menu-btn" 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>Ecosystem</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="ecosystem-mobile-menu" 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">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;partners'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/partners">Our Partners</a>
<br>
Explore Our Partners</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.open('https:&#x2F;&#x2F;consciousinternet.org&#x2F;', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://consciousinternet.org/">Alliance</a>
<br>
Alliance For A Conscious Internet</p>
<p>
</button>
</div>
</div>
<ul>
</div>
<hr/>
<button type="button" id="community-mobile-menu-btn" 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>Community</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="community-mobile-menu" 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">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;people'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/people">Our People</a>
<br>
Team, stories, &amp; more</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;community'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/community">ThreeFold Community</a>
<br>
Welcome To The Fold</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;developer'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/developer">Developers Resources</a>
<br>
Join The Developer Community</p>
<p>
</button>
</div>
</div>
<ul>
</div>
<hr/>
<button type="button" id="moreinfo-mobile-menu-btn" 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>MoreInfo</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="moreinfo-mobile-menu" 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">
</ul>
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- aligns columns depending on col number-->
<!-- makes row full screen width and adds background img -->
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8">
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
<h4 id="resources">RESOURCES</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.open('https:&#x2F;&#x2F;explorer.threefold.io&#x2F;all', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://explorer.threefold.io/all">Explorer</a></p>
<p>ThreeFold Capacity Explorer</p>
<p>
</button>
<button onclick="window.open('https:&#x2F;&#x2F;library.threefold.me&#x2F;info&#x2F;threefold#&#x2F;', '_blank');"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a rel="noopener nofollow noreferrer" target="_blank" href="https://library.threefold.me/info/threefold#/">Library</a>
<br>
Explorer The documentation</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<h4 id="dive-deeper">DIVE DEEPER</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;blog'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/blog">Blog</a>
<br>
Explorer The Blogs</p>
<p>
</button>
<button onclick="window.location='&#x2F;newsroom'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a href="/newsroom">Newsroom</a>
<br>
Check Last Updates</p>
<p>
</button>
</div>
<!-- Hides empty columns if displayed vertically in small screen -->
<div class="flex-1 m-2 lg:m-4 my-header">
</p>
<h4 id="support-and-help">SUPPORT AND HELP</h4>
<p>
<hr class="border-t-2 mt-2">
<br/>
<button onclick="window.location='&#x2F;careers'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p><a href="/careers">Careers</a>
<br>
Join The TEAM</p>
<p>
</button>
<button onclick="window.location='&#x2F;support'"
class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
</p>
<p></p>
<p><a href="/support">Support</a>
<br>
Get In Touch With ThreeFold</p>
<p>
</button>
</div>
</div>
</div>
<hr/>
<div class="mx-8 mt-8">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-32 h-auto" src="&#x2F;images&#x2F;tft_log.svg" alt="Company name" />
<p class="text-gray-500 text-base leading-6 ">
</p>
<div class="flex space-x-4">
<a href="https:&#x2F;&#x2F;www.facebook.com&#x2F;threefold.io" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="https:&#x2F;&#x2F;github.com&#x2F;threefoldfoundation" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Github</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="https:&#x2F;&#x2F;github.com&#x2F;threefoldtech" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Github2</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="https:&#x2F;&#x2F;twitter.com&#x2F;threefold_io" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="https:&#x2F;&#x2F;t.me&#x2F;threefoldnews" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Telegram</span>
<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.6rem" height="1.6rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg>
</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>