<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="lg:mt-10 mt-4 flex items-center gap-x-6"> 
          <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>
  