created faq section

src/App.js

@@ -25,7 +25,7 @@ import { ThemeProvider } from "./context/ThemeContext";
 import { Toaster } from "react-hot-toast";
 import ProtectedRoute from "./components/ProtectedRoute";
 import NotFoundPage from "./components/Error404";
-
+import FAQ from "./components/FAQ"; // Importing the FAQ component
 import ScrollButton from "./components/ScrollButton"; // Import the ScrollButton
 
 function BackgroundWrapper({ children }) {
@@ -53,7 +53,7 @@ export default function App() {
             <Navbar />
             <Routes>
               <Route path="/" element={<Home />} />
-              <Route path="/login" element={<Login />} />
+              <Route path="/login" element={<Login />} /> <Route path="/FAQ" element={<FAQ />} />
               <Route path="/register" element={<Register />} />
               <Route
                 path="/dashboard"

src/components/FAQ.css

@@ -0,0 +1,50 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    background-color: #f0f0f0; 
+}
+
+.faq-section {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #c5ade9; 
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s; 
+}
+
+.faq-section:hover {
+    background-color: #b69cd9; /* Darker purple when hovering over the entire section */
+}
+
+.faq-item {
+    margin-bottom: 15px;
+}
+
+.faq-item h3 {
+    margin: 0;
+    padding: 10px;
+    background-color: #d1c3e0; /* Slightly darker purple for the header */
+    border-radius: 4px;
+    transition: transform 0.3s; /* Smooth transition for scaling effect */
+}
+
+.faq-item h3:hover {
+    transform: scale(1.02); /* Enlarge the header on hover */
+    cursor: pointer; /* Change cursor on hover */
+}
+
+.faq-answer {
+    display: none; /* Hide answers by default */
+    padding: 10px;
+    background-color: #ffffff; 
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    transition: background-color 0.3s; 
+}
+/* Class for active state of answers */
+.faq-answer.active {
+    display: block; /* Show the answer */
+    background-color: #d3c9e6; 
+}

src/components/FAQ.js

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import './FAQ.css'; // Import the FAQ-specific CSS
+
+const FAQ = () => {
+  useEffect(() => {
+    const faqItems = document.querySelectorAll('.faq-item h3');
+    faqItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const answer = item.nextElementSibling;
+        const isActive = answer.classList.contains('active');
+
+        // Hide all answers
+        document.querySelectorAll('.faq-answer').forEach(ans => {
+          ans.classList.remove('active');
+        });
+
+        // Toggle current answer
+        if (!isActive) {
+          answer.classList.add('active');
+        }
+      });
+    });
+  }, []);
+
+  return (
+    <div className="faq-section">
+      <h2>Frequently Asked Questions</h2>
+      <div className="faq-item">
+        <h3>What is a QR code, and how does it work?</h3>
+        <p className="faq-answer">A QR code is a type of matrix barcode that can be scanned using a smartphone camera to access information.</p>
+      </div>
+      <div className="faq-item">
+        <h3>How can I customize a QR code on this website?</h3>
+        <p className="faq-answer">You can customize QR codes by selecting colors, shapes, and adding logos using our tools.</p>
+      </div>
+      <div className="faq-item">
+        <h3>Are the QR codes generated here free to use?</h3>
+        <p className="faq-answer">Yes, all QR codes generated on this website are free to use.</p>
+      </div>
+      <div className="faq-item">
+        <h3>Can I track the performance of my QR code?</h3>
+        <p className="faq-answer">Currently, we do not provide tracking features for QR codes.</p>
+      </div>
+      <div className="faq-item">
+        <h3>Do the QR codes expire?</h3>
+        <p className="faq-answer">No, the QR codes generated do not expire.</p>
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;