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;
}
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 */
body.light-mode {
background-color: #ffffff;
@@ -46,6 +61,21 @@ body.light-mode .semigray2 {
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 {
fill: #424242 !important;
@@ -150,7 +180,7 @@ img[src*="#absolute"] {
.dropdown {
background-color: rgb(0 0 0 / 50%);
@apply
lg:text-lg
px-6
@@ -176,11 +206,7 @@ img[src*="#absolute"] {
text-white
}
.dropdown a{
@apply
px-0
text-white
}
.subtitle {
background-color:#58CF77 !important;

2
templates/partials/header.html
View File

@@ -142,7 +142,7 @@
<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 style="background-color: rgba(34 34 34);">
<div class="d_menu">
<div id="menu" class="conatiner mx-auto">
{{header_menu | safe }}
</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="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">Why it Matters</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
<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">
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>
But we won’t stop here.
@@ -18,8 +18,8 @@
<!-- Right Blockquote -->
<div class="lg:col-span-5">
<figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white 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>
<blockquote class=" text-2xl fade-in font-semibold">
<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>
<br>
<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 mt-24 pt-24 max-w-2xl lg:max-w-none">
<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>
<p class="mt-6 text-lg font-light text-white">
<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">
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>
But we won’t stop here.
@@ -15,7 +15,7 @@
secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
</p>
<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>

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="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>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
<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">
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>
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 -->
<div class="lg:col-span-5">
<figure class=" mt-6 pl-8">
<blockquote class=" lg:text-2xl text-xl text-white 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>
<blockquote class=" lg:text-2xl text-xl fade-in font-semibold">
<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>
<br>
<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.
</p>
</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-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>
<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 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 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>

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-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-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 semigray">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
</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" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="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="font-medium text-gray-200">Phase I</div>
<div class="font-medium semigray">Phase I</div>
</div>
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
<div class="text-gray-200 font-light">
<div class="font-semibold text-lg semigray mb-2">Creation of Core Technology</div>
<div class="semigray font-light">
10+ years of Development
<br>Built decentralized, autonomous, edge internet technology
<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" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="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="font-medium text-white">Phase II</div>
<div class="font-medium">Phase II</div>
</div>
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
<div class="text-gray-200 font-light">
<div class="font-semibold text-lg mb-2">Global Proof Of Concept</div>
<div class="semigray font-light">
Open Source Development
<br>50+ Countries
<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" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="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="font-medium text-white">2025</div>
<div class="font-medium">2025</div>
</div>
<div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div>
<div class="text-gray-200 font-light">
<div class="font-semibold text-lg mb-2">ThreeFold Web4</div>
<div class="semigray font-light">
Introduce a Web4 Phone & Router
<br>Web4 smart contracts for the Web3 world.
<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" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="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="font-medium text-gray-400">The Result</div>
<div class="font-medium semigray2">The Result</div>
</div>
<div class="font-semibold text-lg text-gray-400 mb-2">Sovereignty for All</div>
<div class="text-gray-400 font-light">
<div class="font-semibold text-lg semigray2 mb-2">Sovereignty for All</div>
<div class="semigray2 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

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

@@ -2,17 +2,17 @@
<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">
<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.
</dd>
</div>
<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.
</dd>
</div>
<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.
</dd>
</div>