create find form

app/Http/Controllers/RentController.php

@@ -9,4 +9,8 @@ class RentController extends Controller
     public function carFormView() {
         return view('rent-form');
     }
+
+    public function findVehicleForm() {
+        return view('find-vehicles');
+    }
 }

public/css/app.css

@@ -604,16 +604,6 @@ select {
 .relative {
   position: relative;
 }
-.sticky {
-  position: -webkit-sticky;
-  position: sticky;
-}
-.inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
 .inset-x-0 {
   left: 0px;
   right: 0px;
@@ -678,6 +668,9 @@ select {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -735,8 +728,8 @@ select {
 .-mr-2 {
   margin-right: -0.5rem;
 }
-.mt-0 {
-  margin-top: 0px;
+.mt-20 {
+  margin-top: 5rem;
 }
 .block {
   display: block;
@@ -843,6 +836,12 @@ select {
 .w-4 {
   width: 1rem;
 }
+.w-4\/6 {
+  width: 66.666667%;
+}
+.w-3\/6 {
+  width: 50%;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -852,6 +851,21 @@ select {
 .max-w-7xl {
   max-width: 80rem;
 }
+.max-w-lg {
+  max-width: 32rem;
+}
+.max-w-md {
+  max-width: 28rem;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-5xl {
+  max-width: 64rem;
+}
+.max-w-4xl {
+  max-width: 56rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -873,6 +887,12 @@ select {
 .basis-3\/12 {
   flex-basis: 25%;
 }
+.basis-8\/12 {
+  flex-basis: 66.666667%;
+}
+.basis-4\/12 {
+  flex-basis: 33.333333%;
+}
 .origin-top-left {
   transform-origin: top left;
 }
@@ -1103,6 +1123,26 @@ select {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+.px-14 {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1139,9 +1179,6 @@ select {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-center {
   text-align: center;
 }

resources/views/components/base-body.blade.php

@@ -3,4 +3,5 @@
     <div class="content">
         {{ $slot }}
     </div>
+    <x-footer />
 </div>

resources/views/find-vehicles.blade.php

@@ -0,0 +1,24 @@
+<x-base-layout>
+    <x-base-body selected="true">
+        <div class="min-h-screen flex flex-col sm:justify-center items-center sm:pt-0 bg-">
+            <div class="w-3/6 max-w-4xl mt-6 px-12 py-20 bg-white shadow-md overflow-hidden sm:rounded-lg">
+                <h3 class="font-bold text-center text-3xl text-lilac-100 mt-2">Search for Motorcycle Rent</h3>
+                <form action="" method="post" class="px-20 mt-8">
+                    <x-label for="pickup" value="Pick up" class="block font-bold text-base mt-6"/>
+                    <div class="date-time flex">
+                        <x-input id="pickup-date" class="block basis-8/12" type="date" name="pickup-time" value="" required />
+                        <x-input id="pickup-time" class="block basis-4/12 ml-4" type="time" name="pickup-date" value="" required />
+                    </div>
+                    <x-label for="dropoff" value="Drop off" class="block font-bold text-base mt-6"/>
+                    <div class="date-time flex">
+                        <x-input id="dropoff-date" class="block basis-8/12" type="date" name="dropoff-time" value="" required />
+                        <x-input id="dropoff-time" class="block basis-4/12 ml-4" type="time" name="dropoff-date" value="" required />
+                    </div>
+                    <div class="mt-6 flex justify-center">
+                        <x-button filled="true">Rent Now</x-button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </x-base-body>
+</x-base-layout>

routes/web.php

@@ -33,6 +33,8 @@
 
 Route::get('/about', [BasicViewController::class, 'about']);
 
+Route::get('/rent/cars', [RentController::class, 'findVehicleForm']);
+
 Route::middleware(['auth', 'verified'])-> group(function () {
     Route::get('/rent/car/{id}', [RentController::class, 'carFormView']);
 });