Added About Page

resources/js/layouts/AppLayout.vue

@@ -2,7 +2,7 @@
 import type { BreadcrumbItemType } from '@/types';
 import { onMounted } from 'vue';
 import Header from "@/components/Header.vue";
-import {VApp} from "vuetify/components/VApp";
+import Footer from "@/components/Footer.vue";
 
 interface Props {
     breadcrumbs?: BreadcrumbItemType[];
@@ -17,10 +17,34 @@ withDefaults(defineProps<Props>(), {
 
 <template>
     <Header />
-    <slot />
-</template>
 
+            <transition name="fade" mode="out-in">
+                <main :key="$page.url">
+                    <slot />
+                    <Footer />
+                </main>
+            </transition>
+</template>
+<style scoped>
+/* fade transition */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease; /* change 0.5s to slower/faster */
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+    opacity: 1;
+}
+
+</style>
 <style>
+
 :root {
     /* Colors */
     --primary: hsl(210, 100%, 50%);
@@ -64,11 +88,46 @@ withDefaults(defineProps<Props>(), {
     box-sizing: border-box;
 }
 
+html, body{
+    scrollbar-width: none;
+    -ms-overflow-style:none;
+    scroll-behavior: smooth;
+}
+
+/* Temporary debug styles */
+/* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+    display: none;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    display: none;
+}
+
+html{
+    overflow:auto;
+}
+
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     background: var(--background);
     color: var(--foreground);
     line-height: 1.6;
     overflow-x: hidden;
+    display:flex;
+    flex-direction: column;
+
+}
+
+main{
+    margin-top: 5dvh;
+    min-height: 90dvh;
+    flex-direction: column;
+    flex: 1;
 }
 </style>