Added timezones

resources/js/Layouts/MainLayout.vue

@@ -3,15 +3,20 @@ import {Link} from "@inertiajs/vue3";
 import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
 import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
 import Radar from "@/Components/FlightsGoneBy/Radar.vue";
+import { usePage } from "@inertiajs/vue3";
+const page = usePage();
+
 </script>
 
 <template>
     <Radar>
         <div class="layoutContainer">
             <MainHeader />
-            <main id="pageContainer">
-                <slot />
-            </main>
+            <Transition name="fade" mode="out-in">
+                <main id="pageContainer" :key="page.url" >
+                        <slot />
+                </main>
+            </Transition>
             <MainFooter />
         </div>
     </Radar>
@@ -27,10 +32,10 @@ import Radar from "@/Components/FlightsGoneBy/Radar.vue";
 }
 
 main {
-    flex: 1 0 90dvh;   /* THIS is the key */
+    flex: 1 0 90dvh;
     min-height: 0;
     padding: 1rem;
-    background: var(--surface-alt);
+    background:transparent;
     display:flex;
     flex-direction: column;
     justify-content: center;
@@ -38,4 +43,15 @@ main {
 }
 
 
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
 </style>