{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}

<div class="fade-in lg:h-screen flex justify-center items-center">
  <div class="isolate">
      <div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
          

          <!-- Image Section -->
          <div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
              <img class="h-auto object-cover rounded-xl" src="{{ image_src }}" alt="{{ image_alt }}">
          </div>
          <div class="mx-auto lg:mx-0 lg:flex-auto">
            <!-- Typing Text -->
            <h2 id="typing-text2" class="mt-6 fade-in">
            </h2>          
        </div>
      </div>
  </div>
</div>

<!-- Styles -->
<style>
  /* Fade-in for Text & Image */
  .fade-in-item, .fade-in-image {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .fade-in-item.show, .fade-in-image.show {
      opacity: 1;
      transform: translateY(0);
  }
</style>

<!-- Script -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
      /*** Typing Effect ***/
      const text = "Own Your AI GPU & Share Capacity";
      const textElement = document.getElementById("typing-text2");
      let index = 0;

      function typeText() {
          if (index < text.length) {
              textElement.textContent += text.charAt(index);
              index++;
              setTimeout(typeText, 100);
          }
      }

      /*** Fade-in Items One by One ***/
      const items = document.querySelectorAll(".fade-in-item");
      const image = document.querySelector(".fade-in-image");
      let itemIndex = 0;

      function showNextItem() {
          if (itemIndex < items.length) {
              items[itemIndex].classList.add("show");
              itemIndex++;
              setTimeout(showNextItem, 300); // Faster fade-in
          } else {
              image.classList.add("show");
          }
      }

      /*** Initialize Everything ***/
      typeText();
      setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
  });
</script>