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

update home

Browse Source
This commit is contained in:
Ehab Hassan
2025-01-21 12:41:25 +02:00
parent 396549c850
commit b28c0bacc9
15 changed files with 96 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/header/index.md
View File

@@ -3,8 +3,8 @@ title: "Header"
insert_anchor_links: "left"
template: "partials/header.html"
extra:
logoPathLight: "images/new_logo_tft_light.png"
logoPathDark: "images/new_logo_tft_dark.png"
logoPathLight: "images/logolight.png"
logoPathDark: "images/logodark.png"
---

21
css/index.css
View File

@@ -22,6 +22,14 @@ body .semigray {
color: #424242 !important;
}
body .semigray2 {
color: #424242 !important;
}
body .icon {
fill: #424242 !important;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
@@ -29,9 +37,20 @@ body.dark-mode {
}
body.dark-mode .semigray {
color: #bbbbbb !important;
color: #e5e7eb !important;
}
body.dark-mode .semigray2 {
color: #d1d5db !important;
}
body.dark-mode .icon {
fill: #ffffff !important;
}
.double_bg {
background-color: rgb(100 100 100 / 0.2);
}
.dashboard:hover {

0
static/images/new_logo_tft_dark.png → static/images/logodark.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

0
static/images/new_logo_tft_light.png → static/images/logolight.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

10
static/js/custom.js
View File

@@ -204,10 +204,11 @@ document.addEventListener('DOMContentLoaded', () => {
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
toggleSwitch.checked = true;
siteLogo.src = siteLogo.getAttribute('data-dark');
siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
} else {
document.body.classList.remove('dark-mode');
siteLogo.src = siteLogo.getAttribute('data-light');
toggleSwitch.checked = false;
siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
}
});
@@ -216,10 +217,11 @@ toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
siteLogo.src = siteLogo.getAttribute('data-dark');
siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
siteLogo.src = siteLogo.getAttribute('data-light');
siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
}
});

1
tailwind.config.js
View File

