From e6e104b7b05425cb0fd99e537f70bdd377a8fb40 Mon Sep 17 00:00:00 2001
From: Sandhya <sandhyas11011@gmail.com>
Date: Sat, 26 Jul 2025 14:39:47 +0530
Subject: [PATCH] added-faq-ui

---
 FAQsSection.jsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 FAQsSection.jsx

diff --git a/FAQsSection.jsx b/FAQsSection.jsx
new file mode 100644
index 0000000..4c7127b
--- /dev/null
+++ b/FAQsSection.jsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import faqs from '../data/faqs.json';
+
+const FAQCard = ({ question, answer }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{
+      margin: '10px 0', padding: '15px',
+      border: '1px solid #ddd', borderRadius: '10px',
+      backgroundColor: '#f9f9f9'
+    }}>
+      <h4>{question}</h4>
+      {open && <p style={{ whiteSpace: 'pre-wrap' }}>{answer}</p>}
+      <button onClick={() => setOpen(!open)} style={{
+        marginTop: '8px',
+        background: '#007bff', color: 'white',
+        border: 'none', padding: '6px 12px', borderRadius: '4px'
+      }}>
+        {open ? 'Hide Answer' : 'Show Answer'}
+      </button>
+    </div>
+  );
+};
+
+const FAQsSection = () => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+      <h2>Frequently Asked Questions</h2>
+      {faqs.slice(0, 5).map((faq, idx) => (
+        <FAQCard key={idx} question={faq.question} answer={faq.answer} />
+      ))}
+    </div>
+  );
+};
+
+export default FAQsSection;