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

13
content/home/index.md
View File

@@ -153,14 +153,17 @@ extra:
<!-- section 5 -->
<div class="container mx-auto lg:max-w-7xl lg:py-24 py-12 px-4 lg:px-0">
<div class="max-w-4xl lg:px-8 px-0 lg:pb-12 pb-6">
{{ text_left(
title="How it works",
description_1="At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.",
description_2="Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'"
## How It Works
At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.
<br>
) }}
Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'
</div>
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">

177
content/media/index.md
View File

@@ -1,13 +1,188 @@
---
title: "ThreeFold's Vision and Mission"
description: "Our mission is to empower individuals and organizations with secure, private, and autonomous access to computing resources, ensuring fair cloud access for everyone." # quotation marks to allow colons where used
template: "layouts/media.html"
template: "page.html"
insert_anchor_links: "left"
extra:
author: ThreeFold
imgPath: tf.png
---
<!--section 1 (hero_side)-->
{{ hero_side(
title="Company Profile",
description_1="ThreeFold is a pioneering decentralized Internet project designed to create a more open, secure, and sustainable digital infrastructure. By leveraging a global peer-to-peer network of independent nodes, ThreeFold eliminates reliance on centralized cloud providers, ensuring greater privacy, resilience, and accessibility. This innovative model empowers individuals and organizations to contribute computing, storage, and networking resources to the ThreeFold Grid, forming the foundation for a truly autonomous and resilient",
description_2="We are currently running V3.16, a large-scale proof of concept network and are now preparing for Version 4, a major upgrade to enable our Web4 vision. The ThreeFold Grid is in more than 50 countries with +2000 nodes online providing data, network and cloud resources to users.",
image_src="/images/media_kit.png",
image_alt="AIBox Specifications"
) }}
<!--section 2 (milestones)-->
{{ milestones() }}
<!--section 3 (branding)-->
{{ branding() }}
<!--section 4 (founders)-->
<div class="lg:py-24 py-12">
<div class=" mb-10 lg:max-w-7xl mx-auto px-4 lg:px-8 text-center">
## Founders & Key Voices
</div>
{{ founders(
name="KRISTOF DE SPIEGELEER",
title="Co-Founder & CEO",
description_1="Is a serial entrepreneur with 30+ years of experience in Internet infrastructure and cloud technology, holding multiple patents and world records in storage and automation solutions used by industry giants like Oracle, Verizon, and Western Digital. He has founded over ten companies, with seven successful exits totaling over $600M. A pioneer in building the Internet and data center business in Europe, Kristof is now focused on creating a decentralized, sovereign Internet through ThreeFold. Guided by a belief that doing good for the world and delivering investor returns can coexist, he champions respect, transparency, and innovation in every venture. Kristof has previously spoken at Davos.",
image_src="/images/people/kristof_de_spiegeleer.jpeg",
image_alt="KRISTOF DE SPIEGELEER",
linkedin_link="https://www.linkedin.com/in/despiegk/"
) }}
{{ founders(
name="FLORIAN FOURNIER",
title="Co-Founder & CMO",
description_1="Florian Fournier is a serial entrepreneur and ex marketing director at Apple. He's a co-founder at ThreeFold primarily focused on marketing and business development.",
image_src="/images/people/florian_fournier.jpeg",
image_alt="FLORIAN FOURNIER",
description_2="Florian aims to help in bringing new ways of living together, relating, moving, consuming, taking care of each other and working in a more sustainable way, through unpacking current scenarios and anticipating future perspectives. He has previously spoken at Davos and at Balaji Srinivasan’s event Network State, to great acclaim.",
linkedin_link="/images/people/florian_fournier.jpeg"
) }}
</div>
<!--section 5 (social)-->
<div class="py-12 sm:py-12 text-center px-4">
## Social Media & Community
<div class="mt-10 mx-auto max-w-7xl px-4">
<div class="mt-4 grid grid-cols-1 gap-2 lg:grid-cols-4">
{{ social(
link="https://forum.threefold.io/",
image_src="/images/discourse_dark.png",
image_alt="Forum",
title="Forum",
subtitle="Ask Questions"
) }}
{{ social(
link="https://github.com/threefoldfoundation",
image_src="/images/github_dark.png",
image_alt="GitHub | Tech",
title="GitHub | Tech",
subtitle="Open-Source Collaboration for Tech Development"
) }}
{{ social(
link="https://github.com/threefoldtech",
image_src="/images/github_dark.png",
image_alt="GitHub | Foundation",
title="GitHub | Foundation",
subtitle="Open-source Collaboration for Websites and Online Info"
) }}
{{ social(
link="https://x.com/threefold_io",
image_src="/images/twitter.png",
image_alt="X | Twitter",
title="X | Twitter",
subtitle="Connect With Us"
) }}
{{ social(
link="https://t.me/threefoldnews",
image_src="/images/telegram.png",
image_alt="Telegram News",
title="Telegram News",
subtitle="Stay Updated"
) }}
{{ social(
link="https://t.me/threefold",
image_src="/images/telegram.png",
image_alt="Telegram Main Chat",
title="Telegram Main Chat",
subtitle="Community Conversation"
) }}
{{ social(
link="https://t.me/threefoldfarmers",
image_src="/images/telegram.png",
image_alt="Telegram Farmers Chat",
title="Telegram Farmers Chat",
subtitle="Farming Community"
) }}
{{ social(
link="https://t.me/threefoldtesting",
image_src="/images/linkedin_dark.png",
image_alt="Telegram News",
title="Telegram Grid User Chat",
subtitle="Grid User Community"
) }}
{{ social(
link="https://www.reddit.com/r/threefold/",
image_src="/images/reddit_dark.png",
image_alt="Reddit",
title="Reddit",
subtitle="Join In"
) }}
{{ social(
link="https://www.youtube.com/@ThreeFoldFoundation",
image_src="/images/youtube.png",
image_alt="Telegram News",
title="Telegram Grid User Chat",
subtitle="Grid User Community"
) }}
<a class="my-6" target="{{ target }}" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')">
<div class="myscale">
<img src="/images/mail_dark.png" class="mx-auto" width="60px" alt="E-mail Newsletter">
</div>
<h6 class="text-white mt-4 font-semibold">E-mail Newsletter</h6>
<p class="text-base text-white leading-snug">Updates in Your Inbox</p>
</a>
{{ social(
link="https://www.linkedin.com/company/threefold-io/",
image_src="/images/linkedin_dark.png",
image_alt="LinkedIn",
title="LinkedIn",
subtitle="Let's Network"
) }}
</div>
</div>

