81 lines
3.4 KiB
HTML
81 lines
3.4 KiB
HTML
<div class="fade-in">
|
|
<div class="relative isolate">
|
|
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
|
|
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
|
<!-- Typing Text -->
|
|
<h1 id="typing-text2" class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">
|
|
</h1>
|
|
|
|
<!-- Specification List -->
|
|
<dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
|
|
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Image Section -->
|
|
<div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
|
|
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="AIBox Specifications">
|
|
</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 = "What's Inside AIBox";
|
|
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>
|