edi dark

templates/partials/hero.html

@@ -1,83 +1,39 @@
-<div class="relative bg-white py-24">
-  <div class="mx-auto max-w-7xl">
-    <div class="relative z-10 lg:w-full lg:max-w-2xl">
-      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
-        <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+<div class="relative isolate overflow-hidden bg-transparent">
+  <div class="px-6 pt-32 pb-24 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-4xl text-center">
+      <h2 class="text-balance lg:text-6xl font-normal tracking-tight text-white text-5xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
+      <div class="mt-12 flex items-center justify-center gap-x-6">
+        <a href="#" class="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
+        <a href="#" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
       </div>
-      <div class="relative px-6 lg:px-8 lg:pr-0">
-        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
-          <h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
-          <p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
-          <div class="mt-10 flex items-center gap-x-6 animate-fade-up">
-            <a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
-            <a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
-            <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
-    <img class="aspect-[3/2] lg:mt-0 mt-12 lg:p-10 p-0 w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
-    <div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
-      <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
     </div>
   </div>
 </div>
 
 <style>
-  html, body {
-    margin: 0;
-    height: 100%;
-  }
-
-  /* Background gradient */
-  .bg-gradient-bl {
-    background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
-  }
-
-  /* Fade-up animation for text */
-  @keyframes fadeUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* Fade-in animation for the image (GIF) */
+  /* Define the fade-in animation */
   @keyframes fadeIn {
-    from {
+    0% {
       opacity: 0;
     }
-    to {
+    100% {
       opacity: 1;
     }
   }
 
-  /* Apply fade-up animation to text */
-  .animate-fade-up {
-    animation: fadeUp 1.5s ease-out forwards;
+  /* 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 */
   }
 
-  /* Apply fade-in animation to the GIF */
-  .animate-fade-in {
-    animation: fadeIn 2s ease-out forwards;
+  /* Optional: Delay the animation for a more staggered effect */
+  h2 {
+    animation-delay: 0.5s; /* Delay for header */
   }
 
-  /* Responsive styles for smaller screens */
-  @media (max-width: 640px) {
-    h1 {
-      font-size: 2rem;
-    }
-    p {
-      font-size: 1rem;
-      margin-left: 1rem;
-      margin-right: 1rem;
-      line-height: 1.5;
-    }
+  p {
+    animation-delay: 1s; /* Delay for paragraphs */
   }
 </style>