11
templates/layouts/media.html
View File

@@ -1,11 +0,0 @@
{% extends "_default/base.html" %}
{% block content %}
{% include "partials/media/hero.html" %}
{% include "partials/media/milestones.html" %}
{% include "partials/media/branding.html" %}
{% include "partials/media/founders.html" %}
{% include "partials/media/social.html" %}
{% endblock content %}

98
templates/partials/media/founders.html
View File

@@ -1,98 +0,0 @@
<div class="lg:py-24 py-12">
<div class=" mb-10 lg:max-w-7xl mx-auto px-4 lg:px-8 text-center">
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl visible">Founders & Key Voices</h2>
</div>
<section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
<div class="flex flex-col lg:flex-row items-center">
<!-- Left Content -->
<div class="w-full w-full lg:w-1/2 flex justify-center">
<img src="/images/people/kristof_de_spiegeleer.jpeg" alt="AIBox Specifications"
class="w-full lg:w-2/3 rounded-lg grayscale">
</div>
<!-- Right Content -->
<div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
<div class="flex items-center gap-3 fade-in">
<h2 class="text-balance font-bold tracking-tight text-white text-xl lg:text-4xl">
KRISTOF DE SPIEGELEER
</h2>
<a href="https://www.linkedin.com/in/despiegk/" target="_blank"
class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
<svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
</svg>
</a>
</div>
<p class="mx-auto text-pretty text-lg lg:text-2xl font-medium text-gray-200 fade-in">Co-Founder & CEO</p>
<p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
is a serial entrepreneur with 30+ years of experience in Internet infrastructure and cloud technology, holding multiple patents and world records in storage and automation solutions used by industry giants like Oracle, Verizon, and Western Digital. He has founded over ten companies, with seven successful exits totaling over $600M. A pioneer in building the Internet and data center business in Europe, Kristof is now focused on creating a decentralized, sovereign Internet through ThreeFold. Guided by a belief that doing good for the world and delivering investor returns can coexist, he champions respect, transparency, and innovation in every venture. Kristof has previously spoken at Davos.
</p>
</div>
</div>
</section>
<section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
<div class="flex flex-col lg:flex-row items-center ">
<!-- Left Content -->
<div class="w-full lg:w-1/2 flex justify-center">
<img src="/images/people/florian_fournier.jpeg" alt="AIBox Specifications" class="w-full lg:w-2/3 rounded-lg grayscale">
</div>
<!-- Right Image -->
<div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
<div class="flex items-center gap-3 fade-in">
<h2 class="text-balance font-bold tracking-tight text-white text-2xl lg:text-4xl">
FLORIAN FOURNIER
</h2>
<a href="https://www.linkedin.com/in/florianfournier/" target="_blank"
class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
<svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
</svg>
</a>
</div>
<p class="mx-auto text-pretty text-2xl font-medium text-gray-200 fade-in">Co-Founder & CMO</p>
<p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
Florian Fournier is a serial entrepreneur and ex marketing director at Apple. He's a co-founder at ThreeFold primarily focused on marketing and business development.<br><br>
Florian aims to help in bringing new ways of living together, relating, moving, consuming, taking care of each other and working in a more sustainable way, through unpacking current scenarios and anticipating future perspectives. He has previously spoken at Davos and at Balaji Srinivasan’s event Network State, to great acclaim.
</p>
</div>
</div>
</section>
</div>
<style>
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

