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

Merge branch 'development'

Browse Source
This commit is contained in:
Ehab Hassan
2025-02-25 16:38:33 +02:00
parent 0cda5f50b8 a6f3481962
commit ea1aa4c8e3
29 changed files with 108 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/become_farmer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 282 KiB

BIN
static/images/self_healing.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 152 KiB

BIN
static/images/selfhealing.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 174 KiB

After

Width:  |  Height:  |  Size: 120 KiB

2
templates/index.html
View File

@@ -5,8 +5,8 @@
{% include "partials/home/features.html" %} {% include "partials/home/features.html" %}
{% include "partials/home/grid_stats.html" %} {% include "partials/home/grid_stats.html" %}
{% include "partials/home/use_cases.html" %} {% include "partials/home/use_cases.html" %}
{% include "partials/home/self_healing.html" %}
{% include "partials/home/farmers.html" %} {% include "partials/home/farmers.html" %}
{% include "partials/home/self_healing.html" %}
{% include "partials/home/web4.html" %} {% include "partials/home/web4.html" %}
{% include "partials/home/faq.html" %} {% include "partials/home/faq.html" %}
{% include "partials/home/cta.html" %} {% include "partials/home/cta.html" %}

2
templates/partials/action/cta.html
View File

@@ -1,7 +1,7 @@
<div class="bg-transparent pt-12 pb-12"> <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"> <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"> <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> </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"> <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"> <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">

9
templates/partials/action/enable_web4.html
View File

@@ -1,10 +1,10 @@
<div class="bg-transparent pb-6 pt-12 lg:pt-24"> <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-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"> <div class="mx-auto max-w-2xl px-2 lg:max-w-7xl lg:px-8">
<br> <br>
<h2 class="text-center mx-auto fade-in lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">What Web4 Enables</h2> <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>
</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="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"> <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"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
@@ -80,6 +80,7 @@
</div> </div>
</div> </div>
</section> </section>
</div>
<style> <style>
/* Fade-in animation for the grid items */ /* Fade-in animation for the grid items */

10
templates/partials/action/video.html
View File

@@ -1,12 +1,12 @@
<div class="relative isolate overflow-hidden bg-transparent"> <div class="relative isolate overflow-hidden bg-transparent">
<div class="mx-auto max-w-4xl text-center lg:py-24 py-12 px-4 lg:px-8"> <div class="mx-auto max-w-4xl text-center px-2 pt-12 lg:px-8">
<!-- Main Heading --> <!-- Main Heading -->
<h2 class="mt-12 fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white capitalize"> <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 Building towards Web4
</h2> </h2>
<!-- Subtext --> <!-- Subtext -->
<p class="mx-auto mt-8 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in fade-in-delay"> <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. 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>
<br> <br>
@@ -16,7 +16,7 @@
</p> </p>
<!-- Embed YouTube Video --> <!-- Embed YouTube Video -->
<div class="py-12 flex justify-center mx-auto" style="max-width: 500px; height: auto;"> <div class="py-10 flex justify-center mx-auto" style="max-width: 500px; height: auto;">
<div class="responsive-iframe" > <div class="responsive-iframe" >
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player" <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" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
@@ -26,7 +26,7 @@
</div> </div>
<!-- Call to Action Button --> <!-- Call to Action Button -->
<div class="mt-12 fade-in flex items-center justify-center gap-x-6"> <div class="mt-2 fade-in flex items-center justify-center gap-x-6">
<a href="/signup" target="_blank" <a href="/signup" target="_blank"
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"> 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 Take Action

8
templates/partials/action/web4tools.html
View File

@@ -1,7 +1,7 @@
<div class="overflow-hidden bg-transparent py-16 lg:py-24"> <div class="overflow-hidden lg:py-24 py-12">
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8"> <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-6 lg:max-w-6xl 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-4xl leading-snug font-normal tracking-tight text-white">How to Participate</h2> <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"> <p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
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> 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>

2
templates/partials/cta.html
View File

@@ -1,7 +1,7 @@
<div class="bg-transparent"> <div class="bg-transparent">
<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"> <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"> <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> </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"> <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"> <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">

2
templates/partials/footer.html
View File

@@ -4,7 +4,7 @@
<html> <html>
<head /> <head />
<body> <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"> <footer class="bg-transparent">
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6"> <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
<div class="xl:flex xl:gap-4"> <div class="xl:flex xl:gap-4">

2
templates/partials/header.html
View File

@@ -197,7 +197,7 @@
</div> #} </div> #}
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4"> <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">Participate in Web4</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> </div>
</nav> </nav>
</div> </div>

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

