update home sections
This commit is contained in:
@@ -24,29 +24,6 @@ extra:
|
||||
) }}
|
||||
|
||||
|
||||
<!-- section 2 -->
|
||||
|
||||
{{ features(
|
||||
title="ThreeFold is a Decentralized Infrastructure Layer for The Internet",
|
||||
description="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
|
||||
button_text="Discover How It Works",
|
||||
button_link="/what",
|
||||
title_2="Three Inventions at the Core of Our System",
|
||||
subtitle_1 ="COMPUTE",
|
||||
header1="Bare Metal Operating System",
|
||||
description1_1="Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud.",
|
||||
description1_2="Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability.",
|
||||
subtitle_2="DATA",
|
||||
header2="Unbreakable Data",
|
||||
description2_1="Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level.",
|
||||
description2_2="Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.",
|
||||
subtitle_3="NETWORK",
|
||||
header3="Unbreakable Network",
|
||||
description3_1="End-to-end encrypted overlay network, always looking for the shortest possible path between participants.",
|
||||
description3_2="Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations."
|
||||
) }}
|
||||
|
||||
|
||||
|
||||
<!-- section 2 -->
|
||||
|
||||
@@ -69,22 +46,24 @@ extra:
|
||||
|
||||
### Three Inventions at the Core of Our System
|
||||
|
||||
<br>
|
||||
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
|
||||
{{ features_2(
|
||||
{{ right_content(
|
||||
subtitle ="COMPUTE",
|
||||
header="Bare Metal Operating System",
|
||||
description1="Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud.",
|
||||
description2="Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability."
|
||||
) }}
|
||||
|
||||
{{ features_2(
|
||||
{{ right_content(
|
||||
subtitle="DATA",
|
||||
header="Unbreakable Data",
|
||||
description1="Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level.",
|
||||
description2="Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable."
|
||||
) }}
|
||||
|
||||
{{ features_2(
|
||||
{{ right_content(
|
||||
subtitle="NETWORK",
|
||||
header="Unbreakable Network",
|
||||
description1="End-to-end encrypted overlay network, always looking for the shortest possible path between participants.",
|
||||
@@ -98,6 +77,45 @@ extra:
|
||||
|
||||
|
||||
|
||||
<!-- section 3 -->
|
||||
|
||||
{{ grid_stats(
|
||||
title_1="Powered by",
|
||||
title_2="A Global Community",
|
||||
description_1="ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.",
|
||||
description_2="Today, our proof-of-concept network is live and operational worldwide, running on version 3.16 technology.",
|
||||
subtitle="As we expand, we may need millions of nodes to support this growing ecosystem to build a truly decentralized and resilient infrastructure",
|
||||
button_text="Explore Grid Capacity",
|
||||
button_link="https://dashboard.grid.tf/#/tf-grid/node-statistics/"
|
||||
|
||||
) }}
|
||||
|
||||
|
||||
|
||||
<!-- section 4 -->
|
||||
|
||||
{{ use_cases() }}
|
||||
|
||||
|
||||
<!-- section 5 -->
|
||||
|
||||
{{ farmers() }}
|
||||
|
||||
|
||||
<!-- section 6 -->
|
||||
|
||||
{{ self_healing() }}
|
||||
|
||||
<!-- section 7 -->
|
||||
|
||||
{{ web4() }}
|
||||
|
||||
<!-- section 8 -->
|
||||
|
||||
{{ cta() }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -260,7 +260,7 @@ a img:hover {
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl lg:text-3xl my-4 font-extralight;
|
||||
@apply lg:text-2xl text-xl leading-tight font-normal tracking-tight ;
|
||||
color: #ffffff;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
|
||||
14
templates/shortcodes/cta.html
Normal file
14
templates/shortcodes/cta.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="bg-transparent pt-12 pb-12">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow,<br> Today
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="/signup" target="_blank" class="blinking-effect rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Take the Next Step
|
||||
</a>
|
||||
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
290
templates/shortcodes/faq.html
Normal file
290
templates/shortcodes/faq.html
Normal file
@@ -0,0 +1,290 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<main class="relative flex flex-col justify-center overflow-hidden">
|
||||
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 lg:py-24 py-12">
|
||||
|
||||
<h1 class="lg:text-4xl text-3 font-normal tracking-tight text-white">Frequently Asked Questions</h1>
|
||||
|
||||
<!-- Accordion component -->
|
||||
<div class="divide-y divide-white/50 my-10">
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-01"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-01"
|
||||
>
|
||||
<span style="color: #fff;">Is this a separate new Internet?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-01"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-01"
|
||||
class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-02"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-02"
|
||||
>
|
||||
<span style="color: #fff;">Why do we need a new Internet?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-02"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-02"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-05"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-05"
|
||||
>
|
||||
<span style="color: #fff;">How can I participate?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-05"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-05"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-04"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
>
|
||||
<span style="color: #fff;">How can I get V4 nodes? ?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-04"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-04"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
|
||||
Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. <A href="docs.threefold.io/docs/become-a-farmer/get_started">Click here</a> to get V4 nodes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #fff;">What can I do with the ThreeFold Grid?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
ThreeFold grid can be used to host any web2, web3 and future workload.
|
||||
For more details see <a href="https://docs.threefold.io/docs/category/how-to-use" target="_blank" rel="noopener noreferrer">our docs</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #fff;">How secure and private is my data?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #fff;">Who should use the ThreeFold Grid ?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-04"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
>
|
||||
<span style="color: #fff;">You have 2 tokens, TFT and INCA, why?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-04"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-04"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid capacity. From the start, ThreeFold had 4 billion tokens planned. The ThreeFold community decided to stop minting at 1 billion tokens on Stellar via a DAO vote. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. <br><br>We are now building generation 4 of the ThreeFold Grid capacity, and we need a new token to build this new generation. There will be 3 billion new INCA tokens and all TFT holders can transfer their TFT into INCA (one-way bridge).
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- End: Accordion component -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
85
templates/shortcodes/farmers.html
Normal file
85
templates/shortcodes/farmers.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
|
||||
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.
|
||||
</p>
|
||||
<p class="text-left mt-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 from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
|
||||
</p>
|
||||
</div>
|
||||
<section class="bg-transparent">
|
||||
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
1. HOST A NODE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
2. OFFER CAPACITY
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
3. EARN REWARDS
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-center gap-x-6">
|
||||
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,128 +1,116 @@
|
||||
{% set styles = "background-image: url('images/V3.png');" %}
|
||||
<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="relative mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
<div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
|
||||
<!-- capacity -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set subtext = subtext | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
|
||||
|
||||
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover md:block hidden">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">{{ title_1 }}
|
||||
<br>{{ title_2 }}</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_1 }}</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_2 }}</p>
|
||||
</div>
|
||||
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- ssd -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
|
||||
<img
|
||||
class="mx-auto p-4"
|
||||
src="images/V3-08.png"
|
||||
width="130"
|
||||
alt=""
|
||||
>
|
||||
<div id="capacity" class="leading-none font-extrabold text-xl"></div>
|
||||
<span class="block text-md mt-4 font-normal capitalize">capacity</span>
|
||||
<dt class="text-sm/6 font-light text-gray-300">SSD CAPACITY</dt>
|
||||
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
|
||||
<img
|
||||
class="mx-auto p-4"
|
||||
src="images/V3-11.png"
|
||||
width="130"
|
||||
alt=""
|
||||
>
|
||||
<div id="cores" class="leading-none font-extrabold text-xl"></div>
|
||||
<span class="block text-md mt-4 font-normal capitalize">cores</span>
|
||||
<dt class="text-sm/6 font-light text-gray-300">CORES</dt>
|
||||
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
|
||||
<img
|
||||
class="mx-auto p-4"
|
||||
src="images/V3-09.png"
|
||||
width="130"
|
||||
alt=""
|
||||
>
|
||||
<div id="nodes" class="leading-none font-extrabold text-xl"></div>
|
||||
<span class="block text-md mt-4 font-normal capitalize">nodes</span>
|
||||
<dt class="text-sm/6 font-light text-gray-300">NODES</dt>
|
||||
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
|
||||
<img
|
||||
class="mx-auto p-4"
|
||||
src="images/V3-10.png"
|
||||
width="130"
|
||||
alt=""
|
||||
>
|
||||
<div id="countries" class="leading-none font-extrabold text-xl"></div>
|
||||
<span class="block text-md mt-4 font-normal capitalize">countries</span>
|
||||
</div>
|
||||
<!-- farms -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
|
||||
<img
|
||||
class="mx-auto p-4"
|
||||
src="images/farm.png"
|
||||
width="130"
|
||||
alt=""
|
||||
>
|
||||
<div id="farms" class="leading-none font-extrabold text-xl">900+</div>
|
||||
<span class="block text-md mt-4 font-normal capitalize">farms</span>
|
||||
<dt class="text-sm/6 font-light text-gray-300">COUNTRIES</dt>
|
||||
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<button class="my-8 blue_b">
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
|
||||
Explore Grid Capacity
|
||||
</a>
|
||||
</button>
|
||||
{# <button class="my-8">
|
||||
<a href="/host" target="_self">
|
||||
Become a Cloud Provider
|
||||
</a>
|
||||
</button> #}
|
||||
</dl>
|
||||
</div>
|
||||
<div class="max-w-4xl items-center mx-auto">
|
||||
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ subtext }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="mt-6 flex items-center justify-center gap-x-6">
|
||||
<a href="{{ button_link }}" 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">{{ button_text }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('ssd', 0, 1910, 0, 2.5).start();
|
||||
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
||||
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
||||
new CountUp('countries', 0, 40, 0, 2.5).start();
|
||||
new CountUp('farms', 0, 900, 0, 2.5).start();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
.blue_b{
|
||||
|
||||
background-color:#2E83FF !important;
|
||||
color: #fff !important;
|
||||
|
||||
}
|
||||
.blue_b a{
|
||||
color: #fff !important;
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
.blue_b:hover {
|
||||
background-color:#5596f5 !important;
|
||||
}
|
||||
/* Tooltip container */
|
||||
|
||||
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
width: 250px;
|
||||
background-color: black;
|
||||
background-color: rgb(26 26 26 / 90%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
@@ -131,8 +119,11 @@
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -50px;
|
||||
right: -60px;
|
||||
bottom: -7px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/* right: -60px; */
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
@@ -144,19 +135,12 @@
|
||||
.tooltip .tooltiptext {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -50px;
|
||||
bottom: -7px !important;
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="px-4 lg:px-8">
|
||||
|
||||
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h1 class="fade-in">
|
||||
{{ title }}</h1>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
|
||||
|
||||
55
templates/shortcodes/self_healing.html
Normal file
55
templates/shortcodes/self_healing.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Internet Infrastructure</h2>
|
||||
<br>
|
||||
<h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
|
||||
|
||||
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
|
||||
<img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">
|
||||
</div>
|
||||
|
||||
{# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
|
||||
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
|
||||
</div> #}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
107
templates/shortcodes/use_cases.html
Normal file
107
templates/shortcodes/use_cases.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="text-center mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run
|
||||
on ThreeFold</h2>
|
||||
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
The new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
|
||||
</p>
|
||||
</div>
|
||||
<section class="bg-transparent">
|
||||
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl mt-16 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/tft_logo.png" alt="">
|
||||
|
||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg font-semibold text-white">
|
||||
ThreeFold Cloud
|
||||
</dt>
|
||||
<dt class="text-lg font-normal text-white">Open-Source Cloud<dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
|
||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
||||
|
||||
<ul class="flex justify-center fade-in">
|
||||
<li class="mr-2"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" 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" target="_blank">Dashboard</a></li>
|
||||
<li><a href="https://manual.grid.tf/" 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" target="_blank">Manual</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/mycelium_logo.png" alt="">
|
||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
|
||||
Mycelium
|
||||
</dt>
|
||||
<dt class="text-lg font-normal text-white">Unbreakable Network</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An adaptive and resilient network solution that not only keeps your data safe but also guarantees uninterrupted and efficient communication. The Mycelium Network is the backbone of a new era of connectivity, prioritizing speed, security, and reliability for all users.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
||||
|
||||
<ul class="flex justify-center fade-in">
|
||||
<li class="mr-2"><a href="https://mycelium.threefold.io" 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" target="_blank">Website</a></li>
|
||||
<li><a href="https://threefold.info/mycelium/docs/" 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" target="_blank">Docs</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/aibox_logo.png" alt="">
|
||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
|
||||
AIBOX
|
||||
</dt>
|
||||
<dt class="text-lg font-normal text-white">Decentralized AI</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A decentralized AI solution that enables anyone to run, train, and use AI models locally, keeping their data private while sharing unused computing power with the network—eliminating the need for centralized data centers.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
||||
|
||||
<ul class="flex justify-center fade-in">
|
||||
<li class="mr-2"><a href="https://aibox.threefold.io" 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" target="_blank">Website</a></li>
|
||||
<li><a href="https://threefold.info/aibox/docs/" 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" target="_blank">Docs</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
templates/shortcodes/web4.html
Normal file
76
templates/shortcodes/web4.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-4xl lg:text-6xl font-normal tracking-tight text-white ">More Resilient, More Powerful, More Diverse With You</h2>
|
||||
<br>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.</p>
|
||||
<p class="mx-auto mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.</p>
|
||||
<!--
|
||||
<div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
|
||||
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
|
||||
<g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
|
||||
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<a href="/action" class="fade-in text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
|
||||
</div>
|
||||
-->
|
||||
<div class="mt-16 fade-in flex items-center justify-center gap-x-6">
|
||||
<a href="/action" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Join ThreeFold</a>
|
||||
{# <a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> #}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('capacity', 0, 1910, 0, 2.5).start();
|
||||
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
||||
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
||||
new CountUp('countries', 0, 40, 0, 2.5).start();
|
||||
new CountUp('farms', 0, 900, 0, 2.5).start();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user