fix: add accordion to FAQ section (#1695)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: akshatnema <[email protected]>%0ACo-authored-by: Alejandra Quetzalli <[email protected]>%0ACo-authored-by: Ashutosh <[email protected]>%0ACo-authored-by: Lucif3r-in <[email protected]>

components/MDX.js

@@ -62,6 +62,12 @@ export function getMDXComponents() {
     td: props => <td {...props} className={`${props.className || ''} px-6 py-4 border-b border-gray-200 text-sm leading-5 text-gray-700 tracking-tight`} />,
     pre: props => CodeComponent(props.children.props),
     code:  props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
+    details: (props) => 
+      <details {...props} className={`${ props.className || ''} mb-1 font-heading antialiased text-gray-900`}/>,
+    summary: (props) => 
+      <summary {...props} className={`${props.className || ''} my-2 font-heading cursor-pointer antialiased font-semibold text-gray-900`}/>,
+    p: (props) => 
+    <p {...props} className={`${props.className || ''} ml-4 cursor-pointer`}/>,
     hr: props => <hr {...props} className={`${props.className || ''} my-8`} />,
     CodeBlock,
     ChapterSuggestions,

pages/about/index.md

@@ -100,11 +100,47 @@ All the information about the project's economy, the amount of the donations, th
 
 ## FAQs
 
-- **What is the goal of the project?** To make asynchronous APIs as successful and mature as REST APIs.
-- **What protocols does it support?** AsyncAPI is protocol-agnostic, so you can use it for APIs that work over any protocol (e.g., AMQP, MQTT, WebSockets, Kafka, STOMP, HTTP, Mercure, etc). For more information, refer to the [AsyncAPI specification documentation](https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject).
-- **Who are the users of AsyncAPI?** AsyncAPI users are those who implement and maintain event-driven architecture. For example, people that write backend API using WebSocket, or people that maintain communication between their microservices using Kafka.
-- **What is the AsyncAPI Community?** It’s the core of the initiative. The AsyncAPI community contributes to the development of the tool, it promotes access and distribution of the specification allowing freedom of use, study, copying, modification, and redistribution to anyone who wishes to do so. The cooperation between these people in all areas of software production generates a substantial improvement in the quality of the software, as well as greater dissemination and sustainability over time, and prioritizing the benefit of society over any other.
-- **Who can use it?** Anyone. All projects under AsyncAPI Initiative are part of the Linux Foundation, licensed under the Apache 2.0 license. It’s open to use and contribution.
-- **Where can I find more information?**
-    - [Official AsyncAPI Documentation](/docs)
-    - [Presentation by Fran Méndez, explaining the project](https://www.youtube.com/watch?v=UID1nnuFDtM&list=PLbi1gRlP7piitNgvqhIAvGNZM_kvP0r8R)
+<details class="cursor-pointer">
+<summary>What is the goal of the project?</summary>
+
+<p> To make asynchronous APIs as successful and mature as REST APIs.</p>
+
+</details>
+
+<details class="cursor-pointer ">
+<summary>What protocols does it support?</summary>
+
+<p>AsyncAPI is protocol-agnostic, so you can use it for APIs that work over any protocol (e.g., AMQP, MQTT, WebSockets, Kafka, STOMP, HTTP, Mercure, etc). For more information, refer to the [AsyncAPI specification documentation](https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject).
+</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Who are the users of AsyncAPI?</summary>
+
+<p>AsyncAPI users are those who implement and maintain event-driven architecture. For example, people that write backend API using WebSocket, or people that maintain communication between their microservices using Kafka.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>What is the AsyncAPI Community?</summary>
+
+<p>It’s the core of the initiative. The AsyncAPI community contributes to the development of the tool, it promotes access and distribution of the specification allowing freedom of use, study, copying, modification, and redistribution to anyone who wishes to do so. The cooperation between these people in all areas of software production generates a substantial improvement in the quality of the software, as well as greater dissemination and sustainability over time, and prioritizing the benefit of society over any other.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Who can use it?</summary>
+
+<p>Anyone. All projects under AsyncAPI Initiative are part of the Linux Foundation, licensed under the Apache 2.0 license. It’s open to use and contribution.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Where can I find more information?</summary>
+
+&nbsp;[Official AsyncAPI Documentation](/docs)
+
+&nbsp;[Presentation by Fran Méndez, explaining the project](https://www.youtube.com/watch?v=UID1nnuFDtM&list=PLbi1gRlP7piitNgvqhIAvGNZM_kvP0r8R)
+
+</details>