completed project

src/pages/dashboard/main/Account.tsx

@@ -75,7 +75,7 @@ function Account() {
           },
         }}
       />
-      <div className="overflow-x-auto text-base-content rounded-lg p-4">
+      <div className="overflow-x-auto text-base-content rounded-lg p-4  bg-slate-200 min-h-screen">
         <h2 className="text-center text-xl p-2 rounded-t-md text-webcolor font-bold">All User Accounts</h2>
 
         <div className="flex flex-col md:flex-row gap-4 mb-4">

src/pages/dashboard/main/Bookings/BookingForm.tsx

@@ -89,7 +89,7 @@ const BookingForm = () => {
   if (vehicleError) return <div>Error loading vehicle data</div>;
 
   return (
-    <div>
+    <div className=" bg-slate-200 min-h-screen">
       <Toaster
         toastOptions={{
           classNames: {
@@ -105,7 +105,7 @@ const BookingForm = () => {
 
       <div className="card rounded-lg p-4 lg:w-3/4 m-auto">
         {!isLoading && !vehicleError && vehicleData && (
-          <div className="card shadow-xl lg:gap-10 border-2 lg:flex-row justify-center items-center bg-gray-100 ">
+          <div className="card lg:gap-10 border-2 lg:flex-row justify-center items-center bg-zinc-50 ">
             <figure className="w-[50%] lg:w-[35%] p-3 ">
               <img src={vehicleData.vehicle_specifications.image_url} alt="cardetails" className="rounded-lg" />
             </figure>
@@ -135,7 +135,7 @@ const BookingForm = () => {
       {vehicleData && vehicleData.availability ? (
         <>
           <h1 className="text-xl font-bold mb-4 text-webcolor text-center p-5">Booking Vehicle</h1>
-          <div className="p-5 rounded-lg shadow-lg card lg:w-3/4 border-2 m-auto">
+          <div className="p-5 rounded-lg card lg:w-3/4 border-2 bg-zinc-50 m-auto">
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
               <div className="flex flex-col lg:flex-row space-x-4 w-full">
                 <div className="form-control lg:w-1/2">
@@ -151,7 +151,7 @@ const BookingForm = () => {
               </div>
 
               <div className="form-control mt-4">
-                <button type="submit" className="btn bg-webcolor text-text-light hover:text-black border-none" >
+                <button type="submit" className="btn bg-webcolor text-text-light hover:text-black border-none w-1/4 m-auto" >
                   {isSubmitting ? (
                     <>
                       <span className="loading loading-spinner text-text-light"></span>

src/pages/dashboard/main/Payments/Payments.tsx

@@ -112,7 +112,7 @@ const UserBookings = () => {
           },
         }}
       />
-      <div className='card shadow-xl mx-auto bg-slate-200 w-full rounded-md mb-10 border-2'>
+      <div className='card shadow-xl mx-auto w-full rounded-md mb-10 border-2 bg-slate-200 min-h-screen'>
       <h2 className="text-center text-xl p-2 rounded-t-md text-webcolor font-bold border-b-2 border-slate-500">My Payment History</h2>
 
         <div className="overflow-x-auto">

src/pages/dashboard/main/Profile.tsx

@@ -117,7 +117,7 @@ const Profile = () => {
                     },
                 }}
             />
-            <div className="card shadow-xl mx-auto p-4 rounded-md bg-slate-200">
+            <div className="card shadow-xl mx-auto p-4 rounded-md bg-slate-200 min-h-screen">
                 <div className="border-b-2 border-slate-600 pb-4">
                     <div className="flex justify-center">
                         <img src={userData.image_url || "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"} className="rounded-full h-28 w-28 object-cover border-4 border-white" alt="User Avatar" />

src/pages/dashboard/main/Tickets/SupportTickets.tsx

@@ -105,7 +105,7 @@ function SupportTickets() {
   });
 
   return (
-    <div className="overflow-x-auto">
+    <div className="overflow-x-auto bg-slate-200 min-h-screen">
       <Toaster
         toastOptions={{
           classNames: {
@@ -171,7 +171,7 @@ function SupportTickets() {
               <td>
                 {ticket.status === 'Closed' ? (
                   <button
-                    className="btn bg-blue-500 text-white mr-2"
+                    className="btn bg-blue-500 text-white hover:text-black"
                     onClick={() => handleReopenTicket(ticket.ticket_id, ticket.user_id, ticket.subject, ticket.description)}
                     disabled={isUpdatingTicket === ticket.ticket_id}
                   >
@@ -186,7 +186,7 @@ function SupportTickets() {
                   </button>
                 ) : (
                   <button
-                    className="btn bg-yellow-500 text-text-light hover:text-black"
+                    className="btn bg-webcolor text-text-light hover:text-black"
                     onClick={() => handleCloseTicket(ticket.ticket_id, ticket.user_id, ticket.subject, ticket.description)}
                     disabled={isUpdatingTicket === ticket.ticket_id}
                   >

src/pages/dashboard/main/Vehicles.tsx

@@ -56,7 +56,7 @@ function Vehicles() {
   }
 
   return (
-    <div className="overflow-x-auto text-base-content rounded-lg p-4">
+    <div className="overflow-x-auto text-base-content rounded-lg p-4  bg-slate-200 min-h-screen">
       <div className="flex flex-col md:flex-row gap-4 mb-4">
         <input
           type="text"
@@ -86,9 +86,9 @@ function Vehicles() {
           Reset Filters
         </button>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 gap-4">
         {filteredVehicles.map((vehicle: VehicleDataTypes) => (
-          <div key={vehicle.vehicle_id} className="card bg-base-100 shadow-xl h-fit">
+          <div key={vehicle.vehicle_id} className="card h-fit bg-zinc-50">
             <figure className='h-40'>
               <img src={vehicle.vehicle_specifications.image_url} alt="image for the car" className='w-full h-full object-cover' />
             </figure>

src/pages/landingPage/Hero.tsx

@@ -1,13 +1,19 @@
 import { Link } from 'react-router-dom';
 import { RootState } from '../../app/store';
-import bgrides from '../../assets/images/bgrides.jpeg'
+import bgrides from '../../assets/images/bgrides.jpeg';
 import { useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
 
 const Hero = () => {
     const user = useSelector((state: RootState) => state.user);
-    console.log("from Hero", user.user?.role);
-
     const name = user.user?.name;
+
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        setLoaded(true);
+    }, []);
+
     return (
         <div
             className="hero h-full lg:h-screen"
@@ -18,9 +24,10 @@ const Hero = () => {
             }}
         >
             <div className="hero-overlay bg-opacity-50 rounded-lg"></div>
-            <div className="hero-content text-neutral-content text-center">
-                <div>
-                    <h1 className="mb-5 text-3xl lg:text-5xl font-bold">Welcome to Rental Rides,
+            <div className={`hero-content text-neutral-content text-center transition-opacity duration-1000 ${loaded ? 'opacity-100' : 'opacity-0'}`}>
+                <div className={`transform transition-transform duration-1000 ${loaded ? 'translate-y-0' : '-translate-y-10'}`}>
+                    <h1 className="mb-5 text-3xl lg:text-5xl font-bold">
+                        Welcome to Rental Rides,
                         <span className='text-webcolor'>
                             {name ? ` ${name}` : ''}
                         </span>
@@ -30,11 +37,10 @@ const Hero = () => {
                         We offer affordable Pricing to our Customers
                     </p>
                     <Link to="/dashboard/vehicles" className="btn bg-webcolor text-text-light hover:text-black border-none">Book a Ride</Link>
-                    {/* <button className="btn bg-webcolor text-text-light hover:text-black border-none">Book a Ride</button> */}
                 </div>
             </div>
         </div>
     );
 }
 
-export default Hero
+export default Hero;

src/pages/register/Register.tsx

@@ -23,7 +23,7 @@ const schema = yup.object().shape({
   email: yup.string().email().required("Email is required"),
   contact_phone: yup.string().required("Phone number is required"),
   address: yup.string().required("Address is required"),
-  password: yup.string().min(4, "Password must be at least 4 characters").required("Password is required"),
+  password: yup.string().min(6, "Password must be at least 6 characters").required("Password is required"),
   confirmPassword: yup.string().oneOf([yup.ref("password")], "Passwords must match").required("Confirm password is required")
 })
 
@@ -44,7 +44,9 @@ const Register = () => {
       const response = await createUser(data);
       console.log("Response data:", response); // success
       toast.success("Registration successful")
-      navigate('/login')
+      setTimeout(() => {
+        navigate('/login');
+      }, 1000);
     } catch (err) {
       if (error) {
         console.error("API error:", error); // error