<div class="relative isolate overflow-hidden bg-transparent text-black pt-12 pb-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="relative grid lg:grid-cols-12 lg:gap-8">
            <!-- Left Content -->
            <div class="lg:col-span-7">
                <div class="mx-auto max-w-2xl lg:mx-0">
                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">When 3 Becomes 4</h1>
                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
                      The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
                    Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
                    For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
                    </p>
                </div>
            </div>

           <!-- Right Blockquote -->
           <div class="lg:col-span-5">
            <figure class=" mt-6 pl-8">
                <blockquote class=" text-2xl text-black fade-in font-semibold ">
                    <p class="lg:text-2xl text-xl leading-normal text-black font-semibold">We believe actions are more important than words. <br><br>
                        This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
                    </p>
                </blockquote>
                <br> 
                <a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-black hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>                               
            </figure>
        </div>
    </div>
</div>
</div>





<style>
 /* Apply the blinking animation to the link */
 .blinking-effect {
  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
0% {
  opacity: 1;
}
50% {
  opacity: 0.4;
}
100% {
  opacity: 1;
}
}

blockquote {
  border-left-width: 2px;
  padding-left: 1rem;
}

.blockquote::before {
    content: open-quote;
    font-size: 4rem;
    position: absolute;
    top: -1rem;
    left: -1rem;
    color: #ffffff;
}

.inline-flex {
display: flex;
align-items: center;
}

.items-center {
justify-content: center;
}

.gap-2 {
gap: 0.5rem; /* Adjust the gap size as needed */
}

</style>
