From f5bf753e285aed4b09de68eddac78fb3956bfcbb Mon Sep 17 00:00:00 2001
From: Mansi Sharma <yogesh11222211@gmail.com>
Date: Mon, 21 Oct 2024 19:52:41 +0530
Subject: [PATCH] Adde two files faq css and faq js

---
 src/components/FAQ.css | 50 ++++++++++++++++++++++++++++++++++++++++
 src/components/FAQ.js  | 52 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 src/components/FAQ.css
 create mode 100644 src/components/FAQ.js

diff --git a/src/components/FAQ.css b/src/components/FAQ.css
new file mode 100644
index 0000000..40d295a
--- /dev/null
+++ b/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; 
+}
\ No newline at end of file
diff --git a/src/components/FAQ.js b/src/components/FAQ.js
new file mode 100644
index 0000000..6772e0b
--- /dev/null
+++ b/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;