update why page
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
@@ -1,59 +1,182 @@
|
||||
---
|
||||
title: "ThreeFold's Vision and Mission"
|
||||
description: "Our mission is to empower individuals and organizations with secure, private, and autonomous access to computing resources, ensuring fair cloud access for everyone." # quotation marks to allow colons where used
|
||||
template: "layouts/why.html"
|
||||
template: "page.html"
|
||||
insert_anchor_links: "left"
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: tf.png
|
||||
---
|
||||
|
||||
<!-- section 1 (header) -->
|
||||
|
||||
<div class="px-4 mt-12 lg:py-24 py-12 lg:px-8">
|
||||
<div class="mx-auto max-w-5xl text-center fade-in">
|
||||
|
||||
# The Internet Needs an Upgrade
|
||||
|
||||
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. The Internet was envisioned as a decentralized, open space. A tool for freedom, collaboration, and equal access for all.
|
||||
|
||||
<br>
|
||||
|
||||
**ThreeFold has invented a new Data, Network, and Cloud system as an engine for the new Internet.**
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- section 2 -->
|
||||
|
||||
{{ desciption_blockquote(
|
||||
title="The Reason Behind It All",
|
||||
|
||||
description_1="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.",
|
||||
|
||||
description_2="Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally.",
|
||||
|
||||
description_3="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.",
|
||||
|
||||
description_4="Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone."
|
||||
|
||||
|
||||
) }}
|
||||
|
||||
|
||||
|
||||
<!-- section 3 (AI) -->
|
||||
|
||||
<div class="px-4 mt-12 lg:py-24 py-12 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center fade-in">
|
||||
|
||||
## AI needs to be decentralized
|
||||
|
||||
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>
|
||||
|
||||
Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
|
||||
|
||||
<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.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- section 4 (web4) -->
|
||||
|
||||
<style>
|
||||
<div class="px-4 lg:px-8 lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl fade-in">
|
||||
|
||||
## The Vision for a New Internet
|
||||
|
||||
<div class="max-w-3xl">
|
||||
|
||||
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.
|
||||
|
||||
<br>
|
||||
|
||||
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.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
.rounded_img img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
<!-- section 5 (Road Map) -->
|
||||
|
||||
<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">
|
||||
|
||||
## ThreeFold’s Journey
|
||||
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
{{ timeline(
|
||||
subtitle_1="Phase I",
|
||||
title_1="Creation of Core Technology",
|
||||
point_1_1="Open Source Development.",
|
||||
point_1_2="Built decentralized, autonomous, edge internet technology",
|
||||
point_1_3="Self-funded and private investment from founders, community, and TF Tech investors",
|
||||
|
||||
subtitle_2="Phase II",
|
||||
title_2="Global Proof Of Concept",
|
||||
point_2_1="Open Source Development.",
|
||||
point_2_2="50+ Countries.",
|
||||
point_2_3="50,000+ Cores.",
|
||||
point_2_4="25,000,000 GB of Storage",
|
||||
point_2_5="Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.",
|
||||
point_2_6="Decentralized reliable compute, network and storage layer for Web 2-3.",
|
||||
point_2_7="Commitments from wonderful projects to build on top of us.",
|
||||
|
||||
subtitle_3="Current Phase – 2025",
|
||||
title_3="Decentralized AI and Cloud",
|
||||
point_3_1="Introduce 3Phone & 3Router.",
|
||||
point_3_2="Introduce decentralized AI infrastructure and capabilities.",
|
||||
point_3_3="Expand the network considerably.",
|
||||
point_3_4="Build a network of commercial farmers for optimal performance and uptime.",
|
||||
point_3_5="Expand the network considerably.",
|
||||
point_3_6="Build a network of commercial farmers for optimal performance and uptime.",
|
||||
|
||||
subtitle_4="The Result",
|
||||
title_4="Autonomy for All",
|
||||
point_4_1="An upgraded Internet for Billions.",
|
||||
point_4_2="A planet-and-people-first hybrid of Humans and machines delivers on the promise of Augmented Collective Intelligence."
|
||||
|
||||
) }}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
.person img{
|
||||
border-radius: 100%;
|
||||
max-width:100px;
|
||||
}
|
||||
|
||||
<!-- section 8 Cta -->
|
||||
|
||||
{{ cta(
|
||||
title_1="Build the",
|
||||
title_2="Internet of Tomorrow,",
|
||||
title_3="Today",
|
||||
button_text_1="Take the Next Step",
|
||||
button_link_1="/signup",
|
||||
button_text_2="Learn More",
|
||||
button_link_2="/action"
|
||||
) }}
|
||||
|
||||
|
||||
.myscale{
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
|
||||
.myscale:hover{
|
||||
transform: scale(1.2);
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
|
||||
.road_border{
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
border-left: 1px solid rgb(156, 156, 156);
|
||||
/* 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 */
|
||||
h1, h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.white-gray{
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -250,7 +250,7 @@ a img:hover {
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize;
|
||||
@apply lg:text-5xl text-3xl leading-snug font-normal tracking-tight my-2 text-white capitalize;
|
||||
color: #ffffff;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
@@ -287,7 +287,7 @@ a img:hover {
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-pretty lg:text-xl text-lg font-light text-gray-200;
|
||||
@apply text-pretty lg:text-xl text-lg font-light text-gray-200 my-2;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/why/hero.html" %}
|
||||
{% include "partials/why/reason.html" %}
|
||||
{% include "partials/why/ai_decentralized.html" %}
|
||||
{% include "partials/why/web4.html" %}
|
||||
{% include "partials/why/timeline.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
<div>
|
||||
{% set page = get_page(path="why/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
56
templates/shortcodes/desciption_blockquote.html
Normal file
56
templates/shortcodes/desciption_blockquote.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set description_3 = description_3 | default(value="") %}
|
||||
{% set description_4 = description_4 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<div class="lg:py-24 py-12 relative isolate overflow-hidden">
|
||||
<div class="mx-auto container lg:max-w-7xl px-4">
|
||||
<div>
|
||||
<h2 class="fade-in my-2">{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-6">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<p class="fade-in mt-2 text-lg lg:text-xl font-light">
|
||||
{{ description_1 }}
|
||||
<br><br>
|
||||
{{ description_2 }}
|
||||
<br><br>
|
||||
{{ description_3 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-6">
|
||||
<figure class=" mt-2 pl-8">
|
||||
<blockquote class=" fade-in px-6">
|
||||
<p class=" font-semibold">{{ description_4 }}
|
||||
|
||||
<p class="fade-in my-6 mx-auto text-xl font-semibold tracking-tight lg:text-2xl transition-opacity duration-1000" data-observer>
|
||||
Planet First. People First.
|
||||
</p>
|
||||
</blockquote>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #8d1212;
|
||||
}
|
||||
</style>
|
||||
174
templates/shortcodes/timeline.html
Normal file
174
templates/shortcodes/timeline.html
Normal file
@@ -0,0 +1,174 @@
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||
{% set point_1_1 = point_1_1 | default(value="") %}
|
||||
{% set point_1_2 = point_1_2 | default(value="") %}
|
||||
{% set point_1_3 = point_1_3 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||
{% set point_2_1 = point_2_1 | default(value="") %}
|
||||
{% set point_2_2 = point_2_2 | default(value="") %}
|
||||
{% set point_2_3 = point_2_3 | default(value="") %}
|
||||
{% set point_2_4 = point_2_4 | default(value="") %}
|
||||
{% set point_2_5 = point_2_5 | default(value="") %}
|
||||
{% set point_2_6 = point_2_6 | default(value="") %}
|
||||
{% set point_2_7 = point_2_7 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||
{% set point_3_1 = point_3_1 | default(value="") %}
|
||||
{% set point_3_2 = point_3_2 | default(value="") %}
|
||||
{% set point_3_3 = point_3_3 | default(value="") %}
|
||||
{% set point_3_4 = point_3_4 | default(value="") %}
|
||||
{% set point_3_5 = point_3_5 | default(value="") %}
|
||||
{% set point_3_6 = point_3_6 | default(value="") %}
|
||||
{% set title_4 = title_4 | default(value="") %}
|
||||
{% set subtitle_4 = subtitle_4 | default(value="") %}
|
||||
{% set point_4_1 = point_4_1 | default(value="") %}
|
||||
{% set point_4_2 = point_4_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<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">{{ subtitle_1 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-200 mb-2">{{ title_1 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_1_1 }}</li>
|
||||
<li>{{ point_1_2 }}</li>
|
||||
<li>{{ point_1_3 }}</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">{{ subtitle_2 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">{{ title_2 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_2_1 }}</li>
|
||||
<li>{{ point_2_2 }}</li>
|
||||
<li>{{ point_2_3 }}</li>
|
||||
<li>{{ point_2_4 }}</li>
|
||||
<li>{{ point_2_5 }}</li>
|
||||
<li>{{ point_2_6 }}</li>
|
||||
<li>{{ point_2_7 }}</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">{{ subtitle_3 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">{{ title_3 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
Q1 & Q2:
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_3_1 }}</li>
|
||||
<li>{{ point_3_2 }}</li>
|
||||
<li>{{ point_3_3 }}</li>
|
||||
<li>{{ point_3_4 }}</li>
|
||||
|
||||
</ul>
|
||||
Next:
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_3_5 }}</li>
|
||||
<li>{{ point_3_6 }}</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">{{ subtitle_4 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-400 mb-2">{{ title_4 }}</div>
|
||||
<div class="text-gray-400 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_4_1 }}</li>
|
||||
<li>{{ point_4_2 }}</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user