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

update home sections

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-01 14:22:58 +03:00
parent 516ad22781
commit be0f49a102
11 changed files with 780 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
templates/shortcodes/use_cases.html Normal file
View File

@@ -0,0 +1,107 @@
<div class="bg-transparent lg:py-24 py-12">
<div class="text-center mx-auto max-w-7xl px-4 lg:px-8">
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">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 new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
</p>
</div>
<section class="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="30%" src="/images/tft_logo.png" alt="">
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg font-semibold text-white">
ThreeFold Cloud
</dt>
<dt class="text-lg font-normal text-white">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-normal text-white mb-2">Lern More</p> #}
<ul class="flex justify-center fade-in">
<li class="mr-2"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Dashboard</a></li>
<li><a href="https://manual.grid.tf/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">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="30%" src="/images/mycelium_logo.png" alt="">
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
Mycelium
</dt>
<dt class="text-lg font-normal text-white">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-normal text-white mb-2">Lern More</p> #}
<ul class="flex justify-center fade-in">
<li class="mr-2"><a href="https://mycelium.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Website</a></li>
<li><a href="https://threefold.info/mycelium/docs/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Docs</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="30%" src="/images/aibox_logo.png" alt="">
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
AIBOX
</dt>
<dt class="text-lg font-normal text-white">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 that enables anyone to run, train, and use AI models locally, keeping their data private while sharing unused computing power with the network—eliminating the need for centralized data centers.
</p>
<p class="mt-6">
</p>
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
<ul class="flex justify-center fade-in">
<li class="mr-2"><a href="https://aibox.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Website</a></li>
<li><a href="https://threefold.info/aibox/docs/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Docs</a></li>
</ul>
</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>