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

update home

Browse Source
This commit is contained in:
Ehab Hassan
2025-02-17 17:16:58 +02:00
parent 77311e37a4
commit 94968a5faa
13 changed files with 196 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
templates/partials/home/use_cases.html Normal file
View File

@@ -0,0 +1,102 @@
<div class="bg-transparent pt-12 pb-6">
<div class="text-center mx-auto max-w-7xl px-6 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 lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Anything that runs on Linux can run
on ThreeFold</h2>
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
The grid can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities. Here are some of the primary use cases of the grid today.
</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 mt-16 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">
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt="">
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
Decentralized <br>Open-Source Cloud
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
<p class="mt-6">
</p>
<p class="text-lg font-semibold text-white mb-2">Available Today</p>
<ul class="flex justify-center fade-in">
<li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">TFT Dashboard</a></li>
<li><a href="https://manual.grid.tf/" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">2TFT Manual</a></li>
</ul>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/network.png" alt="">
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
Mycelium <br>Unbreakable Network
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An adaptive and resilient network solution that not only keeps your data safe but also guarantees uninterrupted and efficient communication. The Mycelium Network is the backbone of a new era of connectivity, prioritizing speed, security, and reliability for all users.</p>
<p class="mt-6">
</p>
<p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
<div class="fade-in">
<a href="" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">Mycelium</a>
</div>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/ai.png" alt="">
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
3GeoMind <br>Decentralized AI
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A decentralized AI solution in a physical form factor. The product enables personal AI computing capabilities directly in homes and offices, eliminating dependency on centralized data centers.
</p>
<p class="mt-6">
</p>
<p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
<div class="fade-in">
<a href="" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">Website</a>
</div>
</dd>
</div>
</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>