update why page
This commit is contained in:
BIN
content/why/about_hero.png
Normal file
BIN
content/why/about_hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
@@ -88,7 +88,7 @@ This makes ThreeFold uniquely decentralized at the physical layer, eliminating s
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- section 5 (Road Map) -->
|
<!-- section 5 (timeline) -->
|
||||||
|
|
||||||
<div class="px-4 mt-12 lg:py-24 py-12 lg:px-8">
|
<div class="px-4 mt-12 lg:py-24 py-12 lg:px-8">
|
||||||
<div class="mx-auto max-w-3xl text-center fade-in">
|
<div class="mx-auto max-w-3xl text-center fade-in">
|
||||||
@@ -136,6 +136,38 @@ Over the past decades, we’ve tackled complex challenges in areas such as data
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 6 (Values) -->
|
||||||
|
|
||||||
|
{{ values(
|
||||||
|
|
||||||
|
title_1="Open Source.",
|
||||||
|
title_2="Authenticity.",
|
||||||
|
title_3="Simplicity."
|
||||||
|
|
||||||
|
) }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 7 (Team) -->
|
||||||
|
|
||||||
|
<div class="lg:py-24 py-12 text-center">
|
||||||
|
|
||||||
|
{{ center_text(
|
||||||
|
title="Founded by Internet 1.0 Pioneers and All of You",
|
||||||
|
description_1="The founders have been working in Internet technology since its early days when it operated as a decentralized, peer-to-peer network. ThreeFold is an open-source movement driven by a dedicated team and a vibrant community of contributors helping to bring our shared vision to life.",
|
||||||
|
description_2="The project is supported by over 50 full-time active developers.",
|
||||||
|
button_text_1="Meet the Team",
|
||||||
|
button_link_1="/people"
|
||||||
|
|
||||||
|
) }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- section 8 Cta -->
|
<!-- section 8 Cta -->
|
||||||
|
|
||||||
{{ cta(
|
{{ cta(
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden lg:py-24 py-12">
|
|
||||||
<div class="px-4 lg:px-8">
|
|
||||||
<div class="mx-auto max-w-4xl text-center">
|
|
||||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">AI needs to be decentralized</h2>
|
|
||||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.</p>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden bg-transparent">
|
|
||||||
<div class="px-6 mt-12 lg:py-24 py-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-4xl fade-in">The Internet Needs an Upgrade</h2>
|
|
||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The Internet brings the world together, yet much of it is now concentrated in the hands of a few powerful corporations. This wasn't its original intent. <br>The Internet was envisioned as a decentralized, open space.<br>A tool for freedom, collaboration, and equal access for all.</p>
|
|
||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br>
|
|
||||||
as an engine for the new Internet.</p>
|
|
||||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
|
||||||
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<div class="bg-transparent fade-in">
|
|
||||||
<div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
|
|
||||||
<div class="mx-auto max-w-3xl text-center">
|
|
||||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Real-World Impact</h2>
|
|
||||||
<p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects:
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 space-y-16">
|
|
||||||
<div class="bg-transparent py-10">
|
|
||||||
<div class="mx-auto max-w-7xl lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
|
|
||||||
<!-- Text Section -->
|
|
||||||
<div class="lg:col-span-5 align-middle pr-4 mb-4">
|
|
||||||
<h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
|
|
||||||
<p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
|
|
||||||
ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then.
|
|
||||||
Updates expected Q4 2024.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- Image Section -->
|
|
||||||
<div class="lg:col-span-7">
|
|
||||||
<img
|
|
||||||
src="/images/freezone.png"
|
|
||||||
alt=""
|
|
||||||
class=" w-full rounded-lg bg-gray-100 object-fit">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8">
|
|
||||||
<div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4">
|
|
||||||
<h3 class="text-2xl font-medium text-white">Tanzanian Sovereign Internet</h3>
|
|
||||||
<p class="mt-2 text-base font-light text-gray-200 pr-4">
|
|
||||||
|
|
||||||
In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
|
|
||||||
<img src="/images/tanzania.png" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
|
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
||||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
|
||||||
<!-- Left Content -->
|
|
||||||
<div class="lg:col-span-7">
|
|
||||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
|
||||||
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Why it Matters</h1>
|
|
||||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
|
|
||||||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
|
||||||
<br><br>
|
|
||||||
But we won’t stop here.
|
|
||||||
<br><br>
|
|
||||||
Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4. As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Blockquote -->
|
|
||||||
<div class="lg:col-span-5">
|
|
||||||
<figure class=" mt-6 pl-8">
|
|
||||||
<blockquote class=" text-2xl text-white fade-in font-semibold">
|
|
||||||
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
|
|
||||||
</blockquote>
|
|
||||||
<br>
|
|
||||||
<div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
|
|
||||||
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
|
|
||||||
<g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
|
|
||||||
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<a href="/action" class="fade-in text-balance text-xl font-semibold tracking-tight text-white lg:text-2xl blinking-effect">Take Actions</a>
|
|
||||||
</div>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Apply the blinking animation to the link */
|
|
||||||
.blinking-effect {
|
|
||||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blockquote::before {
|
|
||||||
content: open-quote;
|
|
||||||
font-size: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -1rem;
|
|
||||||
left: -1rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
border-left-width: 2px;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-flex {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-2 {
|
|
||||||
gap: 0.5rem; /* Adjust the gap size as needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
<div class="bg-transparent pb-24 pt-12">
|
|
||||||
<div class="flex items-center justify-center bg-transparent">
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
||||||
Planet First. People First.
|
|
||||||
</p>
|
|
||||||
</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 5s 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>
|
|
||||||
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
|
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
||||||
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
|
|
||||||
<div class="fade-in mx-auto max-w-3xl text-center">
|
|
||||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2>
|
|
||||||
<p class="mt-6 text-lg font-light text-white">
|
|
||||||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
|
||||||
<br><br>
|
|
||||||
But we won’t stop here.
|
|
||||||
<br><br>
|
|
||||||
Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4.
|
|
||||||
As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
|
|
||||||
<br><br>
|
|
||||||
<span class="font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage,
|
|
||||||
secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
|
|
||||||
</p>
|
|
||||||
<br>
|
|
||||||
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Apply the blinking animation to the link */
|
|
||||||
.blinking-effect {
|
|
||||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden bg-transparent text-white lg:pb-24 pb-12">
|
|
||||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
|
||||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
|
||||||
<!-- Left Content -->
|
|
||||||
<div class="lg:col-span-7">
|
|
||||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
|
||||||
<h1 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
|
|
||||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
|
|
||||||
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: data centers are extremely expensive to build and maintain, privacy and security are compromised, misinformation is rampant, and half the world remains poorly connected.
|
|
||||||
<br><br>
|
|
||||||
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally.
|
|
||||||
<br><br>
|
|
||||||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Blockquote -->
|
|
||||||
<div class="lg:col-span-5">
|
|
||||||
<figure class=" mt-6 pl-8">
|
|
||||||
<blockquote class=" lg:text-2xl text-xl text-white fade-in font-semibold">
|
|
||||||
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
|
|
||||||
</blockquote>
|
|
||||||
<br>
|
|
||||||
<div class="mx-4">
|
|
||||||
<p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-white lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
||||||
Planet First. People First.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.blockquote::before {
|
|
||||||
content: open-quote;
|
|
||||||
font-size: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -1rem;
|
|
||||||
left: -1rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<div class="bg-transparent relative isolate lg:py-24 py-12 ">
|
|
||||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
|
||||||
<div class="mx-auto max-w-2xl lg:max-w-4xl text-center">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
|
|
||||||
<p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working in Internet technology since its early days when it operated as a decentralized, peer-to-peer network. ThreeFold is an open-source movement driven by a dedicated team and a vibrant community of contributors helping to bring our shared vision to life.
|
|
||||||
<br>The project is supported by over 50 full-time active developers.</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
|
|
||||||
<a href="/people" 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">Meet the Team</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
<div class="lg:py-24 py-12">
|
|
||||||
<div class="fade-in bg-transparent relative isolate overflow-hidden">
|
|
||||||
<div class="mx-auto max-w-7xl px-4 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-3xl font-normal tracking-tight text-white lg:text-5xl">ThreeFold’s Journey</h2>
|
|
||||||
<p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">Over the past decades, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security. With significant experience in Internet and Cloud and a strong vision for the future, these pivotal milestones have shaped our growth and drive us towards a better digital future.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-8 pt-12 mx-auto max-w-7xl 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="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
|
||||||
<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>
|
|
||||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
|
||||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
|
||||||
<div class="font-medium text-gray-200">Phase I</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
|
|
||||||
<div class="text-gray-200 font-light">
|
|
||||||
<ul style="list-style: disc;">
|
|
||||||
<li>10+ years of development</li>
|
|
||||||
<li>Built decentralized, autonomous, edge internet technology</li>
|
|
||||||
<li>Self-funded and private investment from founders, community, and TF Tech investors</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Item #2 -->
|
|
||||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
|
||||||
<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>
|
|
||||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
|
||||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
|
||||||
<div class="font-medium text-white">Phase II</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
|
|
||||||
<div class="text-gray-200 font-light">
|
|
||||||
<ul style="list-style: disc;">
|
|
||||||
<li>Open Source Development.</li>
|
|
||||||
<li>50+ Countries.</li>
|
|
||||||
<li>50,000+ Cores.</li>
|
|
||||||
<li>25,000,000 GB of Storage</li>
|
|
||||||
<li>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.</li>
|
|
||||||
<li>Decentralized reliable compute, network and storage layer for Web 2-3.</li>
|
|
||||||
<li>Commitments from wonderful projects to build on top of us.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Item #3 -->
|
|
||||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
|
||||||
<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>
|
|
||||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
|
||||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
|
||||||
<div class="font-medium text-white">Current Phase – 2025</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-semibold text-lg text-white mb-2">Decentralized AI and Cloud</div>
|
|
||||||
<div class="text-gray-200 font-light">
|
|
||||||
Q1 & Q2:
|
|
||||||
<ul style="list-style: disc;">
|
|
||||||
<li>Introduce 3Phone & 3Router.</li>
|
|
||||||
<li>Introduce decentralized AI infrastructure and capabilities.</li>
|
|
||||||
<li>Expand the network considerably.</li>
|
|
||||||
<li>Build a network of commercial farmers for optimal performance and uptime.</li>
|
|
||||||
</ul>
|
|
||||||
Next:
|
|
||||||
<ul style="list-style: disc;">
|
|
||||||
<li>Expand the network considerably.</li>
|
|
||||||
<li>Build a network of commercial farmers for optimal performance and uptime.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Item #4 -->
|
|
||||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
|
||||||
<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>
|
|
||||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
|
||||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
|
||||||
<div class="font-medium text-gray-400">The Result</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-semibold text-lg text-gray-400 mb-2">Autonomy for All</div>
|
|
||||||
<div class="text-gray-400 font-light">
|
|
||||||
<ul style="list-style: disc;">
|
|
||||||
<li>An upgraded Internet for Billions.</li>
|
|
||||||
<li>A planet-and-people-first hybrid of Humans and machines delivers on the promise of Augmented Collective Intelligence.</li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Initial state: elements are invisible */
|
|
||||||
.fade-in {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* State when element is in view */
|
|
||||||
.fade-in.visible {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Get all the elements that need to be faded in
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// Target all elements with the 'fade-in' class
|
|
||||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries, observer) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
// Add 'visible' class to the element when it's in view
|
|
||||||
entry.target.classList.add('visible');
|
|
||||||
observer.unobserve(entry.target); // Stop observing after it fades in
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
threshold: 0.1 // Trigger when 10% of the element is in view
|
|
||||||
});
|
|
||||||
|
|
||||||
fadeInElements.forEach(element => {
|
|
||||||
observer.observe(element);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<div class="bg-transparent lg:py-24 py-12">
|
|
||||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
|
||||||
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
|
||||||
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
||||||
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
||||||
Open Source.
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
||||||
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
||||||
Authenticity.
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
||||||
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
||||||
Simplicity.
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// JavaScript to handle Intersection Observer
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const elementsToObserve = document.querySelectorAll("[data-observer]");
|
|
||||||
const observerOptions = {
|
|
||||||
root: null, // Observes relative to the viewport
|
|
||||||
threshold: 0.1, // Trigger when 10% of the element is visible
|
|
||||||
};
|
|
||||||
|
|
||||||
const observerCallback = (entries, observer) => {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.classList.add("opacity-100"); // Make element fully visible
|
|
||||||
observer.unobserve(entry.target); // Stop observing once it's visible
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(observerCallback, observerOptions);
|
|
||||||
elementsToObserve.forEach((el) => observer.observe(el));
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden lg:py-24 py-12">
|
|
||||||
<div class="px-4 lg:px-8">
|
|
||||||
<div class="mx-auto max-w-7xl">
|
|
||||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">The Vision for a New Internet</h2>
|
|
||||||
<div class="max-w-3xl">
|
|
||||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">Unlike traditional internet infrastructure, which relies on centralized data centers and corporate control, ThreeFold is built on a global mesh of independent cloud providers—individuals and organizations who contribute data, cloud and network power directly to the ecosytem.</p>
|
|
||||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">This makes ThreeFold uniquely decentralized at the physical layer, eliminating single points of failure and gatekeepers. It’s a truly neutral and scalable foundation that puts privacy, resilience, and digital sovereignty at the core of the internet.</p>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
|
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
||||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
|
||||||
<!-- Left Content -->
|
|
||||||
<div class="lg:col-span-7">
|
|
||||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
|
||||||
<p class="text-base/7 font-semibold text-indigo-400">Deploy faster</p>
|
|
||||||
<h1 class="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">A better workflow</h1>
|
|
||||||
<p class="mt-6 text-xl/8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -10,9 +10,9 @@
|
|||||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||||
|
|
||||||
|
|
||||||
<div class="text-center mx-auto lg:max-w-7xl px-4 lg:px-8">
|
<div class="text-center mx-auto lg:max-w-7xl lg:px-8">
|
||||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
|
<div class="mx-auto max-w-2xl lg:max-w-7xl lg:px-8">
|
||||||
<h2 class="mx-auto fade-in">{{ title }}</h2>
|
<h2 class="mx-auto max-w-3xl fade-in">{{ title }}</h2>
|
||||||
{% if subtitle %}
|
{% if subtitle %}
|
||||||
<h3 class="fade-in mt-2">{{ subtitle }}</h3>
|
<h3 class="fade-in mt-2">{{ subtitle }}</h3>
|
||||||
|
|
||||||
|
|||||||
85
templates/shortcodes/farmers.html
Normal file
85
templates/shortcodes/farmers.html
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<div class="bg-transparent lg:py-24 py-12">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl 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 text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">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">
|
||||||
|
At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.
|
||||||
|
</p>
|
||||||
|
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||||
|
Regardless of technical expertise, anyone can deploy nodes 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="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 sm:mt-20 lg:mt-24 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">
|
||||||
|
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||||
|
1. HOST A NODE
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-4 flex flex-auto flex-col">
|
||||||
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
|
||||||
|
<p class="mt-6">
|
||||||
|
</p>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||||
|
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||||
|
2. OFFER CAPACITY
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-4 flex flex-auto flex-col">
|
||||||
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud.</p>
|
||||||
|
<p class="mt-6">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||||
|
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||||
|
3. EARN REWARDS
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-4 flex flex-auto flex-col">
|
||||||
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
|
||||||
|
</p>
|
||||||
|
<p class="mt-6">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 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 mt-8">Become a Farmer</a>
|
||||||
|
</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>
|
||||||
55
templates/shortcodes/self_healing.html
Normal file
55
templates/shortcodes/self_healing.html
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 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-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Internet Infrastructure</h2>
|
||||||
|
<br>
|
||||||
|
<h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">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" src="/images/selfhealing.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>
|
||||||
|
|
||||||
|
|
||||||
31
templates/shortcodes/values.html
Normal file
31
templates/shortcodes/values.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{% set title_1 = title_1 | default(value="") %}
|
||||||
|
{% set title_2 = title_2 | default(value="") %}
|
||||||
|
{% set title_3 = title_3 | default(value="") %}
|
||||||
|
|
||||||
|
<div class="lg:py-24 py-12">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||||
|
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
||||||
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
||||||
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl transition-opacity duration-1000" data-observer>
|
||||||
|
{{ title_1 }}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
||||||
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl transition-opacity duration-1000" data-observer>
|
||||||
|
{{ title_2 }}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
||||||
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl transition-opacity duration-1000" data-observer>
|
||||||
|
{{ title_3 }}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user