ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

update

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-25 12:21:47 +03:00
parent 0c2bee3d96
commit 93de1d2a2b
38 changed files with 106 additions and 2763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/partials/farmer/about1.html
View File

@@ -1,48 +0,0 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
building decentralized internet infrastructure.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage,
and network resources on the ThreeFold Grid—creating a truly decentralized and autonomous internet.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, running on <span class="font-semibold">v3.16.0</span> technology.
</p>
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Visit ThreeFold
</a>
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

41
templates/partials/farmer/about2.html
View File

@@ -1,41 +0,0 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 pt-0 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-5xl text-4xl fade-in">We believe AI Needs to be Decentralized</h2>
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.
</p>
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

61
templates/partials/farmer/cta.html
View File

@@ -1,61 +0,0 @@
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4">
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[5rem] text-[3rem] font-normal tracking-tight text-black fade-in">
Own <br>
Your AI
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register Now
</a>
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
<style>
/* Initial state: elements are invisible */
.fade-in {
opacity: 0;
transition: opacity 1s ease-out;
}
/* State when element is in view */
.fade-in.visible {
opacity: 1;
}
</style>
<script>
// Get all the elements that need to be faded in
document.addEventListener('DOMContentLoaded', function() {
const h2 = document.getElementById("blinking4");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
}, 1000); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add 'visible' class to the element when it's in view
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after it fades in
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is in view
});
fadeInElements.forEach(element => {
observer.observe(element);
});
});
</script>

71
templates/partials/farmer/farmers.html
View File

@@ -1,71 +0,0 @@
<div class="bg-transparent pt-12 pb-12">
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl ">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2>
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
Anyone can deploy AIBOX (servers) from their homes or offices and participate in a decentralized alternative to corporate-owned data centers.
<br>
Starting this summer, farming is evolving. With the launch of the ThreeFold Marketplace, rewards will be based on actual usage. Users will also be able to rent unlisted GPUs directly from the network, unlocking new use cases and making decentralized compute power more accessible than ever.
</p>
</div>
<section class="bg-transparent">
<div class="max-w-6xl mx-0 lg:mx-12 xl:mx-auto">
<div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
1. HOST A BOX
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes an AIBOX.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the AIBOX gets verified, registered and secured on the ThreeFold Blockchain. Farmers can then list their resources on the ThreeFold Marketplace, making them available directly to users.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">Farmers earn rewards when their GPU resources are used through the Marketplace, enabling a fair and transparent peer-to-peer economy.
</p>
<p class="mt-6">
</p>
</dd>
</div>
</div>
</div>
</dl>
</div>
</div>
</section>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
margin-top: 2.5rem;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

133
templates/partials/farmer/grid_stats.html
View File

@@ -1,133 +0,0 @@
<div class="bg-transparent relative isolate overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="items grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- ssd -->
<div class="fade-in flex flex-col justify-center items-center bg-transparent p-3">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- cores -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
<dt class="text-sm/6 font-light text-black">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- Nodes -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
<dt class="text-sm/6 font-light text-black">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- countries -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
<dt class="text-sm/6 font-light text-black">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
</dl>
</div>
</div><div class="mt-12 lg:mt-16 flex flex-col lg:flex-row items-center justify-center gap-x-8">
<a href="https://threefold.io"
target="_blank"
class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
Visit ThreeFold</a>
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in text-base font-semibold text-black hover:text-gray-800 lg:mt-0 mt-8">Explore Grid Capacity<span
aria-hidden="true">→</span></a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('ssd', 0, 1910, 0, 2.5).start();
new CountUp('cores', 0, 46934, 0, 2.5).start();
new CountUp('nodes', 0, 1596, 0, 2.5).start();
new CountUp('countries', 0, 40, 0, 2.5).start();
new CountUp('farms', 0, 900, 0, 2.5).start();
});
</script>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
width: 100%;
background-color:white;
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 12px;
visibility: hidden;
background-color: rgb(26 26 26 / 90%);
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: -7px;
top: 0px;
left: 0px;
right: 0px;
/* right: -60px; */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
@media (max-width: 480px) {
.tooltip .tooltiptext {
position: absolute;
z-index: 1;
bottom: -7px !important;
right: 0px !important;
top: 0px !important;
left: 0px !important;
}
}
</style>

69
templates/partials/farmer/hero_section.html
View File

@@ -1,69 +0,0 @@
<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>

55
templates/partials/farmer/show_images.html
View File