52
templates/partials/media/hero.html
View File

@@ -1,52 +0,0 @@
<section class="flex items-center justify-center isolate overflow-hidden h-auto lg:h-screen">
<div class="mt-10 lg:mt-1 max-w-7xl mx-auto px-6 lg:px-16 flex flex-col-reverse lg:flex-row items-center ">
<!-- Left Content -->
<div class="w-full lg:w-1/2 lg:text-left">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Company Profile</h2>
<p class="mx-auto mt-6 text-pretty text-lg font-medium text-gray-200 fade-in">ThreeFold is a pioneering decentralized Internet project designed to create a more open, secure, and sustainable digital infrastructure. By leveraging a global peer-to-peer network of independent nodes, ThreeFold eliminates reliance on centralized cloud providers, ensuring greater privacy, resilience, and accessibility. This innovative model empowers individuals and organizations to contribute computing, storage, and networking resources to the ThreeFold Grid, forming the foundation for a truly autonomous and resilient
<br><br>We are currently running V3.16, a large-scale proof of concept network and are now preparing for Version 4, a major upgrade to enable our Web4 vision. The ThreeFold Grid is in more than 50 countries with +2000 nodes online providing data, network and cloud resources to users.</p>
</div>
<!-- Right Image -->
<div class="w-full lg:w-1/2 flex justify-center">
<img src="/images/media_kit.png" alt="AIBox Specifications" class="blinking-effect w-full max-w-md lg:max-w-lg h-auto">
</div>
</div>
</section>
<style>
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

99
templates/partials/media/social.html
View File

