✨ fix: Improved FAQ layout

apps/docs/content/help/faq.mdx

@@ -2,24 +2,13 @@
 title: Frequently Asked Questions
 ---
 import Accordion from "/src/components/Accordion"
+import { FAQ, FAQItem } from "/src/components/Help/Faq"
 
-## General
+<FAQ>
 
-{/* <Accordion title="What is Docusaurus?">
-  Docusaurus is an open-source static site generator that helps you build optimized websites quickly, focusing on documentation sites.
-</Accordion> */}
-
-<details>
-  <summary>1. What is the Zerops GUI URL?</summary>
-  <p>
-  Head straight to <a href="https://app.zerops.io">https://app.zerops.io</a>
-  </p>
-</details>
-
-
-<details>
-  <summary>2. What is the current Zerops pricing?</summary>
-  <p>
-  See <a href="https://zerops.io/#pricing">our pricing</a>.
-  </p>
-</details>
+  <FAQItem>
+    <span>Where can I find the Zerops Dashboard GUI?</span>
+    <span>Head straight to <a href="https://app.zerops.io">app.zerops.io</a></span>
+  </FAQItem>
+
+</FAQ>

apps/docs/src/components/Help/Faq/index.tsx

@@ -0,0 +1,40 @@
+import { ChevronDownMini, ChevronUpMini } from "@medusajs/icons"
+import React, { ReactNode, useState } from "react"
+
+interface FAQ {
+  question: string
+  answer: string | ReactNode
+}
+
+export function FAQItem({ children }: Readonly<{ children: ReactNode[] }>) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const [question, answer] = React.Children.toArray(children)
+
+  return (
+    <div className="border-b border-gray-200 w-full">
+      <button
+        className="flex w-full justify-between items-center text-left bg-transparent border-none"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <span className="text-xl font-medium">{question}</span>
+        {isOpen ? (
+          <ChevronUpMini className="text-gray-500" />
+        ) : (
+          <ChevronDownMini className="text-gray-500" />
+        )}
+      </button>
+      {isOpen && (
+        <div className="px-[0.3rem] py-[0.8rem] text-gray-600" role="region">
+          {answer}
+        </div>
+      )}
+      <hr className="h-[1px] bg-gray-500 opacity-20" />
+    </div>
+  )
+}
+
+export function FAQ({ children }: Readonly<{ children: ReactNode }>) {
+  return <div className="flex flex-col">{children}</div>
+}