<div class="fade-in">
    <div class="relative isolate">
        <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
                <!-- Typing Text -->
                <h1 id="typing-text2" class="fade-in 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 lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
                </dl>
            </div>

            <!-- Image Section -->
            <div class="fade-in-image mt-8 lg:mt-24 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="AIBox Specifications">
            </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 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>
