#2 - main page

package.json

@@ -8,11 +8,14 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
+        "@headlessui/vue": "^1.7.14",
+        "@heroicons/vue": "^2.0.18",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",
         "@inertiajs/vue3": "^1.0.7",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
+        "@vueuse/core": "^10.2.1",
         "axios": "^1.4.0",
         "laravel-vite-plugin": "^0.7.8",
         "lodash": "^4.17.21",
@@ -22,11 +25,13 @@
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.59.8",
         "@vitejs/plugin-vue": "^4.2.3",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
         "autoprefixer": "^10.4.14",
         "eslint": "^8.41.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-tailwindcss": "^3.12.1",
         "eslint-plugin-vue": "^9.14.1",
+        "leaflet": "^1.9.4",
         "postcss": "^8.4.24",
         "vite": "^4.3.9"
     }

resources/css/app.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+    .no-scrollbar {
+        -ms-overflow-style: none; 
+        scrollbar-width: none; 
+      }
+  }

resources/js/Pages/Auth/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useForm } from '@inertiajs/vue3'
-import ErrorMessage from '@/Components/ErrorMessage.vue'
+import ErrorMessage from '@/Shared/Components/ErrorMessage.vue'
 
 const form = useForm({
   email: '',

resources/js/Pages/Auth/Register.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useForm } from '@inertiajs/vue3'
-import ErrorMessage from '@/Components/ErrorMessage.vue'
+import ErrorMessage from '@/Shared/Components/ErrorMessage.vue'
 
 const form = useForm({
   name: '',

resources/js/Pages/Landing.vue

@@ -0,0 +1,7 @@
+<script setup>
+import Panel from '@/Shared/Components/Panel.vue'
+</script>
+
+<template>
+  <Panel />
+</template>

resources/js/Shared/Components/ComboboxField.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
+
+const props = defineProps({
+  label: { type: String, required: true },
+  items: { type: Array, required: true },
+  displayValue: { type: Function, default: (item) => item.name },
+})
+
+const emit = defineEmits(['update'])
+const query = ref('')
+const selectedItem = ref(null)
+
+const filteredItems = computed(() =>
+  query.value === ''
+    ? props.items
+    : props.items.filter((item) => {
+      return props.displayValue(item).toLowerCase().includes(query.value.toLowerCase())
+    }),
+)
+
+const updateQuery = (event) => {
+  query.value = event.target.value
+  emit('update', query.value)
+}
+</script>
+
+<template>
+  <Combobox v-model="selectedItem" as="div">
+    <ComboboxLabel class="block text-sm font-medium leading-6 text-blumilk-700">
+      {{ label }}
+    </ComboboxLabel>
+    <div class="relative mt-0.5">
+      <ComboboxInput class="w-full rounded-md border-0 bg-white py-3 pl-3 pr-10 text-blumilk-700 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blumilk-500 sm:leading-6" :display-value="displayValue" @change="updateQuery" />
+      <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
+        <ChevronUpDownIcon class="h-5 w-5 text-blumilk-200" aria-hidden="true" />
+      </ComboboxButton>
+
+      <ComboboxOptions v-if="filteredItems.length > 0" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base  shadow-lg ring-1 ring-black focus:outline-none">
+        <ComboboxOption v-for="item in filteredItems" :key="item.id" v-slot="{ active, selected }" :value="item" as="template">
+          <li :class="['relative cursor-pointer select-none py-2 pl-3 pr-9 text-lg hover:text-blumilk-500', active ? 'bg-blumilk-25' : 'text-blumilk-700']">
+            <span :class="['block truncate', selected && 'text-blumilk-900']">
+              {{ item.name }}
+            </span>
+
+            <span v-if="selected" :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-blumilk-300' : 'text-blumilk-500']">
+              <CheckIcon class="h-5 w-5" aria-hidden="true" />
+            </span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </div>
+  </Combobox>
+</template>

resources/js/Components/ErrorMessage.vue → resources/js/Shared/Components/ErrorMessage.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue'
 
 defineProps({
   message: {

resources/js/Shared/Components/Info.vue

@@ -0,0 +1,62 @@
+<script setup>
+import PrimaryButton from '@/Shared/Components/PrimaryButton.vue'
+import SecondaryButton from '@/Shared/Components/SecondaryButton.vue'
+import Footer from '../Layout/Footer.vue'
+
+const emit = defineEmits(['try-it-out'])
+</script>
+
+<template>
+  <div class="flex h-full flex-col items-start justify-evenly bg-blumilk-25 px-6 md:px-10 lg:px-14">
+    <div class="hidden md:flex md:w-7/12 lg:w-3/4 xl:w-7/12">
+      <img class="h-auto max-w-full" src="@/assets/undraw_scooter.svg" alt="Man riding an e-scooter">
+    </div>
+
+    <div class="lg:pb-16">
+      <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+        Looking for an e&#8209;scooter?
+      </h1>
+      <p class="mx-0 w-full items-start pt-10 text-sm leading-7 text-gray-600 sm:w-2/3 sm:text-base lg:mx-auto lg:w-full lg:text-lg">
+        There are plenty of e-scooter providers, so sometimes you can be confused about which app you should
+        use during your trips.
+        <br><br>
+        <strong>This application can help you with planning your vacations or business trips.</strong>
+      </p>
+    </div>
+
+    <div
+      class="flex w-full flex-wrap items-center justify-center space-y-5 sm:hidden sm:justify-between sm:space-y-0 md:flex"
+    >
+      <PrimaryButton class="h-fit w-11/12 py-5 sm:w-5/12" @click="emit('try-it-out')">
+        Try it out
+      </PrimaryButton>
+
+      <SecondaryButton class="h-fit w-11/12 py-5 sm:w-5/12">
+        Create account
+      </SecondaryButton>
+    </div>
+
+    <div class="hidden w-full items-center space-x-12 sm:flex md:hidden">
+      <div class="flex w-2/3 md:h-1/2 lg:h-1/3">
+        <img class="max-h-full" src="@/assets/undraw_scooter.svg" alt="Man riding an e-scooter">
+      </div>
+
+      <div class="flex w-1/3 flex-col space-y-8">
+        <PrimaryButton class="h-fit w-full py-5" @click="emit('try-it-out')">
+          Try it out
+        </PrimaryButton>
+
+        <SecondaryButton class="h-fit w-full py-5">
+          Create account
+        </SecondaryButton>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<!--<style scoped>-->
+<!--* {-->
+<!--    border: 1px solid red;-->
+<!--}-->
+<!--</style>-->