Merge branch 'development' of https://github.com/threefoldfoundation/www_threefold_io into development
This commit is contained in:
Amanda
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "ThreeFold"
|
||||
description: "TF offers a secure, sovereign infrastructure layer for Web4, delivering unparalleled scalability, incorruptible and permanent data storage, AI and Web2/Web3/Edge compatibility, and 100% uptime for a resilient digital future." # quotation marks to allow colons where used
|
||||
description: "TF offers a secure, sovereign infrastructure layer for the Internet, delivering unparalleled scalability, incorruptible and permanent data storage, AI and Web2/Web3/Edge compatibility, and 100% uptime for a resilient digital future." # quotation marks to allow colons where used
|
||||
date: 2018-09-14T21:00:00-05:00
|
||||
updated: 2021-02-20T14:40:00-06:00
|
||||
draft: false
|
||||
|
||||
@@ -3,8 +3,12 @@ id: q
|
||||
title: How ThreeFold compares to similar projects in the space?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
We've been asked how we differentiate from projects like Dfinity, Akash, Holochain and other so we've opened conversation threads around it on our forum.
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Feel free to join the conversation at [ThreeFold FAQ](https://forum.threefold.io/c/All-about-the-ThreeFold-movement/threefold-faq/58).
|
||||
Feel free to join the conversation at [ThreeFold FAQ](https://forum.threefold.io/c/All-about-the-ThreeFold-movement/threefold-faq/58).
|
||||
|
||||
</p>
|
||||
@@ -3,6 +3,8 @@ id: q1
|
||||
title: What is ThreeFold?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
The ThreeFold Foundation is a not-for-profit organization based in Ghent, Belgium that oversees the research and development centers in Belgium, Switzerland, Egypt and the UAE as well as teams in India, Brazil, and the United States.
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -16,4 +18,6 @@ ThreeFold is committed to making all it's peer-to-peer technologies open-source
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
[Learn More](https://library.threefold.me/info/threefold#/tfgrid/grid/threefold__grid_home)
|
||||
[Learn More](https://library.threefold.me/info/threefold#/tfgrid/grid/threefold__grid_home)
|
||||
|
||||
</p>
|
||||
@@ -3,6 +3,7 @@ id: q2
|
||||
title: What is the ThreeFold Grid?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
The ThreeFold Grid is the world’s most advanced peer-to-peer Internet infrastructure. It can scale limitlessly, and brings a more performant, secure and sustainable Internet to host humanity’s data and workloads.
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -21,4 +22,5 @@ The increased monopolisation of the Internet and Cloud by the big tech corporati
|
||||
ThreeFold, is the only project that started from scratch at the infrastructure level with a super lightweight and stateless operating system that built a full blown architecture to allow peer-to-peer systems to thrive.
|
||||
<br/>
|
||||
<br/>
|
||||
We believe it is the only way to a liberalized Internet as imagined by it's initial creators.
|
||||
We believe it is the only way to a liberalized Internet as imagined by it's initial creators.
|
||||
</p>
|
||||
@@ -3,6 +3,8 @@ id: q3
|
||||
title: Is the ThreeFold Grid live already?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
Answer here is a definite Yes!
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -14,3 +16,5 @@ As of today, the ThreeFold Grid is present across more than 30 countries and con
|
||||
<br/>
|
||||
|
||||
[See our live explorer](https://explorer.threefold.io/all)
|
||||
|
||||
</p
|
||||
@@ -3,6 +3,8 @@ id: q4
|
||||
title: What is the Threefold Connect?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
The ThreeFold Connect is ThreeFold's 2-Step authenticator app that allows you to connect to the ThreeFold Grid and it's ecosystem.
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -10,4 +12,6 @@ It will protect your account with both your password and your phone. ThreeFold C
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
[Learn More](https://library.threefold.me/info/threefold/#/tokens/threefold__threefold_connect)
|
||||
[Learn More](https://library.threefold.me/info/threefold/#/tokens/threefold__threefold_connect)
|
||||
|
||||
</p>
|
||||
@@ -3,6 +3,8 @@ id: q5
|
||||
title: Does the ThreeFold use consensus?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
ThreeFold uses blockchain technology only for what it's good for - Smart Contracts and Transactions.
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -16,3 +18,6 @@ For instance, on the ThreeFold Grid, every user is able to store, run and access
|
||||
<br/>
|
||||
<br/>
|
||||
Put simply, instead of using consensus, peer-to-peer technology is used to provide true data sovereignty.
|
||||
|
||||
|
||||
</p>
|
||||
@@ -3,10 +3,14 @@ id: q6
|
||||
title: Is there anything done for the ThreeFold Grid to be sustainable?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
By starting from scratch on the operating system level, ThreeFold was able to eliminate a lot of complexity from the current web2 and web3 models to enable a super lighteight infrastructure.
|
||||
<br/>
|
||||
<br/>
|
||||
By doing so we are able to enable up-to 10x energy savings as compared to any other alternative on the market. Also with the future end-user solutions we are building, we should be able to host 20 digital lives for as much energy as a light bulb would consume.
|
||||
By doing so we are able to enable up-to 3x energy savings as compared to any other alternative on the market. Also with the future end-user solutions we are building, we should be able to host 20 digital lives for as much energy as a light bulb would consume.
|
||||
<br/>
|
||||
<br/>
|
||||
Nevertheless being sustainable is not enough in times of climate change. It is important for all of us to find ways to not only minimize our carbon footprints but also find ways to regenerate the surface and marine ecosystems of our world. ThreeFold commits to offset the ThreeFold Grid 3x in the form of carbon credits to support regenerative projects all around the world.
|
||||
Nevertheless being sustainable is not enough in times of climate change. It is important for all of us to find ways to not only minimize our carbon footprints but also find ways to regenerate the surface and marine ecosystems of our world. ThreeFold commits to offset the ThreeFold Grid 3x in the form of carbon credits to support regenerative projects all around the world.
|
||||
|
||||
</p>
|
||||
@@ -3,6 +3,8 @@ id: q7
|
||||
title: How can I get involved with ThreeFold if I'm not very technical?
|
||||
---
|
||||
|
||||
<p class="text-gray-200 font-light">
|
||||
|
||||
There are many ways for anyone to participate in the ThreeFold movement:
|
||||
- Become a [Farmer](https://library.threefold.me/info/threefold#/tfgrid/farming/threefold__farming_intro) and connect sovereign and planet positive Internet capacity from your home or office.
|
||||
- Buy [ThreeFold Tokens](https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html) to grow the new Internet economy and use it to reserve private and secure Internet capacity on the ThreeFold Grid.
|
||||
@@ -13,4 +15,12 @@ There are many ways for anyone to participate in the ThreeFold movement:
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Look for the Participate section on the navigation bar or check our [Collaboration section on wiki](https://library.threefold.me/info/freeflow/#/collaboration/freeflow__collaboration.md).
|
||||
Look for the Participate section on the navigation bar or check our [Collaboration section on wiki](https://library.threefold.me/info/freeflow/#/collaboration/freeflow__collaboration.md).
|
||||
|
||||
</p>
|
||||
|
||||
<style>
|
||||
ul li{
|
||||
color: rgb(229 231 235) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -20,9 +20,9 @@ extra:
|
||||
|
||||
###### [Dashboard](https://dashboard.grid.tf/)
|
||||
|
||||
###### [Download TF Connect: iOS](https://apps.apple.com/us/app/3bot-login/id1459845885)
|
||||
###### [Download TF Connect](https://manual.grid.tf/documentation/tfconnect/tfconnect_installation.html)
|
||||
|
||||
###### [Download TF Connect: Android](https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en_US)
|
||||
###### [Download Mycelium](https://manual.grid.tf/documentation/system_administrators/mycelium/mycelium_app.html)
|
||||
|
||||
|||
|
||||
|
||||
|
||||
@@ -62,8 +62,8 @@ html :is(.admonition) > :last-child {
|
||||
padding-block: 0.8rem;
|
||||
padding-inline: 4rem 1.2rem;
|
||||
font-weight: 700;
|
||||
background-color: rgba(68, 138, 255, 0.1);
|
||||
border: 0 solid #448aff;
|
||||
background-color: hsla(0,0%,100%,.05)!important;
|
||||
border: 0 solid #c9c9c9;
|
||||
border-inline-start-width: 0.4rem;
|
||||
border-start-start-radius: 0.2rem;
|
||||
display: flex;
|
||||
@@ -343,7 +343,7 @@ html :is(.admonition-title, summary):last-child {
|
||||
}
|
||||
|
||||
:is(summary)::after {
|
||||
background-color: black;
|
||||
background-color: rgb(255, 255, 255);
|
||||
mask-image: var(--md-details-icon);
|
||||
-webkit-mask-image: var(--md-details-icon);
|
||||
mask-repeat: no-repeat;
|
||||
|
||||
@@ -297,8 +297,7 @@ background-color:#5596f5 !important;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
p {
|
||||
@apply text-lg;
|
||||
color: #3d3d3d;
|
||||
@apply text-lg text-gray-200 font-light;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
blockquote {
|
||||
|
||||
38
env.sh
38
env.sh
@@ -1,3 +1,4 @@
|
||||
|
||||
export NAME='threefoldio'
|
||||
|
||||
SOURCE=${BASH_SOURCE[0]}
|
||||
@@ -59,6 +60,8 @@ if [[ ! -f "$HOME/hero/bin/tailwindcss" ]]; then
|
||||
popd
|
||||
fi
|
||||
|
||||
|
||||
# Zola version and platform-specific binaries are handled in the install functions below
|
||||
check_zola() {
|
||||
if command -v zola &> /dev/null; then
|
||||
echo "Zola is already installed."
|
||||
@@ -88,12 +91,37 @@ install_zola_arch() {
|
||||
# Function to install Zola on macOS
|
||||
install_zola_macos() {
|
||||
echo "Installing Zola on macOS..."
|
||||
if command -v brew &> /dev/null; then
|
||||
brew install zola
|
||||
ZOLA_VERSION="v0.18.0"
|
||||
|
||||
# Determine architecture
|
||||
if [[ "$(uname -m)" == "arm64" ]]; then
|
||||
ZOLA_ARCH="aarch64"
|
||||
else
|
||||
echo "Homebrew is not installed. Please install Homebrew first."
|
||||
ZOLA_ARCH="x86_64"
|
||||
fi
|
||||
|
||||
ZOLA_FILE="zola-${ZOLA_VERSION}-${ZOLA_ARCH}-apple-darwin.tar.gz"
|
||||
ZOLA_URL="https://github.com/getzola/zola/releases/download/${ZOLA_VERSION}/${ZOLA_FILE}"
|
||||
|
||||
echo "Downloading Zola ${ZOLA_VERSION} for ${ZOLA_ARCH}..."
|
||||
pushd /tmp
|
||||
curl -sLO "${ZOLA_URL}"
|
||||
|
||||
# Check file size (should be around 8-9MB)
|
||||
FILE_SIZE=$(get_file_size "$ZOLA_FILE")
|
||||
if [[ $FILE_SIZE -lt 7000000 ]]; then
|
||||
echo "Error: Downloaded file size is less than 7MB, download may be incomplete."
|
||||
rm "$ZOLA_FILE"
|
||||
popd
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Extract and install
|
||||
tar -xzf "$ZOLA_FILE"
|
||||
chmod +x zola
|
||||
mv zola "$HOME/hero/bin/"
|
||||
rm "$ZOLA_FILE"
|
||||
popd
|
||||
}
|
||||
|
||||
if ! check_zola; then
|
||||
@@ -131,6 +159,6 @@ fi
|
||||
# Compile tailwindcss for prod & build project
|
||||
echo "Compiling tailwindcss and building zola project..."
|
||||
rm -rf public static/css
|
||||
|
||||
set +e
|
||||
tailwindcss -i css/index.css -o ./static/css/index.css --minify
|
||||
|
||||
|
||||
|
||||
0
format_data.sh
Normal file → Executable file
0
format_data.sh
Normal file → Executable file
BIN
static/images/ai.png
Normal file
BIN
static/images/ai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
static/images/become_farmer.png
Normal file
BIN
static/images/become_farmer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
static/images/home1.jpg
Normal file
BIN
static/images/home1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
static/images/network.png
Normal file
BIN
static/images/network.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
static/images/open_source.png
Normal file
BIN
static/images/open_source.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
static/images/selfhealing.png
Normal file
BIN
static/images/selfhealing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
tailwindcss-macos-arm64
Normal file
BIN
tailwindcss-macos-arm64
Normal file
Binary file not shown.
@@ -2,9 +2,11 @@
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/home/hero.html" %}
|
||||
{% include "partials/home/grid_stats.html" %}
|
||||
{% include "partials/home/farmers.html" %}
|
||||
{% include "partials/home/features.html" %}
|
||||
{% include "partials/home/grid_stats.html" %}
|
||||
{% include "partials/home/use_cases.html" %}
|
||||
{% include "partials/home/farmers.html" %}
|
||||
{% include "partials/home/self_healing.html" %}
|
||||
{% include "partials/home/web4.html" %}
|
||||
{% include "partials/home/faq.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/action/video.html" %}
|
||||
{% include "partials/action/enable_web4.html" %}
|
||||
{% include "partials/action/web4tools.html" %}
|
||||
{% include "partials/action/action.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% include "partials/action/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@@ -2,7 +2,7 @@
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/what/hero.html" %}
|
||||
{% include "partials/what/what.html" %}
|
||||
{% include "partials/what/what_features.html" %}
|
||||
{% include "partials/what/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@@ -3,8 +3,9 @@
|
||||
|
||||
{% 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/matters.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
@@ -3,39 +3,39 @@
|
||||
{% set tftFaq = get_section(path="tftfaq/_index.md") %}
|
||||
|
||||
{% if current_path == '/faq/' %}
|
||||
<h2 class="text-center mt-10">{{ tfFaq.title }}</h2>
|
||||
<h2 class="text-center mt-10 text-white">{{ tfFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tfFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<summary class="font-semibold text-white">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/farmfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ farmFaq.title }}</h2>
|
||||
<h2 class="text-center text-white mt-10">{{ farmFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in farmFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/tftfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ tftFaq.title }}</h2>
|
||||
<h2 class="text-center text-white mt-10">{{ tftFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tftFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
@@ -43,6 +43,6 @@
|
||||
{% endif %}
|
||||
<style>
|
||||
a {
|
||||
color: #4ec48f
|
||||
color: #979797
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,13 @@
|
||||
<div class="bg-transparent">
|
||||
<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 leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Stay tuned for 12.12.24<br/>
|
||||
</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="https://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Telegram
|
||||
</a>
|
||||
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white 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">
|
||||
Newsletter
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards;
|
||||
}
|
||||
|
||||
h2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
111
templates/partials/action/enable_web4.html
Normal file
111
templates/partials/action/enable_web4.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<div class="bg-transparent pb-6 py-12 lg:py-24">
|
||||
<div class="mx-auto max-w-7xl px-2 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-2 lg:max-w-7xl lg:px-8">
|
||||
<br>
|
||||
<h2 class="text-center mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">What Web4 Enables</h2>
|
||||
|
||||
<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 mt-12 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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Communicate securely
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Store effortlessly
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Securely share and store information with ease, with geo-aware capabilities that optimize data location and access. Scale seamlessly from personal use to billions of users.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Restore authenticity
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Determine which information can be trusted, bringing clarity and confidence back to the digital space.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl mt-8 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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Unlock limitless insights
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Streamline your interactions
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Take control of your digital presence
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</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 mt-8">Become a Farmer</a>
|
||||
</div> #}
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -1,20 +1,23 @@
|
||||
<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="mx-auto max-w-4xl text-center px-2 pt-12 lg:px-8">
|
||||
<!-- Main Heading -->
|
||||
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white">
|
||||
Join the Web4 Revolution
|
||||
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white capitalize">
|
||||
Building towards Web4
|
||||
</h2>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
|
||||
Join us on our journey. Watch the video below and scroll down to learn how you can participate.
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty text-lg font-light text-gray-200 fade-in fade-in-delay">
|
||||
ThreeFold sees Web4 as the next evolution of the Internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.
|
||||
<br>
|
||||
<br>
|
||||
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all.
|
||||
<br>
|
||||
Let’s make this vision a reality.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Embed YouTube Video -->
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="responsive-iframe">
|
||||
<div class="py-10 flex justify-center mx-auto" style="max-width: 500px; height: auto;">
|
||||
<div class="responsive-iframe" >
|
||||
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
|
||||
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||||
@@ -23,11 +26,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="mt-12 fade-in flex items-center justify-center gap-x-4">
|
||||
<div class="mt-2 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 sm:text-base 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
|
||||
class="rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base 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 Action
|
||||
</a>
|
||||
<a href="https://docs.threefold.io/docs/litepaper/" class="fade-in text-sm/6 font-semibold text-white" target="_blank">Web4 Litepaper<span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
|
||||
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
|
||||
<div class="overflow-hidden lg:py-24 py-12">
|
||||
<div class="relative mx-auto max-w-xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">How to Participate</h2>
|
||||
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
Take part in the Web4 future. Discover key products that bring us closer to our vision—enabling true decentralization, peer-to-peer intelligence, and user-controlled data. These innovations lay the foundation for a more open, autonomous, and interconnected digital future.</p>
|
||||
</div>
|
||||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||||
<!-- Image on the left and text on the right -->
|
||||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||||
<img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||||
<img class="blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Text on the left -->
|
||||
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
||||
<div class="gap-y-4">
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4’s storage and infrastructure, providing compute and data resources. Order today.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphone that comes with built-indecentralized apps that seamlessly integrate with the ThreeFold Grid. Expected end Q2 2025.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption. Unlocked after 10,000 pre-orders.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,3 +39,19 @@
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="bg-transparent">
|
||||
<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">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 mt-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow, <br>Today.
|
||||
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="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div class="mt-20 border-t border-gray-700"></div>
|
||||
<div class="lg:mt-20 border-t border-gray-700"></div>
|
||||
<footer class="bg-transparent">
|
||||
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
|
||||
<div class="xl:flex xl:gap-4">
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul> #}
|
||||
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
|
||||
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">PARTICIPATE</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +197,7 @@
|
||||
</div> #}
|
||||
|
||||
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">PARTICIPATE</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<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">
|
||||
Build the <br>Internet of Tomorrow,<br> Today.
|
||||
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 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>
|
||||
|
||||
@@ -14,9 +14,9 @@
|
||||
};
|
||||
</script>
|
||||
<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">
|
||||
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 lg:py-24 py-12">
|
||||
|
||||
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
|
||||
<h1 class="lg:text-4xl text-3 font-normal tracking-tight text-white">Frequently Asked Questions</h1>
|
||||
|
||||
<!-- Accordion component -->
|
||||
<div class="divide-y divide-white/50 my-10">
|
||||
@@ -238,7 +238,7 @@
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 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>
|
||||
For more details see <a href="https://docs.threefold.io/docs/category/how-to-use" target="_blank" rel="noopener noreferrer">our docs</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="bg-transparent pt-12 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Powering the ThreeFold Grid Together</h2>
|
||||
<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">
|
||||
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”.
|
||||
Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
|
||||
</p>
|
||||
</div>
|
||||
<section class="pb-32 bg-transparent">
|
||||
<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">
|
||||
@@ -44,8 +44,8 @@
|
||||
</dd>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
<div class="bg-transparent pt-12 pb-24 ">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="bg-transparent lg:pb-24 pb-12">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-4 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-3xl leading-tight font-normal tracking-tight text-white">ThreeFold is a Decentralized Infrastructure Layer for 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">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>
|
||||
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">A foundational DePIN platform that operates directly on bare metal, delivering a truly scalable solution that redefines the core pillars of the Internet and Cloud: Compute, Data, and Networking.</p>
|
||||
<a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
|
||||
<h3 class="mb-6 lg:mb-8 lg:text-2xl text-xl leading-tight font-normal tracking-tight text-white">Three Inventions at the Core of Our System
|
||||
</h3>
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Bare Metal <br>Operating System</dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Autonomous Cloud</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<div class="pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden py-12 mb-12">
|
||||
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover md:block hidden">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<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-4xl font-normal tracking-tight text-white ">A Global Community</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own autonomous infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">Powered by
|
||||
<br>A Global Community</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, our proof-of-concept network is live worldwide, running on version 3.15 technology.</p>
|
||||
</div>
|
||||
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- ssd -->
|
||||
@@ -46,7 +47,7 @@
|
||||
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light text-gray-200 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">
|
||||
<div class="mt-6 flex items-center justify-center gap-x-6">
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" 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">Explore Grid Capacity</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,64 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
|
||||
<br>
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>
|
||||
<br>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/what" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What We've Built</a>
|
||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
|
||||
<div class="relative flex justify-center items-center isolate overflow-hidden bg-transparent h-screen">
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
|
||||
<!-- logo option
|
||||
|
||||
<div class="flex justify-center mb-16 fade-in">
|
||||
<img src="/images/white_threefold.png" alt="ThreeFold Logo" class="h-32">
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight leading-tight text-white lg:text-6xl text-3xl fade-in">Internet
|
||||
Infrastructure<br> for Everyone by Everyone, Everywhere</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 fade-in">ThreeFold is a
|
||||
DePIN system designed to scale to a planetary level, capable of providing 100% uptime, and enabling any machine
|
||||
and human to communicate over the shortest path.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">Compatible with
|
||||
AI, Cloud, Web2, Web3 – and building towards Web4.</p>
|
||||
<br>
|
||||
{# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #}
|
||||
<br>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center gap-x-8">
|
||||
<a href="/what"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What
|
||||
We've Built</a>
|
||||
<a href="/why" class="fade-in text-base font-semibold text-white hover:text-green ">Why We Do It<span
|
||||
aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 */
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
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>
|
||||
|
||||
55
templates/partials/home/self_healing.html
Normal file
55
templates/partials/home/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 Web4 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>
|
||||
|
||||
|
||||
103
templates/partials/home/use_cases.html
Normal file
103
templates/partials/home/use_cases.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="text-center mx-auto max-w-7xl px-4 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 lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run
|
||||
on ThreeFold</h2>
|
||||
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
The grid can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities. Here are some of the primary use cases of the grid.
|
||||
</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 mt-16 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt="">
|
||||
|
||||
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Decentralized <br>Open-Source Cloud
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
|
||||
<p class="text-lg font-semibold text-white mb-2">Available</p>
|
||||
|
||||
<ul class="flex justify-center fade-in">
|
||||
<li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="text-white hover:text-gray-300" target="_blank">TF Dashboard</a></li>
|
||||
<li><a href="https://manual.grid.tf/" class="text-white hover:text-gray-300" target="_blank">Manual</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/network.png" alt="">
|
||||
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Mycelium <br>Unbreakable Network
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An adaptive and resilient network solution that not only keeps your data safe but also guarantees uninterrupted and efficient communication. The Mycelium Network is the backbone of a new era of connectivity, prioritizing speed, security, and reliability for all users.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-white mb-2">Available</p>
|
||||
|
||||
<ul class="flex justify-center fade-in">
|
||||
<li class="mr-8"><a href="https://mycelium.threefold.io" class="text-white hover:text-gray-300" target="_blank">Website</a></li>
|
||||
<li><a href="https://manual.grid.tf/documentation/system_administrators/mycelium/mycelium_toc.html" class="text-white hover:text-gray-300" target="_blank">Manual</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/ai.png" alt="">
|
||||
<dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
AIBOX<br>Decentralized AI
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A decentralized AI solution in a physical form factor. The product enables personal AI computing capabilities directly in homes and offices, eliminating dependency on centralized data centers.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
|
||||
|
||||
<div class="fade-in">
|
||||
<a href="" class="text-white hover:text-gray-300" target="_blank"></a>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="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 text-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2>
|
||||
<h2 class="fade-in text-balance text-4xl lg:text-6xl font-normal tracking-tight text-white ">Building towards <span class="font-bold">Web4</span></h2>
|
||||
<br>
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
|
||||
<h2 class="fade-in text-balance text-3xl 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 AI agents replace platforms, intelligence is peer-to-peer, and users own and control their data. Together, humans and machines build an augmented, collective intelligence.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</p>
|
||||
<p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
|
||||
<!--
|
||||
@@ -21,8 +21,8 @@
|
||||
</div>
|
||||
-->
|
||||
<div class="mt-16 fade-in flex items-center justify-center gap-x-6">
|
||||
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
<a href="/action" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
|
||||
{# <a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> #}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,40 +1,52 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">A Secure & Autonomous Infrastructure Layer for Web4</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
|
||||
</p>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="https://docs.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-md 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">Dive Deeper</a>
|
||||
f
|
||||
<div class="relative flex flex-col justify-center isolate overflow-hidden bg-transparent py-12">
|
||||
<div class="px-4 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">A True DePIN</h2>
|
||||
<p class="text-balance lg:text-2xl text-xl font-light text-gray-200 tracking-normal fade-in"><span class="font-bold">De</span>Centralized
|
||||
<span class="font-bold"> P</span>hysical <span class="font-bold">I</span>nfrastructure <span class="font-bold">N</span>etwork<br><br></p>
|
||||
<h2 class="text-balance font-normal tracking-tight leading-snug text-white lg:text-3xl text-2xl fade-in">Planetary Scalable
|
||||
<br> Autonomous Infrastructure Layer<br>for The Internet</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 font-lightfade-in">Our unique
|
||||
technology enables anyone to become a provider<br> of network, storage and compute capacity.</p>
|
||||
<div class="mx-auto max-w-7xl px-4 py-8">
|
||||
<img src="/images/become_farmer.png" alt="Become a Farmer" class="w-full fade-in">
|
||||
</div>
|
||||
<div class=" flex items-center justify-center mt-6 ">
|
||||
<a href="https://docs.threefold.io" target="_blank"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-md 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">Dive
|
||||
Deeper</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 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>
|
||||
|
||||
}
|
||||
|
||||
/* 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,310 +0,0 @@
|
||||
|
||||
<div class="bg-transparent py-24">
|
||||
<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-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
|
||||
At Threefold, we've created solutions that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section id="testimonies" class="py-20 bg-slate-900">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
|
||||
|
||||
<div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
|
||||
<div class="mb-12 space-y-5 md:mb-16 md:text-center">
|
||||
<div
|
||||
class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
|
||||
Words from Others
|
||||
</div>
|
||||
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
|
||||
It's not just us.
|
||||
</h1>
|
||||
<p class="text-xl text-gray-100 md:text-center md:text-2xl">
|
||||
Here's what others have to say about us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
|
||||
|
||||
<ul class="space-y-8">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 sm:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 lg:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,14 +1,14 @@
|
||||
<div class="bg-transparent pt-12 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="bg-transparent py-12 lg:py-24">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="lg:pb-24 pb-12 pt-12 bg-transparent">
|
||||
|
||||
<section class="pt-12 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
@@ -120,6 +120,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div class="bg-transparent">
|
||||
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
|
||||
@@ -79,4 +80,4 @@
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
100
templates/partials/what/what_features.html
Normal file
100
templates/partials/what/what_features.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 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 lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">What We Do</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 fade-in">ThreeFold can
|
||||
be used by any Web2, Web3, AI, or Edge IT workload.
|
||||
</p>
|
||||
|
||||
<p class="my-6 mx-auto text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
We are currently running V3.15.0, a large-scale Proof-of-Concept Network, while simultaneously preparing for V4.0.0, our upcoming production-ready release. This will deliver a fully operational infrastructure built around three core pillars:
|
||||
</p>
|
||||
|
||||
<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 mt-16 lg:max-w-none">
|
||||
<dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-2">
|
||||
<dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none">
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Data
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in space-y-4">
|
||||
<li class="text-sm text-gray-200 mb-2">Private, scalable, and autonomous—designed for AI-native environments.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Distributed and decentralized, offering 10x efficiency and unprecedented security over existing cloud solutions.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">User Centric Geo-Aware Unbreakable Storage system (ensuring redundancy & privacy)</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Geo-aware for Compliance & Data Localization</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Network
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-2">End-to-end encrypted, peer-to-peer communication—no intermediaries</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Shortest-path routing—intelligent traffic optimization for latency reduction and cost efficiency.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">User Centric Geo-Aware Unbreakable Storage system (ensuring redundancy & privacy)</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Self-sustaining and censorship-resistant—a true Web4-ready network</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Autonomous Cloud
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-3">Self-healing compute fabric—automatically redistributes workloads to healthy nodes. Fault tolerance is achieved via live migration of workloads, maintaining service availability. The Grid supports a peer-to-peer (P2P) AI compute and storage marketplace, allowing individuals and enterprises to monetize excess compute and GPU resources.</li>
|
||||
<li class="text-sm text-gray-200 mb-3">No reliance on hyperscalers—agents dynamically manage resources, ensuring uptime and resilience</li>
|
||||
<li class="text-sm text-gray-200 mb-3">Optimized for AI & Web3—ideal for running autonomous applications, LLMs, and metaverse infrastructure. The Grid is designed to support AI inference and training at the edge.</li>
|
||||
<li class="text-sm text-gray-200 mb-3">ThreeFold Grid V3 uses ZOS (Zero-OS), a highly optimized, minimalistic OS designed specifically for stateless, immutable, and self-healing workloads. ZOS runs on bare metal and supports:
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm">MicroVMs & Containerized Workloads (Kubernetes, Docker, Firecracker)</li>
|
||||
<li class="text-sm">AI & Machine Learning Workloads (LLM inference, federated learning)</li>
|
||||
<li class="text-sm">Web3 & Blockchain Nodes</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
41
templates/partials/why/ai_decentralized.html
Normal file
41
templates/partials/why/ai_decentralized.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<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,5 +1,5 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="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>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
<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 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-4xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
|
||||
<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: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
|
||||
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...
|
||||
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>
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">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 on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</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 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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<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-4xl 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">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
|
||||
<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 pb-24 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">
|
||||
<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">
|
||||
@@ -24,9 +25,11 @@
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
10+ years of Development
|
||||
<br>Built decentralized, autonomous, edge internet technology
|
||||
<br>50m dollars invested by founders, community, and TF Tech investors
|
||||
<ul style="list-style: disc;">
|
||||
<li>10+ years of Development.</li>
|
||||
<li>Built decentralized, autonomous, edge internet technology</li>
|
||||
<li>50m dollars invested by founders, community, and TF Tech investors.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,13 +47,15 @@
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
Open Source Development
|
||||
<br>50+ Countries
|
||||
<br>50,000+ Cores
|
||||
<br>25,000,000 GB of Storage
|
||||
<br>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.
|
||||
<br>Decentralized reliable compute, network and storage layer for Web 2-3
|
||||
<br>Commitments from wonderful projects to build on top of us.
|
||||
<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>
|
||||
@@ -64,16 +69,24 @@
|
||||
</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">2025</div>
|
||||
<div class="font-medium text-white">Current Phase – 2025</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">Decentralized AI and Web4</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
Introduce a Web4 Phone & Router
|
||||
<br>Web4 smart contracts for the Web3 world.
|
||||
<br>Expand the network to +1 Million Nodes
|
||||
<br>Quantum Safe Compute, Storage & Network for agent centric Web4.
|
||||
<br>Build a network of commercial farmers for optimal performance and uptime
|
||||
|
||||
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>
|
||||
<li>Continue Web4 expansion through delivery of 3Phone and 3Router.</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>
|
||||
<li>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,13 +104,16 @@
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-400 mb-2">Autonomy for All</div>
|
||||
<div class="text-gray-400 font-light">
|
||||
An upgraded Internet for Billions.
|
||||
<br>A planet and people first hybrid of Humans and Machines deliver
|
||||
<br>on the promise of Augmented Collective Intelligence
|
||||
<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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="bg-transparent pb-24 pt-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<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>
|
||||
|
||||
41
templates/partials/why/web4.html
Normal file
41
templates/partials/why/web4.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<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">Web4 is the vision</h2>
|
||||
<div class="max-w-5xl">
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">Web4 is the next evolution of the Internet – built on decentralization and collaboration between humans and machines. It is a more sustainable, autonomous system where people have control over their data, leveraging decentralized infrastructure (3Nodes) and AI-powered assistants – and enables privacy and security through secure 3Phones and smart routers.
|
||||
<br>
|
||||
<br>
|
||||
The Decentralized Cloud was the base layer to create Web4.
|
||||
</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>
|
||||
|
||||
Submodule www_projectmycelium_io deleted from cbe5e76842
Reference in New Issue
Block a user