update home

This commit is contained in:
2025-02-17 17:16:58 +02:00
parent 77311e37a4
commit 94968a5faa
13 changed files with 196 additions and 34 deletions

BIN
static/images/ai.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
static/images/network.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

View File

@@ -2,9 +2,11 @@
{% block content %}
{% include "partials/home/hero.html" %}
{% include "partials/home/grid_stats.html" %}
{% include "partials/home/farmers.html" %}
{% include "partials/home/features.html" %}
{% include "partials/home/grid_stats.html" %}
{% include "partials/home/use_cases.html" %}
{% include "partials/home/self_healing.html" %}
{% include "partials/home/farmers.html" %}
{% include "partials/home/web4.html" %}
{% include "partials/home/faq.html" %}
{% include "partials/home/cta.html" %}

View File

@@ -107,7 +107,7 @@
</a>
</li>
</ul> #}
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Participate in Web4</a>
</div>
</div>
</div>
@@ -197,7 +197,7 @@
</div> #}
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Participate in Web4</a>
</div>
</nav>
</div>

View File

@@ -1,9 +1,9 @@
<div class="bg-transparent pt-12 pb-6">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl 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 text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Powering the ThreeFold Grid Together</h2>
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">How it works</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where theyre needed most while earning rewards for their contributions. We call this process "farming”.
Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers while earning rewards for their contributions. We call this process farming.
</p>
</div>
<section class="pb-32 bg-transparent">
@@ -45,7 +45,7 @@
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
</div>
</div>
</dl>

View File

@@ -1,34 +1,36 @@
<div class="bg-transparent pt-12 pb-24 ">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">ThreeFold is the Infrastructure Layer of Web4
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold is not a protocol. Weve 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-lg font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Clouds core components: <b>Data, Cloud, and Network</b>.</p>
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Weve developed foundational technology that runs directly on bare metal (the hardware), creating a truly scalable solution addressing the Internet and Clouds core components: Cloud, Data, and Network. </p>
<a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">Discover How It Works <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 lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
<h3 class="mb-6 lg:text-2xl text-xl leading-tight font-normal tracking-tight text-white">Three inventions at the core of our system
</h3>
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
<div class="pt-0">
<dt class="font-semibold text-base text-gray-200">Bare Metal <br>Operating System</dt>
</div>
<div class="pt-0">
<dd class="font-light text-gray-300 text-sm mb-2">Zero OS, an efficient and secure operating system, runs directly on the hardware enabling an autonomous cloud. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
</div>
<div class="pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
</div>
<div class="pt-0">
<dd class="font-light text-gray-300 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">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="lg:pt-4 pt-0">
<dt class="font-semibold text-base text-gray-200">Autonomous Cloud</dt>
</div>
<div class="">
<dd class="font-light text-gray-300 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
<dd class="font-light text-gray-300 text-sm mb-2">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">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="lg:pt-4 pt-0">
<div class="pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
</div>
<div class="">
<dd class="font-light text-gray-300 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
<dd class="font-light text-gray-300 text-sm mb-2">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
<dd class="font-light text-gray-300 text-sm mb-2">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div>
</dl>
</div>

View File

@@ -3,9 +3,10 @@
<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 lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own autonomous infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white ">Powered by
<br>a global community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFolds groundbreaking technology enables anyone individuals, organizations, and communities to deploy their own Internet infrastructure.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, our proof-of-concept network is live worldwide, running on version 3.15 technology.</p>
</div>
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- ssd -->

View File

@@ -2,14 +2,14 @@
<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-5xl fade-in">We are Building <br>a New Internet</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">ThreeFold has built a decentralized system designed to scale to a planetary level, capable of providing 100% uptime, and enabling any machine and human to communicate over the shortest path.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">Compatible with AI, Cloud, Web2, Web3 and building towards Web4.</p>
<br>
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>
{# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #}
<br>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/what" 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">What We've Built</a>
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true"></span></a>
<a href="/why" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Why We Do It<span aria-hidden="true"></span></a>
</div>
</div>
</div>

View File

@@ -0,0 +1,55 @@
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
<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 lg:text-5xl text-4xl font-normal tracking-tight text-white">A Self-Healing Web4 Infrastructure</h2>
<br>
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-white">Scalable globally, Green, Unbreakable & Secure.</h2>
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
<img class="fade-in blinking-effect relative mx-auto" width="80%" src="/images/self_healing.png" alt="">
</div>
{# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
<a href="/signup" target="_blank" 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 blinking-effect">Be Part of Web4</a>
</div> #}
</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 */
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>

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>

View File

@@ -2,10 +2,10 @@
<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-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2>
<h2 class="fade-in text-balance text-6xl font-normal tracking-tight text-white m:text-6xl">Building towards <span class="font-bold">Web4</span></h2>
<br>
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where AI agents replace platforms, intelligence is peer-to-peer, and users own and control their data. Together, humans and machines build an augmented, collective intelligence.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</p>
<p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
<!--
@@ -21,8 +21,8 @@
</div>
-->
<div class="mt-16 fade-in flex items-center justify-center gap-x-6">
<a href="/signup" target="_blank" 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 blinking-effect">Take the Next Step</a>
<a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true"></span></a>
<a href="/signup" target="_blank" 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 blinking-effect">Be Part of Web4</a>
{# <a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true"></span></a> #}
</div>
</div>