ourworld_web/www_mycelium
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ourworld_web
2025-02-12 06:59:33 +00:00
commit 648680d0ae
406 changed files with 15597 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
templates/shortcodes/admonition.html Normal file
View File

@@ -0,0 +1,65 @@
<!-- admonition shortcode for adding admonition in md-->
{% set classes = "" %}
{% set first_line = body | split(pat="\n") | first %}
{% set parsed_first_line = first_line | split(pat=" ") %}
{% set admonition = parsed_first_line | first %}
{% set style = "" %}
{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
<!-- sets admonition type depending on qualifiers and modifiers
hides content if doesn't adhere to admonition formatting -->
{% if admonition == "!!!" %}
{% set classes = "admonition" %}
{% elif admonition == "???" %}
{% set style = "collapsible closed" %}
{% set classes = "admonition" %}
{% elif admonition == "???+" %}
{% set style = "collapsible open" %}
{% set classes = "admonition" %}
{% else %}
{% set classes = "hidden" %}
{% endif %}
{% if "inline end" in first_line %}
{% set classes = classes ~ " inline end" %}
{% set parsed_first_line = parsed_first_line | slice(end=-2)%}
{% elif "inline" in first_line %}
{% set classes = classes ~ " inline" %}
{% set parsed_first_line = parsed_first_line | slice(end=-1)%}
{% endif %}
{% if classes != "hidden"%}
{% if parsed_first_line[1] %}
{% set classes = classes ~ " " ~ parsed_first_line[1] %}
{% endif %}
{% if parsed_first_line[2] %}
{% if not parsed_first_line[2] == '""' %}
{% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}
{% endif %}
{% else %}
{% if parsed_first_line[1] %}
{% set title = parsed_first_line[1] | title %}
{% endif %}
{% endif %}
{% endif %}
{% if "collapsible" in style %}
<details class="{{classes}}"
{% if "open" in style %} {{ "open='open'" }} {% endif %}>
{% if title %}
<summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
<p>{{ content }}</p>
{% endif %}
</details>
{% else %}
<div class="{{classes}}">
{% if title %}
<div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
{% endif %}
<p>{{ content }}</p>
</div>
{% endif %}

19
templates/shortcodes/button.html Normal file
View File

@@ -0,0 +1,19 @@
{% set url = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"')
| trim_end_matches(pat='"') %}
{% if 'https' in url %}
{% if url is not containing("threefold") %}
{% if url is not containing("localhost") %}
<button onclick="window.open('{{url}}', '_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">
{{ body | trim_start_matches(pat="<p>") | safe}}
</button>
{% endif %}
{% endif %}
{% else %}
<button onclick="window.location='{{get_url(path=url)}}'"
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">
<a href="{{get_url(path=url)}}"> {{ body | trim_start_matches(pat="<p>") | striptags | safe}}</a>
</button>
{% endif %}

57
templates/shortcodes/cloud_header.html Normal file
View File

@@ -0,0 +1,57 @@
{% 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>

174
templates/shortcodes/cloud_stats.html Normal file
View File

@@ -0,0 +1,174 @@
{% 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 %}

16
templates/shortcodes/community_banner.html Normal file
View File

@@ -0,0 +1,16 @@
{% 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 %}

127
templates/shortcodes/dev_resourses.html Normal file
View File

@@ -0,0 +1,127 @@
{% if '127.0.0.1:1111' in config.base_url %}
{% set img_url = 'developer/' %}
{% else %}
{% set img_url = '' %}
{% endif %}
{% if 'www_threefold_io' in config.base_url %}
{% set url = '/www_threefold_io' %}
{% else %}
{% set url = '' %}
{% endif %}
<div class="my-5 lg:py-24 py-10 lg:mx-28 mx-4">
<div class="w-full text-center">
<h2 class="lg:text-6xl capitalize font-normal leading-tight">
where would you like to start?
</h2>
<div class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide">ThreeFold's open-source
infrastructure has been built from the ground up on the Linux Kernel to create a fully decentralized
Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, the
next-generation Internet is here.
</div>
</div>
<div class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-16">
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/os" }}>
<img src={{ img_url ~ 'operating_system.png' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
Operating System
</div>
</a>
</div>
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/automation" }}>
<img src={{ img_url ~ 'automation.png' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
Autonomous Components
</div>
</a>
</div>
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/tooling" }}>
<img src={{ img_url ~ 'tooling.png' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
Developer tooling
</div>
</a>
</div>
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/qsfs" }}>
<img src={{ img_url ~ 'qsfs.png' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
Quantum-Safe Storage
</div>
</a>
</div>
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/blockchain" }}>
<img src={{ img_url ~ 'blockchain.png' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
ThreeFold Blockchain
</div>
</a>
</div>
<div class="
mx-auto
my-4
rounded
overflow-hidden
transition
duration-500
bg-gray-100
">
<a href={{ url ~ "/developer/planetarynw" }}>
<img src={{ img_url ~ 'planetary_network.jpg' }} />
<div class="font-bold text-xl py-5 mx-4 text-black">
Planetary Network
</div>
</a>
</div>
</div>
</div>

70
templates/shortcodes/featured_stories.html Normal file
View File

@@ -0,0 +1,70 @@
<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>

162
templates/shortcodes/grid_stats.html Normal file
View File

@@ -0,0 +1,162 @@
{% set styles = "background-image: url('images/V3.png');" %}
<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
<div class="relative mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
<!-- capacity -->
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<img
class="mx-auto p-4"
src="images/V3-08.png"
width="130"
alt=""
>
<div id="capacity" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">capacity</span>
</div>
<!-- cores -->
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
<img
class="mx-auto p-4"
src="images/V3-11.png"
width="130"
alt=""
>
<div id="cores" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">cores</span>
</div>
<!-- Nodes -->
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
<img
class="mx-auto p-4"
src="images/V3-09.png"
width="130"
alt=""
>
<div id="nodes" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">nodes</span>
</div>
<!-- countries -->
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
<img
class="mx-auto p-4"
src="images/V3-10.png"
width="130"
alt=""
>
<div id="countries" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">countries</span>
</div>
<!-- farms -->
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
<img
class="mx-auto p-4"
src="images/farm.png"
width="130"
alt=""
>
<div id="farms" class="leading-none font-extrabold text-xl">900+</div>
<span class="block text-md mt-4 font-normal capitalize">farms</span>
</div>
</div>
<button class="my-8 blue_b">
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
Explore Grid Capacity
</a>
</button>
{# <button class="my-8">
<a href="/host" target="_self">
Become a Cloud Provider
</a>
</button> #}
</div>
</div>
</section>
<style>
dd {
display: inline-block;
margin: auto;
border-radius: 50%;
line-height: 100px;
}
.bg-green {
background-color: #70dfc9;
}
.bg-pink {
background-color: #ea1ff7;
}
.blue_b{
background-color:#2E83FF !important;
color: #fff !important;
}
.blue_b a{
color: #fff !important;
}
.blue_b:hover {
background-color:#5596f5 !important;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 14px;
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: -50px;
right: -60px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
@media (max-width: 480px) {
.tooltip .tooltiptext {
position: absolute;
z-index: 1;
bottom: -50px;
right: 0px !important;
}
}
</style>

82
templates/shortcodes/grid_stats_expand.html Normal file
View File

@@ -0,0 +1,82 @@
{% 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>

20
templates/shortcodes/header_new.html Normal file
View File

@@ -0,0 +1,20 @@
<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>

59
templates/shortcodes/hovevision.html Normal file
View File

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

209
templates/shortcodes/jobs.html Normal file
View File

@@ -0,0 +1,209 @@
<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>

97
templates/shortcodes/logo_slider.html Normal file
View File

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

44
templates/shortcodes/menu.html Normal file
View File

@@ -0,0 +1,44 @@
<!-- 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
-->
{% set columns = body | safe | markdown | split(pat="|||") %}
<!-- aligns columns depending on col number-->
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
{% set column_classes = "flex-1 m-2 lg:m-4 my-header" %}
<!-- makes row full screen width and adds background img -->
<div class="{{classes}}">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
{{column | split(pat="{% button() %}") | slice(end=1)}}
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
{% set body = button %}
{% include "shortcodes/button.html" %}
{% endfor %}
</div>
{% else %}
<div class="{{column_classes}}">
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
<hr class="border-t-2 mt-2">
<br/>
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
{% set body = button %}
{% include "shortcodes/button.html" %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>

3
templates/shortcodes/mermaid.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="mermaid">
{{ body }}
</div>

126
templates/shortcodes/roadmap.html Normal file
View File

@@ -0,0 +1,126 @@
<!-- 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>

184
templates/shortcodes/row.html Normal file
View File

@@ -0,0 +1,184 @@
<!-- 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
-->
<!-- This fixes link paths in prod -->
{% if page %}
{% if "](" in body %}
{% set body_arr = body | split(pat="](") %}
{% set body = body_arr[0] %}
{% for i in body_arr %}
{% set prev_index = loop.index0 - 1 %}
{% if not loop.first %}
{% if "![" in body_arr[prev_index] %}
{% set_global body = body ~ '](' ~ page.permalink ~ i %}
{% else %}
{% if i is not starting_with("http") %}
{% set base_url = get_url(path="") %}
{% set_global body = body ~ '](' ~ base_url ~ i %}
{% else %}
{% set_global body = body ~ '](' ~ i %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
<!-- makes external links in row open in new tabs-->
{% set body = body | markdown | replace(from='href="', to='target="_blank" href="') | safe %}
{% set base_url = get_url(path="")%}
{% set body = body | markdown | replace(from='target="_blank" href="' ~ base_url , to='href="' ~ base_url) | safe %}
<!-- Splits body to columns -->
{% set columns = body | safe | markdown | split(pat="|||") %}
{% set row_class = "relative lg:p-4 p-1 flex flex-col xl:flex xl:flex-row"%}
<!-- aligns columns depending on col number-->
{% if 2 < columns | length %}
{% set row_class = row_class ~ " lg:items-start" %}
{% else %}
{% set row_class = row_class ~ " lg:items-center" %}
{% endif %}
{% set col_class = "flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full" %}
{% set row_id = '' %}
{% if id %}
{% set row_id = id %}
{% endif %}
{% if style %}
{% if "centerItem" in style %}
{% set row_class = "flex flex-col md:flex-row items-start" %}
{% endif %}
<!-- reverse col at mobile -->
{% if "reverse" in style %}
{% set row_class = "flex flex-col-reverse md:flex-row items-center" %}
{% endif %}
{% if "center" in style %}
{% set row_class = row_class ~ " text-center mx-auto justify-center" %}
{% set col_class = col_class ~ " m-2 lg:m-0" %}
{% endif %}
{% if "text-white" in style %}
{% set row_class = row_class ~ " text-white" %}
{% endif %}
<!-- makes row with margins -->
{% if "margin" in style %}
{% set row_class = row_class ~ " lg:py-24 py-10" %}
{% set col_class = col_class ~ " m-2 lg:m-0" %}
{% endif %}
<!-- makes row with margins -->
{% if "header" in style %}
{% set row_class = row_class ~ " h-auto xl:h-screen md:h-auto mt-4 lg:mt-0" %}
{% set col_class = col_class ~ " mt-3" %}
{% endif %}
{% if "mtop" in style %}
{% set row_class = row_class ~ " lg:pt-24 pt-2" %}
{% set col_class = col_class ~ " m-2 lg:m-0" %}
{% endif %}
{% if "mbottom" in style %}
{% set row_class = row_class ~ " lg:pb-24" %}
{% set col_class = col_class ~ " m-2 lg:m-0" %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "lean" in style %}
{% set row_class = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% set col_class = "flex-1 m-4 lg:m-0" %}
{% endif %}
<!-- makes row semi-full screen width, strips margins -->
{% if "between" in style %}
{% set row_class = row_class ~ " lg:max-w-6xl lg:mx-auto mx-4" %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20" %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "narrow" in style %}
{% set row_class = row_class ~ " lg:max-w-4xl mx-auto" %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20" %}
{% endif %}
{% if "semiNarrow" in style %}
{% set row_class = row_class ~ " lg:px-20 mx-auto" %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20" %}
{% endif %}
{% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% if bgPath %}
{% set background_url = page.permalink ~ bgPath %}
{% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: bottom;" %}
{% set row_class = row_class ~ "w-screen sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% endif %}
{% if bgColor %}
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
{% set row_class = row_class ~ " w-auto -mx-4 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% endif %}
{% if gradient %}
{% set styles = "background: " ~ gradient ~ "; background-size: cover" %}
{% set row_class = row_class ~ " w-auto -mx-4 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% endif %}
{% if bgStyle %}
{% if "full" in bgStyle %}
{% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %}
{% elif "hero" in bgStyle %}
{% set div_class = div_class ~ " -mt-24 pt-12 " %}
{% endif %}
{% endif %}
{% set url = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') %}
<div class="{{row_class}}" style="{{styles}}" id="{{row_id}}">
{% for column in columns %}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
{{ column | safe }}
</div>
{% else %}
<div class="{{col_class}}">
<!-- handles mermaid markdown content display -->
{% if "{% mermaid() %}" in column %}
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
<div class="mermaid">
{{mermaid_content | safe }}
</div>
{% else %}
{{ column | safe }}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>

118
templates/shortcodes/storymap.html Normal file
View File

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

115
templates/shortcodes/tabs_tech.html Normal file
View File

@@ -0,0 +1,115 @@
<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>

404
templates/shortcodes/team_sec.html Normal file
View File

@@ -0,0 +1,404 @@
<div class="lg:py-24 flex flex-col my-6 p-auto lg:px-20">
<h2 class="flex py-2 mx-auto font-normal lg:text-6xl">
The Team
</h2>
<div class="lg:max-w-4xl lg:text-xl text-lg text-center mb-8 mx-auto leading-relaxed">
Spread across the world, our team has
built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
digital workloads via smart contract, removing all forms of centralization from global IT systems.
</div>
<div class="flex overflow-x-scroll pb-10 scrollable">
<div class="flex flex-nowrap ml-10 mt-10">
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/kristof-de-spiegeleer/" title="Kristof De Spiegeleer">
<img src="/images/people/kristof_de_spiegeleer.jpeg" class="rounded-full mx-auto mt-3" alt="Kristof De Spiegeleer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/adnan-fatayerji/" title="Adnan Fatayerji">
<img src="/images/people/adnan_fatayerji.jpg" class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sabrina-sadik/" title="Sabrina Sadik">
<img src="/images/people/sabrina_sadik.jpg" class="rounded-full mx-auto mt-3" alt="Sabrina Sadik">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sacha-obeegadoo/" title="Sacha obeegadoo">
<img src="/images/people/sacha_obeegadoo.jpg" class="rounded-full mx-auto mt-3" alt="Sacha obeegadoo">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/jan-de-landtsheer/" title="Jan De Landtsheer">
<img src="/images/people/jan_de_landtsheer.jpeg" class="rounded-full mx-auto mt-3" alt="Jan De Landtsheer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/reem-khamis/" title="Reem Khamis">
<img src="/images/people/reem_khamis.jpg" class="rounded-full mx-auto mt-3" alt="Reem Khamis">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/ahmed-thabet/" title="Ahmed Thabet">
<img src="/images/people/ahmed_thabet.jpg" class="rounded-full mx-auto mt-3" alt="Ahmed Thabet">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/florian-fournier/" title="Florian Fournier">
<img src="/images/people/florian_fournier.jpeg" class="rounded-full mx-auto mt-3" alt="Florian Fournier">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/ewald-weizenbauer/" title="Ewald Weizenbauer">
<img src="/images/people/ewald_weizenbauer.jpg" class="rounded-full mx-auto mt-3" alt="Ewald Weizenbauer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/owen-kemp/" title="Owen Kemp">
<img src="/images/people/owen_kemp.jpeg" class="rounded-full mx-auto mt-3" alt="Owen Kemp">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/peter-van-der-henst/" title="Peter van der Henst">
<img src="/images/people/peter_van_der_henst.png" class="rounded-full mx-auto mt-3" alt="Peter van der Henst">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/alexandre-hannelas/" title="alexandre_hannelas">
<img src="/images/people/alexandre_hannelas.jpeg" class="rounded-full mx-auto mt-3" alt="alexandre_hannelas">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/karoline-zizka/" title="Karoline Zizka">
<img src="/images/people/karoline_zizka.jpeg" class="rounded-full mx-auto mt-3" alt="Karoline Zizka">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/lee-smet/" title="Lee Smet">
<img src="/images/people/lee_smet.png" class="rounded-full mx-auto mt-3" alt="Lee Smet">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/maxime-daniel/" title="Maxime Daniel">
<img src="/images/people/maxime_daniel.png" class="rounded-full mx-auto mt-3" alt="Maxime Daniel">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/pierre-van-hoorebeke/" title="Pierre van Hoorebeke">
<img src="/images/people/pierre_van_hoorebeke.jpg" class="rounded-full mx-auto mt-3" alt="Pierre van Hoorebeke">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sam-taggart/" title="Sam Taggart">
<img src="/images/people/sam_taggart.jpg" class="rounded-full mx-auto mt-3" alt="Sam Taggart">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/scott-yeager/" title="Scott Yeager">
<img src="/images/people/scott_yeager.jpg" class="rounded-full mx-auto mt-3" alt="Scott Yeager">
</a>
</div>
</div>
{#
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/gloria-anne/" title="Gloria Anne">
<img src="images/people/gloria_anne.png" class="rounded-full mx-auto mt-3" alt="Gloria Anne">
</a>
</div>
</div>
#}
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sasha-astiadi/" title="Sasha Astiadi">
<img src="/images/people/sasha_astiadi.png" class="rounded-full mx-auto mt-3" alt="Sasha Astiadi">
</a>
</div>
</div>
</div>
</div>
</div>
<style>
.scrollable::-webkit-scrollbar {
width: 8px;
}
.scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 20px;
}
.scrollable::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
border-radius: 20px;
}
/* #70dfc9, #ee7bf7 */
.box {
position: relative;
height: 130px;
width: 130px;
}
.box::before {
content: "";
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
padding: 10px;
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box img {
filter: grayscale(100%);
height: 110px;
width: 110px;
}
.box img:hover {
filter: grayscale(0);
}
</style>

15
templates/shortcodes/tft_header.html Normal file
View File

@@ -0,0 +1,15 @@
{% block content %}
<div
class="relative lg:pb-24 pb-10 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-2 lg:py-2 lg:items-center text-center mx-auto justify-center">
<a class="center pb-4 lg:pb-0" href="https://coinmarketcap.com/currencies/threefold/" target="_blank">
{% set link = page.permalink ~ "cointelegraph_logo.png"%}
<img class="logo_size mx-auto" src="{{link}}" alt="cointelegraph">
</a>
<a class="center" href="https://www.coingecko.com/en/coins/threefold-token" target="_blank">
{% set link = page.permalink ~ "coin_logo.png"%}
<img class="logo_size mx-auto" src="{{link}}" alt="CoinGecko">
</a>
</div>
{% endblock content %}

26
templates/shortcodes/tft_links.html Normal file
View File

@@ -0,0 +1,26 @@
{% block content %}
<div class="quicklinks text-center">
<a class="center" href="https://gettft.com/gettft/" rel="some text" target="_blank">
{% set link = page.permalink ~ "get_tft_button.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="gettft">
</a>
<a class="center"
href="https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html"
target="_blank">
{% set link = page.permalink ~ "stellar_logo.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="stellar">
</a>
<a class="center"
href="https://pancakeswap.finance/swap?exactField=output&exactAmount=100&outputCurrency=0x8f0FB159380176D324542b3a7933F0C2Fd0c2bbf&inputCurrency=0xe9e7cea3dedca5984780bafc599bd69add087d56?use=v2"
target="_blank">
{% set link = page.permalink ~ "pancack_button.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="pancakeswap">
</a>
<a class="center" href="https://app.1inch.io/#/56/swap/BNB/TFT" target="_blank">
{% set link = page.permalink ~ "iinch_button.png"%}
<img class="py-2 my-2 mr-2 px-5 border-2 border-black" src="{{link}}" alt="1inch">
</a>
</div>
{% endblock content %}