userpage

frontend/src/App.jsx

@@ -23,6 +23,7 @@ import HelpAndSupport from './Pages/HelpandSupport';
 import Emergency from './Pages/Emergency';
 import AboutUs from './Pages/AboutUs';
 import Error from './Pages/Error';
+import User from './Pages/User';
 
 function App() {
 
@@ -51,6 +52,7 @@ function App() {
         <Route path='/help-and-support' element={<HelpAndSupport/>} />
         <Route path='/help-and-support' element={<HelpAndSupport/>} />
         <Route path='*' element={<Error/>} />
+        <Route path='/user' element={<User/>} />  
         {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
 
       </Routes>

frontend/src/Pages/Herosection.jsx

@@ -27,6 +27,9 @@ const Herosection = () => {
     const StationCLick = () => {
         navigate('/Stations'); // Navigates to the login page
     };
+    const UserCLick = () => {
+        navigate('/user'); // Navigates to the login page
+    }
     const NavigationCLick = () => {
         navigate('/Navigation'); // Navigates to the login page
     };
@@ -67,8 +70,7 @@ const Herosection = () => {
             </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>
+            <button type="submit" onClick={UserCLick} 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">User</button>
             </div>
 
             <div className='grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>

frontend/src/Pages/User.jsx

@@ -0,0 +1,61 @@
+import React, { useState , useEffect } from 'react'; 
+import logo from '../assets/stationsaarthi.svg'; // Import your logo 
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg'; // Assuming you have a back icon
+
+
+const User = () => {
+    useEffect(() => {
+        document.title = 'Station Saarthi | UserPage'; 
+      }, []);
+
+    const navigate = useNavigate();
+
+    const RegisterClick = () => {
+        navigate('/Register'); // Navigates to the User page
+    };
+    const LoginClick = () => {
+        navigate('/Login'); // Navigates to the User page
+    };
+
+    const HomeClick = () => {   
+        navigate('/'); // Navigates to the home page
+    };
+
+
+
+    return ( 
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000">
+            {/* Logo and Title */} 
+            <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
+            <div className="mb-10 text-center">
+                <h1 className="mt-4 text-4xl font-bold text-gray-800">Welcome To </h1>
+            </div>
+            <div className="mb-10 text-center">
+                <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto h-22" />
+                <h1 className="mt-4 text-4xl font-bold text-gray-800">Station Saarthi</h1>
+                <p className="mt-2 text-lg text-gray-600">Your Trusted Platform Guide</p>
+            </div>
+
+            <div className='w-full max-w-sm p-8 bg-white rounded-lg shadow-md flex flex-col items-center gap-4'>
+<span> <p className=" text-center text-gray-600">
+                Already have an account?{' '}
+            </p>
+</span>
+            <button type="submit" onClick={LoginClick} className="w-40 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>
+
+            <p className=" text-center text-gray-600">
+                Don't have an account?{' '}
+            </p> 
+            <button type="submit" onClick={RegisterClick} className="w-40 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">Register</button>
+            </div>
+
+
+
+        </div>  
+    ); 
+}; 
+
+export default User;