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

edit responsioveness

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-22 13:58:36 +01:00
parent 734ba303ed
commit 77f0b105d9
5 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<div class="bg-transparent pt-12 pb-6"> <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-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"> <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">Powering the Grid Together</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Powering the Grid Together</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-base 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 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 now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”.
</p> </p>
</div> </div>
@@ -11,7 +11,7 @@
<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">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
1. HOST A NODE 1. HOST A NODE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@@ -21,7 +21,7 @@
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
2. OFFER CAPACITY 2. OFFER CAPACITY
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@@ -32,7 +32,7 @@
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
3. EARN REWARDS 3. EARN REWARDS
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">

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

@@ -1,34 +1,34 @@
<div class="bg-transparent"> <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="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 lg:px-16 px-0 pb-12"> <div class="max-w-3xl lg:px-16 px-0 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">ThreeFold is the Infrastructure Layer of Web 4 <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 Web 4
</h2> </h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base 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-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-base 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-4 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
<a href="/what" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a> <a href="/what" target="_blank" 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>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing --> <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10"> <dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
<div class=""> <div class="pt-0">
<dt class="font-medium text-gray-200">Unbreakable Data</dt> <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>
<div class=""> <div class="">
<dd class="font-light text-gray-400 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">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-400 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd> <dd class="font-light 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>
</div> </div>
<div class="pt-4"> <div class="lg:pt-4 pt-0">
<dt class="font-medium text-gray-200">Autonomous Cloud</dt> <dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
</div> </div>
<div class=""> <div class="">
<dd class="font-light text-gray-400 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">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
<dd class="font-light text-gray-400 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-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div>
<div class="pt-4">
<dt class="font-medium text-gray-200">Unbreakable Network</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 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-400 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div> </div>
</dl> </dl>
</div> </div>

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

@@ -3,9 +3,9 @@
<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 sm:text-5xl">A Global Community</h2> <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-base font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p> <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 deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</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>
</div> </div>
<dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4"> <dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="fade-in flex flex-col bg-white/5 p-8"> <div class="fade-in flex flex-col bg-white/5 p-8">
@@ -17,18 +17,18 @@
<dd class="order-first text-3xl font-semibold tracking-tight text-white">56,114</dd> <dd class="order-first text-3xl font-semibold tracking-tight text-white">56,114</dd>
</div> </div>
<div class="fade-in flex flex-col bg-white/5 p-8"> <div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">NODES</dt> <dt class="text-sm/6 font-light text-gray-300">NODES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">2053</dd> <dd class="order-first text-3xl font-semibold tracking-tight text-white">2053</dd>
</div> </div>
<div class="fade-in flex flex-col bg-white/5 p-8"> <div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">COUNTRIES</dt> <dt class="text-sm/6 font-light text-gray-300">COUNTRIES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">52</dd> <dd class="order-first text-3xl font-semibold tracking-tight text-white">52</dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="max-w-4xl items-center mx-auto">
<p class="flex items-center justify-center mt-8 text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">To build Web 4, we need +1,000,000 Nodes</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">Building Web 4 requires the deployment of over <span class="font-semibold">1.000.000 nodes</span>, to establish a truly decentralized and resilient infrastructure.</p>
</div>
</div> </div>
<div class="mt-12 flex items-center justify-center gap-x-6"> <div class="mt-12 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-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-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-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>

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

@@ -1,9 +1,9 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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 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"> <div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">We are Building Web 4</h2> <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-5xl fade-in">We are Building Web 4</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p> <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></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.</span></p>
<div class="mt-12 flex items-center justify-center gap-x-6"> <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-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">Get Started</a> <a href="https://docs.threefold.io/" 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">Get Started</a>
<a href="/what" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">What We've Built <span aria-hidden="true">→</span></a> <a href="/what" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">What We've Built <span aria-hidden="true">→</span></a>

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

@@ -3,10 +3,10 @@
<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-3xl font-bold tracking-tight text-white sm:text-4xl">WEB 4</h2> <h2 class="fade-in text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">WEB 4</h2>
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">The Next Evolution of the Internet</h2> <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-base font-light text-gray-200 fade-in">Web 4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web 4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</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-6 max-w-3xl text-pretty lg:text-xl text-base font-bold text-gray-200 fade-in">ThreeFold is the next step to Web4.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-semibold text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
<br> <br>
<br> <br>
<div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect"> <div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">