edit text

templates/partials/hero/aihero7.html

@@ -1,6 +1,6 @@
 <div class="bg-white py-12 fade-in-box">
     <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
-        <h2  class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Pre-order Your AIBox</h2>
+        <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
         <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
         <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
     </div>
@@ -80,3 +80,44 @@
     }
 </style>
 
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const textElement = document.getElementById("typing-text2");
+        let loopCount = 0;
+        const maxLoops = 5;
+
+        function typeText(i, callback) {
+            if (i < text.length) {
+                textElement.textContent += text.charAt(i);
+                setTimeout(() => typeText(i + 1, callback), 100);
+            } else {
+                setTimeout(callback, 1000);
+            }
+        }
+
+        function deleteText(callback) {
+            let currentText = textElement.textContent;
+            if (currentText.length > 0) {
+                textElement.textContent = currentText.substring(0, currentText.length - 1);
+                setTimeout(() => deleteText(callback), 50);
+            } else {
+                setTimeout(callback, 100);
+            }
+        }
+
+        function loopTyping() {
+            if (loopCount < maxLoops) {
+                typeText(0, () => {
+                    deleteText(() => {
+                        loopCount++;
+                        loopTyping();
+                    });
+                });
+            } else {
+                typeText(0, () => {}); // Final typing with no delete
+            }
+        }
+
+        loopTyping();
+    });
+</script>