73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
<div class="fade-in relative isolate overflow-hidden">
|
|
<div class="mx-auto max-w-7xl lg:col-span-2 px-6 py-18 lg:flex lg:gap-x-2 lg:px-8 lg:py-24">
|
|
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
|
<h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
|
|
Your
|
|
<span id="slides" class="slides"></span>
|
|
</h1>
|
|
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
|
|
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200">
|
|
Learn more <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
|
|
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
|
<img src="/images/aibox6.jpg" alt="App screenshot" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const phrases = [
|
|
"Personal AI Powerhouse.",
|
|
"Smart GPU, Your Rules.",
|
|
"True Digital Playground.",
|
|
"Gateway to AI freedom.",
|
|
"Personal AIBox." // Final phrase
|
|
];
|
|
|
|
let index = 0;
|
|
const slideElement = document.getElementById("slides");
|
|
const learnMoreElement = document.getElementById("learn-more");
|
|
|
|
function typeText(text, i, callback) {
|
|
if (i < text.length) {
|
|
slideElement.textContent += text.charAt(i);
|
|
setTimeout(() => typeText(text, i + 1, callback), 100);
|
|
} else {
|
|
setTimeout(callback, 500);
|
|
}
|
|
}
|
|
|
|
function deleteText(callback) {
|
|
let text = slideElement.textContent;
|
|
if (text.length > 0) {
|
|
slideElement.textContent = text.substring(0, text.length - 1);
|
|
setTimeout(() => deleteText(callback), 50);
|
|
} else {
|
|
setTimeout(callback, 500);
|
|
}
|
|
}
|
|
|
|
function cyclePhrases() {
|
|
if (index < phrases.length - 1) {
|
|
typeText(phrases[index], 0, () => {
|
|
deleteText(() => {
|
|
index++;
|
|
cyclePhrases();
|
|
});
|
|
});
|
|
} else {
|
|
typeText(phrases[index], 0, () => {
|
|
learnMoreElement.classList.remove("hidden"); // Show "Learn more"
|
|
});
|
|
}
|
|
}
|
|
|
|
cyclePhrases(); // Start the loop
|
|
});
|
|
</script>
|
|
|