From ca50adf21e4fe110078a2c3eebb25d2385c1abf0 Mon Sep 17 00:00:00 2001
From: Prem Kolte <premkolte26@gmail.com>
Date: Thu, 3 Oct 2024 19:02:27 +0530
Subject: [PATCH] improve login and register page

---
 frontend/src/Pages/LoginPage.jsx | 36 ++++++++++++++-----------
 frontend/src/Pages/Register.jsx  | 45 +++++++++++++++++++-------------
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
index c32e4f1..466d8de 100644
--- a/frontend/src/Pages/LoginPage.jsx
+++ b/frontend/src/Pages/LoginPage.jsx
@@ -7,43 +7,44 @@ const Login = () => {
 
     const handleLogin = (e) => {
         e.preventDefault();
+        // Handle login logic
     };
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen  bg-gray-100">
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-200 to-blue-500">
             {/* Logo, Title, and Tagline */}
             <div className="text-center mb-8">
-                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-20" /> {/* Adjust width/height as needed */}
-                <h1 className="text-3xl font-bold text-gray-800 mt-4">Station Saarthi</h1>
-                <p className="text-gray-500 mt-2">Your Trusted Platform Guide</p>
+                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-28 h-28" /> {/* Larger logo */}
+                <h1 className="text-4xl font-bold text-white mt-4">Station Saarthi</h1>
+                <p className="text-white opacity-80 mt-2 text-lg">Your Trusted Platform Guide</p>
             </div>
 
             {/* Login Form */}
-            <form onSubmit={handleLogin} className="bg-white p-6 rounded-lg shadow-md w-full max-w-sm">
+            <form onSubmit={handleLogin} className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
                 {/* Username Input */}
-                <div className="mb-4">
-                    <label className="block text-gray-700 font-bold mb-2" htmlFor="username">Username</label>
+                <div className="mb-6">
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="username">Username</label>
                     <input
                         type="text"
                         id="username"
                         value={username}
                         onChange={(e) => setUsername(e.target.value)}
                         placeholder="Enter your username"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
                         required
                     />
                 </div>
 
                 {/* Password Input */}
                 <div className="mb-6">
-                    <label className="block text-gray-700 font-bold mb-2" htmlFor="password">Password</label>
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
                     <input
                         type="password"
                         id="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Enter your password"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
                         required
                     />
                 </div>
@@ -51,16 +52,21 @@ const Login = () => {
                 {/* Login Button */}
                 <button
                     type="submit"
-                    className="w-full bg-blue-500 text-white py-2 rounded-lg font-semibold hover:bg-blue-600 transition-colors"
+                    className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105"
                 >
                     Login
                 </button>
             </form>
 
-            {/* Don't have an account link */}
-            <p className="mt-4 text-gray-600">
-                <span>Don't have an account? </span>
-                <a href="/register" className="text-blue-500 font-semibold hover:underline transition duration-300 ease-in-out transform hover:scale-105">
+            {/* Divider */}
+            <div className="mt-6 text-center">
+                <hr className="border-t border-gray-200" />
+            </div>
+
+            {/* Register Link */}
+            <p className="mt-4 text-white">
+                Don't have an account?{' '}
+                <a href="/register" className="text-white font-semibold hover:underline transition duration-300 transform hover:scale-105">
                     Register
                 </a>
             </p>
diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx
index deec131..9166165 100644
--- a/frontend/src/Pages/Register.jsx
+++ b/frontend/src/Pages/Register.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import logo from '../assets/stationsaarthi.svg'; // Import your logo
 
 const Register = () => {
     const [name, setName] = useState('');
@@ -8,65 +9,72 @@ const Register = () => {
 
     const handleRegister = (e) => {
         e.preventDefault();
+        // Handle registration logic here
     };
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-            <h2 className="mb-6 text-3xl font-bold">Register New User</h2>
-            <form onSubmit={handleRegister} className="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-200 to-blue-5000">
+            {/* Logo and Title */}
+            <div className="text-center mb-10">
+                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-28 h-28" />
+                <h1 className="text-4xl font-bold text-gray-800 mt-4">Station Saarthi</h1>
+                <p className="text-gray-600 mt-2 text-lg">Register New User</p>
+            </div>
 
+            {/* Registration Form */}
+            <form onSubmit={handleRegister} className="w-full max-w-md bg-white p-8 rounded-lg shadow-md">
                 {/* Name Input */}
-                <div className="mb-4">
-                    <label className="block mb-2 font-bold text-gray-700" htmlFor="name">Name</label>
+                <div className="mb-5">
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="name">Name</label>
                     <input
                         type="text"
                         id="name"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         placeholder="Enter your name"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        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"
                         required
                     />
                 </div>
 
                 {/* Phone Number Input */}
-                <div className="mb-4">
-                    <label className="block mb-2 font-bold text-gray-700" htmlFor="phoneNumber">Phone Number</label>
+                <div className="mb-5">
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="phoneNumber">Phone Number</label>
                     <input
                         type="tel"
                         id="phoneNumber"
                         value={phoneNumber}
                         onChange={(e) => setPhoneNumber(e.target.value)}
                         placeholder="Enter your phone number"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        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"
                         required
                     />
                 </div>
 
                 {/* Email Input */}
-                <div className="mb-4">
-                    <label className="block mb-2 font-bold text-gray-700" htmlFor="email">Email</label>
+                <div className="mb-5">
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="email">Email</label>
                     <input
                         type="email"
                         id="email"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                         placeholder="Enter your email"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        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"
                         required
                     />
                 </div>
 
                 {/* Password Input */}
                 <div className="mb-6">
-                    <label className="block mb-2 font-bold text-gray-700" htmlFor="password">Password</label>
+                    <label className="block text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
                     <input
                         type="password"
                         id="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Create a password"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                        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"
                         required
                     />
                 </div>
@@ -74,15 +82,16 @@ const Register = () => {
                 {/* Register Button */}
                 <button
                     type="submit"
-                    className="w-full py-2 font-semibold text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
+                    className="w-full py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
                 >
                     Register
                 </button>
             </form>
+
             {/* Already have an account link */}
-            <p className="mt-4">
-                <span className="text-gray-600">Already have an account? </span>
-                <a href="/login" className="font-semibold text-blue-500 transition duration-300 ease-in-out transform hover:underline hover:scale-105">
+            <p className="mt-6 text-gray-600">
+                Already have an account?{' '}
+                <a href="/login" className="text-blue-500 font-semibold hover:underline transition duration-300 transform hover:scale-105">
                     Log in
                 </a>
             </p>