@@ -1,55 +0,0 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 pt-12 pb-12">
<div class="mx-auto max-w-7xl text-center">
{# <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2> #}
{# <p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
building decentralized internet infrastructure.
</p> #}
<div class="fade-in-box mb-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
</div>
<div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
</div>
{# <div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Visit ThreeFold
</a>
<a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
</div> #}
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
margin-top: 2.5rem;
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

73
templates/partials/hero/aihero1.html
View File

@@ -1,73 +0,0 @@
<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="/farmers" 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>

60
templates/partials/hero/aihero10.html
View File

@@ -1,60 +0,0 @@
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4">
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in">
Own Your AI. <br>Register
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register Now
</a>
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
<style>
/* Initial state: elements are invisible */
.fade-in {
opacity: 0;
transition: opacity 1s ease-out;
}
/* State when element is in view */
.fade-in.visible {
opacity: 1;
}
</style>
<script>
// Get all the elements that need to be faded in
document.addEventListener('DOMContentLoaded', function() {
const h2 = document.getElementById("blinking4");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
}, 1000); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add 'visible' class to the element when it's in view
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after it fades in
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is in view
});
fadeInElements.forEach(element => {
observer.observe(element);
});
});
</script>

118
templates/partials/hero/aihero2.html
View File

File diff suppressed because one or more lines are too long

122
templates/partials/hero/aihero3.html
View File

@@ -1,122 +0,0 @@
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
<div class="mx-auto max-w-7xl px-6 lg:px-8 lg:pb-10 pb-0">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<div class="text-center">
<h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
</div>
</div>
</div>
</div>
<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
<!-- Item #1 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 text-white group-[.is-active]:bg-emerald-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control </div>
<div class="text-gray-900 font-light">
<br>Execute AI models directly on your dedicated GPU
<br>Decide which models are allowed to run on your AI BOX
<br>Reserve 100% of your GPU resources anytime for your own experimentation
</div>
</div>
</div>
<!-- Item #2 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Rent Out Virtual Machines (CloudSlices)
</div>
<div class="text-gray-900 font-light">
Slice your hardware into a maximum of 8 Virtual Machines
<br>Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription)
<br>Users can connect or disconnect GPUs as needed, with owner permissions
<br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication
<br>Pre-built container images available for quick setup and deployment
<br>Web gateways allow external connections to VM containers
<br>
<br>Planned Q2 2025.
</div>
</div>
</div>
<!-- Item #3 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Mycelium Actors</div>
<div class="text-gray-900 font-light">
Become a host for Mycelium Actors and contribute to the Mycelium network.
<br>Mycelium Actors process jobs and generate rewards for their hosts.
<br>These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...
<br>
<br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
<br>
<br>Planned for Q2 2025.
</div>
</div>
</div>
</div>
<style>
/* Initial state: elements are invisible */
.fade-in {
opacity: 0;
transition: opacity 1s ease-out;
}
/* State when element is in view */
.fade-in.visible {
opacity: 1;
}
</style>
<script>
// Get all the elements that need to be faded in
document.addEventListener('DOMContentLoaded', function() {
const h2 = document.getElementById("blinking");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
}, 1500); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add 'visible' class to the element when it's in view
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after it fades in
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is in view
});
fadeInElements.forEach(element => {
observer.observe(element);
});
});
</script>

32
templates/partials/hero/aihero4.html
View File

@@ -1,32 +0,0 @@
<div class="bg-white pt-12 lg:pt-24 pb-6">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="max-w-3xl">
<h2 class="fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black typing">
Why Decentralized AI Matters...
</h2>
</div>
</div>
</div>
</div>
<style>
@keyframes typing {
from { max-width: 0 }
to { max-width: 100% }
}
@keyframes blink {
50% { border-color: transparent }
}
.typing {
display: inline-block;
overflow: hidden;
white-space: normal; /* Allows wrapping */
border-right: 4px solid black; /* Cursor effect */
animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
max-width: 100%; /* Ensures text expands naturally */
word-break: break-word; /* Allows words to break onto a new line */
}
</style>

53
templates/partials/hero/aihero5.html
View File

@@ -1,53 +0,0 @@
<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
<div class="mx-auto max-w-3xl items-start pb-12">
<p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
</p>
<p id="2" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications...
</p>
<p id="3" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms...
</p>
<p id="4" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips.
</p>
</div>
</div>
<style>
.fade-in-up {
opacity: 0;
transform: translateY(20px);
position: absolute;
transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-up.show {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const paragraphs = document.querySelectorAll(".fade-in-up");
let index = 0;
function showNextParagraph() {
paragraphs.forEach((p, i) => {
p.classList.remove("show");
});
paragraphs[index].classList.add("show");
index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
}
showNextParagraph();
});
</script>

80
templates/partials/hero/aihero6.html
View File

@@ -1,80 +0,0 @@
<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>

82
templates/partials/hero/aihero7.html
View File

@@ -1,82 +0,0 @@
<div class="bg-white py-12 fade-in-box">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8 fade-in-box">
<h3 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h3>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div>
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
{% for plan in section.extra.plans %}
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
<div class="mt-4 flex items-center gap-4">
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
<div class="text-sm text-gray-600">
</div>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.features %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.rewards %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 2.2s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

38
templates/partials/hero/aihero8.html
View File

