Add: Footer Routing and FAQ page

client/src/App.js

@@ -9,6 +9,7 @@ import ExploreProducts from "./pages/ExploreProducts";
 import OpenStore from "./pages/OpenStore";
 import CreateItem from "./pages/CreateItem";
 import ErrorPage from "./components/ErrorPage";
+import FAQ from "./pages/FAQ";
 
 
 // import SingleBlog from "./pages/SingleBlog
@@ -63,6 +64,10 @@ function App() {
             <Route path="shipping-policy" element={<ShippingPolicy />} />
             <Route path="term-conditions" element={<TermAndCondition />} />
 
+            <Route path="contact" element={<Contact />} />
+            <Route path="about" element={<About />} />
+            <Route path="faq" element={<FAQ />} />
+
             <Route path="blog/:id" element={<SingleBlog />} />
 
 

client/src/components/Footer.js

@@ -75,9 +75,9 @@ const Footer = () => {
             <div className="col-3">
               <h4 className="text-dark mb-4">Account</h4>
               <div className="footer-link d-flex flex-column">
-                <Link className="text-dark py-2 mb-1">Contact</Link>
-                <Link className="text-dark py-2 mb-1">About Us</Link>
-                <Link className="text-dark py-2 mb-1">Faq</Link>
+                <Link to="/contact" className="text-dark py-2 mb-1">Contact</Link>
+                <Link to="/about" className="text-dark py-2 mb-1">About Us</Link>
+                <Link to="/faq" className="text-dark py-2 mb-1">Faq</Link>
               </div>
             </div>
             <div className="col-2">

client/src/pages/FAQ.css

@@ -0,0 +1,73 @@
+.faq-container {
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .faq-item {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 10px;
+  }
+
+  .question {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #f5f5f5;
+  }
+
+  .question:hover {
+    background-color: #d7a9eb;
+  }
+
+  .answer {
+    padding: 10px;
+  }
+
+  .open {
+    background-color: #e0e0e0;
+  }
+
+  .feedback-section {
+    margin-top: 20px;
+  }
+
+  /* Add more styles as needed */
+
+.submit-textarea{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    gap: 30px;
+}
+
+.submit-textarea textarea{
+    width: 400px;
+    height: 100px;
+    padding: 10px;
+    resize: none;
+}
+
+.submit-textarea button{
+    border-radius: 20px;
+    background-color: #ccc;
+    border: none;
+    padding: 15px 25px;
+}
+
+.submit-textarea button:hover{
+    border-radius: 20px;
+    background-color: #d7a9eb;
+    border: none;
+    padding: 15px 25px;
+}
+
+
+.leftside img{
+    width: 500px;
+} 

client/src/pages/FAQ.js

@@ -0,0 +1,58 @@
+
+import React, { useState } from 'react';
+import './FAQ.css'; // Create a CSS file for styling
+
+const FAQ = () => {
+  const [isOpen, setIsOpen] = useState(Array(5).fill(false));
+
+  const toggleAccordion = (index) => {
+    setIsOpen((prev) => {
+      const newState = [...prev];
+      newState[index] = !newState[index];
+      return newState;
+    });
+  };
+
+  const questions = [
+    'What is Lorem Ipsum?',
+    'Why do we use it?',
+    'Where does it come from?',
+    'Where can I get some?',
+    'Is it free to use?',
+  ];
+
+  const answers = Array(5).fill(
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  );
+
+  return (
+    <div className="faq-container">
+      <div className="leftside">
+        <img src="https://illustrations.popsy.co/fuchsia/app-launch.svg" alt="illustration" />
+      </div>
+
+      <div className='rightside'>
+      <h2>FAQs</h2>
+      {questions.map((question, index) => (
+        <div key={index} className="faq-item">
+          <div className={`question ${isOpen[index] ? 'open' : ''}`} onClick={() => toggleAccordion(index)}>
+            {question}
+          </div>
+          {isOpen[index] && <div className="answer">{answers[index]}</div>}
+        </div>
+      ))}
+      <div className="feedback-section">
+        <h3>Send Feedback</h3>
+        <div className='submit-textarea'>
+            <textarea
+            placeholder="Type your feedback here..."
+            />
+            <button>Submit</button>
+        </div>
+      </div>
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;