46 lines
2.0 KiB
HTML
46 lines
2.0 KiB
HTML
<div class="relative isolate overflow-hidden bg-transparent">
|
|
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">AIBox is Coming Soon</h2>
|
|
<h3 class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">
|
|
The future of computing is almost here.
|
|
</h3>
|
|
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
|
|
</p>
|
|
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">Register and stay informed about launch details, setup options, and how to participate.
|
|
</p>
|
|
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
|
|
<a href="https://www.aibox.threefold.io/signup/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-800 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
|
Register
|
|
</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 */
|
|
}
|
|
</style>
|