75 lines
3.9 KiB
HTML
75 lines
3.9 KiB
HTML
<div class="bg-transparent pb-24">
|
||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||
<div class="max-w-7xl lg:max-w-2xl text-left">
|
||
<h2 class="text-xl font-normal tracking-wide text-indigo-600">THREEFOLD DIFFERENCE</h2>
|
||
<p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">A ground-up Approach</p>
|
||
<p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-700">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
|
||
<a href="#" class="text-sm font-semibold text-indigo-700">Learn more <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
<div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
|
||
<!-- Card 1 -->
|
||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/security.png" alt="">
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-light text-indigo-600">SECURITY</h3>
|
||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Unbreakable Data</p>
|
||
<p class="mt-2 text-sm font-light text-gray-600">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/efficiency.png" alt="">
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-light text-indigo-600">EFFICIENCY</h3>
|
||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Autonomous Cloud</p>
|
||
<p class="mt-2 text-sm font-light text-gray-600">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/map.png" alt="">
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-light text-indigo-600">PRIVACY</h3>
|
||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">P2P Network</p>
|
||
<p class="mt-2 text-sm font-light text-gray-600">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 1s forwards;
|
||
}
|
||
|
||
.fade-in:nth-child(1) {
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
.fade-in:nth-child(2) {
|
||
animation-delay: 0.5s;
|
||
}
|
||
|
||
.fade-in:nth-child(3) {
|
||
animation-delay: 0.7s;
|
||
}
|
||
|
||
/* Hover animation */
|
||
.relative:hover {
|
||
transform: scale(1.0);
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
</style>
|