finished home

templates/shortcodes/animated_paragraph.html

@@ -0,0 +1,42 @@
+{% set id = id | default(value="") %}
+{% set description = description | default(value="") %}
+
+
+    <p id="{{ id }}" class="mt-0 mb-10 lg:mt-8 fade-in-up text-left lg:text-3xl text-lg leading-snug font-light tracking-tight text-black px-4 lg:px-10">
+        {{ description }}
+    </p>
+    
+
+<style>
+    .fade-in-up {
+        opacity: 0;
+        transform: translateY(20px);
+        position: absolute;
+        transition: opacity 1s ease-out, transform 1s ease-out;
+    }
+
+    .fade-in-up.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+</style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const paragraphs = document.querySelectorAll(".fade-in-up");
+        let index = 0;
+  
+        function showNextParagraph() {
+            paragraphs.forEach((p, i) => {
+                p.classList.remove("show");
+            });
+
+            paragraphs[index].classList.add("show");
+
+            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
+            setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
+        }
+  
+        showNextParagraph();
+    });
+</script>