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

why page

Browse Source
This commit is contained in:
Ehab Hassan
2025-02-06 16:42:18 +02:00
parent a508714089
commit 02420f41cd
8 changed files with 71 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
css/index.css
View File

@@ -30,6 +30,21 @@ body .icon {
fill: #ffffff !important; fill: #ffffff !important;
} }
body .dropdown a{
@apply
px-0
text-white
}
body .dropdown{
background-color: rgb(0 0 0 / 50%);
color: #fff;
}
body .d_menu {
background-color: rgba(34 34 34);
}
/* lightMode */ /* lightMode */
body.light-mode { body.light-mode {
background-color: #ffffff; background-color: #ffffff;
@@ -46,6 +61,21 @@ body.light-mode .semigray2 {
color: #424242 !important; color: #424242 !important;
} }
body.light-mode .dropdown a{
@apply
px-0
text-black
}
body.light-mode .dropdown{
background-color: rgb(255 255 255 / 100%);
color: #121212;
}
body.light-mode .d_menu {
background-color: #e5e5e5;
}
body.light-mode .icon { body.light-mode .icon {
fill: #424242 !important; fill: #424242 !important;
@@ -150,7 +180,7 @@ img[src*="#absolute"] {
.dropdown { .dropdown {
background-color: rgb(0 0 0 / 50%);
@apply @apply
lg:text-lg lg:text-lg
px-6 px-6
@@ -176,11 +206,7 @@ img[src*="#absolute"] {
text-white text-white
} }
.dropdown a{
@apply
px-0
text-white
}
.subtitle { .subtitle {
background-color:#58CF77 !important; background-color:#58CF77 !important;

2
templates/partials/header.html
View File

@@ -142,7 +142,7 @@
<nav> <nav>
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden"> <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div style="background-color: rgba(34 34 34);"> <div class="d_menu">
<div id="menu" class="conatiner mx-auto"> <div id="menu" class="conatiner mx-auto">
{{header_menu | safe }} {{header_menu | safe }}
</div> </div>

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

@@ -1,11 +1,11 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32"> <div class="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 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">Why it Matters</h1> <h1 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">Why it Matters</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">
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. For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
<br><br> <br><br>
But we won’t stop here. But we won’t stop here.
@@ -18,8 +18,8 @@
<!-- Right Blockquote --> <!-- Right Blockquote -->
<div class="lg:col-span-5"> <div class="lg:col-span-5">
<figure class=" mt-6 pl-8"> <figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold"> <blockquote class=" text-2xl fade-in font-semibold">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p> <p class="lg:text-2xl text-xl leading-normal font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
</blockquote> </blockquote>
<br> <br>
<div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect"> <div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">

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

@@ -2,8 +2,8 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none"> <div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
<div class="fade-in mx-auto max-w-3xl text-center"> <div class="fade-in mx-auto max-w-3xl text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight sm:text-5xl">Why it Matters?</h2>
<p class="mt-6 text-lg font-light text-white"> <p class="mt-6 text-lg font-light">
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. For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
<br><br> <br><br>
But we won’t stop here. But we won’t stop here.
@@ -15,7 +15,7 @@
secure overlay networking, and autonomous cloud security to bring this vision to life. </span> secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
</p> </p>
<br> <br>
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a> <a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight sm:text-4xl blinking-effect">12.12.2024</a>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,11 +1,11 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32"> <div class="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 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-4xl font-normal tracking-tight 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">
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: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
<br><br> <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...
@@ -17,12 +17,12 @@
<!-- Right Blockquote --> <!-- Right Blockquote -->
<div class="lg:col-span-5"> <div class="lg:col-span-5">
<figure class=" mt-6 pl-8"> <figure class=" mt-6 pl-8">
<blockquote class=" lg:text-2xl text-xl text-white fade-in font-semibold"> <blockquote class=" lg:text-2xl text-xl fade-in font-semibold">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p> <p class="lg:text-2xl text-xl leading-normal font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
</blockquote> </blockquote>
<br> <br>
<div class="mx-4"> <div class="mx-4">
<p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-white lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer> <p class="fade-in mx-auto text-2xl font-semibold tracking-tight lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
Planet First. People First. Planet First. People First.
</p> </p>
</div> </div>

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

@@ -2,12 +2,12 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 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">Founded by Internet 1.0 Pioneers<br>and All of You</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight 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> <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light semigray 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>
<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 border-gray-500 border-2 rounded-2xl px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 bg-white hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Meet the Team</a>
</div> </div>
</div> </div>

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

@@ -2,8 +2,8 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="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-4xl font-normal tracking-tight 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> <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 semigray">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -18,12 +18,12 @@
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" /> <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg> </svg>
</div> </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="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-gray-200">Phase I</div> <div class="font-medium semigray">Phase I</div>
</div> </div>
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div> <div class="font-semibold text-lg semigray mb-2">Creation of Core Technology</div>
<div class="text-gray-200 font-light"> <div class="semigray font-light">
10+ years of Development 10+ years of Development
<br>Built decentralized, autonomous, edge internet technology <br>Built decentralized, autonomous, edge internet technology
<br>50m dollars invested by founders, community, and TF Tech investors <br>50m dollars invested by founders, community, and TF Tech investors
@@ -38,12 +38,12 @@
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" /> <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg> </svg>
</div> </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="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">Phase II</div> <div class="font-medium">Phase II</div>
</div> </div>
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div> <div class="font-semibold text-lg mb-2">Global Proof Of Concept</div>
<div class="text-gray-200 font-light"> <div class="semigray font-light">
Open Source Development Open Source Development
<br>50+ Countries <br>50+ Countries
<br>50,000+ Cores <br>50,000+ Cores
@@ -62,12 +62,12 @@
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" /> <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg> </svg>
</div> </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="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">2025</div> <div class="font-medium">2025</div>
</div> </div>
<div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div> <div class="font-semibold text-lg mb-2">ThreeFold Web4</div>
<div class="text-gray-200 font-light"> <div class="semigray font-light">
Introduce a Web4 Phone & Router Introduce a Web4 Phone & Router
<br>Web4 smart contracts for the Web3 world. <br>Web4 smart contracts for the Web3 world.
<br>Expand the network to +1 Million Nodes <br>Expand the network to +1 Million Nodes
@@ -85,12 +85,12 @@
<path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" /> <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
</svg> </svg>
</div> </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="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-gray-400">The Result</div> <div class="font-medium semigray2">The Result</div>
</div> </div>
<div class="font-semibold text-lg text-gray-400 mb-2">Sovereignty for All</div> <div class="font-semibold text-lg semigray2 mb-2">Sovereignty for All</div>
<div class="text-gray-400 font-light"> <div class="semigray2 font-light">
An upgraded Internet for Billions. An upgraded Internet for Billions.
<br>A planet and people first hybrid of Humans and Machines deliver <br>A planet and people first hybrid of Humans and Machines deliver
<br>on the promise of Augmented Collective Intelligence <br>on the promise of Augmented Collective Intelligence

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

@@ -2,17 +2,17 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 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 sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Open Source. Open Source.
</dd> </dd>
</div> </div>
<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 sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Authenticity. Authenticity.
</dd> </dd>
</div> </div>
<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 sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Simplicity. Simplicity.
</dd> </dd>
</div> </div>