Added FAQ Page Implementation for Improved User Support

frontend/src/App.jsx

@@ -29,6 +29,7 @@ import User from "./Pages/User"; // Added from the other version
 import ComplainBox from "./Pages/ComplainBox";
 import Metadata from "./metadata";
 import SettingsPage from "./Pages/Settings";
+import Faq from './Pages/Faq';
 
 function App() {
   return (
@@ -58,7 +59,7 @@ function App() {
           <Route path="/emergency" element={<Emergency />} />
           <Route path="/help-and-support" element={<HelpAndSupport />} />
           <Route path="/settings" element={<SettingsPage />} />
-
+          <Route path="/Faq" element={<Faq />} />
           <Route path="/complain" element={<ComplainBox/>} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />{" "}
           {/* Restored PrivacyPolicy */}

frontend/src/Pages/Faq.css

@@ -0,0 +1,77 @@
+.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,7 @@ 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 {
@@ -166,6 +167,9 @@ const Hamburger = () => {
   const privacyClick = () => {
     navigate("/PrivacyPolicy"); // Navigate to Privacy and Policy page
   };
+  const FaqClick = () => {
+    navigate("/Faq");
+  };
 
   const [open, setOpen] = useState(false);
   const [showSearch, setShowSearch] = useState(false);

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
@@ -89,6 +89,10 @@ const Navbar = () => {
     navigate('/complain');
     setIsOpen(false);
   }
+  const handleFaqClick = () => {
+    navigate('/Faq');
+    setIsOpen(false);
+  };
 
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -158,76 +162,81 @@ const Navbar = () => {
       </div>
 
 
-      {/* Sidebar Navigation (Covers 25% on larger screens, full width on mobile) */}
-      <div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-[70%] lg:w-1/4`}>
+{/* Sidebar Navigation */}
+<div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-[70%] lg:w-1/4 flex flex-col`}>
 
-        {/* Close Button inside Sidebar */}
-        <div className="flex justify-end p-4">
-          <button onClick={toggleMenu}>
-            <FaTimes className="mr-2 text-3xl text-black" />
-          </button>
-        </div>
+  {/* Close Button */}
+  <div className="flex justify-end p-4">
+    <button onClick={toggleMenu}>
+      <FaTimes className="text-3xl text-black" />
+    </button>
+  </div>
 
-        {/* Sidebar Menu Content */}
-        <div className="flex flex-col items-center p-4 text-white bg-blue-500">
-          {/* Profile Section */}
-          <FaUser className="text-6xl" />
-          <p className="mt-2 text-lg font-semibold">Yatree</p>
-          <p className="text-sm">5.0 ★</p>
-        </div>
+  {/* Profile Section */}
+  <div className="flex flex-col items-center p-6 text-white bg-blue-500">
+    <FaUser className="text-6xl mb-2" />
+    <p className="text-lg font-semibold">Yatree</p>
+    <p className="text-sm">5.0 ★</p>
+  </div>
 
-        {/* Menu Items */}
-        <nav className="mt-4">
-          <ul className="space-y-4">
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handlePaymentClick}>
-              <FaCreditCard className="mr-3 text-blue-300" />
-              <span className="text-lg">Make a Payment</span>
-            </li>
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleHelpAndSupportClick}>
-              <FaHandsHelping className="mr-3 text-blue-300" />
-              <span className="text-lg">Help and Support</span>
-            </li>
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleEmergencyClick}>
-              <FaBell className="mr-3 text-blue-300" />
-              <span className="text-lg">Emergency</span>
-            </li>
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleAboutUsClick}>
-              <FaInfoCircle className="mr-3 text-blue-300" />
-              <span className="text-lg">About Us</span>
-            </li>
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleOpenModal}>
-              <FaStar className="mr-3 text-blue-300" />
-              <span className="text-lg"> Feedback </span>
-            </li>
+  {/* Sidebar Content with Scrollable Area */}
+  <div className="flex-grow overflow-y-auto">
+    <nav className="mt-6">
+      <ul className="space-y-4 px-6">
+        {/* Menu items */}
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handlePaymentClick}>
+          <FaCreditCard className="mr-3 text-blue-300" />
+          <span className="text-lg">Make a Payment</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleHelpAndSupportClick}>
+          <FaHandsHelping className="mr-3 text-blue-300" />
+          <span className="text-lg">Help and Support</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleEmergencyClick}>
+          <FaBell className="mr-3 text-blue-300" />
+          <span className="text-lg">Emergency</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleAboutUsClick}>
+          <FaInfoCircle className="mr-3 text-blue-300" />
+          <span className="text-lg">About Us</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleOpenModal}>
+          <FaStar className="mr-3 text-blue-300" />
+          <span className="text-lg">Feedback</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleOpenComplain}>
+          <FaStar className="mr-3 text-blue-300" />
+          <span className="text-lg">Complain</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleSettingsClick}>
+          <IoSettings className="mr-3 text-blue-300" />
+          <span className="text-lg">Settings</span>
+        </li>
+        <li className="flex items-center text-black cursor-pointer hover:text-white hover:bg-blue-600 p-2 rounded-md" onClick={handleFaqClick}>
+          <FaQuestionCircle className="mr-3 text-blue-300" />
+          <span className="text-lg">FAQ</span>
+        </li>
+      </ul>
+    </nav>
+  </div>
 
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleOpenComplain}>
-              <FaStar className="mr-3 text-blue-300" />
-              <span className="text-lg"> Complain </span>
-            </li>
-            <li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleSettingsClick}>
-              <IoSettings className="mr-3 text-blue-300" />
-              <span className="text-lg">Settings</span>
-            </li>
-          </ul>
-        </nav>
+  {/* Footer */}
+  <div className="p-4 text-sm text-center text-gray-500 bg-white">
+    <p>© {new Date().getFullYear()} Station Saarthi. All rights reserved.</p>
+    <a
+      href="/privacy-policy"
+      onClick={() => {
+        navigate('/privacy-policy');
+        setIsOpen(false);
+      }}
+      className="block mt-2 text-blue-500 hover:underline"
+    >
+      Privacy and Policy
+    </a>
+    <span>App version 1.0.0.0</span>
+  </div>
+</div>
 
-        {/* Footer */}
-        <div className="absolute bottom-0 w-full p-4 text-sm text-center text-gray-500">
-        <p>© {new Date().getFullYear()} Station Saarthi.All rights reserved.</p>
-          <a
-            href="/privacy-policy"
-            onClick={() => {
-              navigate('/privacy-policy');
-              setIsOpen(false);
-            }}
-            className="block mb-2 text-blue-500 hover:underline"
-          >
-            Privacy and Policy
-          </a>
-          App version 1.0.0.0
-
-        </div>
-      </div>
 
       {/* Rating Modal */}
       {isModalOpen && (