update home
This commit is contained in:
		| @@ -1,11 +1,11 @@ | |||||||
| <div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4"> | <div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4"> | ||||||
|     <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20"> |     <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20"> | ||||||
|       <h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in"> |       <h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in"> | ||||||
|         Own Your AI.  <br>Pre-Order<br>Now. |         Own Your AI.  <br>Register | ||||||
|       </h2> |       </h2> | ||||||
|       <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start"> |       <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start"> | ||||||
|         <a  href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> |         <a  href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> | ||||||
|           Pre-order Now |           Register Now | ||||||
|         </a> |         </a> | ||||||
|         <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> |         <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> | ||||||
|       </div> |       </div> | ||||||
|   | |||||||
| @@ -1,22 +1,22 @@ | |||||||
| <div class="bg-transparent py-24 mb-10 mt-10"> | <div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4"> | ||||||
|     <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20"> |   <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20"> | ||||||
|       <h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in"> |     <h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in"> | ||||||
|         Own Your AI.  <br>Register<br>Now. |       Own Your AI.  <br>Register | ||||||
|       </h2> |     </h2> | ||||||
|       <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start"> |     <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start"> | ||||||
|         <a  href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm  hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> |       <a  href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> | ||||||
|           Register |         Register Now | ||||||
|         </a> |       </a> | ||||||
|         <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> |       <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> | ||||||
|       </div> |  | ||||||
|       </div> |  | ||||||
|     </div> |     </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
| </div> | </div> | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| <style> | <style> | ||||||
|   /* Initial state: elements are invisible */ | /* Initial state: elements are invisible */ | ||||||
| .fade-in { | .fade-in { | ||||||
| opacity: 0; | opacity: 0; | ||||||
| transition: opacity 1s ease-out; | transition: opacity 1s ease-out; | ||||||
| @@ -30,30 +30,30 @@ opacity: 1; | |||||||
| </style> | </style> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
|   // Get all the elements that need to be faded in | // Get all the elements that need to be faded in | ||||||
|   document.addEventListener('DOMContentLoaded', function() { | document.addEventListener('DOMContentLoaded', function() { | ||||||
|       const h2 = document.getElementById("blinking4"); |     const h2 = document.getElementById("blinking4"); | ||||||
|  |  | ||||||
|       setInterval(() => { |     setInterval(() => { | ||||||
|           h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1"; |         h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1"; | ||||||
|       }, 1000); // Blinks every 2 seconds |     }, 1000); // Blinks every 2 seconds | ||||||
| // Target all elements with the 'fade-in' class | // Target all elements with the 'fade-in' class | ||||||
| const fadeInElements = document.querySelectorAll('.fade-in'); | const fadeInElements = document.querySelectorAll('.fade-in'); | ||||||
|  |  | ||||||
| const observer = new IntersectionObserver((entries, observer) => { | const observer = new IntersectionObserver((entries, observer) => { | ||||||
|   entries.forEach(entry => { | entries.forEach(entry => { | ||||||
|     if (entry.isIntersecting) { |   if (entry.isIntersecting) { | ||||||
|       // Add 'visible' class to the element when it's in view |     // Add 'visible' class to the element when it's in view | ||||||
|       entry.target.classList.add('visible'); |     entry.target.classList.add('visible'); | ||||||
|       observer.unobserve(entry.target); // Stop observing after it fades in |     observer.unobserve(entry.target); // Stop observing after it fades in | ||||||
|     } |   } | ||||||
|   }); | }); | ||||||
| }, { | }, { | ||||||
|   threshold: 0.1 // Trigger when 10% of the element is in view | threshold: 0.1 // Trigger when 10% of the element is in view | ||||||
| }); | }); | ||||||
|  |  | ||||||
| fadeInElements.forEach(element => { | fadeInElements.forEach(element => { | ||||||
|   observer.observe(element); | observer.observe(element); | ||||||
| }); | }); | ||||||
| }); | }); | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user