Added booking page

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react' 
 import Herosection from './Pages/Herosection'
 import LoginPage from './Pages/LoginPage';
+import Booking from './Pages/booking';
 import Register from './Pages/Register';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import chatbotsvg from './assets/svg/chatbot.svg';
@@ -16,6 +17,7 @@ function App() {
         <Route path="/" element={<Herosection />} />
         <Route path="/Login" element={<LoginPage />} />
         <Route path="/Register" element={<Register />} />
+        <Route path="/booking" element={<Booking />} />
 
         {/* 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 />}>
@@ -73,4 +75,4 @@ export function ProtectedRoute() {
 
   // If everything is fine, render the protected content
   return <Outlet />;
-}
+}

frontend/src/Pages/Herosection.jsx

@@ -17,7 +17,7 @@ const Herosection = () => {
     const navigate = useNavigate();
 
     const LoginClick = () => {
-        navigate('/Login'); // Navigates to the login page
+        navigate('/login'); // Navigates to the login page
     };
     const RegisterClick = () => {
         navigate('/Register'); // Navigates to the login page
@@ -44,16 +44,37 @@ const Herosection = () => {
             <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 className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><img src={navigationsvg} 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'>Navigation</h1></div>
-                 <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><img src={bookingsvg} 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'>Booking</h1></div>
-                 <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><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'>Station</h1></div>
-                 <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><img src={mapsvg} 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'>3D Map</h1></div>
-                 <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><img src={schedulesvg} 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'>Schedule</h1></div>
-                 <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'><img src={noticationsvg} 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'>Notification</h1></div>
-        </div>
+        // In Herosection.jsx - update only the booking div in the grid section:
+
+<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 rounded-full cursor-pointer my-auto py-8'>
+        <img src={navigationsvg} 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'>Navigation</h1>
+    </div>
+    {/* Only this div is modified to add onClick */}
+    <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8' onClick={() => navigate('/booking')}>
+        <img src={bookingsvg} 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'>Booking</h1>
+    </div>
+    <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'>
+        <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'>Station</h1>
+    </div>
+    <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'>
+        <img src={mapsvg} 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'>3D Map</h1>
+    </div>
+    <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'>
+        <img src={schedulesvg} 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'>Schedule</h1>
+    </div>
+    <div className='flex flex-col items-center justify-center rounded-full cursor-pointer my-auto py-8'>
+        <img src={noticationsvg} 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'>Notification</h1>
+    </div>
+</div>
         </>
     );
 };
 
-export default Herosection;
+export default Herosection;

frontend/src/Pages/Register.jsx

@@ -96,12 +96,12 @@ const Register = () => {
             {/* Already have an account link */}
             <p className="mt-4 text-gray-700 text-sm">
                 Already have an account?{' '}
-                <a href="/Login" className="text-blue-500 font-medium hover:underline transition duration-300 transform hover:scale-105">
+                <a href="/login" className="text-blue-500 font-medium hover:underline transition duration-300 transform hover:scale-105">
                     Log in
                 </a>
             </p>
         </div>
     );
 };
 
-export default Register;
+export default Register;

frontend/src/Pages/booking.jsx

@@ -0,0 +1,107 @@
+// @tailwind base;
+// @tailwind components;
+// @tailwind utilities;
+
+import React, {useState} from 'react';
+import { Calendar, ArrowLeft, Component } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+
+const Booking=() =>{
+    //State variables
+    const [station, setStation]= useState('');
+    const [date, setDate]= useState('');
+    const navigate= useNavigate();
+
+    const services = [
+        { 
+            id: 'cloak', 
+            name: 'Cloak Room Booking', 
+            availability: 20 
+        },
+        { 
+            id: 'wheelchair', 
+            name: 'Wheel Chair Booking', 
+            availability: 5 
+        },
+        { 
+            id: 'coolie', 
+            name: 'Coolie Booking', 
+            availability: 12 
+        }
+];
+
+    return(
+        <div className="flex flex-col items-center min-h-screen bg-gradient-to-b from-blue to-blue-5000 px-4 py-8">
+            {/*Main container*/}
+            <div className='w-full max-w-wd flex items-center mb-6'>
+                <button
+                onClick={()=> navigate(-1)} 
+                className='flex item-center text-white hover:text-blue-200 transition-colors'>
+                <ArrowLeft size={24}/>
+                <span className="text-lg font-medium ml-2">Back</span>
+                </button>
+            </div>
+                        {/*Main COntent Card starts here*/}
+            <div className='w-full max-w-md bg-white bg-opacity-90 rounded-lg shadow-md p-6 backdrop-blur-sm'>
+                <h2 className='text-xl font-bold text-center mb-6 py-2 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm'>
+                    Station Services
+                </h2>           
+                {/* Staion update and inputs */}
+                <div className='mb-5'>
+                    <label className='block text-gray-700 font-semibold mb-2'>Station</label>
+                    <input
+                        type="text"
+                        value={station}
+                        onChange={(e) => setStation(e.target.value)}
+                        placeholder='Enter Station Name'
+                        className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300'
+                        />
+                    </div>
+
+                {/*Date input */}
+                <div className='mb-6'>
+                    <label className='block text-grey-700 font-semibold mb-2'>Date</label>
+                    <div className='relative'>
+                        <input
+                            type="text"
+                            value={date}
+                            onChange={(e) => setDate(e.target.value)}
+                            placeholder='DD/MM/YY'
+                            className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foucs:ring-2 focus:ring-blue-500 transition duration-300'
+                        />
+                        <Calendar className='absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400' size={20}/>
+
+                        </div> 
+
+                        {/*Services are here */}
+                        <div className="space-y-4">
+                            {services.map((service) => (
+                                <div 
+                                    key={service.id}
+                                    className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
+                                >
+                                    <div className="flex justify-between items-center mb-2">
+                                        <h3 className="text-gray-800 font-semibold">{service.name}</h3>
+                                        <span className="text-green-500 text-sm flex items-center">
+                                            <span className="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
+                                            Available: {service.availability}
+                                        </span>
+                                    </div>
+                                    <button 
+                                        className="w-full py-2 mt-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
+                                    >
+                                        Book Now
+                                    </button>
+                                </div>
+                            ))}
+                        </div>                  
+                    </div>     
+
+            </div>
+
+    </div>
+
+    );
+};
+export default Booking;