www_aibox/templates/partials/hero/faq.html
2025-02-26 23:32:17 +08:00

287 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 ThreeFolds 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>