@@ -1,38 +0,0 @@
<div class="bg-white fade-in lg:pt-24 pt-12 pb-4">
<div aria-hidden="true" class="relative items-center justify-center hidden lg:flex">
<img src="/images/aibox8.jpg" alt="AIBox" class="object-cover w-full md:w-3/4 lg:w-1/2" width="2432" height="1442">
<div class="absolute inset-0 bg-linear-to-t from-white"></div>
</div>
<div class="relative mx-auto mt-4 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center lg:max-w-5xl">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Push the Limits of AI—Your Way.</h2>
<p class="mt-8 fade-i lg:text-3xl text-xl leading-snug font-normal tracking-tight text-gray-900"><span class="font-medium">AIBox</span> is built for those who think beyond limits—whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.</p>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Developers & Hackers</dt>
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Direct GPU programming with ROCm</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Custom containerization support</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900"> Full Linux kernel access</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Next-gen P2P networking</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For AI Researchers</dt>
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Support for popular ML frameworks (PyTorch, TensorFlow)</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Large model training capability (up to 48GB VRAM)</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Distributed training support</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Dataset management tools</dd>
</div>
<div class="border-t border-gray-200 pt-4">
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Tech Enthusiasts</dt>
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Water cooling management interface</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Power consumption monitoring</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Performance benchmarking tools</dd>
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Resource allocation controls</dd>
</div>
</dl>
</div>
</div>

81
templates/partials/hero/aihero9.html
View File

@@ -1,81 +0,0 @@
<div class="bg-white pt-12">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
<h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div>
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
{% for plan in section.extra.plans %}
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
<div class="mt-4 flex items-center gap-4">
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
<div class="text-sm text-gray-600">
</div>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.features %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.rewards %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 2.2s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

45
templates/partials/hero/coming_soon.html
View File

@@ -1,45 +0,0 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">AIBox is Coming Soon</h2>
<h3 class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">
The future of computing is almost here.
</h3>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">Register and stay informed about launch details, setup options, and how to participate.
</p>
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://www.aibox.threefold.io/signup/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-800 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register
</a>
</div>
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

286
templates/partials/hero/faq.html
View File

@@ -1,286 +0,0 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<main class="relative flex flex-col justify-center overflow-hidden">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 pt-12 mt-12 lg:mt-20">
<h1 class="lg:text-5xl text-4xl font-normal tracking-tight text-black">Frequently Asked Questions</h1>
<!-- Accordion component -->
<div class="divide-y divide-white/50 my-10">
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-01"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span style="color: #000;">What is AIBox?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-01"
role="region"
aria-labelledby="faqs-title-01"
class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
AIBox is a self-hosted AI compute solution powered by <a href="https://threefold.io" target="_blank"><span class="font-semibold">ThreeFold</span></a>. It allows users to run AI workloads efficiently, rent out GPU resources, and earn rewards—all without relying on expensive cloud providers.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-02"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-02"
>
<span style="color: #000;">How does AIBox compare to cloud solutions?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-02"
role="region"
aria-labelledby="faqs-title-02"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
AIBox offers a lower total cost of ownership (TCO) compared to cloud GPUs, with potential savings of over 80% in the long run. It also provides full control over computing resources, avoiding unpredictable cloud billing.
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #000;">Can I use AI Box to generate revenue?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-04"
role="region"
aria-labelledby="faqs-title-04"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. Additionally, you can earn INCA token rewards through network participation.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-05"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-05"
>
<span style="color: #000;">What are the main use cases for AIBox?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-05"
role="region"
aria-labelledby="faqs-title-05"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
AIBox is ideal for personal AI tasks and development, team-based shared resources, and commercial applications like AI-as-a-Service, model hosting, and dataset processing.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-06"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-06"
>
<span style="color: #000;">How does AI Box handle cooling and power efficiency?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-06"
role="region"
aria-labelledby="faqs-title-06"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
AI Box is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-07"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #000;">What is the break-even period for AIBox?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-07"
role="region"
aria-labelledby="faqs-title-07"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Depending on usage, AI Box can break even in as little as 3 months when factoring in revenue from GPU rentals and token rewards.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-07"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #000;">How does AIBox integrate with the ThreeFold network?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-07"
role="region"
aria-labelledby="faqs-title-07"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
AIBox leverages ThreeFold’s Mycelium P2P network for decentralized computing, allowing seamless collaboration and participation in a sustainable AI ecosystem.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-07"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span style="color: #000;">Is AIBox suitable for AI startups and businesses?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-07"
role="region"
aria-labelledby="faqs-title-07"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Absolutely! AIBox provides scalable AI compute at a fraction of cloud costs, making it an excellent choice for AI startups and businesses looking to optimize expenses and maintain control over their AI infrastructure.
</p>
</div>
</div>
</div>
</div>
<!-- End: Accordion component -->
</div>
</main>

82
templates/partials/hero/pricing-hero.html
View File

@@ -1,82 +0,0 @@
<div class="bg-white py-12 fade-in-box">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8 fade-in-box">
<h3 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h3>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div>
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
{% for plan in section.extra.plans %}
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
<div class="mt-4 flex items-center gap-4">
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
<div class="text-sm text-gray-600">
</div>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.features %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.rewards %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 2.2s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>