main page

templates/partials/home/features.html

@@ -0,0 +1,76 @@
+<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-2xl px-16 pb-12">
+      <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">Why ThreeFold is Leading the Next Gen of Cloud & Network Technology
+      </h2>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
+      <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
+      <a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover Products <span aria-hidden="true">→</span></a>
+    </div>
+    <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
+      <dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
+        <div class="">
+          <dt class="font-medium text-gray-200">Unbreakable Data</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">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.</dd>
+        </div>
+        <div class="pt-4">
+          <dt class="font-medium text-gray-200">Autonomous Cloud</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">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.</dd>
+        </div>
+        <div class="pt-4">
+          <dt class="font-medium text-gray-200">P2P Network</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">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.</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>