157 lines
7.0 KiB
HTML
157 lines
7.0 KiB
HTML
|
|
<section class="px-2 py-24 bg-transparent lg:py-54">
|
|
<div class="mx-auto max-w-3xl sm:text-center">
|
|
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
|
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
|
</div>
|
|
<h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
|
|
<p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
|
|
<p class="mt-6 text-lg text-center font-light text-gray-700">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
|
|
</div>
|
|
<div class="relative mx-auto mt-10">
|
|
<div class="text-center rounded lg:px-6 mx-auto">
|
|
<div class="items 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. 1 petabyte equals roughly 1 million gigabytes.</span>
|
|
<img class="mx-auto p-4 fade-image" src="images/V3-081.png" width="130" alt="">
|
|
<div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
|
|
<span class="block text-md mt-1 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 fade-image" src="images/V3-112.png" width="130" alt="">
|
|
<div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
|
|
<span class="block text-md mt-2 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 fade-image" src="images/V3-091.png" width="130" alt="">
|
|
<div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
|
|
<span class="block text-md mt-2 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 fade-image" src="images/V3-102.png" width="130" alt="">
|
|
<div id="countries" class="leading-none font-extrabold text-xl">41</div>
|
|
<span class="block text-md mt-2 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 fade-image" src="images/v3-131.png" width="130" alt="">
|
|
<div id="farms" class="leading-none font-extrabold text-xl">900+</div>
|
|
<span class="block text-md mt-2 font-normal capitalize">Farms</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
|
|
<a href="#" class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
|
|
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
|
</div>
|
|
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
|
|
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
|
</div>
|
|
</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;
|
|
font-weight: 200;
|
|
|
|
/* 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;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes fade {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
.fade-image {
|
|
animation: fade 3s infinite;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|