update

templates/shortcodes/hero_with_image.html

@@ -0,0 +1,72 @@
+{% 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>