update home

templates/partials/home/self_healing.html

@@ -0,0 +1,55 @@
+<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <div class="text-center">
+          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">A Self-Healing Web4 Infrastructure</h2>
+          <br>
+          <h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-white">Scalable globally, Green, Unbreakable & Secure.</h2>
+
+          <div class="fade-in relative -mx-4 my-8" aria-hidden="true">
+            <img class="fade-in blinking-effect relative mx-auto" width="80%" src="/images/self_healing.png" alt="">
+        </div>
+
+        {# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
+          <a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
+        </div> #}
+        
+        </div>
+      </div>
+    </div>
+  </div>
+
+<style>
+    /* Define the fade-in 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 */
+    }
+
+      
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+
+  </style>
+  
+