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