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

main page

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-15 20:37:08 +01:00
parent 9560aaa2c5
commit a26682116d
29 changed files with 487 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
templates/partials/home/banner.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="bg-transparent py-24 flex justify-center items-center">
<div class="mx-auto max-w-7xl px-4 lg:px-6">
<img
class="object-contain w-full lg:w-[100%] max-w-[100%]"
src="images/banner2.gif"
alt="TF">
</div>
</div>

15
templates/partials/home/cta.html Normal file
View File

@@ -0,0 +1,15 @@
<div class="bg-transparent">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-24 lg:flex lg:items-center lg:justify-between lg:px-8">
<h2 class="lg:text-balance sm:text-center px-8 font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Build the <br>Internet of Tomorrow, <br>Today.
</h2>
<div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Talk to an Expert
</a>
<a href="#" class="fade-in rounded-2xl bg-transparent px-4 py-2.5 text-sm font-semibold text-white hover:text-gray-200 mb-4 lg:mb-0">
Dive Deeper <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>

76
templates/partials/home/features.html Normal file
View File

@@ -0,0 +1,76 @@
<div class="bg-transparent">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-2xl px-16 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">Why ThreeFold is Leading the Next Gen of Cloud & Network Technology
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
<a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover Products <span aria-hidden="true">→</span></a>
</div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
<div class="">
<dt class="font-medium text-gray-200">Unbreakable Data</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
</div>
<div class="pt-4">
<dt class="font-medium text-gray-200">Autonomous Cloud</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
</div>
<div class="pt-4">
<dt class="font-medium text-gray-200">P2P Network</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div>
</dl>
</div>
</div>
</div>
<style>
/* Define the slow blinking 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 */
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>

69
templates/partials/home/grid_stats.html Normal file
View File

@@ -0,0 +1,69 @@
<div class="bg-transparent relative isolate overflow-hidden py-24 mb-12">
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.14 is live on Mainnet.</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">19,10 PB</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CORES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">46,934</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">NODES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">1596</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">FARMS</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">900+</dd>
</div>
</dl>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('capacity', 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 */
}
</style>

40
templates/partials/home/hero.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get started</a>
<a href="#" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">Learn more <span aria-hidden="true">→</span></a>
</div>
</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>