110 lines
5.3 KiB
HTML
110 lines
5.3 KiB
HTML
<div class="bg-transparent pb-6">
|
|
<div class="mx-auto max-w-7xl px-2 lg:max-w-7xl lg:px-8">
|
|
<div class="mx-auto max-w-2xl px-2 lg:max-w-7xl lg:px-8">
|
|
<h2 class="text-center mx-auto fade-in lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">What Web4 Enables</h2>
|
|
</div>
|
|
<section class="pb-32 bg-transparent">
|
|
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
|
|
<div class="mx-auto max-w-2xl mt-12 lg:max-w-none">
|
|
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Communicate securely
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Store effortlessly
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Securely share and store information with ease, with geo-aware capabilities that optimize data location and access. Scale seamlessly from personal use to billions of users.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Restore authenticity
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Determine which information can be trusted, bringing clarity and confidence back to the digital space.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto max-w-2xl mt-8 lg:max-w-none">
|
|
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Unlock limitless insights
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Streamline your interactions
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
|
<dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white">
|
|
Take control of your digital presence
|
|
</dt>
|
|
<dd class="mt-2 flex flex-auto flex-col">
|
|
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</p>
|
|
<p class="mt-6">
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
{# <div class="mt-12 flex items-center justify-center gap-x-6">
|
|
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
|
|
</div> #}
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Fade-in animation for the grid items */
|
|
.fade-in-box {
|
|
opacity: 0;
|
|
animation: fadeIn 0.6s ease-in-out forwards;
|
|
}
|
|
|
|
/* Fading in each grid item with a slight delay */
|
|
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
|
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
|
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
|
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
|
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
|
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
|
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
|
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
|
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
|
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
|
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
|
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|