add all

templates/partials/hero/aihero1.html

@@ -0,0 +1,73 @@
+<div class="fade-in relative isolate overflow-hidden">
+    <div class="mx-auto max-w-7xl lg:col-span-2 px-6 py-18 lg:flex lg:gap-x-2 lg:px-8 lg:py-24">
+      <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+        <h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
+          Your 
+          <span id="slides" class="slides"></span>
+        </h1>
+        <div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden"> 
+          <a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
+            Learn more <span aria-hidden="true">→</span>
+          </a>
+        </div>
+      </div>
+      <div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
+        <div class="max-w-3xl flex-none lg:max-w-5xl">
+          <img src="/images/aibox6.jpg" alt="App screenshot" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+  document.addEventListener("DOMContentLoaded", function () {
+      const phrases = [
+          "Personal AI Powerhouse.",
+          "Smart GPU, Your Rules.",
+          "True Digital Playground.",
+          "Gateway to AI freedom.",
+          "Personal AIBox." // Final phrase
+      ];
+  
+      let index = 0;
+      const slideElement = document.getElementById("slides");
+      const learnMoreElement = document.getElementById("learn-more");
+  
+      function typeText(text, i, callback) {
+          if (i < text.length) {
+              slideElement.textContent += text.charAt(i);
+              setTimeout(() => typeText(text, i + 1, callback), 100);
+          } else {
+              setTimeout(callback, 500);
+          }
+      }
+  
+      function deleteText(callback) {
+          let text = slideElement.textContent;
+          if (text.length > 0) {
+              slideElement.textContent = text.substring(0, text.length - 1);
+              setTimeout(() => deleteText(callback), 50);
+          } else {
+              setTimeout(callback, 500);
+          }
+      }
+  
+      function cyclePhrases() {
+          if (index < phrases.length - 1) {
+              typeText(phrases[index], 0, () => {
+                  deleteText(() => {
+                      index++;
+                      cyclePhrases();
+                  });
+              });
+          } else {
+              typeText(phrases[index], 0, () => {
+                  learnMoreElement.classList.remove("hidden"); // Show "Learn more"
+              });
+          }
+      }
+  
+      cyclePhrases(); // Start the loop
+  });
+  </script>
+