faq

templates/partials/home/faq.html

@@ -1,46 +1,74 @@
 <div class="bg-transparent">
     <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
       <div class="mx-auto max-w-4xl divide-y divide-white/10">
-        <h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently asked questions</h2>
+        <h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently Asked Questions</h2>
         <dl class="mt-10 space-y-6 divide-y divide-white/10">
+          
+          <!-- FAQ 1 -->
           <div class="pt-6">
             <dt>
-              <!-- Expand/collapse question button -->
+              <button type="button" class="flex w-full border-transparent items-start justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-0" aria-expanded="false">
-              <button type="button" class="flex w-full items-start justify-between text-left text-white" aria-controls="faq-0" aria-expanded="false">
+                <span class="text-base font-semibold">Is this a separate new Internet?</span>
-                <span class="text-base/7 font-semibold">What&#039;s the best thing about Switzerland?</span>
                 <span class="ml-6 flex h-7 items-center">
-                  <!--
+                  <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                    Icon when question is collapsed.
-  
-                    Item expanded: "hidden", Item collapsed: ""
-                  -->
-                  <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
                   </svg>
-                  <!--
+                  <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                    Icon when question is expanded.
-  
-                    Item expanded: "", Item collapsed: "hidden"
-                  -->
-                  <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
                   </svg>
                 </span>
               </button>
             </dt>
-            <dd class="mt-2 pr-12" id="faq-0">
+            <dd class="mt-2 hidden pr-12 text-white" id="faq-0">
-              <p class="text-base/7 text-gray-300">I don&#039;t know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
+              <p class="text-base">No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.</p>
+            </dd>
+          </div>
+          
+          <!-- FAQ 2 -->
+          <div class="pt-6">
+            <dt>
+              <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-1" aria-expanded="false">
+                <span class="text-base font-semibold">Why do we need a new Internet?</span>
+                <span class="ml-6 flex h-7 items-center">
+                  <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+                  </svg>
+                  <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
+                  </svg>
+                </span>
+              </button>
+            </dt>
+            <dd class="mt-2 hidden pr-12 text-white" id="faq-1">
+              <p class="text-base">The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.</p>
+            </dd>
+          </div>
+          
+          <!-- FAQ 3 -->
+          <div class="pt-6">
+            <dt>
+              <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-2" aria-expanded="false">
+                <span class="text-base font-semibold">This seems too big to be true. Is this real?</span>
+                <span class="ml-6 flex h-7 items-center">
+                  <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+                  </svg>
+                  <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
+                  </svg>
+                </span>
+              </button>
+            </dt>
+            <dd class="mt-2 hidden pr-12 text-white" id="faq-2">
+              <p class="text-base">For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.</p>
             </dd>
           </div>
-  
-          <!-- More questions... -->
         </dl>
       </div>
     </div>
   </div>
   
   <script>
-    // Select all buttons controlling the dropdowns
     document.querySelectorAll('button[aria-controls]').forEach(button => {
       button.addEventListener('click', () => {
         const isExpanded = button.getAttribute('aria-expanded') === 'true';
@@ -50,15 +78,11 @@
         // Toggle the "aria-expanded" attribute
         button.setAttribute('aria-expanded', !isExpanded);
   
-        // Show or hide the associated content
+        // Toggle visibility of content
-        if (isExpanded) {
+        content.classList.toggle('hidden', isExpanded);
-          content.style.display = 'none';
-        } else {
-          content.style.display = 'block';
-        }
   
         // Toggle the visibility of icons
-        const [iconExpand, iconCollapse] = button.querySelectorAll('[data-slot="icon"]');
+        const [iconExpand, iconCollapse] = button.querySelectorAll('[data-slot]');
         iconExpand.classList.toggle('hidden', isExpanded);
         iconCollapse.classList.toggle('hidden', !isExpanded);
       });