Compare commits
No commits in common. "d94c74ee5f2ed86acafac932831468d964958352" and "6cabb959357186f44f7b17f0f74fd23fd561a4c0" have entirely different histories.
d94c74ee5f
...
6cabb95935
@ -1,23 +0,0 @@
|
||||
---
|
||||
title: "About AIBOX"
|
||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
|
||||
insert_anchor_links: "left"
|
||||
template: "layouts/about.html"
|
||||
extra:
|
||||
author: AIBOX
|
||||
imgPath: tf.png
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!--
|
||||
This page is made by combining different 'section' (partial html pages) together.
|
||||
To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
|
||||
To see the list of the section blocks in this page, add or remove some of the partial pages,
|
||||
go to: static/templates/layouts/index.html.
|
||||
|
||||
HOMEPAGE (static/templates/layouts/about.html) contains:
|
||||
|
||||
1. Hero section: "templates/partials/about/about1.html
|
||||
2. Hero section: "templates/partials/about/about2.html
|
||||
|
||||
@ -7,6 +7,6 @@ extra:
|
||||
|
||||
---
|
||||
|
||||
- [Powered by ThreeFold]("about")
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/about/about1.html" %}
|
||||
{% include "partials/about/grid_stats.html" %}
|
||||
{% include "partials/about/farmers.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,42 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
|
||||
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a development by the team at ThreeFold, building decentralized Internet infrastructure for 10+ years.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-medium text-black fade-in">Internet infrastructure for everyone, by everyone, everywhere.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold enables individuals and organizations to contribute compute, storage, and network resources to the ThreeFold Grid, forming the foundation for a truly decentralized and autonomous Internet.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, a Proof-of-Concept Network is live worldwide, running on v3.15.0 technology.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
<div class="bg-transparent pt-12 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
|
||||
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
|
||||
</p>
|
||||
</div>
|
||||
<section class="pb-32 bg-transparent">
|
||||
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
1. HOST A NODE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
2. OFFER CAPACITY
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
3. EARN REWARDS
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,133 +0,0 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="items grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- ssd -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-transparent p-3">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
|
||||
<dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
|
||||
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
|
||||
<dt class="text-sm/6 font-light text-black">CORES</dt>
|
||||
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
|
||||
<dt class="text-sm/6 font-light text-black">NODES</dt>
|
||||
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
|
||||
<dt class="text-sm/6 font-light text-black">COUNTRIES</dt>
|
||||
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-8">
|
||||
<a href="https://threefold.io"
|
||||
target="_blank"
|
||||
class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
|
||||
Visit ThreeFold</a>
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in text-base font-semibold text-black hover:text-gray-800 ">Explore Grid Capacity<span
|
||||
aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('ssd', 0, 1910, 0, 2.5).start();
|
||||
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
||||
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
||||
new CountUp('countries', 0, 40, 0, 2.5).start();
|
||||
new CountUp('farms', 0, 900, 0, 2.5).start();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
background-color: rgb(26 26 26 / 90%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/* 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: -7px !important;
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{%- set section = get_page(path="header/index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="<li>") %}
|
||||
|
||||
<header id="header-container">
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-white l lg:absolute w-full">
|
||||
<header id="header-container bg-white">
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<div>
|
||||
<a href="{{get_url(path='/')}}" class="flex">
|
||||
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<button id="close-hamburger-btn" type="button" class="bg-white hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
@ -36,7 +36,7 @@
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg font-normal py-3 leading-6 text-pretty tracking-normal text-black focus:outline-none focus:text-gray-700 transition ease-in-out duration-150">
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -45,14 +45,14 @@
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
@ -107,7 +107,7 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul> #}
|
||||
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-gray-900">Pre-Order Now</a>
|
||||
<a href="/" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-stone-90">Get AIBox</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,13 +166,13 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-900 focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
|
||||
{{ header_label }}
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
@ -197,7 +197,7 @@
|
||||
</div> #}
|
||||
|
||||
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Participate in Web4</a>
|
||||
<a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -1,162 +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" 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user