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

update content

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-12 13:56:54 +03:00
parent 18d29487fa
commit fb0aec2a56
23 changed files with 239 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
templates/shortcodes/cta.html
View File

@@ -5,6 +5,10 @@
{% 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="") %}
{% 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="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">
@@ -15,7 +19,15 @@
<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>
<a href="{{ button_link_2 }}" 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_2 }}
</a>
<a href="{{ button_link_3 }}" 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_3 }}
</a>
{% if button_link_4 %}
<a href="{{ button_link_4 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_4 }}<span aria-hidden="true">→</span></a>
{% endif%}
</div>
</div>
</div>

29
templates/shortcodes/header_section.html Normal file
View File

@@ -0,0 +1,29 @@
<!-- component -->
<div class="">
<div class="mx-auto max-w-7xl px-4 lg:px-0">
<div class="relative isolate overflow-hidden bg-red-700 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
{# <svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0" aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#E935C1" />
</radialGradient>
</defs>
</svg> #}
<div class="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:py-6 text-left">
<img class="fade-in" width="30%" src="/images/tft_logo.png" alt="TF logo">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">ThreeFold Cloud</h2>
<dt class="text-lg font-normal text-white">Open-Source Cloud</dt>
<p class="mt-6">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>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="https://manual.grid.tf/" class="mr-2 fade-in rounded-2xl bg-white px-8 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>
</div>
</div>
<div class="relative mt-16 h-80 lg:mt-8">
<img class="absolute left-0 top-0 w-[40rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10" src="/images/app.png" alt="App screenshot" width="800" height="800">
</div>
</div>
</div>
</div>

5
templates/shortcodes/hero_text_center.html
View File

@@ -30,9 +30,8 @@
<a href="{{ button1_link }}" target="{{ target }}"
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">{{ button1_text }}</a>
{% endif %}
{% if button3_link %}
<a href="{{ button2_link }}" class="fade-in text-base font-semibold text-white hover:text-green mr-1 ">{{ button2_text }}<span class="ml-2"
aria-hidden="true">→</span></a>
{% if button2_link %}
<a href="{{ button2_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">{{ button2_text }}</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>

47
templates/shortcodes/image_card.html Normal file
View File

@@ -0,0 +1,47 @@
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set title = title | default(value="") %}
{% set card_link = card_link | default(value="") %}
<a href="{{ card_link }}" class="flex-1 mx-2 mb-8" target="_blank">
<div class="fade-in-box flex flex-col p-6 rounded-2xl bg-white/5">
<img class="fade-in blinking-effect relative mx-auto mb-4" width="60%" src="{{ image_src }}" alt="{{ image_alt }}">
</div>
<div class="flex justify-center my-4 items-center gap-x-3 lg:text-xl text-lg font-semibold text-white">
{{ title }}
</div>
</a>
<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>

4
templates/shortcodes/text_center.html
View File

@@ -10,8 +10,8 @@
{% 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">
<div class=" text-center 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>

16
templates/shortcodes/use_cases.html
View File

@@ -10,17 +10,21 @@
<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 }}">
<div class="flex flex-col p-8 rounded-lg justify-center items-center bg-white/5">
<img class="fade-in relative mb-4 mx-auto" 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>
<dd class="mt-4 flex flex-col">
<p class="leading-normal font-light text-gray-200 text-md">{{ description }}</p>
<div class="flex mt-6 fade-in justify-center items-center">
{% if button_link_1 %}
<a href="{{ button_link_1 }}" class="mr-2 fade-in rounded-2xl bg-white px-8 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_2 %}
<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>