edit
This commit is contained in:
286
templates/partials/hero/faq.html
Normal file
286
templates/partials/hero/faq.html
Normal file
@@ -0,0 +1,286 @@
|
||||
|
||||
<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"><b>ThreeFold</b></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>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user