<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
    <div class="mx-auto max-w-3xl items-start pb-12">
            <p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
                Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
            </p>

            <p id="2" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
                AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications...
            </p>

            <p id="3" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
                By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms...
            </p>

            <p id="4" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
                As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips.
            </p>
    </div>
</div>

<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>
