update home empty page

src/assets/css/style.css

@@ -2024,6 +2024,16 @@ select {
   line-height: 1rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2230,6 +2240,11 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-opacity-100 {
   --tw-text-opacity: 1;
 }

src/components/HomeEmpty.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
 
-        <DocumentArrowUpIcon class="w-12 h-12 mx-auto text-gray-400" aria-hidden="true" />
-        <h3 class="mt-2 font-bold text-gray-900 whitespace-pre-wrap text-md">
-            Cari menu? Ctrl + F
+        <!-- <HomeIcon class="w-12 h-12 mx-auto text-gray-400" aria-hidden="true" /> -->
+        <h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
+            Selamat datang di aplikasi
         </h3>
-        <p class="mt-1 text-sm text-gray-600 whitespace-pre-wrap ">
-            Gunakan kombinasi tombol Ctrl + F untuk mencari menu yang kamu inginkan.
-        </p>
-
+        <h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
+            {{ appName }}
+        </h1>
     </div>
 </template>
 
 <script setup lang="ts">
-import { DocumentArrowUpIcon } from '@heroicons/vue/24/outline';
+import { HomeIcon } from '@heroicons/vue/20/solid'
+const appName = import.meta.env.VITE_APP_NAME
 </script>

src/views/HomeView.vue

@@ -2,7 +2,6 @@
 import MenuProvider from '@/components/Menus/MenuProvider.vue'
 import Navigation from '@/components/Navigation.vue'
 import { useMenuStore } from '@/stores/menu'
-import { TransitionRoot } from '@headlessui/vue';
 import { RouterView } from 'vue-router'
 const menu = useMenuStore()
 </script>