Added FAQ Page Implementation for Improved User Support

frontend/src/App.jsx

@@ -26,6 +26,7 @@ import AboutUs from "./Pages/AboutUs";
 import Error from "./Pages/Error";
 import PrivacyPolicy from "./Pages/PrivacyPolicy"; // Added back from one version
 import User from "./Pages/User"; // Added from the other version
+import Faq from './Pages/Faq';
 
 function App() {
   return (
@@ -54,6 +55,7 @@ function App() {
           <Route path="/emergency" element={<Emergency />} />
           <Route path="/help-and-support" element={<HelpAndSupport />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />{" "}
+          <Route path="/FAQ" element={<Faq />} />
           {/* Restored PrivacyPolicy */}
           <Route path="/user" element={<User />} /> {/* Added User */}
           <Route path="*" element={<Error />} />

frontend/src/Pages/Faq.css

@@ -0,0 +1,78 @@
+/* Background styling */
+.faq-section {
+    background-color: #F3F4F6;
+    padding: 2rem;
+  }
+
+  /* Heading styling */
+  .faq-main-heading {
+    font-size: 2.5rem;
+    color: #1a73e8;
+    text-align: center;
+    margin-bottom: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  /* Container styling */
+  .faq-container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  /* FAQ item styling */
+  .faq-item {
+    background-color: white;
+    margin: 1.5rem 0;
+    padding: 1.5rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    cursor: pointer;
+  }
+
+  .faq-item:hover {
+    transform: translateY(-5px);
+  }
+
+  .faq-question {
+    font-size: 1.5rem;
+    color: #1a73e8; /* Blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .faq-answer {
+    font-size: 1.1rem;
+    color: black;
+    margin-top: 1rem;
+    line-height: 1.6;
+    padding-left: 1rem;
+    border-left: 3px solid #1a73e8; /* Accent line for visual appeal */
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Icon styling */
+  .faq-icon {
+    font-size: 1.4rem;
+    color: #1a73e8;
+    transition: transform 0.3s ease;
+  }
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+

frontend/src/Pages/Faq.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom'; 
+import backicon from '../assets/svg/backicon.svg'; 
+import './faq.css';
+
+const Faq = () => {
+  const navigate = useNavigate(); // Initialize the useNavigate hook
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const faqData = [
+    {
+      question: "How can I book a station guide service?",
+      answer: "To book a station guide service, navigate to the 'Booking' page, select the service you need, and follow the steps to confirm your booking.",
+    },
+    {
+      question: "What payment methods are accepted?",
+      answer: "We accept various payment methods, including credit/debit cards, UPI, and popular digital wallets.",
+    },
+    {
+      question: "How can I cancel or modify my booking?",
+      answer: "You can cancel or modify your booking from your account under 'My Bookings'. Select the booking and choose the desired option.",
+    },
+    {
+      question: "Is there a way to contact support?",
+      answer: "Yes, you can contact our support team via the 'Help and Support' page, where we offer chat and email options for assistance.",
+    },
+    {
+      question: "Are there any discounts available?",
+      answer: "Check our 'Offers' section regularly for seasonal discounts and promotional codes.",
+    },
+    {
+      question: "What are the operating hours of the station guide service?",
+      answer: "Our station guide service operates 24/7 to assist you at any time.",
+    },
+    {
+      question: "Can I provide feedback about the service?",
+      answer: "Absolutely! We welcome feedback through the 'Feedback' section on our website.",
+    },
+    {
+      question: "What should I do if I lose my booking confirmation?",
+      answer: "If you lose your booking confirmation, you can retrieve it from your account or contact customer support for assistance.",
+    },
+  ];
+
+  const toggleAnswer = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  const HomeClick = () => {   
+    navigate('/'); // Navigates to the home page
+  };
+
+  return (
+    <div className="faq-section">
+      <button onClick={HomeClick} className='absolute left-0 top-2'>
+        <img src={backicon} alt="Back" className='h-[5vh]' />
+      </button>
+      <h2 className="faq-main-heading">Frequently Asked Questions</h2>
+      <div className="faq-container">
+        {faqData.map((item, index) => (
+          <div key={index} className="faq-item" onClick={() => toggleAnswer(index)}>
+            <div className="faq-question">
+              {item.question}
+              <span className={`faq-icon ${activeIndex === index ? 'rotate' : ''}`}>
+                ▼
+              </span>
+            </div>
+            {activeIndex === index && (
+              <div className="faq-answer">
+                {item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Faq;

frontend/src/Pages/hamburger.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
 import styled, { keyframes } from "styled-components";
 import { FaArrowLeft, FaSearch, FaTimes } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
+import { FaQuestionCircle } from "react-icons/fa";
+
 
 const fadeIn = keyframes`
   from {
@@ -155,6 +157,10 @@ const Hamburger = () => {
   const helpClick = () => {
     navigate("/Help");
   };
+  const FaqClick = () => {
+    navigate("/FAQ");
+  };
+
 
   const aboutClick = () => {
     navigate("/About");

frontend/src/components/navbar.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FaBars, FaTimes, FaUser, FaHandsHelping, FaBell, FaStar, FaCreditCard, FaInfoCircle } from 'react-icons/fa';
+import { FaBars, FaTimes, FaUser, FaHandsHelping, FaBell, FaStar, FaCreditCard, FaInfoCircle, FaQuestionCircle } from 'react-icons/fa';
 import { IoSettings } from "react-icons/io5";
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';  // Import axios
@@ -85,6 +85,11 @@ const Navbar = () => {
     navigate('/about');
     setIsOpen(false);
   };
+
+  const handleFaqClick = () => {
+    navigate('/FAQ');
+    setIsOpen(false);
+  }; 
 
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -199,6 +204,10 @@ const Navbar = () => {
               <IoSettings className="mr-3 text-blue-300" />
               <span className="text-lg">Settings</span>
             </li>
+            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleFaqClick}>
+              <FaQuestionCircle className="mr-3 text-blue-300" />
+              <span className="text-lg">FAQ</span>
+            </li>
           </ul>
         </nav>