<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>
