Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
  • Loading branch information
@SrijaVuppala295
SrijaVuppala295 committed Nov 5, 2024
1 parent 2fc266e commit 0a260ab
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 67 deletions.
3 changes: 2 additions & 1 deletion frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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 */}
Expand Down
77 changes: 77 additions & 0 deletions frontend/src/Pages/Faq.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}

80 changes: 80 additions & 0 deletions frontend/src/Pages/Faq.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 4 additions & 0 deletions frontend/src/Pages/hamburger.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down
141 changes: 75 additions & 66 deletions frontend/src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -89,6 +89,10 @@ const Navbar = () => {
navigate('/complain');
setIsOpen(false);
}
const handleFaqClick = () => {
navigate('/Faq');
setIsOpen(false);
};

const handleOpenModal = () => {
setIsModalOpen(true);
Expand Down Expand Up @@ -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 && (
Expand Down

0 comments on commit 0a260ab

Please sign in to comment.