update footer

This commit is contained in:
2024-11-20 16:53:15 +02:00
6 changed files with 101 additions and 18 deletions

View File

Before

Width:  |  Height:  |  Size: 210 KiB

After

Width:  |  Height:  |  Size: 210 KiB

View File

@@ -2,7 +2,7 @@
{% block content %}
{% include "partials/solutions/hero.html" %}
{% include "partials/solutions/whatyoucando.html" %}
{% include "partials/solutions/what.html" %}
{% include "partials/solutions/portfolio.html" %}
{% include "partials/home/cta.html" %}
{% endblock content %}

View File

@@ -31,7 +31,7 @@
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span class="text-xl">Is this a separate new Internet?</span>
<span>Is this a separate new Internet?</span>
<svg class="fill-white 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}" />
@@ -46,7 +46,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg 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 while offering additional capabilities.
</p>
</div>
@@ -78,7 +78,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg font-light">
The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.
</p>
</div>
@@ -110,7 +110,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg font-light">
For over 30 years, weve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.
</p>
</div>
@@ -142,7 +142,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg font-light">
TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid of capacity. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. We are now building generation 4 of the ThreeFold Grid of capacity and we need a new token to build this new generation. There will never be more than 3 billion INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 with a new reward scheme and ready to grow to millions of nodes.
</p>
</div>
@@ -174,7 +174,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg 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>
@@ -206,7 +206,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg font-light">
Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.
</p>
</div>
@@ -238,7 +238,7 @@
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-lg">
<p class="pb-3 text-gray-300 text-lg font-light">
No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.
</p>
</div>

View File

@@ -0,0 +1,82 @@
<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-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="fade-in lg:text-4xl text-base tracking-normal font-medium pt-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>

View File

@@ -10,11 +10,11 @@
<div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
<!-- Team Member -->
<div class="group relative">
<div class="group relative fade-in">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/kristof_de_spiegeleer.jpeg" alt="kristof_de_spiegeleer" class="size-full object-cover">
</div>
<h3 class="mt-4 text-2xl text-white">
<h3 class="mt-4 text-xl font-semibold text-white">
Kristof de Spiegeleer
</h3>
<p class="text-sm text-gray-300">Co-founder & CEO</p>
@@ -23,11 +23,11 @@
</div>
<!-- Team Member -->
<div class="group relative">
<div class="group relative fade-in">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/people/adnan_fatayerji.jpg" alt="adnan_fatayerji" class="size-full object-cover">
</div>
<h3 class="mt-4 text-2xl text-white">
<h3 class="mt-4 text-xl font-semibold text-white">
Adnan Fatayerji
</h3>
<p class="text-sm text-gray-300">Co-founder</p>
@@ -36,11 +36,11 @@
</div>
<!-- Team Member -->
<div class="group relative">
<div class="group relative fade-in">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/people/jan_de_landtsheer.jpeg" alt="jan_de_landtsheer" class="size-full object-cover">
</div>
<h3 class="mt-4 text-2xl text-white">
<h3 class="mt-4 text-xl font-semibold text-white">
Jan De Landtsheer
</h3>
<p class="text-sm text-gray-300">Co-founder & CTO</p>
@@ -49,11 +49,11 @@
</div>
<!-- Team Member -->
<div class="group relative">
<div class="group relative fade-in">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/people/florian_fournier.jpeg" alt="florian_fournier" class="size-full object-cover">
</div>
<h3 class="mt-4 text-2xl text-white">
<h3 class="mt-4 text-xl font-semibold text-white">
Florian Fournier
</h3>
<p class="text-sm text-gray-300">Co-founder & CMO</p>
@@ -62,7 +62,7 @@
</div>
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6">
<div class="mt-8 flex items-center justify-center gap-x-6">
<a href="/people" 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">Meet the Team</a>
</div>
</div>

Submodule www_projectmycelium_io added at cbe5e76842