@@ -1,6 +1,7 @@
const colors = require('tailwindcss/colors')
module.exports = {
darkMode: 'class',
content: [
'./templates/**/*.html'
],

24
templates/partials/header.html
View File

@@ -7,20 +7,15 @@
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<a href="{{ get_url(path='/') }}" class="flex">
<img
id="site-logo"
class="w-36 h-auto"
style="max-width: none;"
src="{{ get_url(path=section.extra.logoPathLight) }}"
data-light="{{ get_url(path=section.extra.logoPathLight) }}"
data-dark="{{ get_url(path=section.extra.logoPathDark) }}"
alt="ThreeFold Logo" />
id="site-logo"
class="w-36 h-auto"
style="max-width: none;"
src="{{ get_url(path=section.extra.logoPathLight) }}"
data-light="{{ get_url(path=section.extra.logoPathLight) }}"
data-dark="{{ get_url(path=section.extra.logoPathDark) }}"
alt="ThreeFold Logo" />
</a>
</a>
</a>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
<!-- Heroicon name: menu -->
@@ -119,9 +114,10 @@
</li>
</ul> -->
<button class="theme-toggle px-2 mx-2">
<label class="" for="darkModeSwitch">Dark Mode:</label>
<label for="darkModeSwitch">Dark Mode:</label>
<input type="checkbox" id="darkModeSwitch">
</button>
</button>
<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>

8
templates/partials/home/cta.html
View File

@@ -1,13 +1,13 @@
<div class="bg-transparent pt-12 pb-12">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
<div class="mx-auto rounded-2xl double_bg max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight lg:text-5xl text-3xl fade-in">
Build the <br>Internet of Tomorrow,<br> Today.
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" class="blinking-effect 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">
<a href="/signup" target="_blank" class="blinking-effect fade-in order-gray-500 border-2 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">
Take the Next Step
</a>
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
<a href="/action" class="fade-in text-sm/6 font-semibold">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>

50
templates/partials/home/faq.html
View File

@@ -16,7 +16,7 @@
<main class="relative flex flex-col justify-center overflow-hidden">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
<h1 class="text-3xl font-normal tracking-tight">Frequently Asked Questions</h1>
<!-- Accordion component -->
<div class="divide-y divide-white/50 my-10">
@@ -31,8 +31,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span style="color: #fff;">Is this a separate new Internet?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span>Is this a separate new Internet?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -46,7 +46,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet.
</p>
</div>
@@ -63,8 +63,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-02"
>
<span style="color: #fff;">Why do we need a new Internet?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">Why do we need a new Internet?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -78,7 +78,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed.
</div>
</div>
@@ -94,8 +94,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #fff;">You have 2 tokens, TFT and INCA, why?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">You have 2 tokens, TFT and INCA, why?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -109,7 +109,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid capacity. From the start, ThreeFold had 4 billion tokens planned. The ThreeFold community decided to stop minting at 1 billion tokens on Stellar via a DAO vote. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. <br><br>We are now building generation 4 of the ThreeFold Grid capacity, and we need a new token to build this new generation. There will be 3 billion new INCA tokens and all TFT holders can transfer their TFT into INCA (one-way bridge). <br><br>This means that we keep the community decision to have 4 billion tokens in total and to mint maximum 1 billion on Stellar. Our partners will start selling new ThreeFold Nodes mid December 2024 with a new reward scheme and ready to grow to millions of nodes.
</p>
</div>
@@ -126,8 +126,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-05"
>
<span style="color: #fff;">How can I participate?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">How can I participate?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -141,7 +141,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
</p>
</div>
@@ -158,8 +158,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-06"
>
<span style="color: #fff;">What is Web4?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">What is Web4?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -173,7 +173,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
Web4 represents the natural evolution of the Internet, where humans and artificial intelligence collaborate to develop a new paradigm aimed at advancing planetary well-being while making sure everyone has equal chances. This Internet can be sovereign & decentralized, while being totally secure and private. This phase of the Internet can scale indefinitely, is green, self-healing, cost effective and ultra-reliable.
</div>
</div>
@@ -189,8 +189,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #fff;">How secure and private is my data?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">How secure and private is my data?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -204,7 +204,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.
</p>
</div>
@@ -221,8 +221,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #fff;">What can I do with the Threefold Grid?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">What can I do with the Threefold Grid?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -236,7 +236,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
ThreeFold grid can be used to host any web2, web3 and web4 (future) workload.
For more details see <a href="https://docs.threefold.io/docs/use" target="_blank" rel="noopener noreferrer">our docs</a>
</p>
@@ -254,8 +254,8 @@
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #fff;">Who should use the ThreeFold Grid ?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<span style="">Who should use the ThreeFold Grid ?</span>
<svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
@@ -269,7 +269,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
<p class="pb-3 semigray2 text-base font-light">
Individuals, businesses, and organizations who want to be sovereign and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.
</p>

10
templates/partials/home/farmers.html
View File

@@ -2,7 +2,7 @@
<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">Powering the ThreeFold Grid Together</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
<p class="semigray text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">
Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”.
</p>
</div>
@@ -15,7 +15,7 @@
1. HOST A NODE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light 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="semigray flex-auto leading-normal font-light 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>
@@ -25,7 +25,7 @@
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="semigray flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6">
</p>
@@ -36,7 +36,7 @@
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light 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 class="semigray flex-auto leading-normal font-light 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">
@@ -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 border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 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>

26
templates/partials/home/features.html
View File

@@ -1,34 +1,34 @@
<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="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 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight">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. 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-lg 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="/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>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray 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-lg font-light semigray 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="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-balance 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">
<div class="pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
<dt class="font-semibold text-base ">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>
<dd class="font-light semigray2 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 semigray2 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>
<dt class="font-semibold text-base text-balance">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 semigray2 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 semigray2 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>
</div>
<div class="lg:pt-4 pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
<dt class="font-semibold text-base text-balance">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 semigray2 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
<dd class="font-light semigray2 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div>
</dl>
</div>

6
templates/partials/home/grid_stats.html
View File

@@ -4,8 +4,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 ">A Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign 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 fade-in">Version 3.15 is live on Mainnet.</p>
<p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
<p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">Version 3.15 is live on Mainnet.</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 -->
@@ -43,7 +43,7 @@
</dl>
</div>
<div class="max-w-4xl items-center mx-auto">
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
<p class="semigray items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6">

14
templates/partials/home/web4.html
View File

@@ -2,12 +2,12 @@
<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-bold tracking-tight sm:text-6l">WEB4</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">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>
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight 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 semigray 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 semigray 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 semigray fade-in">ThreeFold is the next step to Web4.</p>
<!--
<div class=" 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;">
@@ -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 border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 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">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>

BIN
templates/static/images/new_logo_tft_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
templates/static/images/new_logo_tft_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB