Refined Discover and Transport UI, added shuttle categorization and descriptions

frontend/src/views/TransporteLayout.vue

@@ -100,6 +100,8 @@ onMounted(async () => {
   border: 1px solid var(--border-color);
   width: 100%;
   max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
 }
 
 .hub-tab {
@@ -118,6 +120,30 @@ onMounted(async () => {
   justify-content: center;
   gap: 8px;
   text-decoration: none;
+  overflow: hidden;
+  position: relative;
+}
+
+.hub-tab::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition: all 0.5s ease;
+}
+
+.hub-tab:active::after {
+  width: 200%;
+  height: 200%;
+  opacity: 0.1;
+  transform: translate(-50%, -50%) scale(1);
+  transition: 0s;
 }
 
 .hub-tab.active {
@@ -135,9 +161,9 @@ onMounted(async () => {
   width: calc(50% - 6px);
   background: #FEE715;
   border-radius: 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 1;
-  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
+  box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
 }
 
 .fade-enter-active,