58 lines
4.1 KiB
HTML
58 lines
4.1 KiB
HTML
<div class="overflow-hidden lg:py-24 py-12">
|
|
<div class="relative mx-auto max-w-xl px-4 lg:max-w-7xl lg:px-8">
|
|
<div class="mx-auto max-w-2xl px-4 lg:max-w-6xl lg:px-8">
|
|
<h2 class="mx-auto fade-in text-left lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white">Take Action Now</h2>
|
|
<p class="text-left my-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
|
Discover the key products that bring us closer to our vision of the new internet, laying the foundation for a more open, autonomous, and interconnected digital future.</p>
|
|
</div>
|
|
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
|
<!-- Image on the left and text on the right -->
|
|
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
|
<img class="blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
|
</div>
|
|
|
|
<!-- Text on the left -->
|
|
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
|
<div class="gap-y-4">
|
|
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
|
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
|
|
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of storage and infrastructure, providing compute and data resources. Order today.</dd>
|
|
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
|
</div>
|
|
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
|
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
|
|
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphone that comes with built-indecentralized apps that seamlessly integrate with the ThreeFold Grid.</dd>
|
|
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
|
</div>
|
|
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
|
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
|
|
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
|
|
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
|
</div>
|
|
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
|
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
|
|
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption. Unlocked after 10,000 pre-orders.</dd>
|
|
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
|
</div>
|
|
</div>
|
|
</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;
|
|
}
|
|
}
|
|
</style>
|