From 5e70b89829bd7d7d98f3e0b84155d6bf682bd575 Mon Sep 17 00:00:00 2001
From: rajgharat07 <gharatyashraj@gmail.com>
Date: Tue, 15 Oct 2024 10:34:44 +0530
Subject: [PATCH] Feature : Implemented an interactive FAQ section on the
 homepage for improved user engagement and accessibility.

---
 src/Home.js                |   2 +
 src/Pages/FAQ/FAQ.js       |  49 ++++++++++++++++
 src/Pages/FAQ/faq.css      | 115 +++++++++++++++++++++++++++++++++++++
 src/Pages/FAQ/faqData.json |  27 +++++++++
 4 files changed, 193 insertions(+)
 create mode 100644 src/Pages/FAQ/FAQ.js
 create mode 100644 src/Pages/FAQ/faq.css
 create mode 100644 src/Pages/FAQ/faqData.json

diff --git a/src/Home.js b/src/Home.js
index 2115d32..548c162 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -6,6 +6,7 @@ import twitterIcon from "./images/twitter.svg"
 import youtubeIcon from "./images/youtube.svg"
 import mapsIcon from "./images/maps.svg"
 import Navbar from "./Navbar";
+import FAQ from "./Pages/FAQ/FAQ";
 const Home = () => {
   return (
     <div>
@@ -478,6 +479,7 @@ const Home = () => {
           </section>
         </article>
       </main>
+      <FAQ></FAQ>
       <footer
         className="footer section has-bg-image text-center"
         style={{ position: "relative", overflow: "hidden" }}
diff --git a/src/Pages/FAQ/FAQ.js b/src/Pages/FAQ/FAQ.js
new file mode 100644
index 0000000..bc694b0
--- /dev/null
+++ b/src/Pages/FAQ/FAQ.js
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import faqData from "./faqData.json";
+import './faq.css'; // Import the CSS file
+
+function FAQ() {
+  const [openQuestion, setOpenQuestion] = useState(null);
+
+  const toggleQuestion = (index) => {
+    setOpenQuestion(openQuestion === index ? null : index);
+  };
+
+  return (
+    <section id="faq">
+      <div className="container">
+        <h2>Frequently Asked Questions</h2>
+        <div className="faq-list">
+          {faqData.map((faq, index) => (
+            <div key={index} className="faq-item">
+              <button
+                className="faq-button"
+                onClick={() => toggleQuestion(index)}
+              >
+                <span className="faq-question">{faq.question}</span>
+                <svg
+                  className={`faq-icon ${openQuestion === index ? 'rotate' : ''}`}
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <div
+                className={`faq-answer ${openQuestion === index ? 'open' : ''}`}
+              >
+                <p>{faq.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default FAQ;
diff --git a/src/Pages/FAQ/faq.css b/src/Pages/FAQ/faq.css
new file mode 100644
index 0000000..9ae8418
--- /dev/null
+++ b/src/Pages/FAQ/faq.css
@@ -0,0 +1,115 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap');
+
+#faq {
+  background-color: var(--eerie-black-1);
+  color: var(--white);
+    /* background: linear-gradient(to bottom right, #1f1f1f, #2c2c2c, #1f1f1f); */
+    padding: 3rem 0;
+  }
+  
+  #faq .container {
+    margin: 0 auto;
+    max-width: 1180px;
+    padding: 0 2.8rem;
+    font-family: var(--fontFamily-dm_sans);
+  }
+  
+  #faq h2 {
+    font-family: 'Lora', serif; 
+    font-size: 3rem;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 5rem;
+    text-align: center;
+  }
+  
+  #faq .faq-item {
+    background-color: var(--eerie-black-1);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgb(247, 177, 14);
+    border-radius: 8px;
+    overflow: hidden;
+    transition: border 0.3s ease;
+    margin-bottom: 1.5rem;
+  }
+  
+  #faq .faq-item:hover {
+    border-color: rgb(247, 177, 14);
+  }
+  
+  #faq .faq-button {
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    width: 100%;
+    padding: 1rem 1.25rem;
+    background: none;
+    border: none;
+    text-align: center;
+    cursor: pointer;
+    margin-top: auto;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  #faq .faq-question {
+    font-family: 'Lora', serif; 
+    font-weight: bold;  /* Make question bold */
+    color: #fff;
+    font-size: 2rem;  /* Increase font size */
+    flex-grow: 1;
+    text-align: center;  /* Center the text */
+    margin-top: 10px;
+    transition: color 0.3s ease;
+  }
+  
+  #faq .faq-icon {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 2;
+    margin-left: 1rem;  /* Adds space between text and icon */
+    transition: transform 0.2s ease,stroke 0.3s ease;;
+  }
+  
+  #faq .faq-icon.rotate {
+    transform: rotate(180deg);
+  }
+  
+  #faq .faq-answer {
+    padding: 1rem 1.25rem;
+    background-color: rgba(56, 56, 56, 0.8);
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease, opacity 0.2s ease;
+  }
+  
+  #faq .faq-answer.open {
+    max-height: 180px;
+    opacity: 1;
+  }
+  
+  #faq .faq-answer p {
+    font-family: 'Lora', serif;
+    color: #ccc;
+    font-size: 1.55rem;   /* Adjust answer font size */
+    line-height: 1.5;
+    text-align: center;   /* Center the answer text */
+    font-weight: bold;    /* Make answer bold */
+  }
+  
+  #faq .faq-button:hover {
+    background-color: rgb(222,193,145);  /* Change background color on hover */
+  }
+  #faq .faq-question:hover {
+    background-color: rgb(222,193,145);  /* Change background color on hover */
+  }
+  
+  #faq .faq-button:hover .faq-question {
+    color: black;  /* Change question text color to black on hover */
+  }
+  
+  #faq .faq-button:hover .faq-icon {
+    stroke: black;  /* Change icon color to black on hover */
+  }
\ No newline at end of file
diff --git a/src/Pages/FAQ/faqData.json b/src/Pages/FAQ/faqData.json
new file mode 100644
index 0000000..c38e29e
--- /dev/null
+++ b/src/Pages/FAQ/faqData.json
@@ -0,0 +1,27 @@
+[
+    {
+      "question": "What is 603Work?",
+      "answer": "603 The Coworking Space provides an intuitive booking experience for individuals and businesses seeking inspiring work environments. Choose from modern office interiors designed to boost productivity, or creative studios that foster innovation. Our curated spaces blend style with functionality, ensuring you can focus on bringing your vision to life."
+    },
+    {
+      "question": "How do I get started?",
+      "answer": "To get started, sign up for an account..."
+    },
+    {
+      "question": "How do I contribute to this project?",
+      "answer": "We welcome contributions from the community! You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository. Join our community discussions and help us improve 603Wrok together!"
+    },
+    {
+      "question": "How can I contact support?",
+      "answer": "Our dedicated support team is always ready to assist you. You can reach us through our Contact page, where you'll find options for email support, live chat, and phone assistance. We aim to respond to all inquiries within 24 hours."
+    },
+    {
+      "question": "Where can I find the terms and conditions?",
+      "answer": "Our terms and conditions are easily accessible in the footer section of our website. We encourage all users to review these documents carefully to understand our policies, user agreements, and privacy practices."
+    },
+    {
+      "question": "Is my personal information secure?",
+      "answer": "At 603, we take data security seriously. We employ industry-standard encryption and security measures to protect your personal information. For more details, please refer to our Privacy Policy."
+    }
+  ]
+  
\ No newline at end of file