From 7d3ca713882436ad6af785fb6fe522e2fa31b523 Mon Sep 17 00:00:00 2001
From: Femi Novia Lina <77434812+FemiNoviaLina@users.noreply.github.com>
Date: Thu, 12 May 2022 04:09:35 +0700
Subject: [PATCH] add guide page

---
 database/seeders/BrandSeeder.php |  28 +++++++++
 public/css/app.css               | 103 +++++++++++++++++++++++++++++++
 public/images/ask-icon.svg       |   3 +
 public/images/warn-icon.svg      |   3 +
 resources/views/guide.blade.php  |  59 ++++++++++++++++++
 5 files changed, 196 insertions(+)
 create mode 100644 database/seeders/BrandSeeder.php
 create mode 100644 public/images/ask-icon.svg
 create mode 100644 public/images/warn-icon.svg
 create mode 100644 resources/views/guide.blade.php

diff --git a/database/seeders/BrandSeeder.php b/database/seeders/BrandSeeder.php
new file mode 100644
index 0000000..564335b
--- /dev/null
+++ b/database/seeders/BrandSeeder.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class BrandSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $data = [
+            [ 'name' => 'Honda' ],
+            [ 'name' => 'Suzuki' ],
+            [ 'name' => 'Toyota' ],
+            [ 'name' => 'Yamaha' ],
+            [ 'name' => 'Daihatsu' ],
+            [ 'name' => 'Nissan' ]
+        ];
+
+        \DB::table('brands')->insert($data);
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index 8cb8e83..513a419 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -617,6 +617,21 @@ select {
 .left-0 {
   left: 0px;
 }
+.-left-1\.5 {
+  left: -0.375rem;
+}
+.-left-1 {
+  left: -0.25rem;
+}
+.-left-2 {
+  left: -0.5rem;
+}
+.-left-5 {
+  left: -1.25rem;
+}
+.-left-4 {
+  left: -1rem;
+}
 .z-0 {
   z-index: 0;
 }
@@ -731,6 +746,21 @@ select {
 .mt-20 {
   margin-top: 5rem;
 }
+.mt-32 {
+  margin-top: 8rem;
+}
+.mt-24 {
+  margin-top: 6rem;
+}
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.mb-20 {
+  margin-bottom: 5rem;
+}
 .block {
   display: block;
 }
@@ -788,6 +818,9 @@ select {
 .h-6 {
   height: 1.5rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -842,6 +875,9 @@ select {
 .w-3\/6 {
   width: 50%;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -994,6 +1030,9 @@ select {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -1002,6 +1041,18 @@ select {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+.rounded-l-sm {
+  border-top-left-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+.rounded-r-sm {
+  border-top-right-radius: 0.125rem;
+  border-bottom-right-radius: 0.125rem;
+}
 .border {
   border-width: 1px;
 }
@@ -1023,6 +1074,12 @@ select {
 .border-l-4 {
   border-left-width: 4px;
 }
+.border-l {
+  border-left-width: 1px;
+}
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 248 / var(--tw-border-opacity));
@@ -1042,6 +1099,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(226 226 226 / var(--tw-border-opacity));
 }
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1065,6 +1126,12 @@ select {
 .fill-current {
   fill: currentColor;
 }
+.fill-white {
+  fill: #ffffff;
+}
+.fill-lilac-100 {
+  fill: #7C7DDC;
+}
 .p-3 {
   padding: 0.75rem;
 }
@@ -1147,6 +1214,10 @@ select {
   padding-left: 3.5rem;
   padding-right: 3.5rem;
 }
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1240,6 +1311,9 @@ select {
 .leading-tight {
   line-height: 1.25;
 }
+.leading-none {
+  line-height: 1;
+}
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -1441,10 +1515,17 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(169 169 231 / var(--tw-bg-opacity));
 }
+.hover\:fill-white:hover {
+  fill: #ffffff;
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.hover\:text-lilac-100:hover {
+  --tw-text-opacity: 1;
+  color: rgb(124 125 220 / var(--tw-text-opacity));
+}
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -1469,6 +1550,11 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .focus\:ring-lilac-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 149 222 / var(--tw-ring-opacity));
@@ -1480,6 +1566,23 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(226 226 226 / var(--tw-bg-opacity));
 }
+@media (prefers-color-scheme: dark) {
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:text-white:focus {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:-my-px {
diff --git a/public/images/ask-icon.svg b/public/images/ask-icon.svg
new file mode 100644
index 0000000..1c784ea
--- /dev/null
+++ b/public/images/ask-icon.svg
@@ -0,0 +1,3 @@
+<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.3281 21.5C42.3281 33.0056 33.0022 42.3281 21.5 42.3281C9.99775 42.3281 0.671875 33.0056 0.671875 21.5C0.671875 10.0011 9.99775 0.671875 21.5 0.671875C33.0022 0.671875 42.3281 10.0011 42.3281 21.5ZM22.0589 7.55859C17.482 7.55859 14.5629 9.48662 12.2706 12.9133C11.9737 13.3572 12.073 13.9559 12.4986 14.2787L15.4128 16.4883C15.85 16.8198 16.4728 16.7409 16.8124 16.3101C18.3127 14.4072 19.3414 13.3037 21.625 13.3037C23.3407 13.3037 25.4629 14.4079 25.4629 16.0717C25.4629 17.3294 24.4246 17.9753 22.7305 18.9251C20.7549 20.0326 18.1406 21.4111 18.1406 24.8594V25.1953C18.1406 25.7519 18.5919 26.2031 19.1484 26.2031H23.8516C24.4081 26.2031 24.8594 25.7519 24.8594 25.1953V25.0834C24.8594 22.693 31.8457 22.5935 31.8457 16.125C31.8457 11.2537 26.7928 7.55859 22.0589 7.55859ZM21.5 28.3867C19.3697 28.3867 17.6367 30.1197 17.6367 32.25C17.6367 34.3802 19.3697 36.1133 21.5 36.1133C23.6303 36.1133 25.3633 34.3802 25.3633 32.25C25.3633 30.1197 23.6303 28.3867 21.5 28.3867Z" fill="white"/>
+</svg>
diff --git a/public/images/warn-icon.svg b/public/images/warn-icon.svg
new file mode 100644
index 0000000..0009222
--- /dev/null
+++ b/public/images/warn-icon.svg
@@ -0,0 +1,3 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5002 4.70001C33.8872 4.70001 42.3002 13.113 42.3002 23.5C42.3002 33.887 33.8872 42.3 23.5002 42.3C13.1132 42.3 4.7002 33.887 4.7002 23.5C4.7002 13.113 13.1132 4.70001 23.5002 4.70001ZM26.1557 26.743L26.9782 11.562H20.0222L20.8447 26.743H26.1557ZM25.9442 34.639C26.5082 34.0985 26.8137 33.3465 26.8137 32.383C26.8137 31.396 26.5317 30.644 25.9677 30.1035C25.4037 29.563 24.5812 29.281 23.4767 29.281C22.3722 29.281 21.5497 29.563 20.9622 30.1035C20.3747 30.644 20.0927 31.396 20.0927 32.383C20.0927 33.3465 20.3982 34.0985 20.9857 34.639C21.5967 35.1795 22.4192 35.438 23.4767 35.438C24.5342 35.438 25.3567 35.1795 25.9442 34.639Z" fill="#7C7DDC"/>
+</svg>
diff --git a/resources/views/guide.blade.php b/resources/views/guide.blade.php
new file mode 100644
index 0000000..0c8b9ce
--- /dev/null
+++ b/resources/views/guide.blade.php
@@ -0,0 +1,59 @@
+<x-base-layout>
+    <x-base-body selected="Guide">
+        <div class="flex rounded-md mt-24 justify-center">
+            <a href="#" aria-current="page" class="py-2 px-10 font-bold text-white bg-lilac-100 rounded-l-sm border border-lilac-100 transition duration-500 ">
+                <svg class="fill-white inline mr-2" width="32" height="32" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_893_355)">
+                    <path d="M42.3281 21.5C42.3281 33.0056 33.0022 42.3281 21.5 42.3281C9.99775 42.3281 0.671875 33.0056 0.671875 21.5C0.671875 10.0011 9.99775 0.671875 21.5 0.671875C33.0022 0.671875 42.3281 10.0011 42.3281 21.5ZM22.0589 7.55859C17.482 7.55859 14.5629 9.48662 12.2706 12.9133C11.9737 13.3572 12.073 13.9559 12.4986 14.2787L15.4128 16.4883C15.85 16.8198 16.4728 16.7409 16.8124 16.3101C18.3127 14.4072 19.3414 13.3037 21.625 13.3037C23.3407 13.3037 25.4629 14.4079 25.4629 16.0717C25.4629 17.3294 24.4246 17.9753 22.7305 18.9251C20.7549 20.0326 18.1406 21.4111 18.1406 24.8594V25.1953C18.1406 25.7519 18.5919 26.2031 19.1484 26.2031H23.8516C24.4081 26.2031 24.8594 25.7519 24.8594 25.1953V25.0834C24.8594 22.693 31.8457 22.5935 31.8457 16.125C31.8457 11.2537 26.7928 7.55859 22.0589 7.55859ZM21.5 28.3867C19.3697 28.3867 17.6367 30.1197 17.6367 32.25C17.6367 34.3802 19.3697 36.1133 21.5 36.1133C23.6303 36.1133 25.3633 34.3802 25.3633 32.25C25.3633 30.1197 23.6303 28.3867 21.5 28.3867Z" fill="white"/>
+                    </g>
+                    <defs>
+                    <clipPath id="clip0_893_355">
+                    <rect width="47" height="47" fill="white"/>
+                    </clipPath>
+                    </defs>
+                </svg>
+                How to Rent A Vehicle
+            </a> 
+            <a href="{{ url('/guide/rules') }}" class="py-2 px-10 font-bold text-lilac-100 bg-white rounded-r-sm border border-lilac-100 hover:bg-lilac-300 hover:text-white transition duration-500">
+                <svg class="fill-lilac-100 inline mr-2" width="32" height="32" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M23.5002 4.70001C33.8872 4.70001 42.3002 13.113 42.3002 23.5C42.3002 33.887 33.8872 42.3 23.5002 42.3C13.1132 42.3 4.7002 33.887 4.7002 23.5C4.7002 13.113 13.1132 4.70001 23.5002 4.70001ZM26.1557 26.743L26.9782 11.562H20.0222L20.8447 26.743H26.1557ZM25.9442 34.639C26.5082 34.0985 26.8137 33.3465 26.8137 32.383C26.8137 31.396 26.5317 30.644 25.9677 30.1035C25.4037 29.563 24.5812 29.281 23.4767 29.281C22.3722 29.281 21.5497 29.563 20.9622 30.1035C20.3747 30.644 20.0927 31.396 20.0927 32.383C20.0927 33.3465 20.3982 34.0985 20.9857 34.639C21.5967 35.1795 22.4192 35.438 23.4767 35.438C24.5342 35.438 25.3567 35.1795 25.9442 34.639Z"/>
+                </svg>    
+                Rules for All Renters
+            </a>
+        </div>
+        <div class="mt-4 mb-20 mx-20 px-20 py-10 bg-white shadow-md rounded-lg ">
+            <ol class="relative border-l-2 border-lilac-100 ">                  
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">1</div>
+                    <h3 class="text-lg font-semibold ml-4">Pilih tipe kendaraan yang akan dirental</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Anda dapat memilih salah satu tipe kendaraan dengan memilih Rent Car atau Rent Motorcycle setelah klik "Rent" pada menu di atas.</p>
+                </li>
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">2</div>
+                    <h3 class="text-lg font-semibold ml-4">Tetapkan waktu anda akan merental kendaraan</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Selanjutnya anda akan mengisi waktu kapan anda akan merental kendaraan dan mengembalikannya, ini bertujuan untuk melihat ketersediaan kendaraan.</p>
+                </li>
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">3</div>
+                    <h3 class="text-lg font-semibold ml-4">Pilih kendaraan favorit anda</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Seluruh kendaraan yang tersedia akan ditampilkan. Anda dapat memilih kendaraan yang paling Anda sukai dengan klik "Rent now".</p>
+                </li>
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">4</div>
+                    <h3 class="text-lg font-semibold ml-4">Isi customer rent form</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Isi formulir yang tersedia dengan data yang sebenarnya. Anda juga perlu mengupload 3 dokumen: ktp, sim, dan dokumen penting lain (BPJS/NPWP/Kartu Pelajar).</p>
+                </li>
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">5</div>
+                    <h3 class="text-lg font-semibold ml-4">Lakukan pembayaran</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Jika pengajuan rental telah disetujui oleh admin, anda dapat segera melakukan pembayaran.</p>
+                </li>
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-8 h-8 bg-gray-200 rounded-full text-center font-bold text-white pt-1 -left-4 border border-lilac-100 bg-lilac-100">6</div>
+                    <h3 class="text-lg font-semibold ml-4">Kendarai kendaraan pilihanmu</h3>
+                    <p class="mb-4 text-base font-normal ml-4">Jika pembayaran telah diterima, kendaraan dapat langsung anda rental sesuai dengan lokasi dan waktu yang telah ditentukan.</p>
+                </li>
+            </ol>
+        </div>
+    </x-base-body>
+</x-base-layout>
\ No newline at end of file