Skip to content

Commit

Permalink
Adding back icon in contributors and contact us page
Browse files Browse the repository at this point in the history
  • Loading branch information
@anushkaa-dubey
anushkaa-dubey committed Oct 12, 2024
1 parent 9702c86 commit c47574b
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 52 deletions.
108 changes: 58 additions & 50 deletions frontend/src/Pages/ContactUs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// src/components/ContactUs.jsx

import React from 'react';
import backicon from '../assets/svg/backicon.svg';
import { Navigate, useNavigate } from 'react-router-dom';
import {
FaPhone,
FaEnvelope,
Expand All @@ -11,6 +13,9 @@ import {
import { AiOutlineArrowUp,AiOutlineArrowDown } from 'react-icons/ai';

const ContactUs = () => {
const Navigate = useNavigate();
const HomeClick = () => Navigate ('/');

// Function to scroll to the top of the page
const scrollToTop = () => {
window.scrollTo({
Expand All @@ -26,29 +31,32 @@ const ContactUs = () => {
};

return (
<div className="min-h-screen bg-gray-100 p-6 overflow-y-auto">
<div className="min-h-screen p-6 overflow-y-auto bg-gray-100">
{/* Header Section */}
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-800 mb-2">Contact Us</h1>
<button onClick={HomeClick} className='absolute top-0 left-0'>
<img src={backicon} alt="" className='h-[9vh]' />
</button>
<div className="mb-12 text-center">
<h1 className="mb-2 text-4xl font-bold text-gray-800">Contact Us</h1>
<p className="text-gray-600">Indian Railways</p>
</div>

{/* General Information */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaPhone className="text-blue-500 w-6 h-6 mr-2" />
<FaPhone className="w-6 h-6 mr-2 text-blue-500" />
<h2 className="text-2xl font-semibold text-gray-800">General Information</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-blue-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-blue-500" />
<span className="text-gray-700">
Phone Number: <strong>139</strong> (Railway Enquiry)
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-blue-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-blue-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -60,25 +68,25 @@ const ContactUs = () => {
{/* Emergency Services */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaPhone className="text-red-500 w-6 h-6 mr-2" />
<FaPhone className="w-6 h-6 mr-2 text-red-500" />
<h2 className="text-2xl font-semibold text-gray-800">Emergency Services</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-red-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-red-500" />
<span className="text-gray-700">
Phone Number: <strong>182</strong> (Security & Emergencies)
</span>
</li>
<li className="flex items-center">
<FaPhone className="text-red-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-red-500" />
<span className="text-gray-700">
Phone Number: <strong>138</strong> (Passenger Helpline)
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-red-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-red-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -90,19 +98,19 @@ const ContactUs = () => {
{/* Reservation and Ticketing */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaPhone className="text-green-500 w-6 h-6 mr-2" />
<FaPhone className="w-6 h-6 mr-2 text-green-500" />
<h2 className="text-2xl font-semibold text-gray-800">Reservation and Ticketing</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-green-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-green-500" />
<span className="text-gray-700">
Phone Number: <strong>139</strong> (IRCTC Helpline)
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-green-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-green-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -125,17 +133,17 @@ const ContactUs = () => {
{/* Lost & Found */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaMapMarkerAlt className="text-yellow-500 w-6 h-6 mr-2" />
<FaMapMarkerAlt className="w-6 h-6 mr-2 text-yellow-500" />
<h2 className="text-2xl font-semibold text-gray-800">Lost & Found</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-yellow-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-yellow-500" />
<span className="text-gray-700">Phone Number: <strong>139</strong></span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-yellow-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-yellow-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -147,19 +155,19 @@ const ContactUs = () => {
{/* Grievances and Complaints */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaPhone className="text-purple-500 w-6 h-6 mr-2" />
<FaPhone className="w-6 h-6 mr-2 text-purple-500" />
<h2 className="text-2xl font-semibold text-gray-800">Grievances and Complaints</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-purple-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-purple-500" />
<span className="text-gray-700">
Phone Number: <strong>139</strong> (Complaint Registration)
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-purple-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-purple-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -182,31 +190,31 @@ const ContactUs = () => {
{/* Divisional Railway Manager (DRM) Offices */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaMapMarkerAlt className="text-indigo-500 w-6 h-6 mr-2" />
<FaMapMarkerAlt className="w-6 h-6 mr-2 text-indigo-500" />
<h2 className="text-2xl font-semibold text-gray-800">Divisional Railway Manager (DRM) Offices</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaEnvelope className="text-indigo-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-indigo-500" />
<span className="text-gray-700">
Northern Railway DRM Office: <strong>[email protected]</strong>
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-indigo-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-indigo-500" />
<span className="text-gray-700">
Western Railway DRM Office: <strong>[email protected]</strong>
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-indigo-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-indigo-500" />
<span className="text-gray-700">
Southern Railway DRM Office: <strong>[email protected]</strong>
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-indigo-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-indigo-500" />
<span className="text-gray-700">
Eastern Railway DRM Office: <strong>[email protected]</strong>
</span>
Expand All @@ -218,17 +226,17 @@ const ContactUs = () => {
{/* Railway Police Force (RPF) */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaPhone className="text-gray-700 w-6 h-6 mr-2" />
<FaPhone className="w-6 h-6 mr-2 text-gray-700" />
<h2 className="text-2xl font-semibold text-gray-800">Railway Police Force (RPF)</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaPhone className="text-gray-700 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-gray-700" />
<span className="text-gray-700">Phone Number: <strong>182</strong></span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-gray-700 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-gray-700" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -240,25 +248,25 @@ const ContactUs = () => {
{/* Corporate Office */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaMapMarkerAlt className="text-green-500 w-6 h-6 mr-2" />
<FaMapMarkerAlt className="w-6 h-6 mr-2 text-green-500" />
<h2 className="text-2xl font-semibold text-gray-800">Corporate Office</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaMapMarkerAlt className="text-green-500 w-5 h-5 mr-3" />
<FaMapMarkerAlt className="w-5 h-5 mr-3 text-green-500" />
<span className="text-gray-700">
Address: Indian Railways Corporate Office, New Delhi, India
</span>
</li>
<li className="flex items-center">
<FaPhone className="text-green-500 w-5 h-5 mr-3" />
<FaPhone className="w-5 h-5 mr-3 text-green-500" />
<span className="text-gray-700">
Phone Number: <strong>+91-11-23389184</strong>
</span>
</li>
<li className="flex items-center">
<FaEnvelope className="text-green-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-green-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -270,17 +278,17 @@ const ContactUs = () => {
{/* Stay Connected */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaEnvelope className="text-blue-500 w-6 h-6 mr-2" />
<FaEnvelope className="w-6 h-6 mr-2 text-blue-500" />
<h2 className="text-2xl font-semibold text-gray-800">Stay Connected</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<ul className="flex space-x-6 justify-center">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="flex justify-center space-x-6">
<li>
<a
href="https://twitter.com/RailMinIndia"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-700 transition duration-300"
className="text-blue-500 transition duration-300 hover:text-blue-700"
>
<FaTwitter className="w-8 h-8" />
</a>
Expand All @@ -290,7 +298,7 @@ const ContactUs = () => {
href="https://www.facebook.com/IndianRailways"
target="_blank"
rel="noopener noreferrer"
className="text-blue-700 hover:text-blue-900 transition duration-300"
className="text-blue-700 transition duration-300 hover:text-blue-900"
>
<FaFacebook className="w-8 h-8" />
</a>
Expand All @@ -302,13 +310,13 @@ const ContactUs = () => {
{/* Feedback */}
<section className="mb-8">
<div className="flex items-center mb-4">
<FaEnvelope className="text-pink-500 w-6 h-6 mr-2" />
<FaEnvelope className="w-6 h-6 mr-2 text-pink-500" />
<h2 className="text-2xl font-semibold text-gray-800">Feedback</h2>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="p-6 bg-white rounded-lg shadow-md">
<ul className="space-y-4">
<li className="flex items-center">
<FaEnvelope className="text-pink-500 w-5 h-5 mr-3" />
<FaEnvelope className="w-5 h-5 mr-3 text-pink-500" />
<span className="text-gray-700">
Email: <strong>[email protected]</strong>
</span>
Expand All @@ -331,14 +339,14 @@ const ContactUs = () => {
{/* Back to Top Button */}
<button
onClick={scrollToTop}
className="fixed bottom-36 right-6 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out"
className="fixed p-3 text-white transition duration-300 ease-in-out bg-blue-500 rounded-full shadow-lg bottom-36 right-6 hover:bg-blue-600"
aria-label="Back to Top"
>
<AiOutlineArrowUp className="w-6 h-6" />
</button>
<button
onClick={scrollToBottom}
className="fixed bottom-20 right-6 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out"
className="fixed p-3 text-white transition duration-300 ease-in-out bg-blue-500 rounded-full shadow-lg bottom-20 right-6 hover:bg-blue-600"
aria-label="Back to Top"
>
<AiOutlineArrowDown className="w-6 h-6" />
Expand All @@ -347,4 +355,4 @@ const ContactUs = () => {
);
};

export default ContactUs;
export default ContactUs;
Loading

0 comments on commit c47574b

Please sign in to comment.