ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update home page

Browse Source
This commit is contained in:
Ehab Hassan
2024-05-08 22:56:33 +03:00
parent 4e5bd7c9b3
commit 6c0fbd19d1
3 changed files with 116 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/home/host2_earn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

68
content/home/index.md
View File

@@ -16,9 +16,13 @@ extra:
{% row(style="reverse header") %}
# **ThreeFold**
## **Decentralized<br>Autonomous <span class="blue">Cloud</span>**
#### **The <span class="blue">Leading</span> Decentralized Cloud Marketplace**
<br>
ThreeFold’s self-healing autonomous system empowers anyone to become a cloud service provider – no technical expertise required – allowing people and organizations to buy, sell and use cloud resources autonomously and securely.
<br>
@@ -27,7 +31,9 @@ ThreeFold’s self-healing autonomous system empowers anyone to become a cloud s
<br>
<button>[Host](/host)</button> <button>[Deploy](https://dashboard.grid.tf)</button> <button>[Learn](https://manual.grid.tf)</button>
<button class="blue_b">[Host The Cloud](/host)</button> <button class="green">[Deploy](https://dashboard.grid.tf)</button>
<!-- <button>[Learn](https://manual.grid.tf)</button> -->
|||
@@ -54,15 +60,24 @@ Provide cloud and Internet capacity in your area and become a part of the larges
{% row(style="reverse margin") %}
## **It Starts with <span class="blue">3Nodes</span>**
# **Host2 <span class="blue">Earn</span>**
**<span class="blue">3Nodes</span>**, powered by our stateless operating system, Zero-OS, allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud. Pre-configured plug and earn 3Nodes for beginners, or do it yourself 3Nodes for builders
#### **It starts with <spane class="green_text">Nodes</spane>**
<button>[Get Started](/host)</button>
<br>
3Nodes allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud: pre-configured plug-and-earn nodes for beginners, or do-it-yourself nodes for builders.
<br>
Earn TFT by adding capacity to the grid.
<button class="green">[Host The Cloud](/host)</button>
<button class="blue_b">[Explore Rewards](/host)</button>
|||
![Image](node_home.png#mx-auto)
![Image](host2_earn.png#mx-auto)
{% end %}
@@ -283,3 +298,44 @@ Meet the community and join the conversation
</div>
<style>
.green{
background-color:#58CF77 !important;
color: #fff !important;
}
.green:hover {
background-color:#7ad993 !important;
}
.green a{
color: #fff !important;
}
.green:hover {
background-color:#7ad993 !important;
}
.green_text{
color: #58CF77 ;
}
.blue_b{
background-color:#2E83FF !important;
color: #fff !important;
}
.blue_b a{
color: #fff !important;
}
.blue_b:hover {
background-color:#5596f5 !important;
}
</style>

75
templates/shortcodes/grid_stats.html
View File

@@ -3,62 +3,72 @@
<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="items my-10 grid lg:grid-cols-4 lg:gap-8 animate-pulse">
<div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
<!-- capacity -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<img
class="mx-auto p-4"
src="images/V3-08.png"
width="150"
width="100"
alt=""
>
<div id="capacity" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
<div id="capacity" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">capacity</span>
</div>
<!-- Nodes -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<img
class="mx-auto p-4"
src="images/V3-09.png"
width="150"
width="100"
alt=""
>
<div id="nodes" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
<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="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<img
class="mx-auto p-4"
src="images/V3-10.png"
width="150"
width="100"
alt=""
>
<div id="countries" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
<div id="countries" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">countries</span>
</div>
<!-- cores -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<img
class="mx-auto p-4"
src="images/V3-11.png"
width="150"
width="100"
alt=""
>
<div id="cores" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
<div id="cores" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 font-normal capitalize">cores</span>
</div>
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<img
class="mx-auto p-4"
src="images/V3-11.png"
width="100"
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">
<button class="my-8 blue_b">
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
Explore ThreeFold Grid Capacity
Explore Grid Capacity
</a>
</button>
<button class="my-8">
{# <button class="my-8">
<a href="/host" target="_self">
Become a Cloud Provider
</a>
</button>
</button> #}
</div>
</div>
</section>
@@ -77,4 +87,27 @@
.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;
}
</style>