82 lines
4.1 KiB
HTML
82 lines
4.1 KiB
HTML
<div class="bg-transparent">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
|
<div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
|
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
|
|
</h2>
|
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
|
|
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
|
|
<a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</a>
|
|
</div>
|
|
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
|
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Communicate securely</dt>
|
|
<dd class="mt-1 font-light text-gray-300 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Store effortlessly</dt>
|
|
<dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Restore authenticity</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Unlock limitless insights</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Streamline your interactions</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">Take control of your digital presence</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Define the slow blinking 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 */
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply the blinking animation to the link */
|
|
.blinking-effect {
|
|
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
}
|
|
</style> |