Merge branch 'development_light_mode' into development
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/home/hero.html" %}
|
||||
{% include "partials/home/features.html" %}
|
||||
{% include "partials/home/grid_stats.html" %}
|
||||
{% include "partials/home/use_cases.html" %}
|
||||
{% include "partials/home/farmers.html" %}
|
||||
{% include "partials/home/self_healing.html" %}
|
||||
{% include "partials/home/web4.html" %}
|
||||
{% include "partials/home/faq.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
<div>
|
||||
{% set page = get_page(path="home/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,40 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<div class="container sm:pxi-0 mx-auto min-h-screen pt-24 mt-5">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
|
||||
<h3 class="
|
||||
uppercase
|
||||
leading-none
|
||||
text-bold
|
||||
text-gray-800
|
||||
font-black font-heading
|
||||
">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<section class="post-content mx-auto relative font-serif text-gray-700">
|
||||
<div class="mt-6 mb-8 text-gray-900">{{ page.content | safe }}</div>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-green-500
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-green-600
|
||||
px-8
|
||||
py-2
|
||||
mr-2
|
||||
my-0
|
||||
shadow
|
||||
rounded-full
|
||||
active--exact active
|
||||
">
|
||||
<a href="{{page.extra.link}}" target="_blank" aria-current="page">
|
||||
{{ page.extra.button }}
|
||||
</a>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@@ -1,9 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/action/video.html" %}
|
||||
{% include "partials/action/enable_web4.html" %}
|
||||
{% include "partials/action/web4tools.html" %}
|
||||
{% include "partials/action/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
{% include "partials/accordion.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,11 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/media/hero.html" %}
|
||||
{% include "partials/media/milestones.html" %}
|
||||
{% include "partials/media/branding.html" %}
|
||||
{% include "partials/media/founders.html" %}
|
||||
{% include "partials/media/social.html" %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/solutions/hero.html" %}
|
||||
{% include "partials/solutions/what.html" %}
|
||||
{% include "partials/solutions/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/what/hero.html" %}
|
||||
{% include "partials/what/what_features.html" %}
|
||||
{% include "partials/what/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@@ -1,13 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/why/hero.html" %}
|
||||
{% include "partials/why/reason.html" %}
|
||||
{% include "partials/why/ai_decentralized.html" %}
|
||||
{% include "partials/why/web4.html" %}
|
||||
{% include "partials/why/timeline.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@@ -1,252 +0,0 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
-->
|
||||
<!-- This example requires Tailwind CSS v1.4.0+ -->
|
||||
<script type="text/javascript">
|
||||
|
||||
var displayedMenu = "";
|
||||
var hamburgerShown = false;
|
||||
let width = screen.width;
|
||||
var isMobile = width < 1024;
|
||||
|
||||
function toggleMenu(button) {
|
||||
if (displayedMenu === button.id.split("-")[0]) {
|
||||
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
|
||||
hideMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
|
||||
displayedMenu = "";
|
||||
}
|
||||
else {
|
||||
showMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
|
||||
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
|
||||
displayedMenu = button.id.split("-")[0]
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(button) {
|
||||
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
|
||||
if (button.id.indexOf("menu") !== -1 ) {
|
||||
toggleMenu(button)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHamburger() {
|
||||
if (hamburgerShown) {
|
||||
hideHamburger();
|
||||
hamburgerShown = false;
|
||||
}
|
||||
else {
|
||||
showHamburger();
|
||||
hamburgerShown = true;
|
||||
}
|
||||
}
|
||||
|
||||
function showMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace(" hidden" , "");
|
||||
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
|
||||
}
|
||||
|
||||
function hideMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
|
||||
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
|
||||
}
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById('header-container').className = "overflow-hidden";
|
||||
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
}
|
||||
|
||||
function hideHamburger() {
|
||||
document.getElementById('header-container').className = "";
|
||||
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
|
||||
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
if (displayedMenu !== "") { hideMenu(displayedMenu); }
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
let elements = document.getElementsByTagName("button");
|
||||
let buttons = [...elements]
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener( 'click', function() { handleClick(button) });
|
||||
})
|
||||
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
|
||||
}
|
||||
</script>
|
||||
<!-- set variables used for header template -->
|
||||
{% set section = get_section(path="_index.md") %}
|
||||
{% set subsections_str = section.subsections | join(sep=" ") %}
|
||||
{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
|
||||
|
||||
{% if "header/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="header/_index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="
|
||||
<li>
|
||||
") %}
|
||||
{% include "partials/header_custom.html" %}
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<div class="relative"></div>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-menu-btn" | slugify %}
|
||||
<div class="relative">
|
||||
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set submenu_id = subsection ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 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 class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
|
||||
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
|
||||
{{subsection | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
<!--
|
||||
Mobile menu, show/hide based on mobile menu state.
|
||||
|
||||
Entering: "duration-200 ease-out"
|
||||
From: "opacity-0 scale-95"
|
||||
To: "opacity-100 scale-100"
|
||||
Leaving: "duration-100 ease-in"
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
||||
<nav class="flex flex-col justify-around pb-12">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
|
||||
{% set menu_id = subsection ~ "-mobile-menu" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
{{ subsection | safe }}
|
||||
</div>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% if "footer/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
<div class="mx-8 mt-8">
|
||||
<div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-48 h-auto" src="{{logo_path}}" alt="Company name">
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
@@ -1,48 +0,0 @@
|
||||
{% set tfFaq = get_section(path="faq/_index.md") %}
|
||||
{% set farmFaq = get_section(path="farmfaq/_index.md") %}
|
||||
{% set tftFaq = get_section(path="tftfaq/_index.md") %}
|
||||
|
||||
{% if current_path == '/faq/' %}
|
||||
<h2 class="text-center mt-10 text-white">{{ tfFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tfFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold text-white">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/farmfaq/' %}
|
||||
<h2 class="text-center text-white mt-10">{{ farmFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in farmFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/tftfaq/' %}
|
||||
<h2 class="text-center text-white mt-10">{{ tftFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tftFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-200 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<style>
|
||||
a {
|
||||
color: #979797
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
|
||||
<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">When 3 Becomes 4</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
|
||||
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
|
||||
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
|
||||
For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">We believe actions are more important than words. <br><br>
|
||||
This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
|
||||
</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-width: 2px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem; /* Adjust the gap size as needed */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
|
||||
<p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
|
||||
<p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-white">Coming Soon on 12.12.24</p>
|
||||
<p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p>
|
||||
|
||||
</div>
|
||||
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript to control the blinking effect
|
||||
const items = document.querySelectorAll('.grid-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function blinkItem() {
|
||||
// Remove the 'blink' class from all items
|
||||
items.forEach(item => item.classList.remove('blink'));
|
||||
|
||||
// Add the 'blink' class to the current item
|
||||
items[currentIndex].classList.add('blink');
|
||||
|
||||
// Move to the next item in a clockwise manner
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
}
|
||||
|
||||
// Start the blinking effect
|
||||
setInterval(blinkItem, 1000); // Change every second
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS for the blinking effect */
|
||||
.blink {
|
||||
animation: blink-animation 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
|
||||
50% { background-color: rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<div class="h-screen flex flex-col justify-center items-center">
|
||||
<div class="">
|
||||
<img
|
||||
class="mx-auto"
|
||||
src="/images/mycel2.gif"
|
||||
alt="TF">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
<div class="bg-transparent pb-6 py-12 lg:py-24">
|
||||
<div class="mx-auto max-w-7xl px-2 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-2 lg:max-w-7xl lg:px-8">
|
||||
<br>
|
||||
<h2 class="text-center mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">What It Enables</h2>
|
||||
|
||||
<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-12 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Communicate securely
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Store effortlessly
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Securely share and store information with ease, with geo-aware capabilities that optimize data location and access. Scale seamlessly from personal use to billions of users.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Restore authenticity
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Determine which information can be trusted, bringing clarity and confidence back to the digital space.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl mt-8 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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Unlock limitless insights
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Streamline your interactions
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.</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 gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
Take control of your digital presence
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="mt-12 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>
|
||||
</div>
|
||||
|
||||
<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,83 +0,0 @@
|
||||
<div class="flex bg-transparent">
|
||||
<div class="max-w-2xl p-8 mx-auto text-center">
|
||||
<p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
We believe actions are more important than words. <br>
|
||||
This page is in black & white,
|
||||
to let YOU be the color of the future of the internet.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Web4
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Web4 opens the door for Machines & Humans to create together
|
||||
a new form of Intelligence with respect for the Planet & People.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Augmented Collective Intelligence
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
ThreeFold has been working on Web4 for more than 10 years,
|
||||
ready to go public <span class="font-semibold">12.12.2024</span>
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
An Internet created by Everyone for Everyone
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
The Internet is a Trillion USD business.
|
||||
We want to make sure this Internet is built and owned by all of us.
|
||||
</p>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Register for our online launch event 12-12-2024.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
When 3 Becomes 4
|
||||
</h2>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base 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">
|
||||
12.12.24
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* Fade-in animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Fade-in keyframe */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript to add 'visible' class after loading
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
fadeInElements.forEach((element, index) => {
|
||||
// Adding a delay for each fade-in effect (increasing delay with index)
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, index * 1000); // 1000ms delay between each element
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="bg-transparent py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
|
||||
<div class="mx-auto w-full max-w-3xl lg:mx-0">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
<div class="mt-8 flex gap-x-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,57 +0,0 @@
|
||||
<div class="overflow-hidden lg:py-24 py-12">
|
||||
<div class="relative mx-auto max-w-xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">Take Action Now</h2>
|
||||
<p class="text-left my-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
Discover the key products that bring us closer to our vision of the new internet, laying the foundation for a more open, autonomous, and interconnected digital future.</p>
|
||||
</div>
|
||||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||||
<!-- Image on the left and text on the right -->
|
||||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||||
<img class="blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Text on the left -->
|
||||
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
||||
<div class="gap-y-4">
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of storage and infrastructure, providing compute and data resources. Order today.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphone that comes with built-indecentralized apps that seamlessly integrate with the ThreeFold Grid.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption. Unlocked after 10,000 pre-orders.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 mt-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow, <br>Today
|
||||
</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="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Dive Deeper
|
||||
</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
<head />
|
||||
<body>
|
||||
<div class="lg:mt-20 border-t border-gray-700"></div>
|
||||
<footer class="bg-transparent">
|
||||
<footer>
|
||||
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
|
||||
<div class="xl:flex xl:gap-4">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<div class="lg:w-1/2 space-y-8 lg:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
|
||||
<p class="text-gray-200 text-base font-light leading-6">
|
||||
{{section.description}}
|
||||
@@ -30,6 +30,26 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.footer-cust h5 {
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.footer-cust h6 {
|
||||
margin-bottom: 8px;
|
||||
|
||||
}
|
||||
|
||||
.footer-cust a {
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -38,6 +38,8 @@
|
||||
{%endif%}
|
||||
<meta name="twitter:card" content="summary">
|
||||
{% endblock title %}
|
||||
<!-- CSS/SCSS -->
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css">
|
||||
<!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
|
||||
@@ -97,8 +99,6 @@
|
||||
<!-- Windows 8, IE 10 -->
|
||||
<!-- Windows 8.1 and up, IE 11 -->
|
||||
<!-- **** CONCLUSION, favicons **** -->
|
||||
<!-- CSS/SCSS -->
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
|
||||
<style>
|
||||
.space-x-10>:not([hidden])~:not([hidden]){
|
||||
margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
|
||||
|
||||
@@ -11,13 +11,13 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
@@ -35,11 +35,11 @@
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% elif current_url and current == current_url %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light active text-pretty tracking-wide transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
@@ -52,9 +52,9 @@
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
<div class="-rotate-90 bg-dark-gradient transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="hidden md:inline-block md:order-last">
|
||||
<div class="inline-flex items-center">
|
||||
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
|
||||
@@ -156,7 +156,7 @@
|
||||
-->
|
||||
<div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div style="background-color: rgba(34 34 34);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
|
||||
<div style="background-color: rgba(34 34 34);" class="mt-4 shadow-xs h-screen divide-y-2 divide-gray-50">
|
||||
<div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
||||
|
||||
<nav class="flex flex-col justify-around pb-12">
|
||||
@@ -169,11 +169,11 @@
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-50 hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
<header id="header-container" class="bg-inherit">
|
||||
<div class="z-10 bg-dark1 w-screen">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img src="images/tf_dark.png" alt="ODFZ Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% if '<a' in header_label %}
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% elif current_url and current == current_url %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for header_item in header_items %}
|
||||
{% set header_parts = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_parts[0] %}
|
||||
{% set header_menu = header_parts[1] %}
|
||||
{% set menu_id = header_label ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-gray-800 lg:bg-gray-900">
|
||||
<div class="mx-8 lg:mx-20 px-6 py-4 text-white">
|
||||
{{ header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.bg-dark1 {
|
||||
background: rgba(15,15,15,1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="bg-transparent py-24 mb-12 flex justify-center items-center">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-6">
|
||||
<img
|
||||
class="object-contain w-full lg:w-[100%] max-w-[100%]"
|
||||
src="images/gif2.gif"
|
||||
alt="TF">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<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>
|
||||
|
||||
@@ -1,290 +0,0 @@
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
<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,84 +0,0 @@
|
||||
<div class="bg-transparent lg:pb-24 pb-12">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">ThreeFold is a Decentralized Infrastructure Layer for The Internet
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">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.</p>
|
||||
<a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<h3 class="mb-6 lg:mb-8 lg:text-2xl text-xl leading-tight font-normal tracking-tight text-white">Three Inventions at the Core of Our System
|
||||
</h3>
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">COMPUTE</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">Bare Metal <br>Operating System</dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">DATA</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">Unbreakable Data</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">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="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">NETWORK</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">Unbreakable Network</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@@ -1,137 +0,0 @@
|
||||
<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 ">Powered by
|
||||
<br>A Global Community</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, our proof-of-concept network is live and operational worldwide, running on version 3.16 technology.</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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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>
|
||||
</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">As we expand, we may need millions of nodes to support this growing ecosystem to build a truly decentralized and resilient infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-center gap-x-6">
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>
|
||||
</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>
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
background-color: rgb(26 26 26 / 90%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/* right: -60px; */
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tooltip .tooltiptext {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px !important;
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
|
||||
<div class="relative flex justify-center items-center isolate overflow-hidden bg-transparent h-screen">
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
|
||||
<!-- logo option
|
||||
|
||||
<div class="flex justify-center mb-16 fade-in">
|
||||
<img src="/images/white_threefold.png" alt="ThreeFold Logo" class="h-32">
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight leading-tight text-white lg:text-6xl text-3xl fade-in">
|
||||
Built for Everyone by Everyone, Everywhere</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 fade-in">ThreeFold is
|
||||
a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.</p>
|
||||
{# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #}
|
||||
<br>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center gap-x-8">
|
||||
<a href="/what"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What
|
||||
We've Built</a>
|
||||
<a href="/why" class="fade-in text-base font-semibold text-white hover:text-green ">Why We Do It<span
|
||||
aria-hidden="true">→</span></a>
|
||||
<a href="https://paragraph.com/@ev3news/threefold-rearchitecting-the-internet" class="fade-in text-base font-semibold text-white hover:text-green ">Read EV3's Report<span
|
||||
aria-hidden="true">→</span></a>
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<div class="overflow-hidden bg-transparent py-24 lg:py-16">
|
||||
<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
|
||||
<div class="sm:px-6 lg:px-0">
|
||||
<div class="relative isolate overflow-hidden bg-transparent px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
|
||||
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
|
||||
<img src="images/web4.png" alt="Web4 Preview" class="w-full max-w-none fade-in blinking-effect">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 lg:px-0 lg:pl-4 lg:pt-4">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
|
||||
<p class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock Web4 with ThreeFold</p>
|
||||
<p class="mt-6 mx-automax-w-3xl text-pretty lg:text-2xl text-xl font-normal text-gray-200 fade-in">Revolutionary Tools for the Decentralized Internet.</p>
|
||||
<div class="mt-6 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted Web4 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
|
||||
</div>
|
||||
<div class="mt-10 flex items-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">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
<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>
|
||||
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<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>
|
||||
@@ -1,76 +0,0 @@
|
||||
<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>
|
||||
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
<div class="lg:py-24 py-12">
|
||||
<div class=" mb-10 lg:max-w-7xl mx-auto px-4 lg:px-8 text-center">
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl visible">Founders & Key Voices</h2>
|
||||
</div>
|
||||
|
||||
<section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
|
||||
<div class="flex flex-col lg:flex-row items-center">
|
||||
<!-- Left Content -->
|
||||
<div class="w-full w-full lg:w-1/2 flex justify-center">
|
||||
<img src="/images/people/kristof_de_spiegeleer.jpeg" alt="AIBox Specifications"
|
||||
class="w-full lg:w-2/3 rounded-lg grayscale">
|
||||
</div>
|
||||
|
||||
<!-- Right Content -->
|
||||
<div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
|
||||
<div class="flex items-center gap-3 fade-in">
|
||||
<h2 class="text-balance font-bold tracking-tight text-white text-xl lg:text-4xl">
|
||||
KRISTOF DE SPIEGELEER
|
||||
</h2>
|
||||
<a href="https://www.linkedin.com/in/despiegk/" target="_blank"
|
||||
class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
|
||||
<svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mx-auto text-pretty text-lg lg:text-2xl font-medium text-gray-200 fade-in">Co-Founder & CEO</p>
|
||||
<p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
|
||||
is a serial entrepreneur with 30+ years of experience in Internet infrastructure and cloud technology, holding multiple patents and world records in storage and automation solutions used by industry giants like Oracle, Verizon, and Western Digital. He has founded over ten companies, with seven successful exits totaling over $600M. A pioneer in building the Internet and data center business in Europe, Kristof is now focused on creating a decentralized, sovereign Internet through ThreeFold. Guided by a belief that doing good for the world and delivering investor returns can coexist, he champions respect, transparency, and innovation in every venture. Kristof has previously spoken at Davos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
|
||||
<div class="flex flex-col lg:flex-row items-center ">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="w-full lg:w-1/2 flex justify-center">
|
||||
<img src="/images/people/florian_fournier.jpeg" alt="AIBox Specifications" class="w-full lg:w-2/3 rounded-lg grayscale">
|
||||
</div>
|
||||
|
||||
<!-- Right Image -->
|
||||
<div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
|
||||
<div class="flex items-center gap-3 fade-in">
|
||||
<h2 class="text-balance font-bold tracking-tight text-white text-2xl lg:text-4xl">
|
||||
FLORIAN FOURNIER
|
||||
</h2>
|
||||
<a href="https://www.linkedin.com/in/florianfournier/" target="_blank"
|
||||
class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
|
||||
<svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mx-auto text-pretty text-2xl font-medium text-gray-200 fade-in">Co-Founder & CMO</p>
|
||||
<p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
|
||||
Florian Fournier is a serial entrepreneur and ex marketing director at Apple. He's a co-founder at ThreeFold primarily focused on marketing and business development.<br><br>
|
||||
Florian aims to help in bringing new ways of living together, relating, moving, consuming, taking care of each other and working in a more sustainable way, through unpacking current scenarios and anticipating future perspectives. He has previously spoken at Davos and at Balaji Srinivasan’s event Network State, to great acclaim.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
<section class="flex items-center justify-center isolate overflow-hidden h-auto lg:h-screen">
|
||||
<div class="mt-10 lg:mt-1 max-w-7xl mx-auto px-6 lg:px-16 flex flex-col-reverse lg:flex-row items-center ">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="w-full lg:w-1/2 lg:text-left">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Company Profile</h2>
|
||||
<p class="mx-auto mt-6 text-pretty text-lg font-medium text-gray-200 fade-in">ThreeFold is a pioneering decentralized Internet project designed to create a more open, secure, and sustainable digital infrastructure. By leveraging a global peer-to-peer network of independent nodes, ThreeFold eliminates reliance on centralized cloud providers, ensuring greater privacy, resilience, and accessibility. This innovative model empowers individuals and organizations to contribute computing, storage, and networking resources to the ThreeFold Grid, forming the foundation for a truly autonomous and resilient
|
||||
<br><br>We are currently running V3.16, a large-scale proof of concept network and are now preparing for Version 4, a major upgrade to enable our Web4 vision. The ThreeFold Grid is in more than 50 countries with +2000 nodes online providing data, network and cloud resources to users.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Image -->
|
||||
<div class="w-full lg:w-1/2 flex justify-center">
|
||||
<img src="/images/media_kit.png" alt="AIBox Specifications" class="blinking-effect w-full max-w-md lg:max-w-lg h-auto">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
<section class="text-white py-12 sm:py-16 lg:pb-20">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-10 fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Social Media & Community</h2>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale text-white">
|
||||
<a target="_blank" href="https://forum.threefold.io/"><img src="/images/discourse_dark.png" class="mx-auto" width="60px" alt="Image"></p>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Forum</h6>
|
||||
<p class="text-base text-white leading-snug">Ask Questions</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://github.com/threefoldfoundation"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">GitHub | Tech</h6>
|
||||
<p class="text-base text-white leading-snug">Open-Source Collaboration for Tech Development</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://github.com/threefoldtech"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">GitHub | Foundation</h6>
|
||||
<p class="text-base text-white leading-snug">Open-source Collaboration for Websites and Online Info</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://x.com/threefold_io"><img src="/images/twitter.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">X | Twitter</h6>
|
||||
<p class="text-base text-white leading-snug">Connect With Us</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale text-white">
|
||||
<a target="_blank" href="https://t.me/threefoldnews"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></p>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Telegram News</h6>
|
||||
<p class="text-base text-white leading-snug">Stay Updated</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://t.me/threefold"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Telegram Main Chat</h6>
|
||||
<p class="text-base text-white leading-snug">Community Conversation</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://t.me/threefoldfarmers"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Telegram Farmers Chat</h6>
|
||||
<p class="text-base text-white leading-snug">Farming Community</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://t.me/threefoldtesting"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Telegram Grid User Chat</h6>
|
||||
<p class="text-base text-white leading-snug">Grid User Community</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale text-white">
|
||||
<a target="_blank" href="https://www.reddit.com/r/threefold/"><img src="/images/reddit_dark.png" class="mx-auto" width="60px" alt="Image"></p>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">Reddit</h6>
|
||||
<p class="text-base text-white leading-snug">Join In</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://www.youtube.com/@ThreeFoldFoundation"><img src="/images/youtube.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">YouTube</h6>
|
||||
<p class="text-base text-white leading-snug">Watch Things Unfold</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"><img src="/images/mail_dark.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">E-mail Newsletter</h6>
|
||||
<p class="text-base text-white leading-snug">Updates in Your Inbox</p>
|
||||
</div>
|
||||
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
|
||||
<div class="myscale">
|
||||
<a target="_blank" href="https://www.linkedin.com/company/threefold-io/"><img src="/images/linkedin_dark.png" class="mx-auto" width="60px" alt="Image"></a>
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">LinkedIn</h6>
|
||||
<p class="text-base text-white leading-snug">Let's Network</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -46,7 +46,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col text-left leading-none uppercase">
|
||||
{% if author %}
|
||||
<p class="text-gray-400 text-xs">{{ author.title }}</p>
|
||||
<p class="text-gray-400 text-xs mb-0">{{ author.title }}</p>
|
||||
{% endif %}
|
||||
<p class="text-gray-400 text-xs">
|
||||
<time datetime="{{post.date}}">
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<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="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
|
||||
</p>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="https://docs.threefold.io/docs/introduction" 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">Dive Deeper - Read our docs</a>
|
||||
f
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,310 +0,0 @@
|
||||
|
||||
<div class="bg-transparent py-24">
|
||||
<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">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
|
||||
At Threefold, we've created solutions that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section id="testimonies" class="py-20 bg-slate-900">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
|
||||
|
||||
<div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
|
||||
<div class="mb-12 space-y-5 md:mb-16 md:text-center">
|
||||
<div
|
||||
class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
|
||||
Words from Others
|
||||
</div>
|
||||
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
|
||||
It's not just us.
|
||||
</h1>
|
||||
<p class="text-xl text-gray-100 md:text-center md:text-2xl">
|
||||
Here's what others have to say about us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
|
||||
|
||||
<ul class="space-y-8">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 sm:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 lg:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,150 +0,0 @@
|
||||
<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-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">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
|
||||
At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="pb-32 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 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-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
ZERO-OS V3
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
MYCELIUM NETWORK
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
QUANTUM SAFE STORAGE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 2ND ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
TF CHAIN
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
3NODES
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
GATEWAY NODES
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 3RD ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
TF DASHBOARD
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
TF DAO
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A community-driven governance model that allows token holders to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
TF CONNECT APP
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</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,82 +0,0 @@
|
||||
<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="max-w-3xl px-0 lg:px-16 pb-12">
|
||||
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</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">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
|
||||
<a href="/action" class="border border-white px-6 py-2 rounded-xl fade-in text-2xl lg:text-3xl tracking-normal font-medium mt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Communicate securely</dt>
|
||||
<dd class="mt-1 font-light text-gray-400 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Store effortlessly</dt>
|
||||
<dd class="mt-1 ont-light text-gray-400 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Restore authenticity</dt>
|
||||
<dd class="font-light text-gray-400 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Unlock limitless insights</dt>
|
||||
<dd class="font-light text-gray-400 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Streamline your interactions</dt>
|
||||
<dd class="font-light text-gray-400 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Take control of your digital presence</dt>
|
||||
<dd class="font-light text-gray-400 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<div class="bg-transparent pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl items-center justify-center">
|
||||
<p class="fade-in text-balance text-center items-center text-4xl font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-center items-center text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions. <br><br>On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 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-16 lg:max-w-none lg:grid-cols-3">
|
||||
<!--1-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Communicate securely
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto text-center text-base text-white">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--2-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Share and store effortlessly
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto text-base text-white">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Restore authenticity
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Unlock limitless insights
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Streamline your interactions
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Take control of your digital presence
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
<div class="relative flex flex-col justify-center isolate overflow-hidden bg-transparent py-24">
|
||||
<div class="px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="pt-12text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Decentralized Internet Infrastructure</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 font-lightfade-in">Our unique
|
||||
technology enables anyone to become a provider<br> of network, storage and compute capacity.</p>
|
||||
<div class="mx-auto max-w-7xl px-4 py-8">
|
||||
<img src="/images/become_farmer.png" alt="Become a Farmer" class="w-full fade-in">
|
||||
</div>
|
||||
<div class=" flex items-center justify-center mt-6 ">
|
||||
<a href="https://docs.threefold.io" target="_blank"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-md font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Dive
|
||||
Deeper</a>
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
@@ -1,151 +0,0 @@
|
||||
<div class="bg-transparent py-12 lg:py-24">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pt-12 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 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-base/7 rounded-2xl font-semibold text-white">
|
||||
ZERO-OS V3
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
MYCELIUM NETWORK
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
QUANTUM SAFE STORAGE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 2ND ROW-->
|
||||
<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">
|
||||
TF CHAIN
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
3NODES
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
GATEWAY NODES
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 3RD ROW-->
|
||||
<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">
|
||||
TF DASHBOARD
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
TF DAO
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A community-driven governance model that allows token holders to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</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-base/7 rounded-2xl font-semibold text-white">
|
||||
TF CONNECT APP
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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,83 +0,0 @@
|
||||
<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="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
|
||||
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
|
||||
<a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Communicate securely</dt>
|
||||
<dd class="mt-1 font-light text-gray-300 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Store effortlessly</dt>
|
||||
<dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Restore authenticity</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Unlock limitless insights</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Streamline your interactions</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">Take control of your digital presence</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@@ -1,99 +0,0 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="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">What We Do</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-2xl text-lg font-light text-gray-200 fade-in">ThreeFold can
|
||||
be used by any Web2, Web3, AI, or Edge IT workload.
|
||||
</p>
|
||||
|
||||
<p class="my-6 mx-auto text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
We are currently running V3.16.0, a large-scale Proof-of-Concept Network, while simultaneously preparing for V4.0.0, our upcoming production-ready release. This will deliver a fully operational infrastructure built around three core pillars:
|
||||
</p>
|
||||
|
||||
<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 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-2">
|
||||
<dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none">
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Data
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in space-y-4">
|
||||
<li class="text-sm text-gray-200 mb-2">Private, scalable, and autonomous—designed for AI-native environments.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Distributed and decentralized, offering 10x efficiency and unprecedented security over existing cloud solutions.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">User-centric, unbreakable storage system ensuring redundancy & privacy.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Geo-aware for compliance & data localization.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Network
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-2">End-to-end encrypted, peer-to-peer communication—no intermediaries.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Shortest-path routing—intelligent traffic optimization for latency reduction and cost efficiency.</li>
|
||||
<li class="text-sm text-gray-200 mb-2">Self-sustaining and censorship-resistant network.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<!-- <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt=""> -->
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
Compute
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-3">Self-healing compute fabric—automatically redistributes workloads to healthy nodes. Fault tolerance is achieved via live migration of workloads, maintaining service availability. The Grid supports a peer-to-peer (P2P) AI compute and storage marketplace, allowing individuals and enterprises to monetize excess compute and GPU resources.</li>
|
||||
<li class="text-sm text-gray-200 mb-3">No reliance on hyperscalers—agents dynamically manage resources, ensuring uptime and resilience.</li>
|
||||
<li class="text-sm text-gray-200 mb-3">Optimized for AI & Web3—ideal for running autonomous applications, LLMs, and metaverse infrastructure. The Grid is designed to support AI inference and training at the edge.</li>
|
||||
<li class="text-sm text-gray-200 mb-3">ThreeFold Grid V3 uses ZOS (Zero-OS), a highly optimized, minimalistic OS designed specifically for stateless, immutable, and self-healing workloads. ZOS runs on bare metal and supports:
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm">MicroVMs & Containerized Workloads (Kubernetes, Docker, Firecracker).</li>
|
||||
<li class="text-sm">AI & Machine Learning Workloads (LLM inference, federated learning).</li>
|
||||
<li class="text-sm">Web3 & Blockchain Nodes.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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,72 +0,0 @@
|
||||
<div class="bg-transparent pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl items-center justify-center">
|
||||
<p class="fade-in text-balance text-center items-center text-4xl font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-center items-center text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions. <br><br>On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 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-16 lg:max-w-none lg:grid-cols-3">
|
||||
<!--1-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Communicate securely
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto text-center text-base text-white">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--2-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Share and store effortlessly
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto text-base text-white">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Restore authenticity
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Unlock limitless insights
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Streamline your interactions
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!--3-->
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
|
||||
Take control of your digital presence
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
|
||||
<p class="px-4 flex-auto items-center text-center text-base text-white">Own and manage your data, identity, and interactions across platforms, ensuring transparency and autonomy in the digital world.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<div class="px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">AI needs to be decentralized</h2>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
|
||||
<br>
|
||||
<br>
|
||||
Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
|
||||
<br>
|
||||
<br>
|
||||
We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 mt-12 lg:py-24 py-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">The Internet Needs an Upgrade</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The Internet brings the world together, yet much of it is now concentrated in the hands of a few powerful corporations. This wasn't its original intent. <br>The Internet was envisioned as a decentralized, open space.<br>A tool for freedom, collaboration, and equal access for all.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br>
|
||||
as an engine for the new Internet.</p>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
|
||||
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<div class="bg-transparent fade-in">
|
||||
<div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Real-World Impact</h2>
|
||||
<p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 space-y-16">
|
||||
<div class="bg-transparent py-10">
|
||||
<div class="mx-auto max-w-7xl lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
|
||||
<!-- Text Section -->
|
||||
<div class="lg:col-span-5 align-middle pr-4 mb-4">
|
||||
<h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
|
||||
<p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
|
||||
ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then.
|
||||
Updates expected Q4 2024.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Image Section -->
|
||||
<div class="lg:col-span-7">
|
||||
<img
|
||||
src="/images/freezone.png"
|
||||
alt=""
|
||||
class=" w-full rounded-lg bg-gray-100 object-fit">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4">
|
||||
<h3 class="text-2xl font-medium text-white">Tanzanian Sovereign Internet</h3>
|
||||
<p class="mt-2 text-base font-light text-gray-200 pr-4">
|
||||
|
||||
In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
|
||||
</div>
|
||||
<div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
|
||||
<img src="/images/tanzania.png" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-white 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">
|
||||
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.
|
||||
<br><br>
|
||||
Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4. As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<br>
|
||||
<div class="mt-6 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-xl font-semibold tracking-tight text-white lg:text-2xl blinking-effect">Take Actions</a>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-width: 2px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem; /* Adjust the gap size as needed */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<div class="bg-transparent pb-24 pt-12">
|
||||
<div class="flex items-center justify-center bg-transparent">
|
||||
<div class="text-center">
|
||||
<p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
||||
Planet First. People First.
|
||||
</p>
|
||||
</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 5s 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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
|
||||
<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">
|
||||
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.
|
||||
<br><br>
|
||||
Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4.
|
||||
As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
|
||||
<br><br>
|
||||
<span class="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. </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>
|
||||
</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>
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-white lg:pb-24 pb-12">
|
||||
<div class="mx-auto max-w-7xl px-4 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-3xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
|
||||
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: data centers are extremely expensive to build and maintain, privacy and security are compromised, misinformation is rampant, and half the world remains poorly connected.
|
||||
<br><br>
|
||||
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally.
|
||||
<br><br>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
Planet First. People First.
|
||||
</p>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
<div class="bg-transparent relative isolate 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-4xl text-center">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
|
||||
<p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working in Internet technology since its early days when it operated as a decentralized, peer-to-peer network. ThreeFold is an open-source movement driven by a dedicated team and a vibrant community of contributors helping to bring our shared vision to life.
|
||||
<br>The project is supported by over 50 full-time active developers.</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<div class="bg-transparent lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
Simplicity.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript to handle Intersection Observer
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const elementsToObserve = document.querySelectorAll("[data-observer]");
|
||||
const observerOptions = {
|
||||
root: null, // Observes relative to the viewport
|
||||
threshold: 0.1, // Trigger when 10% of the element is visible
|
||||
};
|
||||
|
||||
const observerCallback = (entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("opacity-100"); // Make element fully visible
|
||||
observer.unobserve(entry.target); // Stop observing once it's visible
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(observerCallback, observerOptions);
|
||||
elementsToObserve.forEach((el) => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden lg:py-24 py-12">
|
||||
<div class="px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize">The Vision for a New Internet</h2>
|
||||
<div class="max-w-3xl">
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">Unlike traditional internet infrastructure, which relies on centralized data centers and corporate control, ThreeFold is built on a global mesh of independent cloud providers—individuals and organizations who contribute data, cloud and network power directly to the ecosytem.</p>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">This makes ThreeFold uniquely decentralized at the physical layer, eliminating single points of failure and gatekeepers. It’s a truly neutral and scalable foundation that puts privacy, resilience, and digital sovereignty at the core of the internet.</p>
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-white 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">
|
||||
<p class="text-base/7 font-semibold text-indigo-400">Deploy faster</p>
|
||||
<h1 class="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">A better workflow</h1>
|
||||
<p class="mt-6 text-xl/8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
45
templates/shortcodes/accordion.html
Normal file
45
templates/shortcodes/accordion.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{% set question = question | default(value="") %}
|
||||
{% set id_accordion = id_accordion | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
|
||||
<div class="rounded-lg overflow-hidden my-2 border border-gray-500">
|
||||
<input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
|
||||
<label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
|
||||
<span class="text-lg font-medium text-white">{{ question }}</span>
|
||||
<svg class="w-6 h-6 text-white transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</label>
|
||||
<div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
|
||||
<div class="p-4">
|
||||
{% if description %}
|
||||
<p class="text-lg">{{ description }} </p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.accordion:hover {
|
||||
background-color: rgb(255 255 255 / 5%) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="lg:py-24 py-12">
|
||||
<div class=" mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto text-center 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">Our Brand Assets</h2>
|
||||
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
<h2 class="mx-auto fade-in">Our Brand Assets</h2>
|
||||
<p class="my-6 mx-auto max-w-3xl fade-in">
|
||||
Download our official brand assets and read guidelines for proper usage
|
||||
</p>
|
||||
</div>
|
||||
@@ -11,11 +11,11 @@
|
||||
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Logos</h2>
|
||||
<h2 class="mx-auto fade-in">Logos</h2>
|
||||
|
||||
<!-- Black Versions -->
|
||||
<div>
|
||||
<h3 class="mt-6 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">White Versions</h3>
|
||||
<h3 class="fade-in mt-6 mb-2 lg:mb-0">White Versions</h3>
|
||||
<dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- icon -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-4">
|
||||
@@ -83,7 +83,7 @@
|
||||
<!-- Black Versions -->
|
||||
|
||||
<div>
|
||||
<h3 class="mt-12 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">Black Versions</h3>
|
||||
<h3 class="fade-in mt-12 mb-2 lg:mb-0">Black Versions</h3>
|
||||
<dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- icon -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-white p-4">
|
||||
@@ -164,7 +164,7 @@
|
||||
<!-- Color -->
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Colors</h2>
|
||||
<h2 class="mx-auto fade-in">Colors</h2>
|
||||
|
||||
|
||||
<div>
|
||||
@@ -196,13 +196,13 @@
|
||||
<!-- Typography -->
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Typography</h2>
|
||||
<h2 class="mx-auto fade-in">Typography</h2>
|
||||
|
||||
|
||||
|
||||
<!-- Regular -->
|
||||
<div class="my-8">
|
||||
<p class="text-white text-lg font-normal">Inter Regular White</p>
|
||||
<p class="text-lg font-normal">Inter Regular White</p>
|
||||
<p class="text-gray-200">AaBbCc</p>
|
||||
<div class="bg-white/5 p-4 rounded-lg mt-2">
|
||||
<p class="mt-2 text gray-200 text-2xl font-normal">ThreeFold is the Infrastructure Layer of Web4</p></div>
|
||||
@@ -210,7 +210,7 @@
|
||||
|
||||
<!-- Bold -->
|
||||
<div class="my-8">
|
||||
<p class="text-white text-lg font-bold">Inter Bold White</p>
|
||||
<p class="text-lg font-bold">Inter Bold White</p>
|
||||
<p class="text-gray-200">AaBbCc</p>
|
||||
<div class="bg-white/5 p-4 rounded-lg mt-2">
|
||||
<p class="mt-2 text gray-200 text-2xl font-bold">ThreeFold is the Infrastructure Layer of Web4</p>
|
||||
@@ -219,7 +219,7 @@
|
||||
|
||||
<!-- Italic -->
|
||||
<div class="my-8" style="font-style: italic">
|
||||
<p class="text-white text-lg font-light italic">Inter Italic White</p>
|
||||
<p class="text-lg font-light italic">Inter Italic White</p>
|
||||
<p class="text-gray-200">AaBbCc</p>
|
||||
<div class="bg-white/5 p-4 rounded-lg mt-2">
|
||||
<p class="mt-2 text gray-200 text-2xl font-light italic">ThreeFold is the Infrastructure Layer of Web4</p>
|
||||
@@ -236,9 +236,9 @@
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Guidelines</h2>
|
||||
<h2 class="mx-auto fade-in">Guidelines</h2>
|
||||
<div class="max-w-5xl">
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">When referring to ThreeFold in any written material, always use the correct capitalization: ThreeFold (with a capital "T" and "F").
|
||||
<p class="fade-in mt-6 text-gray-200">When referring to ThreeFold in any written material, always use the correct capitalization: ThreeFold (with a capital "T" and "F").
|
||||
<br>
|
||||
Correct: ThreeFold
|
||||
<br>
|
||||
@@ -1,57 +0,0 @@
|
||||
{% set base = config.base_url %}
|
||||
|
||||
<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10 lg:mt-4 pb-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<div class="arrow_up"></div>
|
||||
<a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Store</a>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
{% if 'www_threefold_io' in base %}
|
||||
{% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}
|
||||
|
||||
<img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
|
||||
{% else %}
|
||||
<img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="w-full mb-4 border-b border-gray-600">
|
||||
<a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
|
||||
class="text-5xl font-extrabold uppercase">Build</a>
|
||||
<div class="arrow_down"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.arrow_up,
|
||||
.arrow_down {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0 12.5px 30px 12.5px;
|
||||
border-color: transparent transparent #000000 transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.arrow_down {
|
||||
margin-left: 10px;
|
||||
|
||||
border-width: 35px 12.5px 0 12.5px;
|
||||
border-color: #000000 transparent transparent transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "Orbitron", sans-serif !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
color: gray;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.totalCru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<div class="lg:py-24 py-10 sm:pt-10">
|
||||
<div class="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:max-w-xl mx-auto text-center">
|
||||
<h2 class="
|
||||
|
||||
lg:text-6xl
|
||||
text-center
|
||||
capitalize
|
||||
my-2
|
||||
leading-none
|
||||
font-light
|
||||
|
||||
">
|
||||
A Global Edge <br><span class="font-medium"> Infrastructure</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 pb-12 sm:pb-16">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-1/2"></div>
|
||||
<div class="relative mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
<dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
" id="item-1">
|
||||
Nodes
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
" aria-describedby="item-1">
|
||||
{{ nodes }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-b border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l sm:border-r
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Capacity
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Cores
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ cores | num_format }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="
|
||||
flex flex-col
|
||||
border-t border-gray-400
|
||||
p-6
|
||||
text-center
|
||||
sm:border-0 sm:border-l
|
||||
">
|
||||
<dt class="
|
||||
order-2
|
||||
mt-2
|
||||
text-2xl
|
||||
leading-6
|
||||
font-medium
|
||||
text-gray-900
|
||||
uppercase
|
||||
">
|
||||
Countries
|
||||
</dt>
|
||||
<dd class="
|
||||
order-1
|
||||
text-5xl
|
||||
leading-none
|
||||
font-extrabold
|
||||
text-black
|
||||
mb-4
|
||||
">
|
||||
{{ countries }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block text-center mt-5">
|
||||
<a target="_blank" href="https://explorer.threefold.io/all" class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
text-gray-700
|
||||
hover:text-gray-500
|
||||
bo
|
||||
px-12
|
||||
py-1
|
||||
mr-5
|
||||
mb-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">Explore Capacity</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -1,16 +0,0 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20">
|
||||
<a href="/careers" class="section banner">
|
||||
<div class="center">
|
||||
<h2 class="h1">
|
||||
<strong>Join our Team</strong>
|
||||
</h2>
|
||||
</div>
|
||||
{% set background = "background-image: url(" ~ page.permalink ~ "tf_people.jpg)" %}
|
||||
|
||||
<div class="back" style="{{background}}"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
22
templates/shortcodes/cta.html
Normal file
22
templates/shortcodes/cta.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
|
||||
<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 items-start fade-in">
|
||||
{{ title_1 }} <br>{{ title_2 }}<br> {{ title_3 }}
|
||||
</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="{{ button_link_1 }}" 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 mb-4 lg:mb-0">
|
||||
{{ button_text_1 }}
|
||||
</a>
|
||||
<a href="{{ button_link_2 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_2 }}<span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
56
templates/shortcodes/description_blockquote.html
Normal file
56
templates/shortcodes/description_blockquote.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set description_3 = description_3 | default(value="") %}
|
||||
{% set description_4 = description_4 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<div class="lg:py-24 py-12 relative isolate overflow-hidden">
|
||||
<div class="mx-auto container lg:max-w-7xl px-4">
|
||||
<div>
|
||||
<h2 class="fade-in my-2">{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-6">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<p class="fade-in mt-2 text-lg lg:text-xl font-light">
|
||||
{{ description_1 }}
|
||||
<br><br>
|
||||
{{ description_2 }}
|
||||
<br><br>
|
||||
{{ description_3 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-6">
|
||||
<figure class=" mt-2 pl-8">
|
||||
<blockquote class=" fade-in px-6">
|
||||
<p class=" font-semibold">{{ description_4 }}
|
||||
|
||||
<p class="fade-in my-6 mx-auto text-xl font-semibold tracking-tight lg:text-2xl transition-opacity duration-1000" data-observer>
|
||||
Planet First. People First.
|
||||
</p>
|
||||
</blockquote>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #8d1212;
|
||||
}
|
||||
</style>
|
||||
60
templates/shortcodes/farm_steps.html
Normal file
60
templates/shortcodes/farm_steps.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set title = title | default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl mb-6 bg-white/5">
|
||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
||||
{{ title }}
|
||||
</dt>
|
||||
<dt class="text-lg font-normal text-white">{{ subtitle }}<dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
|
||||
<div class="flex mt-6 justify-center fade-in">
|
||||
{% if button_link_1 %}
|
||||
<a href="{{ button_link_1 }}" class="mr-2 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">{{ button_text_1 }}</a>
|
||||
{% endif %}
|
||||
{% if button_link_1 %}
|
||||
<a href="{{ button_link_2 }}" 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">{{ button_text_2 }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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,70 +0,0 @@
|
||||
<div class="relative px-4 sm:px-6 py-12 lg:py-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h2 class="
|
||||
lg:text-6xl
|
||||
leading-tight
|
||||
font-normal font-heading
|
||||
|
||||
sm:leading-10
|
||||
lg:pb-10
|
||||
">
|
||||
Dive Deeper
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/planet_first_people_first.png" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="blog/planet-first-people-first" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
Planet first. People first.
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">Together with our community and partners, we're taking action and making productive choices for our planet and humanity.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/internet_of_internets.png" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="/blog/internet-of-internets/" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
Welcome to the Internet of Internets
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">Together, we’re building our own future through the Internet of Internets – decentralized, open, inclusive, regenerative, and resilient.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="images/tft_vedio.jpg" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="https://www.youtube.com/watch?v=5DtVU66Z74s" target="_blank" class="block">
|
||||
<h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
|
||||
ThreeFold Explained in 2 Minutes
|
||||
</h3>
|
||||
<div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
|
||||
opportunities universal. Our technology ensures data ownership and a democratized
|
||||
Internet. Discover how.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
107
templates/shortcodes/features.html
Normal file
107
templates/shortcodes/features.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||
{% set header1 = header1 | default(value="") %}
|
||||
{% set description1_1 = description1_1 | default(value="") %}
|
||||
{% set description1_2 = description1_2 | default(value="") %}
|
||||
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||
{% set header2 = header2 | default(value="") %}
|
||||
{% set description2_1 = description2_1 | default(value="") %}
|
||||
{% set description2_2 = description2_2 | default(value="") %}
|
||||
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||
{% set header3 = header3 | default(value="") %}
|
||||
{% set description3_1 = description3_1 | default(value="") %}
|
||||
{% set description3_2 = description3_2 | default(value="") %}
|
||||
|
||||
|
||||
<div class="bg-transparent lg:pb-24 pb-12">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
|
||||
<a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<h3 class="mb-6 lg:mb-8 lg:text-2xl text-xl leading-tight font-normal tracking-tight text-white">{{ title_2 }}
|
||||
</h3>
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_1 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header1 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description1_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description1_2 }}</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_2 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header2 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description2_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description2_2 }}</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_3 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header3 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description3_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description3_2 }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
75
templates/shortcodes/founders.html
Normal file
75
templates/shortcodes/founders.html
Normal file
@@ -0,0 +1,75 @@
|
||||
{% set name = name | default(value="") %}
|
||||
{% set title = title | default(value="") %}
|
||||
{% set linkedin_link = linkedin_link | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
|
||||
|
||||
<section class="max-w-7xl px-4 mx-auto flex items-center justify-center isolate overflow-hidden py-8">
|
||||
<div class="flex flex-col lg:flex-row items-center">
|
||||
<!-- Left Content -->
|
||||
<div class="w-full lg:w-1/2 flex justify-center">
|
||||
<img src="{{ image_src }}" alt="{{ image_alt }}"
|
||||
class="fade-in w-full lg:w-2/3 rounded-lg grayscale">
|
||||
</div>
|
||||
|
||||
<!-- Right Content -->
|
||||
<div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
|
||||
<div class="flex items-center gap-3 fade-in">
|
||||
<h2 class="text-balance font-bold tracking-tight text-white text-xl lg:text-4xl">
|
||||
{{ name }}
|
||||
</h2>
|
||||
<a href="{{ linkedin_link }}" target="_blank"
|
||||
class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
|
||||
<svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mx-auto text-pretty text-lg lg:text-2xl font-medium text-gray-200 fade-in">{{ title }}</p>
|
||||
<p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
|
||||
{{ description_1 }}
|
||||
<br>
|
||||
{{ description_2 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<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 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>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<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 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>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<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 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>
|
||||
</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> #}
|
||||
{% 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">{{ title_1 }}
|
||||
<br>{{ title_2 }}</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl fade-in">{{ description_1 }}</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl 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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="max-w-4xl items-center mx-auto">
|
||||
<p class="items-center text-center justify-center mt-10 fade-in">{{ subtext }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
|
||||
.blue_b{
|
||||
</div>
|
||||
<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>
|
||||
|
||||
background-color:#2E83FF !important;
|
||||
color: #fff !important;
|
||||
|
||||
<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>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
.blue_b a{
|
||||
color: #fff !important;
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.blue_b:hover {
|
||||
background-color:#5596f5 !important;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
|
||||
/* 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>
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
{% set styles = "background-image: url('V3.png');" %}
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.totalCru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="relative lg:max-w-6xl mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
|
||||
<div class="my-10 grid lg:grid-cols-4 lg:gap-8">
|
||||
|
||||
|
||||
<!-- capacity -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Nodes -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ nodes }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- countries -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ countries }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- cores -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
|
||||
<button><a href="/host">Become a Host</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
|
||||
<div class="h-full">
|
||||
<div class="flex flex-col items-center md:flex-row">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="block">
|
||||
<img
|
||||
src="expand/togethericon.png" class="w-full h-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center w-full py-24 md:w-1/2">
|
||||
<div class="flex flex-col items-start justify-center p-6">
|
||||
<h1>Be the <strong>Internet</strong></h1>
|
||||
<h3 class="my-0">Host a node, support a decentralized future</h3>
|
||||
<p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
|
||||
<button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
60
templates/shortcodes/hero_side.html
Normal file
60
templates/shortcodes/hero_side.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<section class="flex items-center justify-center isolate overflow-hidden h-auto lg:h-screen">
|
||||
<div class="mt-10 lg:mt-1 max-w-7xl mx-auto px-6 lg:px-16 flex flex-col-reverse lg:flex-row items-center ">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="w-full lg:w-1/2 lg:text-left">
|
||||
<h1 class="fade-in">{{ title }}</h1>
|
||||
<p class="mx-auto mt-6 fade-in">{{ description_1 }}
|
||||
<br><br>{{ description_2 }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Image -->
|
||||
<div class="w-full lg:w-1/2 flex justify-center">
|
||||
<img src="{{ image_src }}" alt="{{ image_alt }}" class="blinking-effect w-full max-w-md lg:max-w-lg h-auto">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
73
templates/shortcodes/hero_text_center.html
Normal file
73
templates/shortcodes/hero_text_center.html
Normal file
@@ -0,0 +1,73 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button1_text = button1_text | default(value="") %}
|
||||
{% set button1_link = button1_link | default(value="") %}
|
||||
{% set target = target | default(value="") %}
|
||||
{% set button2_text = button2_text | default(value="") %}
|
||||
{% set button2_link = button2_link | default(value="") %}
|
||||
{% set button3_text = button3_text | default(value="") %}
|
||||
{% set button3_link = button3_link | default(value="") %}
|
||||
|
||||
<div class="relative flex justify-center items-center isolate overflow-hidden h-screen">
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
|
||||
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h1 class="fade-in">
|
||||
{{ title }}</h1>
|
||||
<p class="mx-auto mt-8 max-w-3xl fade-in">{{ description }}</p>
|
||||
<!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> -->
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 py-8">
|
||||
<img src="{{ image_src }}" alt="{{ image_alt }}" class="w-full fade-in">
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex lg:flex-row flex-col items-center justify-center gap-x-8 gap-y-8">
|
||||
{% if button1_link %}
|
||||
<a href="{{ button1_link }}" target="{{ target }}"
|
||||
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">{{ button1_text }}</a>
|
||||
{% endif %}
|
||||
{% if button3_link %}
|
||||
<a href="{{ button2_link }}" class="fade-in text-base font-semibold text-white hover:text-green mr-1 ">{{ button2_text }}<span class="ml-2"
|
||||
aria-hidden="true">→</span></a>
|
||||
{% endif %}
|
||||
{% if button3_link %}
|
||||
<a href="{{ button3_link }}" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">{{ button3_text }}<span class="ml-2" aria-hidden="true">→</span></a>
|
||||
{% endif %}
|
||||
</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 */
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,30 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="mx-auto max-w-4xl text-center px-2 pt-12 lg:px-8">
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set video_link = video_link | default(value="") %}
|
||||
{% set button1_text = button1_text | default(value="") %}
|
||||
{% set button1_link = button1_link | default(value="") %}
|
||||
|
||||
<div class="relative flex justify-center items-center isolate overflow-hidden lg:py-2 py-12 lg:h-screen">
|
||||
<div class="mx-auto max-w-7xl text-center px-2 pt-12 lg:px-8">
|
||||
<!-- Main Heading -->
|
||||
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white capitalize">
|
||||
Building a new Internet for Everyone
|
||||
</h2>
|
||||
<h1 class="fade-in">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty text-lg font-light text-gray-200 fade-in fade-in-delay">
|
||||
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all.
|
||||
<p class="mx-auto mt-8 max-w-3xl fade-in fade-in-delay">
|
||||
{{ description_1 }}
|
||||
<br>
|
||||
Let’s make this vision a reality.
|
||||
<span class=" text-white font-semibold">{{ description_2 }}</span>
|
||||
</p>
|
||||
|
||||
<!-- Embed YouTube Video -->
|
||||
<div class="py-10 flex justify-center mx-auto" style="max-width: 500px; height: auto;">
|
||||
<div class="py-4 flex justify-center mx-auto" style="max-width: 550px; height: auto;">
|
||||
<div class="responsive-iframe" >
|
||||
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
|
||||
<iframe src="{{ video_link }}" title="YouTube video player"
|
||||
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||||
</iframe>
|
||||
@@ -24,9 +33,9 @@
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="mt-2 fade-in flex items-center justify-center gap-x-6">
|
||||
<a href="/signup" target="_blank"
|
||||
<a href="{{ button1_link }}" target="_blank"
|
||||
class="rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
|
||||
Take Action
|
||||
{{ button1_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
104
templates/shortcodes/horizontal_features.html
Normal file
104
templates/shortcodes/horizontal_features.html
Normal file
@@ -0,0 +1,104 @@
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set point_1_1 = point_1_1 | default(value="") %}
|
||||
{% set point_1_2 = point_1_2 | default(value="") %}
|
||||
{% set point_1_3 = point_1_3 | default(value="") %}
|
||||
{% set point_1_3 = point_1_4 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set point_2_1 = point_2_1 | default(value="") %}
|
||||
{% set point_2_2 = point_2_2 | default(value="") %}
|
||||
{% set point_2_3 = point_2_3 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set point_3_1 = point_3_1 | default(value="") %}
|
||||
{% set point_3_2 = point_3_2 | default(value="") %}
|
||||
{% set point_3_3 = point_3_3 | default(value="") %}
|
||||
{% set point_3_4 = point_3_4 | default(value="") %}
|
||||
{% set point_3_5 = point_3_5 | default(value="") %}
|
||||
{% set point_3_6 = point_3_6 | default(value="") %}
|
||||
{% set point_3_7 = point_3_7 | default(value="") %}
|
||||
|
||||
|
||||
<section class="bg-transparent">
|
||||
<div class="max-w-6xl">
|
||||
<div class="mx-auto max-w-2xl mt-16 lg:max-w-none">
|
||||
<dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-2">
|
||||
<dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none">
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
{{ title_1}}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in space-y-4">
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_1_1 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_1_2 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_1_3 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_1_4 }}</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
{{ title_2 }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_2_1 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_2_2 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-2">{{ point_2_3 }}</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl bg-white/5">
|
||||
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
|
||||
{{ title_3 }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm text-gray-200 mb-3">{{ point_3_1 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-3">{{ point_3_2 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-3">{{ point_3_3 }}</li>
|
||||
<li class="text-sm text-gray-200 mb-3">{{ point_3_4 }}</li>
|
||||
|
||||
<ul class="text-white fade-in">
|
||||
<li class="text-sm">{{ point_3_5 }}</li>
|
||||
<li class="text-sm">{{ point_3_6 }}</li>
|
||||
<li class="text-sm">{{ point_3_7 }}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</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,59 +0,0 @@
|
||||
|
||||
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
|
||||
<div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
|
||||
<h1 class="font-semibold">The Vision</h1>
|
||||
<h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
|
||||
</div>
|
||||
<div class="w-full md:w-2/3">
|
||||
<div class="flex flex-wrap justify-center md:justify-end">
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
|
||||
</div>
|
||||
<div class="relative my-6 mx-2">
|
||||
<img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
|
||||
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.cardhover{
|
||||
background-color: rgba(224, 224, 224, 0);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cardhover:hover{
|
||||
background-color: rgba(224, 224, 224, 0.8);
|
||||
animation-duration: 200;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cardhover{
|
||||
background-color: rgba(224, 224, 224, 0.8);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
64
templates/shortcodes/img_features.html
Normal file
64
templates/shortcodes/img_features.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set title_4 = title_4 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set description_3 = description_3 | default(value="") %}
|
||||
{% set description_4 = description_4 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
{% set button_text_3 = button_text_3 | default(value="") %}
|
||||
{% set button_link_3 = button_link_3 | default(value="") %}
|
||||
{% set button_text_4 = button_text_4 | default(value="") %}
|
||||
{% set button_link_4 = button_link_4 | default(value="") %}
|
||||
|
||||
<div class="relative mt-10 mx-auto max-w-xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||||
<!-- Image on the left and text on the right -->
|
||||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||||
<img class="blinking-effect relative mx-auto" width="490" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
</div>
|
||||
|
||||
<!-- Text on the left -->
|
||||
<div class="relative lg:p-4"> <!-- Add padding here for all sides -->
|
||||
<div class="gap-y-4">
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg my-4"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_1 }}</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_1 }}</dd>
|
||||
<a href="{{ button_link_1 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_1 }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg my-4"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_2 }}</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_2 }}</dd>
|
||||
<a href="{{ button_link_2 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_2 }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg my-4"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">{{ title_4 }}</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_4 }}</dd>
|
||||
<a href="{{ button_link_4 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_4 }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,209 +0,0 @@
|
||||
<div class="container-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="
|
||||
mt-12
|
||||
space-y-4
|
||||
sm:mt-8
|
||||
sm:space-y-0
|
||||
sm:grid sm:grid-cols-2
|
||||
sm:gap-6
|
||||
lg:max-w-4xl
|
||||
lg:mx-auto
|
||||
xl:max-w-none
|
||||
xl:mx-0
|
||||
xl:grid-cols-3
|
||||
">
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
ThreeFold Grid Operations Lead
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
The ThreeFold Grid will eventually connect millions of nodes. You'll be in charge of finding
|
||||
the best ways to operate such a network.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
lg:px-12
|
||||
px-6
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/grid-operations-manager">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
ThreeFold Grid Developer Lead
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Take ownership of the ongoing development and documentation of the tech components that
|
||||
constitute the ThreeFold Grid.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
lg:px-12
|
||||
px-6
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/grid-development-manager">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Master Technical Architect
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Take the lead on the architectural design of the Digital Twin tech and ecosystem defining a
|
||||
new paradigm for the tech industry.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
lg:px-12
|
||||
px-6
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/master-architect-dt">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Quality Assurance Engineer
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
ThreeFold is developing infrastructures and products like never before. Join the testing
|
||||
team and ensure optimum tech releases.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
lg:px-12
|
||||
px-6
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/qa-engineer">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
border border-gray-200
|
||||
rounded-lg
|
||||
shadow-sm
|
||||
divide-y divide-gray-200
|
||||
">
|
||||
<div class="p-6">
|
||||
<h2 class="
|
||||
text-xl
|
||||
leading-8
|
||||
font-extrabold
|
||||
text-gray-900
|
||||
">
|
||||
Senior Developer
|
||||
</h2>
|
||||
<p class="mb-8 text-gray-600 leading-relaxed">
|
||||
Join the core developer team working on our operating system Zero-OS, Digital Twin,
|
||||
blockchain layers or other products we are building.
|
||||
</p>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-white
|
||||
text-lg
|
||||
learn-button
|
||||
lg:px-12
|
||||
px-6
|
||||
py-1
|
||||
mr-5
|
||||
my-4
|
||||
border-2
|
||||
shadow
|
||||
border-black
|
||||
">
|
||||
<a href="/careers/senior-developer">See Position</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6">
|
||||
<div class="">
|
||||
{# <p class="text-sm font-bold uppercase tracking-widest text-gray-200">How It Works</p> #}
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Key Milestones & Stats</h2>
|
||||
<h2 class="fade-in">Key Milestones & Stats</h2>
|
||||
{# <p class="mx-auto mt-4 max-w-2xl text-lg font-normal text-gray-200 lg:text-xl lg:leading-8">
|
||||
Create your own blog with us and launch it with just 4 easy steps
|
||||
</p> #}
|
||||
@@ -23,7 +23,7 @@
|
||||
class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
|
||||
Phase I
|
||||
</h3>
|
||||
<div class="p-6 rounded-2xl bg-white/5">
|
||||
<div class="p-6 rounded-2xl mt-4 bg-white/5">
|
||||
<ul class="pl-3 text-base text-gray-200">
|
||||
<li>Creation of Core Technology</li>
|
||||
<li>10+ years of development</li>
|
||||
@@ -48,7 +48,7 @@
|
||||
class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
|
||||
Phase II
|
||||
</h3>
|
||||
<div class="p-6 rounded-2xl bg-white/5">
|
||||
<div class="p-6 rounded-2xl mt-4 bg-white/5">
|
||||
<ul class="pl-3 text-base text-gray-200">
|
||||
<li>Global Proof Of Concept</li>
|
||||
<li>Open Source Development</li>
|
||||
@@ -60,7 +60,7 @@
|
||||
<li>Commitments from wonderful projects to build on top of us.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-6 mt-6 rounded-2xl bg-white/5">
|
||||
<div class="p-6 mt-4 rounded-2xl bg-white/5">
|
||||
<h3 class="text-lg font-medium my-2 text-gray-200 before:block before:font-mono before:text-sm ">Status System Component</h3>
|
||||
|
||||
<ul class="list-none pl-3 text-base text-gray-200">
|
||||
@@ -98,7 +98,7 @@
|
||||
class="text-xl font-bold text-white before:mb-2 before:block before:font-mono before:text-sm ">
|
||||
Current Phase - 2025
|
||||
</h3>
|
||||
<div class="p-4 rounded-2xl bg-white/5">
|
||||
<div class="p-6 rounded-2xl mt-4 bg-white/5">
|
||||
<h3 class="text-lg font-medium mb-1 text-gray-200 before:block before:font-mono before:text-sm ">Q1 & Q2:</h3>
|
||||
<ul class="pl-3 text-base text-gray-200">
|
||||
<li>Introduce 3Phone & 3Router.</li>
|
||||
49
templates/shortcodes/portfolio.html
Normal file
49
templates/shortcodes/portfolio.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
{{ title }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
|
||||
{% if button_link %}
|
||||
<p class="mt-6">
|
||||
<a href="{{ button_link }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">{{ button_text }} <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
60
templates/shortcodes/right_content.html
Normal file
60
templates/shortcodes/right_content.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set header = header | default(value="") %}
|
||||
{% set sub_header = sub_header | default(value="") %}
|
||||
{% set description1 = description1 | default(value="") %}
|
||||
{% set description2 = description2 | default(value="") %}
|
||||
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header }} </dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ sub_header }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description2 }}</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@@ -1,126 +0,0 @@
|
||||
<!-- Timeline section -->
|
||||
<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
|
||||
<div>
|
||||
<time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
|
||||
<svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
|
||||
<circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
|
||||
</svg>
|
||||
Phase 1
|
||||
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
|
||||
</time>
|
||||
<div class="road_border_green px-3">
|
||||
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">CREATION OF CORE TECH</p>
|
||||
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
|
||||
<li>
|
||||
+10 years of development
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Built decentralized, autonomous, edge internet technology
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
|
||||
<svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
|
||||
<circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
|
||||
</svg>
|
||||
Phase 2
|
||||
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
|
||||
</time>
|
||||
<div class="road_border_green px-3">
|
||||
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">TRACTION & EXPANSION</p>
|
||||
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
|
||||
<li>
|
||||
Open Source Development<br>
|
||||
60+ Countries<br>
|
||||
30,000+ Cores<br>
|
||||
30,000,000 GB of Storage
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Signed with Government of Zanzibar for a digital FreeZone and connected cyber city
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Multiple global partners want to be part of the global expansion
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 blue">
|
||||
<svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
|
||||
<circle class="blue" cx="2" cy="2" r="2" fill="currentColor" />
|
||||
</svg>
|
||||
Current | Phase 3
|
||||
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
|
||||
</time>
|
||||
<div class="road_border_blue px-3">
|
||||
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">THREEFOLD EXPANSION</p>
|
||||
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
|
||||
<li>
|
||||
Open Source Mode & Commercial Mode
|
||||
Version 3 & Version 4
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Service Levels & Supportability
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Launch Project Internet Capacity
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
Expansion towards 1 million nodes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
|
||||
<svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
|
||||
<circle class="text-gray-500" cx="2" cy="2" r="2" fill="currentColor" />
|
||||
</svg>
|
||||
Phase 4
|
||||
<div class=""></div>
|
||||
</time>
|
||||
<div class="road_border px-3">
|
||||
<p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">SOVEREIGNTY FOR ALL</p>
|
||||
<ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
|
||||
<li>
|
||||
+1 Million Nodes enabled
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
+100 Million people using our system platform.
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
A credible and widespread alternative to centralized clouds
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.road_border{
|
||||
|
||||
border-left: 1px solid rgb(156, 156, 156);
|
||||
}
|
||||
|
||||
.road_border_green{
|
||||
border-left: 1px solid #58CF77;
|
||||
}
|
||||
|
||||
.road_border_blue{
|
||||
border-left: 1px solid #2E83FF;
|
||||
}
|
||||
|
||||
</style>
|
||||
19
templates/shortcodes/social.html
Normal file
19
templates/shortcodes/social.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{% set link = link | default(value="") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set title = title | default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
|
||||
|
||||
<a class="my-6" target="_blank" href="{{ link }}">
|
||||
<div class="myscale">
|
||||
<img src="{{ image_src }}" class="mx-auto" width="60px" alt="{{ image_alt }}">
|
||||
</div>
|
||||
<h6 class="text-white mt-4 font-semibold">{{ title }}</h6>
|
||||
<p class="text-base text-white leading-snug">{{ subtitle }}</p>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="relative hidden flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<!-- Icon -->
|
||||
{# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-bold text-slate-900">Order Placed</div>
|
||||
<time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
|
||||
</div>
|
||||
<div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
|
||||
</div> #}
|
||||
</div>
|
||||
|
||||
<!-- Item #2 -->
|
||||
<div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<!-- Icon -->
|
||||
<div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
|
||||
{# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center space-x-2 mb-1">
|
||||
{# <div class="font-bold text-slate-900">Phase 1:</div> #}
|
||||
{# <div class="font-caveat font-semibold text-lg">OUR JOURNEY BEGAN</div> #}
|
||||
</div>
|
||||
<p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue">OUR JOURNEY BEGAN </span>with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #3 -->
|
||||
<div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<!-- Icon -->
|
||||
<div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
|
||||
{# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center space-x-2 mb-1">
|
||||
{# <div class="font-bold text-slate-900">Phase 2:</div> #}
|
||||
{# <time class="font-caveat font-semibold green_text">In response,</time> #}
|
||||
</div>
|
||||
<p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">In response, </span>we came together with a shared mission—to design a revolutionary decentralized, open-source, inclusive, and sustainable Cloud solution for all. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #4 -->
|
||||
<div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<!-- Icon -->
|
||||
<div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
|
||||
{# <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center space-x-2 mb-1">
|
||||
{# <div class="font-bold text-slate-900">Phase 3:</div> #}
|
||||
{# <div class="font-caveat font-semibold blue">Today</div> #}
|
||||
</div>
|
||||
<p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Today </span>
|
||||
as we embark on the commercialization phase, the ThreeFold Grid is in its third generation technology and live in ±60 countries, significant milestones in our ongoing commitment to redefine the future of the digital landscape.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #5 -->
|
||||
<div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<!-- Icon -->
|
||||
<div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
|
||||
{# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center space-x-2 mb-1">
|
||||
{# <div class="font-bold text-slate-900">Phase 2:</div> #}
|
||||
{# <time class="font-caveat font-semibold green_text">In response,</time> #}
|
||||
</div>
|
||||
<p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Project Internet Capacity</span> is the fourth generation of the ThreeFold Grid, the accumulation of years of work by ThreeFold. Project INCA aims to be a Layer 0 for the DePIN community and involves the launch of a new token, INCA, on the Solana blockchain. Learn more <a href="https://www.threefold.io/blog/introducing-project-inca/">here.</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #6 -->
|
||||
{# <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
|
||||
<!-- Icon -->
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="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>
|
||||
<!-- Card -->
|
||||
<div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-bold text-slate-900">Delivered</div>
|
||||
<time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
|
||||
</div>
|
||||
<div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
|
||||
</div>
|
||||
</div> #}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
|
||||
<div class="container mx-auto mb-0 md:mb-24 mt-0 md:mt-4">
|
||||
<div class="mb-4">
|
||||
<div class="grid grid-cols-3 gap-2 mx-2 px-0 lg:px-2 font-medium text-center text-gray-500 sm:flex" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600" data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600 data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" role="tablist">
|
||||
<div class="w-full md:w-1/3 mx-0 md:mx-2 list-none focus-within:z-10" role="presentation">
|
||||
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="profile-styled-tab" data-tabs-target="#styled-profile" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
|
||||
Quantum Safe Storage<br><span class="font-semibold">FUNGISTOR</span></button>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 mx-0 md:mx-2 list-none focus-within:z-10" role="presentation">
|
||||
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Autonomous Cloud<br><span class="font-semibold">ZERO-OS</span></button>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 md:mx-2 list-none focus-within:z-10" role="presentation">
|
||||
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Peer-to-Peer Network<br><span class="font-semibold">MYCELIUM</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="default-styled-tab-content">
|
||||
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
|
||||
|
||||
<div class="flex flex-wrap justify-center items-center">
|
||||
|
||||
<div class="w-full p-2 md:p-8">
|
||||
<h4 class="blue my-0 md:my-4 font-semibold">FungiStor: A Quantum Safe Storage System</h4>
|
||||
|
||||
|
||||
<p>The Quantum-Safe Storage System is a decentralized, globally distributed data storage system.</p>
|
||||
<br>
|
||||
<p>
|
||||
The benefits are incredible: Up to 10x more efficient (power and usage of hardware). Super reliable, data can not be lost or corrupted. Safe, private and scalable.</p>
|
||||
<br>
|
||||
<p>
|
||||
Sovereign, data is close to you in the country of your choice. Truly peer-to-peer, by everyone for everyone.</p>
|
||||
|
||||
<div class="flex flex-wrap items-center my-6">
|
||||
<p class="font-semibold">ULTRA RELIABLE AND SCALABLE </p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold"> HACKER PROOF AND SECURE</p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold">LOW OVERHEAD AND SELF-HEALING</p>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="w-full md:w-1/2">
|
||||
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_3node.png" alt="" />
|
||||
</div> #}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
|
||||
<div class="flex flex-wrap justify-center items-center">
|
||||
|
||||
<div class="w-full p-2 md:p-8">
|
||||
<h4 class="blue my-0 md:my-4 font-semibold">The Cloud Layer based on Zero-OS, a new Operating System</h4>
|
||||
|
||||
<p>Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more decentralized manner, without compromising on security, control, and monitoring.</p>
|
||||
<p></p>
|
||||
<br>
|
||||
<p>
|
||||
Zero-OS is compatible with nearly all computer hardware and is run directly on the hardware.</p>
|
||||
<br>
|
||||
<p>
|
||||
It enables anyone to become a cloud service provider without needing cloud expertise. <br>
|
||||
<br>The operating system functions fully autonomously, requiring no interventions.</p>
|
||||
|
||||
<div class="flex flex-wrap items-center my-6">
|
||||
<p class="font-semibold">SELF HEALING</p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold">AUTONOMOUS</p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold">DEVELOPED FROM THE LINUX KERNEL</p>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="w-full md:w-1/2">
|
||||
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_zero_os.png" alt="" />
|
||||
</div> #}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
|
||||
<div class="flex flex-wrap justify-center items-center">
|
||||
|
||||
<div class="w-full p-2 md:p-8">
|
||||
<h4 class="green_text my-0 md:my-4 font-semibold">Mycelium: A Quantum Safe Storage Network</h4>
|
||||
|
||||
|
||||
<p>Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.</p>
|
||||
<br>
|
||||
<p>Our goal was to create a network that can identify and utilize the fastest and most direct paths between participants, remain operational even in challenging conditions (such as fiber cuts), and secure all traffic.</p>
|
||||
<br>
|
||||
<p>
|
||||
With Mycelium, data travels the most efficient routes, leveraging any available internet connection, including peer-to-peer networks like mesh wireless.
|
||||
All traffic is end-to-end encrypted, effectively preventing man-in-the-middle attacks.
|
||||
Each machine or user is identified by a unique cryptographic key which is linked to your ThreeFold Internet Address, ensuring that only authorized participants can access the network.
|
||||
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center my-6">
|
||||
<p class="font-semibold uppercase">End-to-end encrypted</p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold uppercase"> shortest path route </p>
|
||||
<p class="mx-4 font-semibold"> | </p>
|
||||
<p class="font-semibold uppercase"> unbreakable </p>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="w-full md:w-1/2">
|
||||
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_qsfs.png" alt="" />
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
76
templates/shortcodes/text_center.html
Normal file
76
templates/shortcodes/text_center.html
Normal file
@@ -0,0 +1,76 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
|
||||
|
||||
<div class="text-center mx-auto lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-7xl lg:px-8">
|
||||
<h2 class="mx-auto max-w-3xl fade-in">{{ title }}</h2>
|
||||
{% if subtitle %}
|
||||
<h3 class="fade-in mt-2">{{ subtitle }}</h3>
|
||||
|
||||
{% endif %}
|
||||
<p class="my-4 mx-auto max-w-3xl fade-in">
|
||||
{{ description_1 }}
|
||||
</p>
|
||||
|
||||
<p class="my-2 mx-auto max-w-3xl fade-in">
|
||||
{{ description_2 }}
|
||||
</p>
|
||||
|
||||
{% if image_src %}
|
||||
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
|
||||
<img class="fade-in blinking-effect relative mx-auto" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="lg:mt-4 flex items-center justify-center gap-x-6">
|
||||
{% if button_link_1 %}
|
||||
<a href="{{ button_link_1 }}" class="fade-in rounded-2xl bg-white lg:my-6 my-4 px-4 py-2 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">{{ button_text_1 }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if button_link_2 %}
|
||||
<a href="{{ button_link_2 }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text_2 }} <span aria-hidden="true">→</span></a>
|
||||
{% endif %}
|
||||
</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>
|
||||
65
templates/shortcodes/text_left.html
Normal file
65
templates/shortcodes/text_left.html
Normal file
@@ -0,0 +1,65 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
|
||||
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
|
||||
<h2 class="fade-in">{{ title }}
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 mb-6 max-w-3xl fade-in">{{ description_1 }}</p>
|
||||
|
||||
<p class="mx-auto mt-6 mb-2 max-w-3xl fade-in">{{ description_2 }}</p>
|
||||
|
||||
{% if button_link %}
|
||||
|
||||
<a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking 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 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,31 @@
|
||||
<div class="lg:py-24 py-12">
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl">ThreeFold’s Journey</h2>
|
||||
<p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">Over the past decades, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security. With significant experience in Internet and Cloud and a strong vision for the future, these pivotal milestones have shaped our growth and drive us towards a better digital future.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||
{% set point_1_1 = point_1_1 | default(value="") %}
|
||||
{% set point_1_2 = point_1_2 | default(value="") %}
|
||||
{% set point_1_3 = point_1_3 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||
{% set point_2_1 = point_2_1 | default(value="") %}
|
||||
{% set point_2_2 = point_2_2 | default(value="") %}
|
||||
{% set point_2_3 = point_2_3 | default(value="") %}
|
||||
{% set point_2_4 = point_2_4 | default(value="") %}
|
||||
{% set point_2_5 = point_2_5 | default(value="") %}
|
||||
{% set point_2_6 = point_2_6 | default(value="") %}
|
||||
{% set point_2_7 = point_2_7 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||
{% set point_3_1 = point_3_1 | default(value="") %}
|
||||
{% set point_3_2 = point_3_2 | default(value="") %}
|
||||
{% set point_3_3 = point_3_3 | default(value="") %}
|
||||
{% set point_3_4 = point_3_4 | default(value="") %}
|
||||
{% set point_3_5 = point_3_5 | default(value="") %}
|
||||
{% set point_3_6 = point_3_6 | default(value="") %}
|
||||
{% set title_4 = title_4 | default(value="") %}
|
||||
{% set subtitle_4 = subtitle_4 | default(value="") %}
|
||||
{% set point_4_1 = point_4_1 | default(value="") %}
|
||||
{% set point_4_2 = point_4_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<div class="space-y-8 pt-12 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
|
||||
@@ -21,14 +38,14 @@
|
||||
</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="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium text-gray-200">Phase I</div>
|
||||
<div class="font-medium text-gray-200">{{ subtitle_1 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
|
||||
<div class="font-semibold text-lg text-gray-200 mb-2">{{ title_1 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>10+ years of development</li>
|
||||
<li>Built decentralized, autonomous, edge internet technology</li>
|
||||
<li>Self-funded and private investment from founders, community, and TF Tech investors</li>
|
||||
<li>{{ point_1_1 }}</li>
|
||||
<li>{{ point_1_2 }}</li>
|
||||
<li>{{ point_1_3 }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,18 +60,19 @@
|
||||
</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="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium text-white">Phase II</div>
|
||||
<div class="font-medium text-white">{{ subtitle_2 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">{{ title_2 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>Open Source Development.</li>
|
||||
<li>50+ Countries.</li>
|
||||
<li>50,000+ Cores.</li>
|
||||
<li>25,000,000 GB of Storage</li>
|
||||
<li>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.</li>
|
||||
<li>Decentralized reliable compute, network and storage layer for Web 2-3.</li>
|
||||
<li>Commitments from wonderful projects to build on top of us.</li>
|
||||
<li>{{ point_2_1 }}</li>
|
||||
<li>{{ point_2_2 }}</li>
|
||||
<li>{{ point_2_3 }}</li>
|
||||
<li>{{ point_2_4 }}</li>
|
||||
<li>{{ point_2_5 }}</li>
|
||||
<li>{{ point_2_6 }}</li>
|
||||
<li>{{ point_2_7 }}</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,21 +87,23 @@
|
||||
</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="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium text-white">Current Phase – 2025</div>
|
||||
<div class="font-medium text-white">{{ subtitle_3 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">Decentralized AI and Cloud</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">{{ title_3 }}</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
Q1 & Q2:
|
||||
<ul style="list-style: disc;">
|
||||
<li>Introduce 3Phone & 3Router.</li>
|
||||
<li>Introduce decentralized AI infrastructure and capabilities.</li>
|
||||
<li>Expand the network considerably.</li>
|
||||
<li>Build a network of commercial farmers for optimal performance and uptime.</li>
|
||||
<li>{{ point_3_1 }}</li>
|
||||
<li>{{ point_3_2 }}</li>
|
||||
<li>{{ point_3_3 }}</li>
|
||||
<li>{{ point_3_4 }}</li>
|
||||
|
||||
</ul>
|
||||
Next:
|
||||
<ul style="list-style: disc;">
|
||||
<li>Expand the network considerably.</li>
|
||||
<li>Build a network of commercial farmers for optimal performance and uptime.</li>
|
||||
<li>{{ point_3_5 }}</li>
|
||||
<li>{{ point_3_6 }}</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,20 +118,20 @@
|
||||
</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="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium text-gray-400">The Result</div>
|
||||
<div class="font-medium text-gray-400">{{ subtitle_4 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-400 mb-2">Autonomy for All</div>
|
||||
<div class="font-semibold text-lg text-gray-400 mb-2">{{ title_4 }}</div>
|
||||
<div class="text-gray-400 font-light">
|
||||
<ul style="list-style: disc;">
|
||||
<li>An upgraded Internet for Billions.</li>
|
||||
<li>A planet-and-people-first hybrid of Humans and machines delivers on the promise of Augmented Collective Intelligence.</li>
|
||||
<li>{{ point_4_1 }}</li>
|
||||
<li>{{ point_4_2 }}</li>
|
||||
</ul>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
56
templates/shortcodes/use_cases.html
Normal file
56
templates/shortcodes/use_cases.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set title = title | default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<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="{{ image_src }}" alt="{{ image_alt }}">
|
||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg font-semibold text-white">
|
||||
{{ title }}
|
||||
</dt>
|
||||
<dt class="text-lg font-normal text-white">{{ subtitle }}<dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
|
||||
<div class="flex mt-6 justify-center fade-in">
|
||||
<a href="{{ button_link_1 }}" class="mr-2 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">{{ button_text_1 }}</a>
|
||||
<a href="{{ button_link_2 }}" 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">{{ button_text_2 }}</a>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
31
templates/shortcodes/values.html
Normal file
31
templates/shortcodes/values.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
|
||||
<div class="lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
||||
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
||||
<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 transition-opacity duration-1000" data-observer>
|
||||
{{ title_1 }}
|
||||
</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 transition-opacity duration-1000" data-observer>
|
||||
{{ title_2 }}
|
||||
</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 transition-opacity duration-1000" data-observer>
|
||||
{{ title_3 }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user