Added About Page

resources/js/layouts/AppLayout.vue

@@ -81,6 +81,16 @@ withDefaults(defineProps<Props>(), {
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+
+.glass {
+    background-color: color-mix(in srgb, var(--card) 35%, transparent);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px); /* Safari */
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-clip: padding-box;
+}
+
+
 /* Reset and Base Styles */
 * {
     margin: 0;
@@ -110,7 +120,7 @@ body::-webkit-scrollbar {
 }
 
 html{
-    overflow:auto;
+    overflow:visible;
 }
 
 body {
@@ -121,13 +131,25 @@ body {
     overflow-x: hidden;
     display:flex;
     flex-direction: column;
-
+    min-height: 100svh; /* ensure the page fills the viewport height */
+}
+html, body, #app {
+    min-height: 100svh; /* fill viewport */
+    display: flex;
+    flex-direction: column;
 }
 
+
+/* Make main fill remaining space and arrange its children vertically */
 main{
-    margin-top: 5dvh;
-    min-height: 90dvh;
-    flex-direction: column;
+    display: flex;          /* added */
+    flex-direction: column; /* keep */
     flex: 1;
+    gap: 2em;/* keep */
+}
+
+/* Push the Footer (last child in main) to the bottom if content is short */
+main > :last-child {
+    margin-top: auto;
 }
 </style>