www_zola_template/templates/shortcodes/tabs.html
2025-08-05 16:03:49 +03:00

165 lines
10 KiB
HTML

<div class="">
<section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-12 lg:py-24 sm:px-2 lg:px-8">
<div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
<div class="max-w-3xl">
<h2 id="features-heading">Technical Specifications</h2>
<p class="mt-4">Dive into the technical details that empower our revolutionary cloud platform, Offering Compute (GPU, CPU), Storage and Network.</p>
</div>
<div class="mt-4">
<div class="-mx-4 flex overflow-x-auto sm:mx-0">
<div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
<div class="-mb-px flex space-x-2 lg:space-x-10" aria-orientation="horizontal" role="tablist">
<!-- Current: "border-indigo-400 text-indigo-400", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
<button id="features-tab-1" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-1" role="tab" type="button">3Nodes</button>
<button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-2" role="tab" type="button">Zero-OS</button>
<button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-3" role="tab" type="button">Mycelium</button>
<button id="features-tab-4" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-4" role="tab" type="button">QSS</button>
</div>
</div>
</div>
<div id="features-panel-1" class="space-y-6 pt-4" aria-labelledby="features-tab-1" role="tabpanel" tabindex="0">
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
<div class="mt-6 lg:col-span-7 lg:mt-0">
<h3 class="">3Nodes</h3>
<p class="mt-2 ">3Nodes are the hardware building blocks of our stack and are installed in data centres, offices or homes.
</p>
<dl class="mt-6 space-y-4">
<div>
<h5 class="text-lg mb-0">&#8226; Plug & Play</h5>
<p class="text-base">Simply connect your certified node to the internet.</p>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Peer-to-peer</h5>
<p class="text-base">Consumes up to 10x less energy for certain workloads.</p>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Scalable</h5>
<p class="text-base">Nodes can be deployed on any level providing unlimited scalability.</p>
</div>
</dl>
</div>
<div class="lg:col-span-5">
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
<img src="/technology/img/3node.png" alt="Maple organizer base with slots, supporting white polycarbonate trays of various sizes." class="object-cover object-center">
</div> #}
</div>
</div>
</div>
<div id="features-panel-2" class="space-y-6 pt-4" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
<div class="mt-6 lg:col-span-7 lg:mt-0">
<h3>Zero-OS</h3>
<p class="mt-2 text-base text-gray-50">Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more sovereign manner, without compromising on security, control, and monitoring.</p>
<dl class="mt-6 space-y-4">
<div>
<h5 class="text-lg mb-0">&#8226; CORE-0</h5>
<p class="mt-2 text-base text-gray-100">First process launched on the Zero-OS. This process kicks off all activities on the node and allows the full OS to be booted over the network maintening full integrity and hacking surfaces </p>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Hardware Support</h5>
<p class="mt-2 text-base text-gray-100">Support for INTEL, AMD or ARM Based CPUs. Support any amount of GPU/CPU/Memory</p>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Kernel</h5>
<p class="mt-2 text-base text-gray-100">Zero-OS uses the well known Linux Kernel because it has device drivers for almost any hardware that exists.</p>
</div>
</dl>
</div>
<div class="lg:col-span-5">
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
<img src="/technology/img/zos.png" alt="" class="object-cover object-center">
</div> #}
</div>
</div>
</div>
<div id="features-panel-3" class="space-y-6 pt-4" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
<div class="mt-6 lg:col-span-7 lg:mt-0">
<h3>Mycelium</h3>
<p class="mt-2 text-base text-gray-50">
Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.
</p>
<dl class="mt-6 space-y-4">
<div>
<h5 class="text-lg mb-0">&#8226; Shortest Path Route</h5>
<dd class="mt-2 text-base text-gray-100">Mycelium optimizes data transmission by identifying and utilizing the fastest and most direct routes.</dd>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; End-to-End Encrypted</h5>
<dd class="mt-2 text-base text-gray-100">All data is secured with end-to-end encryption, ensuring protection against interception.</dd>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Ultra Compatible</h5>
<dd class="mt-2 text-base text-gray-100">Mycelium seamlessly integrates with any existing internet connection, including peer-to-peer networks.</dd>
</div>
</dl>
</div>
<div class="lg:col-span-5">
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
<img src="/technology/img/mycelium.png" alt="" class="object-cover object-center">
</div> #}
</div>
</div>
</div>
<div id="features-panel-4" class="space-y-6 pt-4" aria-labelledby="features-tab-4" role="tabpanel" tabindex="0">
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
<div class="mt-6 lg:col-span-7 lg:mt-0">
<h3>QSS</h3>
<p class="mt-2 text-base text-gray-100">A decentralized, globally distributed data storage system that is up to 10 times more efficient in terms of power and hardware usage. It is highly reliable, ensuring that data cannot be lost or corrupted. Additionally, it is safe, private, and scalable.
</p>
<dl class="mt-6 space-y-4">
<div>
<h5 class="text-lg mb-0">&#8226; Always Consistent</h5>
<dd class="mt-2 text-base text-gray-100">It employs advanced storage algorithms that fragment files into multiple pieces distributed across numerous nodes and sites.</dd>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Self-healing</h5>
<dd class="mt-2 text-base text-gray-100">The storage layer is equipped with automatic data integrity checks that promptly detect and correct any corruption, ensuring continuous data health..</dd>
</div>
<div>
<h5 class="text-lg mb-0">&#8226; Ultra Secure</h5>
<dd class="mt-2 text-base text-gray-100">With its sophisticated encryption and redundancy protocols, data remains secure, protected from loss, and impervious to corruption.</dd>
</div>
</dl>
</div>
<div class="lg:col-span-5">
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
<img src="/technology/img/fungistor.png" alt="Walnut organizer system on black leather desk mat on top of white desk." class="object-cover object-center">
</div> #}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');
tabs.forEach((tab, index) => {
tab.addEventListener('click', function () {
tabs.forEach(t => t.classList.remove('border-indigo-400', 'text-indigo-400'));
panels.forEach(panel => panel.style.display = 'none');
tab.classList.add('border-indigo-400', 'text-indigo-400');
const panelId = tab.getAttribute('aria-controls');
document.getElementById(panelId).style.display = 'block';
});
// Hide all panels except the first one on load
if (index === 0) {
tab.classList.add('border-indigo-400', 'text-indigo-400');
panels[index].style.display = 'block';
} else {
panels[index].style.display = 'none';
}
});
});
</script>