In this Pr i made all the routes necessary from the landing page , an…

…d i added some codes in the new pages and make half of the buttons navigate to their respective pages.
dhairyagothi · Oct 8, 2024 · bc73ca1 · bc73ca1
1 parent 1193942
commit bc73ca1
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 37 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -6,7 +6,14 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import chatbotsvg from './assets/svg/chatbot.svg';
 import { useNavigate, Outlet } from 'react-router-dom';
 import RailwayStations from './Pages/stations';
+import NavigationPage from './Pages/navigation';
 import './App.css'
+import BookingPage from './Pages/booking';
+import DMapPage from './Pages/3Dmaps';
+import SchedulePage from './Pages/schedule';
+import NotificationPage from './Pages/notification';
+import Contributor from './Pages/contributor';
+
 
 function App() {
 
@@ -18,6 +25,14 @@ function App() {
         <Route path="/Login" element={<LoginPage />} />
         <Route path="/Register" element={<Register />} />
         <Route path='/Stations' element={<RailwayStations/>} />
+        <Route path='/Navigation' element={<NavigationPage/>} />
+        <Route path='/Booking' element={<BookingPage/>} />
+        <Route path='/3DMap' element={<DMapPage/>} />
+        <Route path='/Schedule' element={<SchedulePage/>} />
+        <Route path='/Notification' element={<NotificationPage/>} />
+        <Route path='/contributors' element={<Contributor/>} />
+
+
 
         {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
         <Route element={<ProtectedRoute />}>

diff --git a/frontend/src/Pages/3Dmaps.jsx b/frontend/src/Pages/3Dmaps.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DMapPage = () => {
+  return (
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Making in Progress</div>
+  )
+} 
+
+export default DMapPage;
+
+
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './Herosection.css' ;
+import './Herosection.css';
 import logo from '../assets/stationsaarthi.svg';
 import navigationsvg from '../assets/svg/navigation.svg';
 // import navigation from './navigation';
@@ -26,42 +26,62 @@ const Herosection = () => {
     const StationCLick = () => {
         navigate('/Stations'); // Navigates to the login page
     };
-
+    const NavigationCLick = () => {
+        navigate('/Navigation'); // Navigates to the login page
+    };
+    const BookingCLick = () => {
+        navigate('/Booking'); // Navigates to the login page
+    };
+
     return (
         <>
-
-        <div className='relative z-50 flex items-center justify-between'>
-        <div><HamburgerMenu /></div>
-        </div>
-        <h1 className='pl-4 text-2xl font-extrabold text-center text-white '>Namaste !! Yatree </h1>
-        <div className="relative flex items-center justify-center bg-center bg-cover herosection">
-
-            <div className='relative z-10 grid justify-items-center'>
-                <img src={logo} alt="" srcset="" style={{height:"40vh" }}/>
-                <h1 className='text-xl font-extrabold text-white'>Station Saarthi : Your Platform Guide</h1>
+
+            <div className='relative z-50 flex items-center justify-between'>
+                <div><HamburgerMenu /></div>
             </div>
-            {/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
+            <h1 className='pl-4 text-2xl font-extrabold text-center text-white '>Namaste !! Yatree </h1>
+            <div className="relative flex items-center justify-center bg-center bg-cover herosection">
+
+                <div className='relative z-10 grid justify-items-center'>
+                    <img src={logo} alt="" srcset="" style={{ height: "40vh" }} />
+                    <h1 className='text-xl font-extrabold text-white'>Station Saarthi : Your Platform Guide</h1>
+                </div>
+                {/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
             <img src={bgmobile} alt="" style={{ position: "absolute", bottom: 0, zIndex: "10" }} className="md:hidden" /> */}
-        </div> 
-        <br></br>
-        <div className='flex items-center justify-center'>
-            <button type="submit" onClick={LoginClick} className="w-20 py-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Login</button>
-            <button type="submit" onClick={RegisterClick} className="w-20 py-2 ml-8 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Register</button>
-        </div>
+            </div>
+            <br></br>
+            <div className='flex items-center justify-center'>
+                <button type="submit" onClick={LoginClick} className="w-20 py-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Login</button>
+                <button type="submit" onClick={RegisterClick} className="w-20 py-2 ml-8 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Register</button>
+            </div>
+
+            <div className='grid grid-cols-3 gap-4 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center'>
+                <div type="submit" onClick={NavigationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'>
+                    <img src={navigationsvg} alt="" srcset="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2' />
+                    <button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                        <h1 className='font-bold text-white'>Navigation</h1>
+                    </button>
+                </div>
+                <div type="submit" onClick={BookingCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'>
+                    <img src={bookingsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />
+                    <button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                        <h1 className='font-bold text-white'>Booking</h1>
+                    </button>
+                </div>
+                <div type="submit" onClick={StationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'>
+                    <img src={stationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />
+                    <button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                        <h1 className='font-bold text-white'>Station</h1>
+                    </button>
+                </div>
+                <div type="submit" onClick={StationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={mapsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>3D Map</h1></button></div>
+                <div type="submit" onClick={StationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={schedulesvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /><button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Schedule</h1></button></div>
+                <div type="submit" onClick={StationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={noticationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Notification</h1></button></div>
+
+            </div>
+            <div className='fixed right-0 z-50 flex flex-col items-center justify-center py-8 m-4 my-auto rounded-full cursor-pointer bottom-16'><img src={contributorsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Contributors</h1></div>
+
 
-        <div className='grid grid-cols-3 gap-4 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center'>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={navigationsvg} alt="" srcset="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2' /> <button type="submit" onClick={StationCLick} className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Navigation</h1></button></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={bookingsvg} alt="" srcset="" className= "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /><button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Booking</h1></button></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={stationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />  <h1 className='font-bold text-black'></h1>
-                 <button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >Station</button></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={mapsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>3D Map</h1></button></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={schedulesvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /><button type="submit" onClick={StationCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Schedule</h1></button></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={noticationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <button type="submit" onClick={StationCLick} className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Notification</h1></button></div>
-
-        </div>
-         <div className='fixed right-0 z-50 flex flex-col items-center justify-center py-8 m-4 my-auto rounded-full cursor-pointer bottom-16'><img src={contributorsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Contributors</h1></div>
-
-
         </>
     );
 };

diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const BookingPage = () => {
+  return (
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Website is in Progress</div>
+  )
+} 
+
+export default BookingPage;
+
+
diff --git a/frontend/src/Pages/contributor.jsx b/frontend/src/Pages/contributor.jsx
@@ -1,10 +1,10 @@
 
 import React from 'react'
 
-const contributor = () => {
+const Contributor = () => {
   return (
     <div>contributor</div>
   )
 }
 
-export default contributor
+export default Contributor;
diff --git a/frontend/src/Pages/navigation.jsx b/frontend/src/Pages/navigation.jsx
@@ -1,11 +1,11 @@
 import React from 'react'
 
-const navigation = () => {
+const NavigationPage = () => {
   return (
-    <div>navigation</div>
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Making in Progress</div>
   )
 } 
 
-export default navigation
+export default NavigationPage;
 
 
diff --git a/frontend/src/Pages/notification.jsx b/frontend/src/Pages/notification.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const NotificationPage = () => {
+  return (
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Making in Progress</div>
+  )
+} 
+
+export default NotificationPage;
+
+
diff --git a/frontend/src/Pages/schedule.jsx b/frontend/src/Pages/schedule.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const SchedulePage = () => {
+  return (
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Making in Progress</div>
+  )
+} 
+
+export default SchedulePage;
+
+