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

update mediakit

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-07 18:56:10 +03:00
parent ad6fff4de8
commit e68d792ea5
11 changed files with 355 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
templates/shortcodes/branding.html Normal file
View 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>

75
templates/shortcodes/founders.html Normal file
View 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>

60
templates/shortcodes/hero_side.html Normal file
View 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>

121
templates/shortcodes/milestones.html Normal file
View 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>

19
templates/shortcodes/social.html Normal file
View 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>