From ee6c7b13593812b6786786349f3874f76ae477ac Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 26 Feb 2025 23:31:17 +0800
Subject: [PATCH] edit

---
 templates/index.html                      |   1 +
 templates/partials/hero/aihero7.html      |  43 +---
 templates/partials/hero/faq.html          | 286 ++++++++++++++++++++++
 templates/partials/hero/pricing-hero.html |  43 +---
 4 files changed, 289 insertions(+), 84 deletions(-)
 create mode 100644 templates/partials/hero/faq.html

diff --git a/templates/index.html b/templates/index.html
index f647381..8cec1f9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,5 +7,6 @@
 {% include "partials/hero/aihero5.html" %}
 {% include "partials/hero/aihero6.html" %}
 {% include "partials/hero/aihero9.html" %}
+{% include "partials/hero/faq.html" %}
 {% include "partials/hero/aihero10.html" %}
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/hero/aihero7.html b/templates/partials/hero/aihero7.html
index d9e0b4c..64b018d 100644
--- a/templates/partials/hero/aihero7.html
+++ b/templates/partials/hero/aihero7.html
@@ -1,6 +1,6 @@
 <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">
-        <h2 id="typing-text2" 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>
+        <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>
@@ -80,44 +80,3 @@
     }
 </style>
 
-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 5;
-
-        function typeText(i, callback) {
-            if (i < text.length) {
-                textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
-            } else {
-                setTimeout(callback, 1000);
-            }
-        }
-
-        function deleteText(callback) {
-            let currentText = textElement.textContent;
-            if (currentText.length > 0) {
-                textElement.textContent = currentText.substring(0, currentText.length - 1);
-                setTimeout(() => deleteText(callback), 50);
-            } else {
-                setTimeout(callback, 100);
-            }
-        }
-
-        function loopTyping() {
-            if (loopCount < maxLoops) {
-                typeText(0, () => {
-                    deleteText(() => {
-                        loopCount++;
-                        loopTyping();
-                    });
-                });
-            } else {
-                typeText(0, () => {}); // Final typing with no delete
-            }
-        }
-
-        loopTyping();
-    });
-</script>
diff --git a/templates/partials/hero/faq.html b/templates/partials/hero/faq.html
new file mode 100644
index 0000000..3b34f50
--- /dev/null
+++ b/templates/partials/hero/faq.html
@@ -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>
+
+
+
+   
diff --git a/templates/partials/hero/pricing-hero.html b/templates/partials/hero/pricing-hero.html
index d9e0b4c..64b018d 100644
--- a/templates/partials/hero/pricing-hero.html
+++ b/templates/partials/hero/pricing-hero.html
@@ -1,6 +1,6 @@
 <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">
-        <h2 id="typing-text2" 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>
+        <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>
@@ -80,44 +80,3 @@
     }
 </style>
 
-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 5;
-
-        function typeText(i, callback) {
-            if (i < text.length) {
-                textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
-            } else {
-                setTimeout(callback, 1000);
-            }
-        }
-
-        function deleteText(callback) {
-            let currentText = textElement.textContent;
-            if (currentText.length > 0) {
-                textElement.textContent = currentText.substring(0, currentText.length - 1);
-                setTimeout(() => deleteText(callback), 50);
-            } else {
-                setTimeout(callback, 100);
-            }
-        }
-
-        function loopTyping() {
-            if (loopCount < maxLoops) {
-                typeText(0, () => {
-                    deleteText(() => {
-                        loopCount++;
-                        loopTyping();
-                    });
-                });
-            } else {
-                typeText(0, () => {}); // Final typing with no delete
-            }
-        }
-
-        loopTyping();
-    });
-</script>