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

update 3 pages

Browse Source
This commit is contained in:
Ehab Hassan
2024-05-22 15:59:55 +03:00
parent c417cb261a
commit 612b2d6965
7 changed files with 239 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
content/about/index.md
View File

@@ -31,40 +31,22 @@ About a decade ago, a group of passionate Internet & cloud veterans came togethe
<!-- section 2 our Story -->
<div style="background-color:#F6F6F6">
<div class="container mx-auto">
{% row( style="center narrow mtop") %}
## **Our <span class="blue">Story</span>**
### **Enabling True <span class="green_text">Decentralization</span>**
<hr>
{% end %}
{% row( style="center narrow mbottom") %}
{% storymap() %}
#### **<span class="blue uppercase">Our journey began**</span>
with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.
<br>
<br>
#### **<span class="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.
<br>
<br>
#### **<span class="blue uppercase">Today**</span>
as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ countries, a significant milestone in our ongoing commitment to redefine the future of the digital landscape.
## **storymap**
{% end %}
@@ -74,6 +56,9 @@ as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ c
<!-- section 3 -->
<div class="container mx-auto">
@@ -98,7 +83,7 @@ as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ c
<br>
Market Cap
<p class="text-3xl blue font-bold">8 Billion $</p>
<p class="text-2xl blue font-bold">8 Billion $</p>
</div>
@@ -113,7 +98,7 @@ Market Cap
<br>
Market Cap
<p class="text-3xl blue font-bold">34 Billion $</p>
<p class="text-2xl blue font-bold">34 Billion $</p>
</div>
@@ -128,7 +113,7 @@ Market Cap
<br>
Market Cap
<p class="text-3xl blue font-bold">8 Billion $</p>
<p class="text-2xl blue font-bold">8 Billion $</p>
</div>
@@ -143,7 +128,7 @@ Market Cap
<br>
Market Cap
<p class="text-3xl blue font-bold">205 Billion $</p>
<p class="text-2xl blue font-bold">205 Billion $</p>
</div>
@@ -158,7 +143,7 @@ Market Cap
<br>
Market Cap
<p class="text-3xl blue font-bold">25 Billion $</p>
<p class="text-2xl blue font-bold">25 Billion $</p>
</div>
@@ -174,7 +159,7 @@ Market Cap
<div class="container mx-auto">
{% row( style="center narrow mtop") %}
{% row( style="mtop") %}
## **Roadmap**

55
content/deploy/index.md
View File