@@ -1,99 +0,0 @@
<section class="text-white py-12 sm:py-16 lg:pb-20">
<div class="mx-auto max-w-7xl px-4 sm:px-6">
<div class="text-center">
<h2 class="mb-10 fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Social Media & Community</h2>
</div>
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale text-white">
<a target="_blank" href="https://forum.threefold.io/"><img src="/images/discourse_dark.png" class="mx-auto" width="60px" alt="Image"></p>
</div>
<h6 class="text-white mt-4 font-semibold">Forum</h6>
<p class="text-base text-white leading-snug">Ask Questions</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://github.com/threefoldfoundation"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">GitHub | Tech</h6>
<p class="text-base text-white leading-snug">Open-Source Collaboration for Tech Development</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://github.com/threefoldtech"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">GitHub | Foundation</h6>
<p class="text-base text-white leading-snug">Open-source Collaboration for Websites and Online Info</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://x.com/threefold_io"><img src="/images/twitter.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">X | Twitter</h6>
<p class="text-base text-white leading-snug">Connect With Us</p>
</div>
</div>
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale text-white">
<a target="_blank" href="https://t.me/threefoldnews"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></p>
</div>
<h6 class="text-white mt-4 font-semibold">Telegram News</h6>
<p class="text-base text-white leading-snug">Stay Updated</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://t.me/threefold"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">Telegram Main Chat</h6>
<p class="text-base text-white leading-snug">Community Conversation</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://t.me/threefoldfarmers"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">Telegram Farmers Chat</h6>
<p class="text-base text-white leading-snug">Farming Community</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://t.me/threefoldtesting"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">Telegram Grid User Chat</h6>
<p class="text-base text-white leading-snug">Grid User Community</p>
</div>
</div>
<div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale text-white">
<a target="_blank" href="https://www.reddit.com/r/threefold/"><img src="/images/reddit_dark.png" class="mx-auto" width="60px" alt="Image"></p>
</div>
<h6 class="text-white mt-4 font-semibold">Reddit</h6>
<p class="text-base text-white leading-snug">Join In</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://www.youtube.com/@ThreeFoldFoundation"><img src="/images/youtube.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">YouTube</h6>
<p class="text-base text-white leading-snug">Watch Things Unfold</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"><img src="/images/mail_dark.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">E-mail Newsletter</h6>
<p class="text-base text-white leading-snug">Updates in Your Inbox</p>
</div>
<div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
<div class="myscale">
<a target="_blank" href="https://www.linkedin.com/company/threefold-io/"><img src="/images/linkedin_dark.png" class="mx-auto" width="60px" alt="Image"></a>
</div>
<h6 class="text-white mt-4 font-semibold">LinkedIn</h6>
<p class="text-base text-white leading-snug">Let's Network</p>
</div>
</div>
</div>
</section>

24
templates/partials/media/branding.html → templates/shortcodes/branding.html
View File

