FAQs added in NavBar

components/Faq/faq.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import faqsData from '../../config/faq-lists.json';
+
+const FaqPage = () => {
+    const [faqs, setFaqs] = useState(faqsData.faqs);
+
+    const toggleFAQ = (index) => {
+      setFaqs(
+        faqs.map((faq, i) => {
+          if (i === index) {
+            // Toggle the 'open' property
+            return { ...faq, open: !faq.open };
+          } else {
+            return { ...faq, open: false };
+          }
+        })
+      );
+    };
+
+    return (
+      <div className="max-w-md mx-auto mt-10">
+        <h1 className="text-3xl font-semibold mb-6 text-center text-white">Do you have questions ?</h1>
+        <div>
+          {faqs.map((faq, index) => (
+            <div key={index} className="mb-8">
+              <button
+                onClick={() => toggleFAQ(index)}
+                className="flex justify-between items-center w-full py-2 px-4 bg-gray-100 rounded-lg focus:outline-none"
+              >
+                <span className="text-lg font-medium text-black">{faq.question}</span>
+                <span className="text-gray-600">{faq.open ? '-' : '+'}</span>
+              </button>
+              {faq.open && <p className="mt-2 px-4 text-white">{faq.answer}</p>}
+            </div>
+          ))}
+        </div>
+        <h2 className='text-white mt-2 mb-24'>Any other questions? Contact us at asyncapi@gmail.com</h2>
+      </div>
+    );
+  };
+
+  export default FaqPage;

config/faq-lists.json

@@ -0,0 +1,37 @@
+{
+    "faqs": [
+      {
+        "question": "When and where is the event taking place?",
+        "answer": "The event will take place on [date] at [location]."
+      },
+      {
+        "question": "How can I register for the event?",
+        "answer": "You can register for the event by visiting our website and filling out the registration form. Alternatively, you can register in person on the day of the event."
+      },
+      {
+        "question": "Is there a registration fee?",
+        "answer": "Yes, there is a registration fee of [amount]."
+      },
+      {
+        "question": "What is included in the registration fee?",
+        "answer": "The registration fee includes access to all event sessions, workshops, networking opportunities, and meals."
+      },
+      {
+        "question": "Can I cancel my registration?",
+        "answer": "Yes, you can cancel your registration up to [number] days before the event for a full refund. After that, refunds will not be issued."
+      },
+      {
+        "question": "Will there be parking available at the venue?",
+        "answer": "Yes, there will be parking available at the venue. Additional details about parking will be provided closer to the event date."
+      },
+      {
+        "question": "Are there accommodations available for out-of-town attendees?",
+        "answer": "Yes, we have negotiated special rates with nearby hotels for event attendees. Information on how to book accommodations will be provided upon registration."
+      },
+      {
+        "question": "Can I bring a guest to the event?",
+        "answer": "Guests are welcome to attend certain portions of the event, but they must register separately and pay the registration fee."
+      }
+    ]
+  }
+

config/links.json

@@ -28,6 +28,10 @@
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
+	},
+	{
+		"title": "FAQs",
+		"ref": "/faq"
 	}
 ]
 

pages/faq.js

@@ -0,0 +1,8 @@
+// pages/faq.js
+import FaqPage from '../components/Faq/faq';
+
+const Faq = () => {
+  return <FaqPage />;
+};
+
+export default Faq;