update home section 4
This commit is contained in:
@@ -38,7 +38,7 @@ extra:
|
|||||||
button_text="Discover How It Works",
|
button_text="Discover How It Works",
|
||||||
button_link="/what"
|
button_link="/what"
|
||||||
|
|
||||||
) }}
|
) }}
|
||||||
|
|
||||||
<div class="lg:px-16 fade-in">
|
<div class="lg:px-16 fade-in">
|
||||||
|
|
||||||
@@ -94,7 +94,63 @@ extra:
|
|||||||
|
|
||||||
<!-- section 4 -->
|
<!-- section 4 -->
|
||||||
|
|
||||||
{{ use_cases() }}
|
<div class="lg:py-24 py-12">
|
||||||
|
|
||||||
|
{{ center_text(
|
||||||
|
title="Anything That Runs on Linux Can Run on ThreeFold",
|
||||||
|
description="The new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.",
|
||||||
|
button_text="",
|
||||||
|
button_link=""
|
||||||
|
|
||||||
|
) }}
|
||||||
|
|
||||||
|
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 mt-16 xl:mx-auto">
|
||||||
|
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||||
|
|
||||||
|
{{ use_cases(
|
||||||
|
image_src="/images/tft_logo.png",
|
||||||
|
image_alt="ThreeFold Cloud",
|
||||||
|
title="ThreeFold Cloud",
|
||||||
|
description="ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.",
|
||||||
|
subtitle ="Open-Source Cloud",
|
||||||
|
button_text_1="Dashboard",
|
||||||
|
button_link_1="https://dashboard.grid.tf/#/tf-grid/node-statistics/",
|
||||||
|
button_text_2="Manual",
|
||||||
|
button_link_2="https://manual.grid.tf/"
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ use_cases(
|
||||||
|
image_src="/images/mycelium_logo.png",
|
||||||
|
image_alt="Mycelium",
|
||||||
|
title="Mycelium",
|
||||||
|
description="An adaptive and resilient network solution that not only keeps your data safe but also guarantees uninterrupted and efficient communication. The Mycelium Network is the backbone of a new era of connectivity, prioritizing speed, security, and reliability for all users.",
|
||||||
|
button_text_1="Website",
|
||||||
|
button_link_1="https://mycelium.threefold.io/",
|
||||||
|
button_text_2="Docs",
|
||||||
|
button_link_2="https://threefold.info/mycelium/docs/"
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ use_cases(
|
||||||
|
image_src="/images/aibox_logo.png",
|
||||||
|
image_alt="AIBOX",
|
||||||
|
title="AIBOX",
|
||||||
|
description="A decentralized AI solution that enables anyone to run, train, and use AI models locally, keeping their data private while sharing unused computing power with the network—eliminating the need for centralized data centers.",
|
||||||
|
subtitle ="Decentralized AI",
|
||||||
|
button_text_1="Website",
|
||||||
|
button_link_1="https://aibox.threefold.io/",
|
||||||
|
button_text_2="Docs",
|
||||||
|
button_link_2="https://threefold.info/aibox/docs/"
|
||||||
|
) }}
|
||||||
|
|
||||||
|
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- section 5 -->
|
<!-- section 5 -->
|
||||||
|
|||||||
@@ -244,13 +244,13 @@ a img:hover {
|
|||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-4xl lg:text-6xl font-normal;
|
@apply text-4xl lg:text-6xl font-normal text-white;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-3xl lg:text-4xl my-4 font-normal leading-none;
|
@apply lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
@@ -578,10 +578,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
h2 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
|
|||||||
16
templates/shortcodes/center_text.html
Normal file
16
templates/shortcodes/center_text.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{% 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="text-center mx-auto max-w-7xl px-4 lg:px-8">
|
||||||
|
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
|
||||||
|
<h2 class="mx-auto fade-in">{{ title}}</h2>
|
||||||
|
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
{% if button %}
|
||||||
|
<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>
|
||||||
@@ -1,82 +1,31 @@
|
|||||||
<div class="bg-transparent lg:py-24 py-12">
|
{% set image_src = image_src | default(value="") %}
|
||||||
<div class="text-center mx-auto max-w-7xl px-4 lg:px-8">
|
{% set image_alt = image_alt | default(value="") %}
|
||||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
|
{% set title = title | default(value="") %}
|
||||||
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run
|
{% set subtitle = subtitle | default(value="") %}
|
||||||
on ThreeFold</h2>
|
{% set description = description | default(value="") %}
|
||||||
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||||
The new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
|
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||||
</p>
|
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||||
</div>
|
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||||
<section class="bg-transparent">
|
|
||||||
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
|
|
||||||
<div class="mx-auto max-w-2xl mt-16 lg:max-w-none">
|
|
||||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
|
||||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
<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 }}">
|
||||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/tft_logo.png" alt="">
|
|
||||||
|
|
||||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg font-semibold text-white">
|
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg font-semibold text-white">
|
||||||
ThreeFold Cloud
|
{{ title }}
|
||||||
</dt>
|
</dt>
|
||||||
<dt class="text-lg font-normal text-white">Open-Source Cloud<dt>
|
<dt class="text-lg font-normal text-white">{{ subtitle }}<dt>
|
||||||
<dd class="mt-4 flex flex-auto flex-col">
|
<dd class="mt-4 flex flex-auto flex-col">
|
||||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
|
||||||
<p class="mt-6">
|
<div class="flex mt-6 justify-center fade-in">
|
||||||
</p>
|
<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>
|
||||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
</div>
|
||||||
|
|
||||||
<ul class="flex justify-center fade-in">
|
|
||||||
<li class="mr-2"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Dashboard</a></li>
|
|
||||||
<li><a href="https://manual.grid.tf/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Manual</a></li>
|
|
||||||
</ul>
|
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
||||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/mycelium_logo.png" alt="">
|
|
||||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
|
|
||||||
Mycelium
|
|
||||||
</dt>
|
|
||||||
<dt class="text-lg font-normal text-white">Unbreakable Network</dt>
|
|
||||||
<dd class="mt-4 flex flex-auto flex-col">
|
|
||||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An adaptive and resilient network solution that not only keeps your data safe but also guarantees uninterrupted and efficient communication. The Mycelium Network is the backbone of a new era of connectivity, prioritizing speed, security, and reliability for all users.</p>
|
|
||||||
<p class="mt-6">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
|
||||||
|
|
||||||
<ul class="flex justify-center fade-in">
|
|
||||||
<li class="mr-2"><a href="https://mycelium.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Website</a></li>
|
|
||||||
<li><a href="https://threefold.info/mycelium/docs/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Docs</a></li>
|
|
||||||
</ul>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
||||||
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="/images/aibox_logo.png" alt="">
|
|
||||||
<dt class="flex justify-center items-center gap-x-3 lg:text-2xl text-lg rounded-2xl font-semibold text-white">
|
|
||||||
AIBOX
|
|
||||||
</dt>
|
|
||||||
<dt class="text-lg font-normal text-white">Decentralized AI</dt>
|
|
||||||
<dd class="mt-4 flex flex-auto flex-col">
|
|
||||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A decentralized AI solution that enables anyone to run, train, and use AI models locally, keeping their data private while sharing unused computing power with the network—eliminating the need for centralized data centers.
|
|
||||||
</p>
|
|
||||||
<p class="mt-6">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
{# <p class="text-lg font-normal text-white mb-2">Lern More</p> #}
|
|
||||||
|
|
||||||
<ul class="flex justify-center fade-in">
|
|
||||||
<li class="mr-2"><a href="https://aibox.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Website</a></li>
|
|
||||||
<li><a href="https://threefold.info/aibox/docs/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Docs</a></li>
|
|
||||||
</ul>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Fade-in animation for the grid items */
|
/* Fade-in animation for the grid items */
|
||||||
|
|||||||
Reference in New Issue
Block a user