update home

templates/shortcodes/animated_header.html

@@ -0,0 +1,71 @@
+{% set header = header | default(value="") %}
+
+<div class="max-w-3xl">
+    <h2 id="typing-text" class="mx-auto fade-in">
+    </h2>
+</div>        
+     
+  <style>
+    /* Fade-in animation for the grid items */
+    .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 2.2s 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>
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const text = "Take Control of Your AI Future";
+        const textElement = document.getElementById("typing-text");
+        let loopCount = 0;
+        const maxLoops = 1;
+  
+        function typeText(i, callback) {
+            if (i < text.length) {
+                textElement.textContent += text.charAt(i);
+                setTimeout(() => typeText(i + 1), 100);
+            } else {
+                setTimeout(callback, 2000);
+            }
+        }
+  
+
+
+  
+        function loopTyping() {
+            if (loopCount < maxLoops) {
+                typeText(0, () => {
+                    deleteText(() => {
+                        loopCount++;
+                        loopTyping();
+                    });
+                });
+            } else {
+                typeText(0, () => {}); // Final typing with no delete
+            }
+        }
+  
+        loopTyping();
+    });
+  </script>
+