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, 5000); // Change paragraph every 5 seconds
 | |
|         }
 | |
|   
 | |
|         showNextParagraph();
 | |
|     });
 | |
| </script>
 |