update
This commit is contained in:
@@ -1,57 +0,0 @@
|
||||
{% set base = config.base_url %}
|
||||
|
||||
<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10 lg:mt-4 pb-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<div class="arrow_up"></div>
|
||||
<a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Store</a>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
{% if 'www_threefold_io' in base %}
|
||||
{% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}
|
||||
|
||||
<img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
|
||||
{% else %}
|
||||
<img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Build</a>
|
||||
<div class="arrow_down"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.arrow_up,
|
||||
.arrow_down {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0 12.5px 30px 12.5px;
|
||||
border-color: transparent transparent #000000 transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.arrow_down {
|
||||
margin-left: 10px;
|
||||
|
||||
border-width: 35px 12.5px 0 12.5px;
|
||||
border-color: #000000 transparent transparent transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "Orbitron", sans-serif !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
color: gray;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.totalCru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<div class="lg:py-24 py-10 sm:pt-10">
|
||||
<div class="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:max-w-xl mx-auto text-center">
|
||||
<h2 class="
|
||||
|
||||
lg:text-6xl
|
||||
text-center
|
||||
capitalize
|
||||
my-2
|
||||
leading-none
|
||||
font-light
|
||||
|
||||
">
|
||||
A Global Edge <br><span class="font-medium"> Infrastructure</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 pb-12 sm:pb-16">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-1/2"></div>
|
||||
<div class="relative mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
<dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
" id="item-1">
|
||||
Nodes
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
" aria-describedby="item-1">
|
||||
{{ nodes }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Capacity
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Cores
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ cores | num_format }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Countries
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ countries }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block text-center mt-5">
|
||||
<a target="_blank" href="https://explorer.threefold.io/all" class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
text-gray-700
|
||||
hover:text-gray-500
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">Explore Capacity</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -1,16 +0,0 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20">
|
||||
<a href="/careers" class="section banner">
|
||||
<div class="center">
|
||||
<h2 class="h1">
|
||||
<strong>Join our Team</strong>
|
||||
</h2>
|
||||
</div>
|
||||
{% set background = "background-image: url(" ~ page.permalink ~ "tf_people.jpg)" %}
|
||||
|
||||
<div class="back" style="{{background}}"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,127 +0,0 @@
|
||||
{% 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>
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl my-4 bg-gray-50">
|
||||
<img class="fade-in relative mb-4" width="20%" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
<img class="fade-in relative mb-4" width="15%" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
|
||||
{{ title }}
|
||||
</dt>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<div class="relative px-4 sm:px-6 py-12 lg:py-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h2 class="
|
||||
lg:text-6xl
|
||||
leading-tight
|
||||
font-normal font-heading
|
||||
|
||||
sm:leading-10
|
||||
lg:pb-10
|
||||
">
|
||||
Dive Deeper
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/planet_first_people_first.png" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="blog/planet-first-people-first" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
Planet first. People first.
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">Together with our community and partners, we're taking action and making productive choices for our planet and humanity.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/internet_of_internets.png" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="/blog/internet-of-internets/" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
Welcome to the Internet of Internets
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">Together, we’re building our own future through the Internet of Internets – decentralized, open, inclusive, regenerative, and resilient.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/tft_vedio.jpg" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="https://www.youtube.com/watch?v=5DtVU66Z74s" target="_blank" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
ThreeFold Explained in 2 Minutes
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
|
||||
opportunities universal. Our technology ensures data ownership and a democratized
|
||||
Internet. Discover how.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,163 +0,0 @@
|
||||
{% 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">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
{% set styles = "background-image: url('V3.png');" %}
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.totalCru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="relative lg:max-w-6xl mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
|
||||
<div class="my-10 grid lg:grid-cols-4 lg:gap-8">
|
||||
|
||||
|
||||
<!-- capacity -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Nodes -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ nodes }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- countries -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ countries }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- cores -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
|
||||
<button><a href="/host">Become a Host</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
|
||||
<div class="h-full">
|
||||
<div class="flex flex-col items-center md:flex-row">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="block">
|
||||
<img
|
||||
src="expand/togethericon.png" class="w-full h-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center w-full py-24 md:w-1/2">
|
||||
<div class="flex flex-col items-start justify-center p-6">
|
||||
<h1>Be the <strong>Internet</strong></h1>
|
||||
<h3 class="my-0">Host a node, support a decentralized future</h3>
|
||||
<p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
|
||||
<button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
72
templates/shortcodes/hero_with_image.html
Normal file
72
templates/shortcodes/hero_with_image.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
|
||||
<div class="fade-in lg:h-screen flex justify-center items-center">
|
||||
<div class="isolate">
|
||||
<div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
|
||||
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
|
||||
<img class="h-auto object-cover rounded-xl" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
</div>
|
||||
<div class="mx-auto lg:mx-0 lg:flex-auto">
|
||||
<!-- Typing Text -->
|
||||
<h2 id="typing-text2" class="mt-6 fade-in">
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
/* Fade-in for Text & Image */
|
||||
.fade-in-item, .fade-in-image {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 1s ease-out, transform 1s ease-out;
|
||||
}
|
||||
|
||||
.fade-in-item.show, .fade-in-image.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Script -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
/*** Typing Effect ***/
|
||||
const text = "Own Your AI GPU & Share Capacity";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let index = 0;
|
||||
|
||||
function typeText() {
|
||||
if (index < text.length) {
|
||||
textElement.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeText, 100);
|
||||
}
|
||||
}
|
||||
|
||||
/*** Fade-in Items One by One ***/
|
||||
const items = document.querySelectorAll(".fade-in-item");
|
||||
const image = document.querySelector(".fade-in-image");
|
||||
let itemIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
if (itemIndex < items.length) {
|
||||
items[itemIndex].classList.add("show");
|
||||
itemIndex++;
|
||||
setTimeout(showNextItem, 300); // Faster fade-in
|
||||
} else {
|
||||
image.classList.add("show");
|
||||
}
|
||||
}
|
||||
|
||||
/*** Initialize Everything ***/
|
||||
typeText();
|
||||
setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
|
||||
});
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
|
||||
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
|
||||
<div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
|
||||
<h1 class="font-semibold">The Vision</h1>
|
||||
<h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
|
||||
</div>
|
||||
<div class="w-full md:w-2/3">
|
||||
<div class="flex flex-wrap justify-center md:justify-end">
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.cardhover{
|
||||
background-color: rgba(224, 224, 224, 0);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cardhover:hover{
|
||||
background-color: rgba(224, 224, 224, 0.8);
|
||||
animation-duration: 200;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cardhover{
|
||||
background-color: rgba(224, 224, 224, 0.8);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
|
||||
{# <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>
|
||||
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
<!-- Timeline section -->
|
||||
<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
|
||||
<div>
|
||||
<time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-black">
|
||||
<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-black">
|
||||
<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-black">
|
||||
<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>
|
||||
@@ -1,118 +0,0 @@
|
||||
<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="relative 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>
|
||||
|
||||
Reference in New Issue
Block a user