61 lines
2.5 KiB
HTML
61 lines
2.5 KiB
HTML
<div class="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 max-w-2xl lg:max-w-none">
|
|
<div class="text-center">
|
|
<h2 class="fade-in text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">WEB 4</h2>
|
|
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">The Next Evolution of the Internet</h2>
|
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Web 4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
|
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3 </p>
|
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
|
|
<a href="121224.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Initialize the countUp for each of the numbers
|
|
new CountUp('capacity', 0, 1910, 0, 2.5).start();
|
|
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
|
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
|
new CountUp('countries', 0, 40, 0, 2.5).start();
|
|
new CountUp('farms', 0, 900, 0, 2.5).start();
|
|
});
|
|
</script>
|
|
|
|
|
|
<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>
|
|
|
|
|