update home

templates/shortcodes/hero_animation.html

@@ -0,0 +1,84 @@
+{% set title = title | default(value="") %}
+{% set title_part_1 = title_part_1 | default(value="") %}
+{% set title_part_2 = title_part_2 | default(value="") %}
+{% set title_part_3 = title_part_3 | default(value="") %}
+{% set title_part_4 = title_part_4 | default(value="") %}
+{% set title_part_5 = title_part_5 | default(value="") %}
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
+    <div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
+      <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]">
+          {{ title }} 
+          <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="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
+            {{ button_text }} <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="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+  document.addEventListener("DOMContentLoaded", function () {
+      const phrases = [
+          "{{ title_part_1 }}",
+          "{{ title_part_2 }}",
+          "{{ title_part_3 }}",
+          "{{ title_part_4 }}",
+          "{{ title_part_5 }}" // 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>
+