54 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<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, 4000); // Change paragraph every 4 seconds
 | 
						|
        }
 | 
						|
  
 | 
						|
        showNextParagraph();
 | 
						|
    });
 | 
						|
</script>
 |