84 lines
3.2 KiB
HTML
84 lines
3.2 KiB
HTML
<div class="flex bg-transparent">
|
|
<div class="max-w-2xl p-8 mx-auto text-center">
|
|
<p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
|
We believe actions are more important than words. <br>
|
|
This page is in black & white,
|
|
to let YOU be the color of the future of the internet.
|
|
</p>
|
|
|
|
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
|
Web4
|
|
</h2>
|
|
|
|
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
|
Web4 opens the door for Machines & Humans to create together
|
|
a new form of Intelligence with respect for the Planet & People.
|
|
</p>
|
|
|
|
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
|
Augmented Collective Intelligence
|
|
</h2>
|
|
|
|
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
|
ThreeFold has been working on Web4 for more than 10 years,
|
|
ready to go public <span class="font-semibold">12.12.2024</span>
|
|
</p>
|
|
|
|
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
|
An Internet created by Everyone for Everyone
|
|
</h2>
|
|
|
|
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
|
The Internet is a Trillion USD business.
|
|
We want to make sure this Internet is built and owned by all of us.
|
|
</p>
|
|
|
|
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
|
Register for our online launch event 12-12-2024.
|
|
</p>
|
|
|
|
<h2 class="mt-12 text-balance font-semibold tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
|
When 3 Becomes 4
|
|
</h2>
|
|
<div class="mt-12 flex items-center justify-center gap-x-6">
|
|
<a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base 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">
|
|
12.12.24
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
/* Fade-in animation */
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease-out forwards;
|
|
}
|
|
|
|
/* Fade-in keyframe */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
// JavaScript to add 'visible' class after loading
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const fadeInElements = document.querySelectorAll('.fade-in');
|
|
|
|
fadeInElements.forEach((element, index) => {
|
|
// Adding a delay for each fade-in effect (increasing delay with index)
|
|
setTimeout(() => {
|
|
element.classList.add('visible');
|
|
}, index * 1000); // 1000ms delay between each element
|
|
});
|
|
});
|
|
</script>
|