@@ -27,6 +27,8 @@ ThreeFold has developed extensive technology and tools for <span class="blue">de
From decentralized cloud computing and blockchain integration to overseeing infrastructures and optimizing performance, there is a breadth of options for smooth and efficient operations.
<br>
<button class="green">[Developer Documentation](https://www.manual.grid.tf/documentation/developers/developers.html)</button>
<button class="blue_b">[Sysadmin Documentation](https://www.manual.grid.tf/documentation/system_administrators/system_administrators.html)</button>
@@ -45,25 +47,23 @@ From decentralized cloud computing and blockchain integration to overseeing infr
<div class="container mx-auto">
{% row( style="center mtop semiNarrow") %}
{% row( style="mtop semiNarrow") %}
#### <span class="green_text">Deploy With ThreeFold</span>
<br>
### **<span class="">Deploy With ThreeFold**
## **Key Features**
{% end %}
{% row( style="center semiNarrow") %}
{% row( style="semiNarrow") %}
<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
**<span class="blue mb-2">Anything LINUX can run on the Grid</span>**
**Anything LINUX can run on the Grid**
<p class="text-base">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
<p class="text-base mt-2">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
</div>
@@ -73,10 +73,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
**<span class="blue mb-2">VIRTUAL MACHINES & GATEWAY TECHNOLOGY</span>**
**VIRTUAL MACHINES & GATEWAY TECHNOLOGY**
<p class="text-base">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
<p class="text-base mt-1 leading-snug">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
</div>
@@ -86,25 +86,25 @@ From decentralized cloud computing and blockchain integration to overseeing infr
<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
**<span class="blue mb-2">ONE-CLICK SOLUTION FOR WORKLOADS</span>**
**ONE-CLICK SOLUTION FOR WORKLOADS**
<p class="text-base">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
<p class="text-base mt-2">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
</div>
{% end %}
{% row( style="center semiNarrow") %}
{% row( style="semiNarrow") %}
<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
**<span class="blue mb-2">OPEN SOURCE LOW LEVEL OPERATING SYSTEM</span>**
**OPEN SOURCE LOW LEVEL OPERATING SYSTEM**
<p class="text-base">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
<p class="text-base mt-2">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
</div>
@@ -114,10 +114,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
**<span class="blue mb-2">PEER TO PEER MESH NETWORK</span>**
**PEER TO PEER MESH NETWORK**
<p class="text-base">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
<p class="text-base mt-2">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
</div>
@@ -127,10 +127,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
**<span class="blue mb-2">QUANTUM SAFE STORAGE SYSTEM</span>**
**QUANTUM SAFE STORAGE SYSTEM**
<p class="text-base">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
<p class="text-base mt-2">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
</div>
@@ -139,15 +139,15 @@ From decentralized cloud computing and blockchain integration to overseeing infr
{% end %}
{% row( style="center semiNarrow") %}
{% row( style="semiNarrow") %}
<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
**<span class="blue mb-2">TOOLS AVAILABLE FOR SYSADMINS</span>**
**TOOLS AVAILABLE FOR SYSADMINS**
<p class="text-base">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
<p class="text-base mt-2">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
</div>
@@ -155,21 +155,22 @@ From decentralized cloud computing and blockchain integration to overseeing infr
|||
|||
<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
**<span class="blue mb-2">AI AND MACHINE LEARNING WORKLOADS WITH GPU</span>**
**AI AND MACHINE LEARNING WORKLOADS WITH GPU**
<p class="text-base">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
<p class="text-base mt-2">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
</div>
|||
{% end %}
<br>

12
content/home/index.md
View File

@@ -156,7 +156,7 @@ TFT powers ThreeFold and the expansion of a truly decentralized infrastructure t
<div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
Anything that runs on Linux can run on the **ThreeFold grid**
Anything that runs on Linux can run on the ThreeFold grid
</div>
@@ -196,11 +196,15 @@ Flexible advanced deployment options for experienced users
{% end %}
</div>
<!-- section 6 (ecentralized) -->
<div style="background-color:#F6F6F6">
<div class="container mx-auto">
{% row( style="mtop center between ") %}
@@ -244,7 +248,7 @@ Empowers emerging markets with local data storage, granting digital sovereignty
{% end %}
{% row( style="center semiNarrow") %}
{% row( style="mbottom center semiNarrow") %}
![Image](performance.png#tft_img#mx-auto)
@@ -283,6 +287,8 @@ As devices multiply, central data centers face data overload. Edge cloud distrib
<!-- section 7 (Ecosystem) -->
<div class="container mx-auto">
{% row( style="center mtop narrow") %}
## **Ecosystem**
@@ -297,7 +303,7 @@ ThreeFold’s decentralized autonomous cloud will empower many projects and digi
<div class="rounded_img border-2 rounded-lg shadow-lg">
[![Image](partner_social.png)](/partners/veverse)
[![Image](partner_social.png)](/partners/social-network)
<div class="p-6 lg:p-3 mycard">

5
css/index.css
View File

@@ -194,7 +194,8 @@ h1 {
button {
@apply
inline-block
lg:text-lg
md:text-md
text-sm
lg:mr-3
py-1
my-4
@@ -272,7 +273,7 @@ button a {
line-height: 1.3;
@apply
text-black
px-12
px-8
}
.long-text a{

2
templates/shortcodes/hovevision.html
View File

@@ -1,6 +1,6 @@
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:py-20 py-8">
<div class="w-full md:w-1/3">
<div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
<h1 class="font-medium">The Vision</h1>
<h3 class="blue font-normal">Pioneering. Empowering.</h3>
</div>

214
templates/shortcodes/roadmap.html
View File

@@ -1,128 +1,88 @@
<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 hidden 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> #}
<!-- 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-indigo-600">
<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>
<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>
+30 years of development.
</li>
<li>
Built decentralized, autonomous, edge internet technology.
</li>
</ul>
</div>
<div>
<time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
<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>
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">PROOF OF CONCEPT</p>
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
<li>
Largest and most advanced decentralized autonomous cloud network in the world.
</li>
<li>
Contract with Government of ZNZ.
</li>
</ul>
</div>
<div>
<time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
<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>
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>
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">COMMERCIALIZATION</p>
<p class="blue text-base"> (CURRENT POSITION)</p>
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
<li>
Drive utilization of TFGrid 4.0.
</li>
<li>
Underlying layer for DePIN projects.
</li>
<li>
Solidify partnerships.
</li>
<li>
TF Cooperative established.
</li>
</ul>
</div>
<div>
<time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
<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>
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">FULLY FLEDGED ECOSYSTEM</p>
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
<li>
Digital Free Zone set up & running.
</li>
<li>
TF Chapters established globally e.g. Dunia Yetu.
</li>
<li>
Widespread and extensive decentralized and sovereign internet .
</li>
</ul>
</div>
</div>
<!-- Item #2 -->
<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 green 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 space-x-2 mb-1">
<div class="font-bold text-slate-900">Phase 1:</div>
<div class="font-caveat font-semibold green_text">CREATION OF CORE TECH</div>
</div>
<p class="text-gray-800 text-md">+30 years of development <br>
Built decentralized, autonomous, edge internet technology</p>
</div>
</div>
<!-- Item #3 -->
<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 green 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 space-x-2 mb-1">
<div class="font-bold text-slate-900">Phase 2:</div>
<time class="font-caveat font-semibold green_text">PROOF OF CONCEPT</time>
</div>
<p class="text-gray-800 text-md">Largest and most advanced decentralized autonomous cloud network in the world<br>
Contract with Government of ZNZ </p>
</div>
</div>
<!-- Item #4 -->
<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 blue_b group-[.is-active]:bg-emerald-500 text-white-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 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">COMMERCIALIZATION (Now) </div>
</div>
<ul class="text-gray-800 text-md">
<li>Drive utilization of TFGrid 4.0</li>
<li>Underlying layer for DePIN projects</li>
<li>Solidify partnerships</li>
<li>TF Cooperative established</li>
</ul>
</div>
</div>
<!-- Item #5 -->
<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="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 4:</div>
<div class="font-caveat font-semibold text-slate-500">FULLY FLEDGED ECOSYSTEM (Soon) </div>
</div>
<ul class="text-gray-800 text-md">
<li>Digital Free Zone set up & running</li>
<li>TF Chapters established globally e.g. Dunia Yetu</li>
<li>Widespread and extensive decentralized and sovereign internet </li>
</ul>
</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>
</div>

99
templates/shortcodes/storymap.html Normal file
View File

@@ -0,0 +1,99 @@
<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 hidden 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 live in 61+ countries, a significant milestone in our ongoing commitment to redefine the future of the digital landscape.
</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>