edit
This commit is contained in:
@@ -4,15 +4,13 @@
|
||||
<!-- home page template, has a banner and rows of page summaries -->
|
||||
|
||||
{% include "partials/hero.html" %}
|
||||
{% include "partials/logos2.html" %}
|
||||
{% include "shortcodes/grid_stats.html" %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
{% set page = get_page(path="home/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
|
||||
{% include "partials/about1.html" %}
|
||||
|
||||
{% include "partials/about.html" %}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
</div>
|
||||
|
||||
{% include "partials/ventures/hero.html" %}
|
||||
{% include "partials/ventures/logos2.html" %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col xl:flex-row xl:gap-4 items-center">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="./images/odfz.svg" alt="logo" />
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="./images/tf_logo.svg" alt="logo" />
|
||||
</div>
|
||||
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
|
||||
© 2024 OurWorld Holdings, All rights reserved.
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
|
||||
<div class="{{'z-10 bg-transparent fixed w-screen ' ~ header_class}}">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img class="w-56 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
|
||||
<img class="w-60 h-auto sm:w-15" src="{{logo_path}}" alt="tf Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<div class="relative isolate overflow-hidden h-screen bg-white">
|
||||
<div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
|
||||
<div class="text-center">
|
||||
<img src="./images/logo.svg"
|
||||
alt="Hero Image"
|
||||
width="210"
|
||||
height="210"
|
||||
class="mx-auto rounded-md">
|
||||
|
||||
<p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
|
||||
<div class="relative bg-white">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="relative z-10 lg:w-full lg:max-w-2xl">
|
||||
<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>
|
||||
<div class="relative px-6 py-40 lg:px-8 lg:pr-0">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
|
||||
<h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
|
||||
<p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6 animate-fade-up">
|
||||
<a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
|
||||
<a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ODFZ OurWorld Digital FreeZone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
<a href="/about" class="rounded-xl border border-gray-800 px-4 py-2.5 font-medium text-gray-900 bg-transparent shadow-sm hover:bg-blue-700 hover:text-blue-700 transition-all duration-300">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
|
||||
<img class="aspect-[3/2] w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
|
||||
<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>
|
||||
@@ -31,26 +31,53 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.relative.isolate.overflow-hidden.h-screen {
|
||||
height: 100vh;
|
||||
/* Background gradient */
|
||||
.bg-gradient-bl {
|
||||
background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
|
||||
}
|
||||
|
||||
/* Fade-up animation for text */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
|
||||
/* Fade-in animation for the image (GIF) */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply fade-up animation to text */
|
||||
.animate-fade-up {
|
||||
animation: fadeUp 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Apply fade-in animation to the GIF */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 2s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Responsive styles for smaller screens */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2rem; /* Smaller font for mobile */
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem; /* Smaller font for mobile */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem; /* Smaller font for mobile */
|
||||
margin-left: 1rem; /* Margin left for mobile */
|
||||
margin-right: 1rem; /* Margin right for mobile */
|
||||
line-height: 1.5; /* Smaller line spacing */
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
41
templates/partials/logos2.html
Normal file
41
templates/partials/logos2.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<div class="bg-transparent pt-0 pb-12 overflow-hidden">
|
||||
<div class="flex space-x-8 animate-scroll">
|
||||
<!-- First set of logos -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
|
||||
<!-- Duplicate set of logos to create the endless effect -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Keyframe animation for slow horizontal scrolling */
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* Apply the animation */
|
||||
.animate-scroll {
|
||||
display: flex;
|
||||
animation: scroll 25s linear infinite;
|
||||
gap: 2rem;
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
@@ -1,78 +1,150 @@
|
||||
{% set styles = "background-image: url('/images/ston_bg.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) %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% endif %}
|
||||
<style>
|
||||
.bg-map {
|
||||
background-color: #EAE8E3;
|
||||
}
|
||||
</style>
|
||||
<div class="bg-map pb-24">
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
|
||||
<div class=" overflow-hidden">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/node_icon.png" width="65" alt="">
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
|
||||
{{ nodes }}
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
freeflow nodes <br />deployed
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="px-2 py-24 bg-center lg:py-54">
|
||||
<div class="mx-auto max-w-3xl sm:text-center">
|
||||
<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-600">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-08.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-11.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-09.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-10.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/farm.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=" overflow-hidden bg-no-repeat bg-center bg-contain text-center" style="{{styles}}">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
|
||||
{{ countries }}
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
countries <br />involved
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" overflow-hidden">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/capacity_icon.png" width="65" alt="">
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
|
||||
{{ capacity | round() }}TB
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
capacity <br />generated
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</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-8 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>
|
||||
</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.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fade-image {
|
||||
animation: fade 3s infinite;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
82
templates/shortcodes/grid_stats_expand.html
Normal file
82
templates/shortcodes/grid_stats_expand.html
Normal 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>
|
||||
Reference in New Issue
Block a user