update link name
This commit is contained in:
		
							
								
								
									
										69
									
								
								templates/partials/farmer/hero_section.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										69
									
								
								templates/partials/farmer/hero_section.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,69 @@
 | 
			
		||||
<div class="fade-in lg:h-screen flex justify-center items-center">
 | 
			
		||||
  <div class="isolate">
 | 
			
		||||
      <div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
 | 
			
		||||
          
 | 
			
		||||
 | 
			
		||||
          <!-- Image Section -->
 | 
			
		||||
          <div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
 | 
			
		||||
              <img class="h-auto object-cover rounded-xl" src="/images/aibox_farming.png" alt="AIBox Specifications">
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="mx-auto lg:mx-0 lg:flex-auto">
 | 
			
		||||
            <!-- Typing Text -->
 | 
			
		||||
            <h1 id="typing-text2" class="mt-6 fade-in font-normal tracking-tight text-black lg:text-[5rem] text-[2.5rem]">
 | 
			
		||||
            </h1>          
 | 
			
		||||
        </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 = "Own Your AI GPU & Share Capacity";
 | 
			
		||||
      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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user