@@ -1,8 +1,8 @@
<div class="lg:py-24 py-12">
<div class=" mx-auto max-w-7xl px-4 lg:px-8">
<div class="mx-auto text-center max-w-2xl px-4 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Our Brand Assets</h2>
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
<h2 class="mx-auto fade-in">Our Brand Assets</h2>
<p class="my-6 mx-auto max-w-3xl fade-in">
Download our official brand assets and read guidelines for proper usage
</p>
</div>
@@ -11,11 +11,11 @@
<section class="container mx-auto px-6 py-8">
<!-- Title -->
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Logos</h2>
<h2 class="mx-auto fade-in">Logos</h2>
<!-- Black Versions -->
<div>
<h3 class="mt-6 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">White Versions</h3>
<h3 class="fade-in mt-6 mb-2 lg:mb-0">White Versions</h3>
<dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- icon -->
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-4">
@@ -83,7 +83,7 @@
<!-- Black Versions -->
<div>
<h3 class="mt-12 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">Black Versions</h3>
<h3 class="fade-in mt-12 mb-2 lg:mb-0">Black Versions</h3>
<dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- icon -->
<div class="fade-in flex flex-col justify-center items-center bg-white p-4">
@@ -164,7 +164,7 @@
<!-- Color -->
<section class="container mx-auto px-6 py-8">
<!-- Title -->
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Colors</h2>
<h2 class="mx-auto fade-in">Colors</h2>
<div>
@@ -196,13 +196,13 @@
<!-- Typography -->
<section class="container mx-auto px-6 py-8">
<!-- Title -->
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Typography</h2>
<h2 class="mx-auto fade-in">Typography</h2>
<!-- Regular -->
<div class="my-8">
<p class="text-white text-lg font-normal">Inter Regular White</p>
<p class="text-lg font-normal">Inter Regular White</p>
<p class="text-gray-200">AaBbCc</p>
<div class="bg-white/5 p-4 rounded-lg mt-2">
<p class="mt-2 text gray-200 text-2xl font-normal">ThreeFold is the Infrastructure Layer of Web4</p></div>
@@ -210,7 +210,7 @@
<!-- Bold -->
<div class="my-8">
<p class="text-white text-lg font-bold">Inter Bold White</p>
<p class="text-lg font-bold">Inter Bold White</p>
<p class="text-gray-200">AaBbCc</p>
<div class="bg-white/5 p-4 rounded-lg mt-2">
<p class="mt-2 text gray-200 text-2xl font-bold">ThreeFold is the Infrastructure Layer of Web4</p>
@@ -219,7 +219,7 @@
<!-- Italic -->
<div class="my-8" style="font-style: italic">
<p class="text-white text-lg font-light italic">Inter Italic White</p>
<p class="text-lg font-light italic">Inter Italic White</p>
<p class="text-gray-200">AaBbCc</p>
<div class="bg-white/5 p-4 rounded-lg mt-2">
<p class="mt-2 text gray-200 text-2xl font-light italic">ThreeFold is the Infrastructure Layer of Web4</p>
@@ -236,9 +236,9 @@
<div class="px-4 lg:px-8">
<div class="mx-auto max-w-7xl">
<h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Guidelines</h2>
<h2 class="mx-auto fade-in">Guidelines</h2>
<div class="max-w-5xl">
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">When referring to ThreeFold in any written material, always use the correct capitalization: ThreeFold (with a capital "T" and "F").
<p class="fade-in mt-6 text-gray-200">When referring to ThreeFold in any written material, always use the correct capitalization: ThreeFold (with a capital "T" and "F").
<br>
Correct: ThreeFold
<br>

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>

10
templates/partials/media/milestones.html → templates/shortcodes/milestones.html
View File

@@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-4 sm:px-6">
<div class="">
{# <p class="text-sm font-bold uppercase tracking-widest text-gray-200">How It Works</p> #}
<h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Key Milestones & Stats</h2>
<h2 class="fade-in">Key Milestones & Stats</h2>
{# <p class="mx-auto mt-4 max-w-2xl text-lg font-normal text-gray-200 lg:text-xl lg:leading-8">
Create your own blog with us and launch it with just 4 easy steps
</p> #}
@@ -23,7 +23,7 @@
class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
Phase I
</h3>
<div class="p-6 rounded-2xl bg-white/5">
<div class="p-6 rounded-2xl mt-4 bg-white/5">
<ul class="pl-3 text-base text-gray-200">
<li>Creation of Core Technology</li>
<li>10+ years of development</li>
@@ -48,7 +48,7 @@
class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
Phase II
</h3>
<div class="p-6 rounded-2xl bg-white/5">
<div class="p-6 rounded-2xl mt-4 bg-white/5">
<ul class="pl-3 text-base text-gray-200">
<li>Global Proof Of Concept</li>
<li>Open Source Development</li>
@@ -60,7 +60,7 @@
<li>Commitments from wonderful projects to build on top of us.</li>
</ul>
</div>
<div class="p-6 mt-6 rounded-2xl bg-white/5">
<div class="p-6 mt-4 rounded-2xl bg-white/5">
<h3 class="text-lg font-medium my-2 text-gray-200 before:block before:font-mono before:text-sm ">Status System Component</h3>
<ul class="list-none pl-3 text-base text-gray-200">
@@ -98,7 +98,7 @@
class="text-xl font-bold text-white before:mb-2 before:block before:font-mono before:text-sm ">
Current Phase - 2025
</h3>
<div class="p-4 rounded-2xl bg-white/5">
<div class="p-6 rounded-2xl mt-4 bg-white/5">
<h3 class="text-lg font-medium mb-1 text-gray-200 before:block before:font-mono before:text-sm ">Q1 & Q2:</h3>
<ul class="pl-3 text-base text-gray-200">
<li>Introduce 3Phone & 3Router.</li>

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>