@@ -1,7 +1,7 @@
<div class="bg-transparent pt-12 pb-12"> <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"> <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"> <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> </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"> <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"> <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">

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

@@ -14,9 +14,9 @@
}; };
</script> </script>
<main class="relative flex flex-col justify-center overflow-hidden"> <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 --> <!-- Accordion component -->
<div class="divide-y divide-white/50 my-10"> <div class="divide-y divide-white/50 my-10">

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

@@ -1,12 +1,12 @@
<div class="bg-transparent pt-12 pb-6"> <div class="bg-transparent lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8"> <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"> <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> <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"> <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 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.” 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> </p>
</div> </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="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"> <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"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
@@ -44,7 +44,7 @@
</dd> </dd>
</div> </div>
</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://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> <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>
</div> </div>

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

@@ -1,7 +1,7 @@
<div class="bg-transparent py-24"> <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-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8"> <div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-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"> <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 a Decentralized Infrastructure Layer for The Internet <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> </h2>
<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> <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> <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>

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

@@ -1,9 +1,9 @@
<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"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white ">Powered by <h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">Powered by
<br>A Global Community</h2> <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">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> <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>
@@ -47,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> <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> </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> <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>
</div> </div>

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

@@ -1,7 +1,7 @@
<div class="relative flex justify-center items-center isolate overflow-hidden bg-transparent h-screen"> <div class="relative flex justify-center items-center isolate overflow-hidden bg-transparent h-screen">
<div class="px-4 lg:pt-32 pt-24 lg:px-8"> <div class="px-4 lg:px-8">
<!-- logo option <!-- logo option
@@ -11,9 +11,9 @@
--> -->
<div class="mx-auto max-w-4xl text-center"> <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-5xl fade-in">Internet <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> Infrastructure<br> for Everyone by Everyone, Everywhere</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">ThreeFold is a <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 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> 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 <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
@@ -22,7 +22,7 @@
{# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #} {# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #}
<br> <br>
<div class="mt-10 flex items-center justify-center gap-x-8"> <div class="mt-6 flex items-center justify-center gap-x-8">
<a href="/what" <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 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> We've Built</a>

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

@@ -1,10 +1,10 @@
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24"> <div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
<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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white capitalize">A Self-Healing Web4 Infrastructure</h2> <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> <br>
<h2 class="fade-in text-balance lg:text-4xl text-2xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2> <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"> <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=""> <img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">

12
templates/partials/home/use_cases.html
View File

@@ -1,13 +1,13 @@
<div class="bg-transparent pt-12 pb-6"> <div class="bg-transparent lg:py-24 py-12">
<div class="text-center mx-auto max-w-7xl px-6 lg:px-8"> <div class="text-center mx-auto max-w-7xl px-4 lg:px-8">
<div class="mx-auto max-w-2xl px-6 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 lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run <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> 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"> <p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
The grid can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities. Here are some of the primary use cases of the grid today. 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> </p>
</div> </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="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"> <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"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">

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

@@ -1,5 +1,5 @@
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24"> <div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
<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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<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> <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>

14
templates/partials/what/hero.html
View File

@@ -1,18 +1,18 @@
<div class="relative flex flex-col justify-start isolate overflow-hidden bg-transparent min-h-screen py-12 lg:py-24"> <div class="relative flex flex-col justify-center isolate overflow-hidden bg-transparent py-12">
<div class="px-4 lg:px-8"> <div class="px-4 lg:px-8">
<div class="mx-auto max-w-4xl text-center"> <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> <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 <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> <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 <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> <br> Autonomous Infrastructure Layer<br>for The Internet</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 font-lightfade-in">Our unique <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 allows everyone to become a provider<br> of network, storage and compute capacity.</p> technology enables anyone to become a provider<br> of network, storage and compute capacity.</p>
<div class="mx-auto max-w-7xl px-8 py-4"> <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"> <img src="/images/become_farmer.png" alt="Become a Farmer" class="w-full fade-in">
</div> </div>
<div class=" flex items-center justify-center "> <div class=" flex items-center justify-center mt-6 ">
<a href="https://docs.threefold.io" <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 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> Deeper</a>
</div> </div>

11
templates/partials/what/portfolio.html
View File

@@ -1,14 +1,14 @@
<div class="bg-transparent pt-12 pb-6"> <div class="bg-transparent py-12 lg:py-24">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8"> <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"> <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"> <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. 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> </p>
</div> </div>
</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="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"> <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"> <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>
</div> </div>
</section> </section>
</div>
<style> <style>
/* Fade-in animation for the grid items */ /* Fade-in animation for the grid items */

25
templates/partials/what/what_features.html
View File

@@ -1,7 +1,7 @@
<div class="bg-transparent pb-6"> <div class="bg-transparent lg:py-24 py-12">
<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 px-6 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 lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">What We Do</h2> <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 <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. be used by any Web2, Web3, AI, or Edge IT workload.
</p> </p>
@@ -9,8 +9,8 @@
<p class="my-6 mx-auto text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in"> <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: 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> </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="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"> <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 lg:grid-cols-2">
@@ -36,10 +36,10 @@
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<ul class="text-white fade-in"> <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">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">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">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.cases including the following:</li> <li class="text-sm text-gray-200 mb-2">Self-sustaining and censorship-resistant—a true Web4-ready network</li>
</ul> </ul>
</dd> </dd>
</div> </div>
@@ -53,13 +53,13 @@
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<ul class="text-white fade-in"> <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">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">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">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: <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"> <ul class="text-white fade-in">
<li class="text-sm">MicroVMs & Containerized Workloads (Kubernetes, Docker, Firecracker).</li> <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">AI & Machine Learning Workloads (LLM inference, federated learning)</li>
<li class="text-sm">Web3 & Blockchain Nodes.</li> <li class="text-sm">Web3 & Blockchain Nodes</li>
</ul> </ul>
</li> </li>
</ul> </ul>
@@ -69,6 +69,7 @@
</div> </div>
</div> </div>
</section> </section>
</div>
<style> <style>
/* Fade-in animation for the grid items */ /* Fade-in animation for the grid items */

7
templates/partials/why/ai_decentralized.html
View File

@@ -1,7 +1,7 @@
<div class="relative isolate overflow-hidden bg-transparent"> <div class="relative isolate overflow-hidden lg:py-24 py-12">
<div class="px-6 py-12 px-6 lg:px-8"> <div class="px-4 lg:px-8">
<div class="mx-auto max-w-4xl text-center"> <div class="mx-auto max-w-4xl text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl capitalize">AI needs to be decentralized</h2> <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. <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>
<br> <br>
@@ -11,6 +11,7 @@
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> 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> </div>
</div>
<style> <style>
/* Define the fade-in animation */ /* Define the fade-in animation */

6
templates/partials/why/reason.html
View File

@@ -1,10 +1,10 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-12"> <div class="relative isolate overflow-hidden bg-transparent text-white lg:pb-24 pb-12">
<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="relative grid lg:grid-cols-12 lg:gap-8"> <div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content --> <!-- Left Content -->
<div class="lg:col-span-7"> <div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0"> <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"> <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: data centers are extremely expensive to build and maintain, privacy and security are compromised, misinformation is rampant, and half the world remains poorly connected. 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> <br><br>

22
templates/partials/why/team.html
View File

@@ -1,13 +1,15 @@
<div class="bg-transparent relative isolate py-12 mb-12"> <div class="bg-transparent relative isolate lg:py-24 py-12 ">
<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-4xl text-center"> <div class="mx-auto max-w-2xl lg:max-w-4xl text-center">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl capitalize">Founded by Internet 1.0 Pioneers<br>and All of You</h2> <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. <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> <br>The project is supported by over 50 full-time active developers.</p>
</div> </div>
<div class="mt-8 flex items-center justify-center gap-x-6 fade-in"> <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> <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>
</div>

10
templates/partials/why/timeline.html
View File

@@ -1,15 +1,16 @@
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0"> <div class="lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <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> <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> <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> </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 --> <!-- Item #1 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"> <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
@@ -112,6 +113,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<style> <style>

4
templates/partials/why/values.html
View File

@@ -1,5 +1,5 @@
<div class="bg-transparent pb-24 pt-24"> <div class="bg-transparent lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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"> <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"> <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> <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>

7
templates/partials/why/web4.html
View File

@@ -1,7 +1,7 @@
<div class="relative isolate overflow-hidden bg-transparent"> <div class="relative isolate overflow-hidden lg:py-24 py-12">
<div class="px-6 lg:pt-24 lg:pb-24 py-12 lg:px-8"> <div class="px-4 lg:px-8">
<div class="mx-auto max-w-7xl"> <div class="mx-auto max-w-7xl">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl capitalize">Web4 is the vision</h2> <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"> <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. <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>
@@ -11,6 +11,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<style> <style>
/* Define the fade-in animation */ /* Define the fade-in animation */