update markdown
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
{% include "partials/head.html" %}
|
||||
{% include "partials/header.html" %}
|
||||
|
||||
<body class="">
|
||||
<body class="bg-dark-gradient">
|
||||
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
|
||||
|
||||
@@ -55,9 +55,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase text-gray-400">
|
||||
{% if author %}
|
||||
<a href="{{author.permalink}}" class="text-gray-400 text-xs">{{ author.title }}</a>
|
||||
{{ author.title }}
|
||||
<!-- <a href="{{author.permalink}}" class="text-gray-400 text-xs">{{ author.title }}</a> -->
|
||||
{% endif %}
|
||||
<p class="text-gray-400 text-xs">
|
||||
<time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/home/hero.html" %}
|
||||
{% include "partials/home/grid_stats.html" %}
|
||||
{% include "partials/home/farmers.html" %}
|
||||
{% include "partials/home/features.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,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
{% include "partials/action/video.html" %}
|
||||
{% include "partials/action/web4tools.html" %}
|
||||
{% include "partials/action/action.html" %}
|
||||
{% include "partials/home/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,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.html" %}
|
||||
{% include "partials/what/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@@ -1,12 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/why/hero.html" %}
|
||||
{% include "partials/why/reason.html" %}
|
||||
{% include "partials/why/timeline.html" %}
|
||||
{% include "partials/why/matters.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@@ -58,7 +58,7 @@
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<li class="author-list-item">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}">
|
||||
<!-- <a href="{{author.permalink}}" tooltip="{{author.title}}"> -->
|
||||
<img src="{{author_img}}" alt="{{ author.title }}" class="
|
||||
w-8
|
||||
h-8
|
||||
@@ -68,7 +68,7 @@
|
||||
bg-gray-200
|
||||
border border-gray-600
|
||||
" />
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -86,8 +86,8 @@
|
||||
{% if pages_str is containing(person) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<span class="text-xs leading-none uppercase">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-400">{{ author.title }}</a>
|
||||
<span class="text-xs leading-none uppercase">{{ author.title }}
|
||||
<!-- <a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-400">{{ author.title }}</a> -->
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -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">{{ 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">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/farmfaq/' %}
|
||||
<h2 class="text-center 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-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/tftfaq/' %}
|
||||
<h2 class="text-center 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-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<style>
|
||||
a {
|
||||
color: #4ec48f
|
||||
}
|
||||
</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,53 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<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 leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Stay tuned for 12.12.24<br/>
|
||||
</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://t.me/threefoldnews" 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">
|
||||
Telegram
|
||||
</a>
|
||||
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white 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">
|
||||
Newsletter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards;
|
||||
}
|
||||
|
||||
h2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
</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,41 +0,0 @@
|
||||
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
|
||||
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
|
||||
<p class="text-left my-6 max-w-5xl 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>
|
||||
<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="fade-in 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">3Phone</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and 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">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</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">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.</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>
|
||||
@@ -1,16 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<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 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>
|
||||
|
||||
@@ -27,7 +27,8 @@
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
<!-- <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> -->
|
||||
<img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
@@ -35,7 +36,8 @@
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-400
|
||||
" /> {{ author.title }}</a>
|
||||
" /> {{ author.title }}
|
||||
<!-- </a> -->
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
<!-- <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> -->
|
||||
<img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
@@ -27,7 +28,8 @@
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
" /> {{ author.title }}</a>
|
||||
" /> {{ author.title }}
|
||||
<!-- </a> -->
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
|
||||
@@ -4,14 +4,12 @@
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div class="mt-20 border-t border-gray-700"></div>
|
||||
<div class="lg:mt-20 border-t border-gray-700"></div>
|
||||
<footer class="bg-transparent">
|
||||
<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">
|
||||
{# <img class="w-36 h-auto" src="images/logolight.png" alt="ThreeFold Logo" /> #}
|
||||
<img id="lightLogo" src="images/logolight.png" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
|
||||
<img id="darkLogo" src="images/logodark.png" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
|
||||
<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}}
|
||||
</p>
|
||||
@@ -33,24 +31,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<style>
|
||||
.light {
|
||||
|
||||
display: block; /* Show dark logo by default */
|
||||
}
|
||||
.dark {
|
||||
|
||||
display: none; /* Hide light logo by default */
|
||||
}
|
||||
|
||||
.light-mode .light {
|
||||
|
||||
display: none; /* Hide dark logo in light mode */
|
||||
}
|
||||
.light-mode .dark {
|
||||
|
||||
display: block;/* Show light logo in light mode */
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -89,19 +89,6 @@
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<!-- Crisp without cookies -->
|
||||
<!-- <script type="text/javascript" cookie-consent="tracking">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script> -->
|
||||
<!-- end of Crisp-->
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -162,4 +149,21 @@
|
||||
href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
|
||||
>
|
||||
{% endblock %}
|
||||
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.threefold.io/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '5']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
|
||||
</head>
|
||||
|
||||
@@ -5,28 +5,19 @@
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-black lg:bg-transparent lg:absolute w-full">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<a href="{{ get_url(path='/') }}" class="flex">
|
||||
|
||||
<img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
|
||||
<img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
|
||||
</a>
|
||||
{# <a href="{{ get_url(path='/') }}" class="flex">
|
||||
<img
|
||||
id="site-logo"
|
||||
class="w-36 h-auto"
|
||||
style="max-width: none;"
|
||||
data-light="{{ get_url(path=section.extra.logoPathLight) }}"
|
||||
data-dark="{{ get_url(path=section.extra.logoPathDark) }}" />
|
||||
</a> #}
|
||||
|
||||
<div>
|
||||
<a href="{{get_url(path='/')}}" class="flex">
|
||||
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold 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 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="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">
|
||||
<!-- 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="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="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">
|
||||
<!-- 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" />
|
||||
@@ -45,7 +36,7 @@
|
||||
{% 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 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
<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 %}
|
||||
@@ -54,14 +45,14 @@
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white focus:outline-none focus:text-gray-200 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 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="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">
|
||||
<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>
|
||||
</button>
|
||||
@@ -74,9 +65,9 @@
|
||||
|
||||
<div class="hidden md:inline-block md:order-last">
|
||||
<div class="inline-flex">
|
||||
<!-- <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
|
||||
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
|
||||
<li class="ml-4">
|
||||
<a href="https://t.me/threefoldnews" target="_blank" class="">
|
||||
<a href="https://t.me/threefoldnews" target="_blank" class="text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
@@ -96,7 +87,7 @@
|
||||
<a
|
||||
href="javascript:;"
|
||||
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
||||
class=""
|
||||
class="text-white"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -115,19 +106,8 @@
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul> -->
|
||||
<button class="theme-toggle mx-4">
|
||||
<label for="lightModeSwitch" class="switch">
|
||||
<i class="fa-solid fa-sun" id="lightIcon"></i>
|
||||
<input type="checkbox" id="lightModeSwitch">
|
||||
<span class="slider"></span>
|
||||
<i class="fas fa-moon" id="darkIcon"></i>
|
||||
</label>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<a href="/signup" target="_blank" class="blinking-effect border-gray-500 border-2 dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-gray-100">Join the Web4 Revolution</a>
|
||||
</ul> #}
|
||||
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">PARTICIPATE</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,7 +122,7 @@
|
||||
|
||||
<nav>
|
||||
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="d_menu">
|
||||
<div style="background-color: rgba(34 34 34);">
|
||||
<div id="menu" class="conatiner mx-auto">
|
||||
{{header_menu | safe }}
|
||||
</div>
|
||||
@@ -186,13 +166,13 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
<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}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus: transition ease-in-out duration-150">
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
|
||||
{{ header_label }}
|
||||
<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>
|
||||
</button>
|
||||
@@ -217,7 +197,7 @@
|
||||
</div> #}
|
||||
|
||||
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/signup" target="_blank" class="mt-2 border-gray-500 border-2 rounded-md bg-white px-4 py-2.5 text-sm font-semibold shadow-sm hover:bg-gray-100 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">PARTICIPATE</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -243,88 +223,4 @@
|
||||
color: #c7c7c7 !important;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* logo image */
|
||||
|
||||
.light {
|
||||
|
||||
display: block; /* Show dark logo by default */
|
||||
}
|
||||
.dark {
|
||||
|
||||
display: none; /* Hide light logo by default */
|
||||
}
|
||||
|
||||
.light-mode .light {
|
||||
|
||||
display: none; /* Hide dark logo in light mode */
|
||||
}
|
||||
.light-mode .dark {
|
||||
|
||||
display: block;/* Show light logo in light mode */
|
||||
}
|
||||
|
||||
/* Styling for the switch container */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
background: #ccc;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Hide the default checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Slider (toggle button) */
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Show moon by default (dark mode) */
|
||||
#lightIcon {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
color: white;
|
||||
}
|
||||
#darkIcon {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* When light mode is active */
|
||||
.light-mode .switch {
|
||||
background: #111; /* Dark background in light mode */
|
||||
}
|
||||
.light-mode .slider {
|
||||
transform: translateX(25px); /* Move slider to the right */
|
||||
}
|
||||
.light-mode #lightIcon {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
}
|
||||
.light-mode #darkIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -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 double_bg 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 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 fade-in order-gray-500 border-2 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">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,287 +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 py-20">
|
||||
|
||||
<h1 class="text-3xl font-normal tracking-tight">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>Is this a separate new Internet?</span>
|
||||
<svg class="icon 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 semigray2 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="">Why do we need a new Internet?</span>
|
||||
<svg class="icon 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 semigray2 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-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="">You have 2 tokens, TFT and INCA, why?</span>
|
||||
<svg class="icon 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 semigray2 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). <br><br>This means that we keep the community decision to have 4 billion tokens in total and to mint maximum 1 billion on Stellar. Our partners will start selling new ThreeFold Nodes mid December 2024 with a new reward scheme and ready to grow to millions of nodes.
|
||||
</p>
|
||||
</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="">How can I participate?</span>
|
||||
<svg class="icon 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 semigray2 text-base font-light">
|
||||
You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-06"
|
||||
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-06"
|
||||
>
|
||||
<span style="">What is Web4?</span>
|
||||
<svg class="icon 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-06"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-06"
|
||||
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 semigray2 text-base font-light">
|
||||
Web4 represents the natural evolution of the Internet, where humans and artificial intelligence collaborate to develop a new paradigm aimed at advancing planetary well-being while making sure everyone has equal chances. This Internet can be sovereign & decentralized, while being totally secure and private. This phase of the Internet can scale indefinitely, is green, self-healing, cost effective and ultra-reliable.
|
||||
</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="">How secure and private is my data?</span>
|
||||
<svg class="icon 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 semigray2 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="">What can I do with the Threefold Grid?</span>
|
||||
<svg class="icon 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 semigray2 text-base font-light">
|
||||
ThreeFold grid can be used to host any web2, web3 and web4 (future) workload.
|
||||
For more details see <a href="https://docs.threefold.io/docs/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="">Who should use the ThreeFold Grid ?</span>
|
||||
<svg class="icon 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 semigray2 text-base font-light">
|
||||
Individuals, businesses, and organizations who want to be sovereign 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>
|
||||
</div>
|
||||
<!-- End: Accordion component -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,87 +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-4xl leading-snug font-normal tracking-tight">Powering the ThreeFold Grid Together</h2>
|
||||
<p class="semigray text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">
|
||||
Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”.
|
||||
</p>
|
||||
</div>
|
||||
<section class="pb-32 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 double_bg">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
|
||||
1. HOST A NODE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="semigray flex-auto leading-normal font-light 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 double_bg">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
|
||||
2. OFFER CAPACITY
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="semigray flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl double_bg">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
|
||||
3. EARN REWARDS
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="semigray flex-auto leading-normal font-light 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-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 border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 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>
|
||||
|
||||
.double_bg {
|
||||
background-color: rgb(100 100 100 / 0.2);
|
||||
}
|
||||
|
||||
/* 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,79 +0,0 @@
|
||||
<div class="bg-transparent pt-12 pb-24 ">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 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-4xl leading-tight font-normal tracking-tight">ThreeFold is the Infrastructure Layer of Web4
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
|
||||
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
|
||||
<a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-balance 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 -->
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
|
||||
<div class="pt-0">
|
||||
<dt class="font-semibold text-base ">Unbreakable Data</dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light semigray2 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
|
||||
<dd class="font-light semigray2 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<dt class="font-semibold text-base text-balance">Autonomous Cloud</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light semigray2 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
|
||||
<dd class="font-light semigray2 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<dt class="font-semibold text-base text-balance">Unbreakable Network</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light semigray2 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
|
||||
<dd class="font-light semigray2 text-sm mb-4">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,139 +0,0 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden py-12 mb-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-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight ">A Global Community</h2>
|
||||
<p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
|
||||
<p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">Version 3.15 is live on Mainnet.</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 double_bg 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">SSD CAPACITY</dt>
|
||||
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<div class="fade-in flex flex-col double_bg 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">CORES</dt>
|
||||
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<div class="fade-in flex flex-col double_bg 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">NODES</dt>
|
||||
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<div class="fade-in flex flex-col double_bg 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">COUNTRIES</dt>
|
||||
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight"></dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="max-w-4xl items-center mx-auto">
|
||||
<p class="semigray items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 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;
|
||||
}
|
||||
}
|
||||
|
||||
.double_bg {
|
||||
background-color: rgb(100 100 100 / 0.2);}
|
||||
|
||||
/* 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,44 +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 lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
|
||||
<p class="semigray mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
|
||||
<br>
|
||||
<h2 class="text-balance font-normal tracking-tight lg:text-6xl text-6xl fade-in">Web4</h2>
|
||||
<br>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/what" class="fade-in border-gray-500 border-2 rounded-2xl px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 bg-white hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What We've Built</a>
|
||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold hover:text-green ">Read TF Docs<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,78 +0,0 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-6xl font-bold tracking-tight sm:text-6l">WEB4</h2>
|
||||
<br>
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">The Next Evolution of the Internet</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">Blockchain was the first step to Web3.</p>
|
||||
<p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium semigray fade-in">ThreeFold is the next step to Web4.</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="/signup" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold">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,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,4 +1,4 @@
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-600">
|
||||
<div class="flex-1">
|
||||
<a href={{ post.permalink }} class="block">
|
||||
<div class="flex-shrink-0">
|
||||
@@ -6,13 +6,13 @@
|
||||
<img class="h-48 w-full mx-auto object-cover" src={{ post.permalink }}{{post.extra.imgPath}} alt="" />
|
||||
{%endif %}
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1 p-6 flex flex-col justify-between">
|
||||
|
||||
<h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
|
||||
<h3 class="mt-2 text-xl leading-7 font-medium text-gray-100 text-left not-italic">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
{% if post.description %}
|
||||
<p class="mt-3 text-sm font-normal leading-6 text-gray-500 text-left">
|
||||
<p class="mt-3 text-sm font-normal leading-6 text-gray-300 text-left">
|
||||
{{ post.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
{% include "partials/tagCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<hr class="my-10 border-gray-700" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="mx-8 md:mx-4 flex flex-col">
|
||||
<div class="flex flex-col mb-12 mr-8 lg:mr-24">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER BY</h4>
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-white mb-6"> FILTER BY</h4>
|
||||
{% set taxonomy = get_taxonomy(kind="tags") %}
|
||||
{% set tags = taxonomy.items %}
|
||||
{% for tag in tags %}
|
||||
{% set path = tag.name | slugify %}
|
||||
{% set fullpath = "/tags/" ~ path %}
|
||||
<a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> #{{tag.name}} </a>
|
||||
<a id="{{path}}" class="mb-3 text-gray-300 font-normal" href={{fullpath}}> #{{tag.name}} </a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
let activeCategory = window.location.pathname.split("/")[2]
|
||||
if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
|
||||
else { activeLink = document.getElementById(activeCategory) }
|
||||
activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
|
||||
activeLink.className = activeLink.className.replace("text-gray-300 font-normal", "text-gray-300 font-semibold");
|
||||
}
|
||||
|
||||
setActiveCategory()
|
||||
|
||||
@@ -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-4xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg 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-2xl text-lg 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" 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 focus-visible:outline-offset-2">Dive Deeper</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-4xl 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>
|
||||
</div>
|
||||
<section class="lg:pb-24 pb-12 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>
|
||||
|
||||
<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 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,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,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 lg:text-6xl text-5xl fade-in">The Internet Needs an Upgrade</h2>
|
||||
<p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light 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="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-medium fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br>
|
||||
as an engine for an upgraded Web4 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 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 lg:text-5xl">Why it Matters</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light">
|
||||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
||||
<br><br>
|
||||
But we won’t stop here.
|
||||
<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 fade-in font-semibold">
|
||||
<p class="lg:text-2xl text-xl leading-normal font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
|
||||
<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 sm:text-5xl">Why it Matters?</h2>
|
||||
<p class="mt-6 text-lg font-light">
|
||||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
||||
<br><br>
|
||||
But we won’t stop here.
|
||||
<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 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,46 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-7">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">The Reason Behind It All</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light">
|
||||
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
|
||||
<br><br>
|
||||
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally...
|
||||
<br><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-5">
|
||||
<figure class=" mt-6 pl-8">
|
||||
<blockquote class=" lg:text-2xl text-xl fade-in font-semibold">
|
||||
<p class="lg:text-2xl text-xl leading-normal font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<div class="mx-4">
|
||||
<p class="fade-in mx-auto text-2xl font-semibold tracking-tight 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,13 +0,0 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
|
||||
<p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light semigray fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
|
||||
<a href="/people" class="fade-in border-gray-500 border-2 rounded-2xl px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 bg-white hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Meet the Team</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<div class="bg-transparent pb-24 pt-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
||||
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
||||
<dd class="fade-in order-first text-3xl font-semibold tracking-tight 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 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 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,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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
254
templates/shortcodes/branding.html
Normal file
254
templates/shortcodes/branding.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<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">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>
|
||||
|
||||
|
||||
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in">Logos</h2>
|
||||
|
||||
<!-- Black Versions -->
|
||||
<div>
|
||||
<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">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/tft_icon.png"
|
||||
width="170" alt="TFT Icon">
|
||||
|
||||
<a href="/images/download/white_threefold_three.png"
|
||||
download="white_threefold_three.png"
|
||||
class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- main Logo -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/white_tft_logo.png"
|
||||
width="170" alt="">
|
||||
|
||||
<a href="/images/download/white_threefold.png" download="white_threefold.png" class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- horizontal Logo -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/white_tft_horizontal.png"
|
||||
width="170" alt="">
|
||||
<a href="/images/download/white_threefold_horizontal.png" download="white_threefold_horizontal.png" class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- built logo -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/white_tft_built_on.png"
|
||||
width="170" alt="">
|
||||
<a href="/images/download/white_tft_built_on.png" download="white_tft_built_on.png" class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Black Versions -->
|
||||
|
||||
<div>
|
||||
<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">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/black_tft_icon.png"
|
||||
width="170" alt="TFT Icon">
|
||||
|
||||
<a href="/images/download/black_threefold_three.png"
|
||||
download="black_threefold_three.png"
|
||||
class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- main Logo -->
|
||||
<div class="fade-in flex flex-col bg-white p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/black_tft_logo.png"
|
||||
width="170" alt="">
|
||||
|
||||
<a href="/images/download/black_threefold.png" download="black_threefold.png" class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- horizontal Logo -->
|
||||
<div class="fade-in flex flex-col bg-white p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/black_tft_horizonal.png"
|
||||
width="170" alt="">
|
||||
<a href="/images/download/black_threefold_horizontal.png" download="black_threefold_horizontal.png" class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- built logo -->
|
||||
<div class="fade-in flex flex-col bg-white p-4">
|
||||
<div class="text-center flex flex-col my-4">
|
||||
<img class="mx-auto"
|
||||
src="/images/download/black_tft_built.png"
|
||||
width="170" alt="">
|
||||
<a href="/images/download/built_on_threefold_horizontal.png" download="built_on_threefold_horizontal.png" class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
|
||||
Download
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
|
||||
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="lg:my-12 border-t border-gray-600"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Color -->
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in">Colors</h2>
|
||||
|
||||
|
||||
<div>
|
||||
<dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center lg:grid-cols-3">
|
||||
<div class="fade-in flex flex-col p-4" style="background-color: #333333;">
|
||||
<h3 class="text-2xl items-center justify-center text-gray-200">#333333</h3>
|
||||
<p class="text-base">Dark Charcoal (main color)</p>
|
||||
</div>
|
||||
|
||||
<div class="fade-in flex flex-col p-4" style="background-color: #fefefe;">
|
||||
<h3 class="text-2xl items-center justify-center text-gray-600">#fefefe</h3>
|
||||
<p class="text-base text-gray-600">Shade of White (main color)</p>
|
||||
|
||||
</div>
|
||||
<div class="fade-in flex flex-col p-4" style="background-color: #a1debd;">
|
||||
<h3 class="text-2xl items-center justify-center text-gray-600">#a1debd</h3>
|
||||
<p class="text-base text-gray-600">Ice Green (accent color)</p>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="lg:my-12 border-t border-gray-600"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Typography -->
|
||||
<section class="container mx-auto px-6 py-8">
|
||||
<!-- Title -->
|
||||
<h2 class="mx-auto fade-in">Typography</h2>
|
||||
|
||||
|
||||
|
||||
<!-- Regular -->
|
||||
<div class="my-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Bold -->
|
||||
<div class="my-8">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Italic -->
|
||||
<div class="my-8" style="font-style: italic">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="lg:my-12 border-t border-gray-600"></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<h2 class="mx-auto fade-in">Guidelines</h2>
|
||||
<div class="max-w-5xl">
|
||||
<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>
|
||||
Incorrect: threefold, Threefold, THREEFOLD
|
||||
<br>
|
||||
This ensures brand consistency and recognition across all media and communications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 text-pretty lg:text-xl text-lg font-light text-gray-200 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>
|
||||
|
||||
|
||||
72
templates/shortcodes/hero_text_center.html
Normal file
72
templates/shortcodes/hero_text_center.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{% 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 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 }}"
|
||||
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="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 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">
|
||||
Join the Web4 Revolution
|
||||
</h2>
|
||||
<h1 class="fade-in">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
|
||||
Join us on our journey. Watch the video below and scroll down to learn how you can participate.
|
||||
<p class="mx-auto mt-8 max-w-3xl fade-in fade-in-delay">
|
||||
{{ description_1 }}
|
||||
<br>
|
||||
<span class=" text-white font-semibold">{{ description_2 }}</span>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Embed YouTube Video -->
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="responsive-iframe">
|
||||
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
|
||||
<div class="py-4 flex justify-center mx-auto" style="max-width: 550px; height: auto;">
|
||||
<div class="responsive-iframe" >
|
||||
<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>
|
||||
@@ -23,10 +32,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="mt-12 fade-in flex items-center justify-center gap-x-4">
|
||||
<a href="/signup" target="_blank"
|
||||
class="fade-in 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 the Next Step
|
||||
<div class="mt-2 fade-in flex items-center justify-center gap-x-6">
|
||||
<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">
|
||||
{{ 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>
|
||||
|
||||
|
||||
|
||||
69
templates/shortcodes/img_features.html
Normal file
69
templates/shortcodes/img_features.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{% 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_3 }}</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">{{ description_3 }}</dd>
|
||||
<a href="{{ button_link_3 }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">{{ button_text_3 }} <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>
|
||||
121
templates/shortcodes/milestones.html
Normal file
121
templates/shortcodes/milestones.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<section class="text-white py-12 lg:pb-20">
|
||||
<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">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> #}
|
||||
</div>
|
||||
<ul class="mx-auto px-0 mt-8 grid grid-cols-1 gap-8 lg:mt-16 lg:grid-cols-3">
|
||||
<li class="flex-start group relative flex lg:flex-col">
|
||||
<span
|
||||
class="absolute left-[18px] top-14 h-[calc(100%_-_32px)] w-px bg-gray-300 lg:right-0 lg:left-auto lg:top-[18px] lg:h-px lg:w-[calc(100%_-_72px)]"
|
||||
aria-hidden="true"></span>
|
||||
<div
|
||||
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
|
||||
<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>
|
||||
<div class="ml-6 lg:ml-0 lg:mt-4">
|
||||
<h3
|
||||
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 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>
|
||||
<li>Built decentralized, autonomous, edge internet technology</li>
|
||||
<li>Self-funded and private investment from founders, community, and TF Tech investors</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex-start group relative flex lg:flex-col">
|
||||
<span
|
||||
class="absolute left-[18px] top-14 h-[calc(100%_-_32px)] w-px bg-gray-300 lg:right-0 lg:left-auto lg:top-[18px] lg:h-px lg:w-[calc(100%_-_72px)]"
|
||||
aria-hidden="true"></span>
|
||||
<div
|
||||
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
|
||||
<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>
|
||||
<div class="ml-6 lg:ml-0 lg:mt-4">
|
||||
<h3
|
||||
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 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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<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">
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Infrastructure Layer for Web 2, 3 and 4</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Dashboard</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Dashboard</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Nodes</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Kubernetes, Virtual Machines, Containers, ...</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed Quantum Safe Storage and File System</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Quantum Safe Network</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Web2 Gateway</li>
|
||||
<li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Message Bus</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Order Now V4 3Node</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Pre-Order Now 3Phone</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Pre-Register Now 3Router</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming BTC Payment Integration</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming Credit Card Payment Integration</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming TFT Bridge to Solana</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming Mycelium New Features</li>
|
||||
<li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming AIBox Decentralized AI</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex-start group relative flex lg:flex-col">
|
||||
<div
|
||||
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
|
||||
<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>
|
||||
<div class="ml-6 lg:ml-0 lg:mt-4">
|
||||
<h3
|
||||
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-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>
|
||||
<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>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
|
||||
</ul>
|
||||
<h3 class="text-lg font-medium mb-1 text-gray-200 before:block before:font-mono before:text-sm ">Next:</h3>
|
||||
<ul class="pl-2 text-base text-gray-200">
|
||||
<li>Expand the network considerably.</li>
|
||||
<li>Build a network of commercial farmers for optimal performance and uptime.</li>
|
||||
<li>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
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,15 +1,33 @@
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">ThreeFold’s Journey</h2>
|
||||
<p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 pb-24 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">
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
@@ -18,15 +36,17 @@
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
|
||||
<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 semigray">Phase I</div>
|
||||
<div class="font-medium text-gray-200">{{ subtitle_1 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg semigray mb-2">Creation of Core Technology</div>
|
||||
<div class="semigray font-light">
|
||||
10+ years of Development
|
||||
<br>Built decentralized, autonomous, edge internet technology
|
||||
<br>50m dollars invested by founders, community, and TF Tech investors
|
||||
<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>{{ point_1_1 }}</li>
|
||||
<li>{{ point_1_2 }}</li>
|
||||
<li>{{ point_1_3 }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,19 +58,22 @@
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
|
||||
<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">Phase II</div>
|
||||
<div class="font-medium text-white">{{ subtitle_2 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg mb-2">Global Proof Of Concept</div>
|
||||
<div class="semigray font-light">
|
||||
Open Source Development
|
||||
<br>50+ Countries
|
||||
<br>50,000+ Cores
|
||||
<br>25,000,000 GB of Storage
|
||||
<br>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.
|
||||
<br>Decentralized reliable compute, network and storage layer for Web 2-3
|
||||
<br>Commitments from wonderful projects to build on top of us.
|
||||
<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>{{ 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>
|
||||
</div>
|
||||
@@ -62,18 +85,26 @@
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
|
||||
<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">2025</div>
|
||||
<div class="font-medium text-white">{{ subtitle_3 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg mb-2">ThreeFold Web4</div>
|
||||
<div class="semigray font-light">
|
||||
Introduce a Web4 Phone & Router
|
||||
<br>Web4 smart contracts for the Web3 world.
|
||||
<br>Expand the network to +1 Million Nodes
|
||||
<br>Quantum Safe Compute, Storage & Network for agent centric Web4.
|
||||
<br>Build a network of commercial farmers for optimal performance and uptime
|
||||
|
||||
<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>{{ 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>{{ point_3_5 }}</li>
|
||||
<li>{{ point_3_6 }}</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,21 +116,24 @@
|
||||
<path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
|
||||
<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 semigray2">The Result</div>
|
||||
<div class="font-medium text-gray-400">{{ subtitle_4 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg semigray2 mb-2">Sovereignty for All</div>
|
||||
<div class="semigray2 font-light">
|
||||
An upgraded Internet for Billions.
|
||||
<br>A planet and people first hybrid of Humans and Machines deliver
|
||||
<br>on the promise of Augmented Collective Intelligence
|
||||
<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>{{ point_4_1 }}</li>
|
||||
<li>{{ point_4_2 }}</li>
|
||||
</ul>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Initial state: elements are invisible */
|
||||
.fade-in {
|
||||
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 |
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user