ok

templates/partials/hero/aihero6.html

@@ -0,0 +1,110 @@
+<div class="fade-in">
+    <div class="relative isolate pt-14">
+        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
+            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+                <!-- Typing Text -->
+                <h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
+                
+                <!-- Specification List -->
+                <dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ AMD CPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64 GB Memory</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Integrated mini computer with relay and remote control</dt></div>
+                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
+                </dl>
+            </div>
+            
+            <!-- Image Section -->
+            <div class="fade-in-image mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
+            </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 = "What's Inside AIBox";
+        const textElement = document.getElementById("typing-text2");
+        let loopCount = 0;
+        const maxLoops = 5;
+
+        function typeText(i, callback) {
+            if (i < text.length) {
+                textElement.textContent += text.charAt(i);
+                setTimeout(() => typeText(i + 1, callback), 100);
+            } else {
+                setTimeout(callback, 1000);
+            }
+        }
+
+        function deleteText(callback) {
+            let currentText = textElement.textContent;
+            if (currentText.length > 0) {
+                textElement.textContent = currentText.substring(0, currentText.length - 1);
+                setTimeout(() => deleteText(callback), 50);
+            } else {
+                setTimeout(callback, 100);
+            }
+        }
+
+        function loopTyping() {
+            if (loopCount < maxLoops) {
+                typeText(0, () => {
+                    deleteText(() => {
+                        loopCount++;
+                        loopTyping();
+                    });
+                });
+            } else {
+                typeText(0, () => {}); // Final typing with no delete
+            }
+        }
+
+        /*** Fade-in Items One by One ***/
+        const items = document.querySelectorAll(".fade-in-item");
+        const image = document.querySelector(".fade-in-image");
+        let index = 0;
+
+        function showNextItem() {
+            if (index < items.length) {
+                items[index].classList.add("show");
+                index++;
+                setTimeout(showNextItem, 1000);
+            } else {
+                setTimeout(() => {
+                    items.forEach(item => item.classList.remove("show"));
+                    index = 0;
+                    setTimeout(showNextItem, 1000);
+                }, 5000);
+            }
+        }
+
+        /*** Initialize Everything ***/
+        loopTyping();
+        showNextItem();
+
+        // Fade-in Image after text animations
+        setTimeout(() => image.classList.add("show"), 1000);
+    });
+</script>