Merge pull request #120 from rajgharat07/feature/added-faq-section

Feature : Implemented an interactive FAQ section on the homepage for …

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" }}

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;

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 */
+  }

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."
+    }
+  ]
+