From 0119f8f47c780ce674dde76c9405afee091eadbb Mon Sep 17 00:00:00 2001
From: "use-tusk[bot]" <144006087+use-tusk[bot]@users.noreply.github.com>
Date: Fri, 27 Sep 2024 00:35:57 +0000
Subject: [PATCH] improvement(faqs): center header and allow multiple expanded
 items

---
 bifrost/components/templates/landing/faqs.tsx | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/bifrost/components/templates/landing/faqs.tsx b/bifrost/components/templates/landing/faqs.tsx
index ca90159a6e..ea66cb19a0 100644
--- a/bifrost/components/templates/landing/faqs.tsx
+++ b/bifrost/components/templates/landing/faqs.tsx
@@ -3,32 +3,38 @@ import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 
 export default function Faqs() {
-  const [open, setOpen] = useState(-1);
+  const [openItems, setOpenItems] = useState<number[]>([]);
 
   return (
     <div className="flex flex-col pb-2 w-full md:items-center items-start text-start md:pl-0 w-full">
-      <h2 className="text-[32px] md:text-4xl font-bold md:self-center text-start">
-        Frequently Asked <br /> Questions
+      <h2 className="text-[32px] md:text-4xl font-bold text-center mb-8">
+        Frequently Asked Questions
       </h2>
 
       <div className="flex flex-col md:mt-16 mt-8 items-center gap-4 w-full">
         {FAQS.map((faq, index) => (
           <div
-            onClick={() => setOpen((prev) => (prev === index ? -1 : index))}
+            onClick={() => {
+              setOpenItems((prev) =>
+                prev.includes(index)
+                  ? prev.filter((item) => item !== index)
+                  : [...prev, index]
+              );
+            }}
             key={index}
             className="w-full p-4 border-2 border-sky-100 rounded-xl cursor-pointer"
           >
             <h3 className="text-lg font-bold flex justify-start items-center">
               <ChevronRightIcon
-                className={`mx-[24px] w-10 h-10 ${
-                  open === index ? "rotate-90" : ""
+                className={`mx-[24px] w-10 h-10 transition-transform duration-200 ${
+                  openItems.includes(index) ? "rotate-90" : ""
                 }`}
               />
               <span className="text-gray-500">{faq.question}</span>
             </h3>
             <p
               className={`text-gray-500 ${
-                open === index ? "block mt-2 pl-6" : "hidden"
+                openItems.includes(index) ? "block mt-2 pl-6" : "hidden"
               }`}
             >
               {faq.answer}