73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
{% set image_src = image_src | default(value="") %}
|
|
{% set image_alt = image_alt | default(value="") %}
|
|
|
|
<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="{{ image_src }}" alt="{{ image_alt }}">
|
|
</div>
|
|
<div class="mx-auto lg:mx-0 lg:flex-auto">
|
|
<!-- Typing Text -->
|
|
<h2 id="typing-text2" class="mt-6 fade-in">
|
|
</h2>
|
|
</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>
|