From 0a260ab0dc356f3762f5ccaf0ce47231e77b19d0 Mon Sep 17 00:00:00 2001 From: SrijaVuppala295 Date: Tue, 5 Nov 2024 18:44:40 +0530 Subject: [PATCH] done --- frontend/src/App.jsx | 3 +- frontend/src/Pages/Faq.css | 77 ++++++++++++++++ frontend/src/Pages/Faq.jsx | 80 ++++++++++++++++ frontend/src/Pages/hamburger.jsx | 4 + frontend/src/components/navbar.jsx | 141 +++++++++++++++-------------- 5 files changed, 238 insertions(+), 67 deletions(-) create mode 100644 frontend/src/Pages/Faq.css create mode 100644 frontend/src/Pages/Faq.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0686b4c..2b60ddb 100644 --- a/frontend/src/App.jsx +++ b/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() { } /> } /> } /> - + } /> } /> } />{" "} {/* Restored PrivacyPolicy */} diff --git a/frontend/src/Pages/Faq.css b/frontend/src/Pages/Faq.css new file mode 100644 index 0000000..468712b --- /dev/null +++ b/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); + } + diff --git a/frontend/src/Pages/Faq.jsx b/frontend/src/Pages/Faq.jsx new file mode 100644 index 0000000..5133de1 --- /dev/null +++ b/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 ( +
+ +

Frequently Asked Questions

+
+ {faqData.map((item, index) => ( +
toggleAnswer(index)}> +
+ {item.question} + + ▼ + +
+ {activeIndex === index && ( +
+ {item.answer} +
+ )} +
+ ))} +
+
+ ); +}; + +export default Faq; diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx index d581f49..f72fa36 100644 --- a/frontend/src/Pages/hamburger.jsx +++ b/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); diff --git a/frontend/src/components/navbar.jsx b/frontend/src/components/navbar.jsx index 9b8e161..8f23d4e 100644 --- a/frontend/src/components/navbar.jsx +++ b/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 = () => { - {/* Sidebar Navigation (Covers 25% on larger screens, full width on mobile) */} -
+{/* Sidebar Navigation */} +
- {/* Close Button inside Sidebar */} -
- -
+ {/* Close Button */} +
+ +
- {/* Sidebar Menu Content */} -
- {/* Profile Section */} - -

Yatree

-

5.0 ★

-
+ {/* Profile Section */} +
+ +

Yatree

+

5.0 ★

+
- {/* Menu Items */} - + {/* Footer */} +
+

© {new Date().getFullYear()} Station Saarthi. All rights reserved.

+ { + navigate('/privacy-policy'); + setIsOpen(false); + }} + className="block mt-2 text-blue-500 hover:underline" + > + Privacy and Policy + + App version 1.0.0.0 +
+
- {/* Footer */} -
-

© {new Date().getFullYear()} Station Saarthi.All rights reserved.

- { - navigate('/privacy-policy'); - setIsOpen(false); - }} - className="block mb-2 text-blue-500 hover:underline" - > - Privacy and Policy - - App version 1.0.0.0 - -
-
{/* Rating Modal */} {isModalOpen && (