58 lines
2.4 KiB
HTML
58 lines
2.4 KiB
HTML
<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
|
||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
|
||
<div class="fade-in mx-auto max-w-3xl text-center">
|
||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black sm:text-5xl">Why it Matters?</h2>
|
||
<p class="mt-6 text-lg font-light text-black">
|
||
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
||
<br><br>
|
||
But we won’t stop here.
|
||
<br><br>
|
||
Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4.
|
||
As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
|
||
<br><br>
|
||
<span class="font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage,
|
||
secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
|
||
</p>
|
||
<br>
|
||
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-black sm:text-4xl blinking-effect">12.12.2024</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<style>
|
||
/* 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 */
|
||
}
|
||
|
||
|
||
/* Apply the blinking animation to the link */
|
||
.blinking-effect {
|
||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||
}
|
||
|
||
</style>
|
||
|