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



   
